본문 바로가기
반응형

분류 전체보기142

Position 속성 정리(static, relative, absolute, fixed, sticky 비교) Position 속성 정리(static, relative, absolute, fixed, sticky 비교) HTML과 CSS를 학습하다 보면, 결국 document의 레이아웃을 잡는 문제로 귀결되는 경우가 많습니다. 레이아웃을 구성하는 단계에서 가장 기본적으로 맞딱뜨리게 되는게 position 속성이 될텐데요, 이번 포스팅에서는 원하는 엘리먼트를 레이아웃에 적절하게 배치하기 위한 position의 기본 적인 속성에 대해서 정리해보기로 합니다. 예제 코드 position 속성 Static Live Server를 실행해보면, 아래와 같은 형태에서 position에 대한 속성들을 살펴보기로 합니다. position : static css에 아래의 코드를 추가해봅시다. #static #middle { posi.. 2023. 3. 21.
웹사이트에 파비콘(Favicon) 적용하기 웹사이트에 파비콘(Favicon) 적용하기 얼마 전 작업을 진행하고 오픈한 웹사이트에 Favicon이 적용되어 있지 않은 것을 발견했습니다. 파비콘은 Favorite + icon의 줄임말입니다. 파비콘을 적용해주면 브라우저 탭에 아이콘 형태로 표시되어 웹사이트의 아이덴티티를 사용자에게 어필하는 데 효과적일 수 있습니다. 또한 즐겨찾기 시에도 활용이되고 다양한 모바일 기기 환경에서도 필요한 항목이 되었습니다. 그리고 무엇보다도 SEO를 완성하는데 있어서도 매우 권장되는 항목이 되었습니다. 깜빡하고 있었는데, 이참에 파비콘 적용을 한번 진행 해봐야겠습니다. 심벌 이미지 파일 준비 파비콘으로 적용하기 위해 svg. png, gif, jpg 등의 포맷으로 이미지를 준비해줍니다. CI의 심볼을 이용하여png 파일.. 2023. 3. 1.
em과 rem의 차이점 em과 rem의 차이점 CSS에서는 다양한 단위를 사용하여 요소들의 크기와 위치를 정의합니다. 그 중에서도 em과 rem은 상대적인 단위로, 요소의 크기를 상위 요소에 대한 비율로 정의합니다. 이번 글에서는 em과 rem의 차이점에 대해 살펴보고, 어떤 경우에 어떤 단위를 사용하는 것이 적합한지 알아보겠습니다. em em은 현재 요소의 글꼴 크기에 대한 상대적인 크기를 정의하는 단위입니다. 이는 부모 요소의 글꼴 크기를 기준으로, 현재 요소의 크기를 설정하며, 부모 요소가 바뀌면 자식 요소의 크기도 변경됩니다. .parent { font-size: 16px; } .child { font-size: 1.5em; /* 부모 요소의 글꼴 크기의 1.5배 */ } 위의 코드에서, .parent 요소의 글꼴 크기.. 2023. 2. 28.
sort() 활용 - 문자, 숫자 오름차순 정렬 그리고 내림차순 정렬 원리 sort() 활용 - 문자, 숫자 오름차순 정렬 그리고 내림차순 정렬 원리 이전까지 몇번의 포스팅에서 자바스크립트의 배열을 반복적으로 다루며 정리를 해보았습니다. 그만큼 배열에 대해 이해하고 잘 다루는 게 중요하기 때문입니다. 이번 포스팅에서 딱 한놈만 패는 기분으로, sort() 메서드를 가지고 약간 심도 있게 다뤄보고 정리를 해봅시다. 연습문제를 푸는 마음으로 살펴 두면 도움이 될 것입니다. sort() 메서드 활용 - 1. 문자의 오름차순 정렬 아래 주어진 배열를 가나순으로 정렬해보세요. const str = ["B", "D", "A", "C"]; 이건 이제 너무 쉽게 느껴지죠? sort() 메서드만 갖다 붙여보면 되니까요. 당장 풀어버립시다! const str = ["B", "D", "A", "C.. 2023. 2. 27.
반응형

티스토리툴바