본문 바로가기
반응형

분류 전체보기127

Interactive의 시작, transition 속성 1/2 - duration, delay Interactive의 시작, transition 속성 1/2 - duration, delay html을 이용해서는 주로 문서의 레이아웃을 구성한다고 이전 포스팅에서 정리를 해보았습니다. 레이아웃은 주로 static한 형태로서의 웹문서의 구성과 배치를 의미하게 되는데요, 보다 생동감 있은 interactive한 움직임을 표현하려면 반드시 transition 속성이 필요하게 됩니다. transition 속성을 부여하면 html 문서에서는 마치 마법 같은 일이 벌어지기 때문에 많은 사람들이 좋아합니다. 저 또한 역시 그렇습니다. transition을 자유자재로 다룬다는 것은 아주 흥미로운 일이 되기 때문입니다. 이번 포스팅에서는 다채로운 transition의 기본적인 내용들을 함께 살펴보면서, transit.. 2023. 3. 23.
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.
반응형