css3 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. CSS를 이용한 말줄임 처리 방법 말줄임 처리란? 말줄임 처리는 말 그대로 내용의 길이가 길어졌을 때 일정 부분만 보여주고 '...' 과 같은 표시로 뒤에 더 내용이 있다는 것을 표현해주는 처리입니다. 시각적으로 너무 많은 내용을 보여주면 가독성도 떨어지고, 디자인적 통일성을 떨어트리게 되기 때문에 많은 웹서비스에서 필수적으로 사용하고 있는 기능입니다. 일반적으로 말줄임 처리라고 하면 아래와 같이 한줄 말줄임 과 여러줄 말줄임 이렇게 두가지가 있다고 생각합니다. See the Pen ZEQzMqN by 13akstjq (@13akstjq) on CodePen. 하지만 이제는 웹에서 발생하는 수많은 케이스에도 동일한 UI를 제공할 수 있도록 대응 가능한 말줄임 처리가 많이 필요해진 것 같습니다. 1. 고정 사이즈 요소가 좌측에 올 때 많은.. 2020. 6. 2. 이전 1 다음
