반응형 CSS20 EM 단위란 무엇일까? (ft. EM의 유래, REM과 EM의 차이점) EM 단위란 무엇일까? (ft. EM의 유래, REM과 EM의 차이점) 작년 즈음에 em과 rem의 차이점에 대해서 포스팅한 내용이 있습니다. https://kincoding.com/entry/em%EA%B3%BC-rem%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90 em과 rem의 차이점em과 rem의 차이점 CSS에서는 다양한 단위를 사용하여 요소들의 크기와 위치를 정의합니다. 그 중에서도 em과 rem은 상대적인 단위로, 요소의 크기를 상위 요소에 대한 비율로 정의합니다. 이번 글kincoding.com 개념도 알고 있고, 적당히 잘 사용하고는 있는데 왠지 가끔씩 헷갈리는 이유가 정확하게 이해를 못하고 있기 때문이란 생각을 가져보게 되었습니다. 그래서 이참에 em의 유래까지 뒤져.. 2024. 10. 10. background 다채로운 기능 한 눈에 살펴보기 background 다채로운 기능 한 눈에 살펴보기 CSS를 다루면서, 가장 빈번하게 사용하면서도 활용도가 매우 높은 속성중 하나는 바로 'background' 속성이 아닐까 싶습니다. background 속성은 배경색상을 적용하는 것은 물론, 배경 이미지도 다양하게 적용할 수 있도록 해주면서도 적용할 이미지의 기준점을 세세하게 컨트롤 할 수도 있습니다. 이미지의 크기나 반복해서 적용하는 것 또한 다양하게 조절할 수도 있구요. background 속성은 이와 같이 다양한 특성을 조정할 수 있는 특별한 쓰임과 기능을 가지고 있습니다. 모든 특성을 다 외우고 있을 필요는 없겠지만, 실무에서 주로 사용하고 자주 쓰이는 특성들을 위주로 학습을 해 둔다면 매우 강력한 스킬이 되어줄 것입니다. 예제코드 아래 예제코.. 2023. 4. 5. Hover 버튼을 폼 나게 만들기 (transition + transform 적용) Hover 버튼을 폼 나게 만들기 (transition + transform 적용) 이전 포스팅에서 transition과 transform에 대해서 정리하고 살펴보았습니다. 공부한 건 바로 써먹어 봐야겠죠? 웹 사이트에서 매우 흔하게 볼 수 있는 hover에 반응하는 hover(호버) 버튼을 만들어보려고 합니다. 한국에서는 롤오버 버튼이라고도 많이 불리는 것 같습니다. 실무에서는 대체적으로 hover button 혹은 roll-over button의 경우 적용된 폰트의 색상이나 백그라운드 컬러 정도를 변하게 하는 형태를 주로 사용하게 되는데요, 이번 포스팅에서는 좀 더 과감하게, transition과 transform 속성을 이용하여 만들어보면서 공부해보는 시간을 가져보도록 하겠습니다. 예제코드 아래 예.. 2023. 4. 3. Transform - rotate(), scale(), translate(), skew() Transform - rotate(), scale(), translate(), skew() 이전 포스팅에서 Transition에 대해서 정리를 했습니다. 트랜지션과 더불어 짝궁처럼 따라 다니는 속성이 바로 Transform이 아닐까 싶습니다. 트랜지션이 '변화'에 대한 영역을 제어한다면, 트랜스폼은 '변형'에 대한 영역을 컨트롤 하게 됩니다. 영화 의 변신하는 모습을 상상해보면 Transform 속성을 공부해보면 보다 이해가 쉬울 것입니다. 예제코드 아래와 같은 코드로 시작해보겠습니다. Transform !! Transform !! Transform !! Transform !! Transform !! Transform !! Transform !! Transform !! 브라우저에서 확인을 해보면 다음과 .. 2023. 3. 29. 이전 1 2 3 4 5 다음 반응형
