반응형 Web_Front9 CSS에서 background 이미지를 비율을 유지한채 사이즈만 줄여보자 안녕하세요, 오늘은 CSS에서 background 이미지를 비율을 유지한채 사이즈만 줄여보도록 하겠습니다. background: url('image.jpg') no-repeat center center / 50px 50px / content-box border-box;위의 구문을 해석 할 수 있다면 굳이 해당 포스팅을 안보셔도 됩니다. 그렇지 않다면 같이 자세히 알아봅시다. CSS의 background 속성에서 '/'를 추가하여 아래와 같은 양식으로 배경 이미지의 위치, 크기, 배경 영역에 채우는 방식을 조절할 수 있습니다. background: / / ; 예시를 들어 값을 적용시켜보겠습니다. background: url('image.jpg') no-repeat center center / 50.. 2024. 11. 14. querySelector()와 getelementbyid()에 대하여 알아보자. 오늘은 JavaScript에서 DOM(Document Object Model) 요소를 선택하는 두 가지 주요 방법인 querySelector와 getElementById에 대하여 알아보겠습니다. 1. querySelector() querySelector는 CSS 선택자를 사용하여 문서 내에서 첫 번째로 일치하는 요소를 반환합니다. 위의 예시에서 querySelector('.example')는 class가 "example"인 첫 번째 div 요소를 선택합니다. 추가적으로 querySelector에서 id는 #, class는 .으로 표현하며, 안으로 들어가는 표현은 공백으로 합니다. 위와 같이 id="" 값은 "#id이름"으로 읽어낼 수 있으며 class ="" 값은 ".class이름"으로 읽을 수 있습니다.. 2024. 3. 21. IFrame이란? 1. iFrame이란? - iframe은 HTML 문서 내에서 다른 HTML 문서를 삽입하고 표시하는 데 사용되는 요소입니다. 주요 목적은 웹 페이지 내에 외부 콘텐츠를 표시하거나 다른 문서를 삽입하여 웹 페이지의 일부를 동적으로 로드하는 것입니다. iframe은 "Inline Frame"의 약자로, 다른 웹 페이지를 현재 페이지에 포함시켜주는 기능을 합니다. 이를 통해 웹 페이지는 여러 웹 서비스나 콘텐츠를 통합하여 하나의 페이지에서 다양한 정보를 제공할 수 있습니다. 2. iFrame 사용 예시 - 1. 외부 콘텐츠 삽입: 다른 웹 사이트의 콘텐츠를 현재 페이지에 삽입하여 표시할 수 있습니다. 예를 들어, 다른 웹 사이트의 지도, 동영상 플레이어, 소셜 미디어 위젯 등을 현재 페이지에 삽입할 수 있습.. 2024. 3. 20. HTML에서 이미지에 흑백 처리 하기 css에서 filter에 grayscale(?%)을 적용해주면 %에 따라서 흑백처리가 가능하다. .myImg { filter: grayscale(100%);} 추가로 이미지에 border-radius와 width/height를 주어서 이미지의 사이즈 및 테두리를 둥글게 적용하는 방법이다. 2023. 11. 22. HTML에서 공백 넣기 Html에서 글 사이에 줄 바꿈 넣기 - Html에서 글 사이에 공백 한칸 넣기 - Html에서 글 사이에 공백 네칸 넣기 - 2023. 11. 22. 타임리프 기본 문법 타임리프 기본 ----- 1. 데이터 출력하기 - 컨텐츠에 데이터 출력하기 - th:text, th:utext 2. SpringEL 표현식 - Object, List, Map에서 각각 데이터 끄내는법 - 지역 변수 -> th:with 3. 식 기본 객체 (Expression Basic Objects)와 편의객체 4. 유틸리티 객체와 날짜 5. 리터럴 - th:text="|hello ${data}|" -> 파이프라인 사용법 등.. 6. 연산 - th:text="${data}?: '데이터가 없습니다.'" -> ?를 이용하여 nullpointException 처리. - th:text="${data}?: _" -> _ 이용하여 아무것도 안함 처리 7. 속성값처리 - th:attrappend, th:attrpre.. 2023. 11. 15. 이전 1 2 다음 반응형
