css
-
[ CSS ] 가상 요소(::before, ::after)를 써서 얻을 수 있는 이득은 무엇일까?문득 든 의문점 2023. 3. 10. 06:56
css의 가상요소 ::before, ::after은 실제 컨텐츠의 앞 혹은 뒤에 HTML 마크업 조작없이 컨텐츠를 삽입할 수 있도록 해줍니다. 아이콘, 테두리, 배경을 비롯해 텍스트까지 삽입 가능하며 스타일에 관한 요소를 실제 html 구조에 영향을 미치지 않고 조작할 수 있도록 해줍니다. 또한, 코드의 중복을 줄여주어 특정 효과를 구현하는데 필요한 코드 양을 줄여줄 수 있습니다. 즉, 더 적은 코드로 보다 시각적으로 매력적인 사이트를 만들 수 있게 해줍니다.
-
[HTML & CSS] 드롭다운 메뉴 (Toggle)HTML & CSS/실습 2022. 12. 23. 22:27
이번에는 토글기능을 적용해 아래와 같이 html, css만을 이용해 드롭다운 메뉴를 만들어봤다 See the Pen Dropdown menu (toggle) by OnnJE (@ogtitle) on CodePen. 다시볼때 이해하기 쉽게 만들면서 느꼈던 핵심적인 부분만 정리해 봐야겠다. input & label 위 태그에서 input과 label은 위의 코드와 같이 사용되었다. input은 type을 checkbox로 설정하여 체크(toggle) 여부를 판단할 수 있게 하였고, label은 for 속성으로 위 input의 id를 지정해 바인딩 했다. 따라서 라벨을 클릭해도 input에 체크가 된다. 라벨태그 자체를 css로 조작할 수 있어 이번 드롭다운메뉴는 label을 클릭시 인풋이 체크되고 드롭다운 ..
-
[HTML & CSS] 페이지 body 요소 기본 설정HTML & CSS/이론 2022. 12. 17. 20:25
이번 글에서는 freeCodeCamp의 HTML vs Body: How to Set Width and Height for Full Page Size이란 칼럼의 설명을 정리하고, 해당 글에서 소개된 각 케이스를 직접 확인해보며 어떤 설정이 가장 좋을지 생각해 보려 한다. * { margin: 0; padding: 0; box-sizing: border-box; } 각 케이스를 비교하기 전에 위 코드와 같이 전체 요소의 margin, padding을 0으로 세팅하고 box-sizing 속성을 border-box로 설정하는 것을 추천한다. 이러한 기본 세팅은 각 요소에 대한 추가적인 조작을 줄여준다. 아래 그림은 box-sizing의 속성 값 border-box의 특징을 보여준다. 그림에서 확인할 수 있듯이 ..