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의 특징을 보여준다. 그림에서 확인할 수 있듯이 ..