html2 HTML, CSS로 사이드바 만들기 버튼을 누르면 왼쪽에서 나오고 다시 누르면 왼쪽으로 사라지는 사이드바를 만들어보겠습니다. 기본적으로 javascript혹은 jquery를 이용해 이벤트 처리를 해서 작업하는 경우가 많은데 HTML/CSS만 사용해서 열리고 닫히는 사이드바를 제작해보겠습니다. 디자인은 신경쓰지 않고 작성하는 점 양해바랍니다. 설계 Html/css만 사용해서 열리고 닫히는 기능을 구현하기 위해서는 input태그를 사용해야합니다. 체크박스와 라벨을 연결해놓으면 라벨을 클릭했을 때 체크박스가 선택되는 점을 이용하는 것입니다. 체크박스가 선택되었을 경우 사이드바를 보여주고 숨기는 css코드를 작성해주겠습니다. label버튼 만들기 .side_toggle_btn::before { content: ">"; display: inline.. 2020. 6. 6. Flexbox로 반응형 레이아웃 만들기 Flexbox란? 기존에 컨텐츠들을 수평으로 배치할 때 float 혹은 inline-block 로 마크업할 때의 불편함을 해결하여 쉽게 배치할 수 있도록 CSS3에 추가된 방식입니다. 크게 컨텐츠들을 감싸는 Flex Container 와 각 컨텐츠들인 Flex Item으로 구성되어있어 각 요소에 적절한 속성과 값을 적용해서 원하는 레이아웃을 구성할 수 있습니다. Flexbox 지원 범위 Flexbox는 좋은 기능인 만큼 이전 버전의 브라우저에서 지원을 안해주기도 합니다. 실제 서비스를 개발하기 위해선 이를 잘 알고 써야합니다. IE는 9버전 이하는 지원을 하지 않으며, 10,11에서도 버그가 존재합니다. 모바일 웹에서는 지원을 잘해주고 있습니다. 서비스가 어떤 브라우저까지 지원하는지에 따라 적절하게 사용.. 2020. 6. 6. 이전 1 다음
