본문 바로가기

아카이브/HTML/CSS

css만을 이용하여 보노보노 그리기 며칠전 인터넷을 돌아다니다 CSS만을 이용해서 라이언을 그려논것을봤는데요. 어제 도라에몽(?)을 보다가 문득 보노보노를 그려봐야겠다는 생각이 들어서 급하게 만들어봤습니다. 작업순서는 이렇습니다. 1. 그리고자 하는 이미지 구글링. 2. 이미지를 배경으로 깔아놓는다. 3. 눈, 코, 입등 DIV요소를 만든다. 4. 깔아놓은 배경이미지 위에 CSS를 이용해서 DIV를 디자인을 한다. 5. 재미를 위해서 간단한 애니메이션을 준다. 결과물 드랍 See the Pen BonoBono by jisungyoo (@mainplay) on CodePen. 주로 사용된 CSS설명에 대한 링크 입니다. 1. boder-radius 2, transform 3, transform-origin 4. animation 5. tra.. 더보기
순수 CSS만으로 모달 윈도우(팝업 레이어) 만들기 CSS만으로 팝업 레이어(Modal WIndow)를 만드는 방법입니다. See the Pen Pure CSS, Simple Modal Window by moksunung (@moksunung) on CodePen. 위 예제는 http://codepen.io 에 작성했습니다. 원리 간단설명1. checkbox input 을 하나 만들고 그 바로 뒤에 모달 레이어로 사용할 div를 디자인합니다. 체크박스 input은 사용자에게 보이질 부분이 아니라, 브라우저가 modal 레이어를 선택하는 기능적 역할만 수행할 것이기 때문에 display:none; 등 으로 안보이도록 가립니다. 2. 모달 div는 기본 상태가 보이지 않는 상태로 설정해놓습니다. display:none; 이라든지 visibility: hidd.. 더보기
순수 CSS만으로 리스트/웹진 보기 방식 전환 스위치 만들기 See the Pen Pure CSS, "List/Grid" view mode switch by moksunung (@moksunung) on CodePen. 위 예제는 http://codepen.io 에 작성했습니다. CSS만으로 목록의 뷰타입을 바꾸는 예제입니다. 세부적으로 디자인하면 더 구체적인 부분까지 디테일하게 바꿀 수 있습니다.며칠전에 올린 순수 CSS만으로 아코디언 탭 메뉴 구현하기와 같은 원리로 작동합니다. Input 라디오를 이용해 그 뒤에오는 요소들을 컨트롤 하는 것이죠. 형제 선택자 ~ 를 사용했습니다. 작성하다가 괜히 욕심히 내서 애니메이션 효과 등을 넣느라고 괜히 CSS가 길고 복잡해보이는데, 사실 애니메이션 부분만 제외하면 아주 간단한 코드입니다. CSS에 주석을 달아놨으니 공부.. 더보기
순수 CSS만으로 아코디언 탭 메뉴 구현하기 See the Pen Pure CSS, Horizontal Arccodion by moksunung (@moksunung) on CodePen. 위 예제는 http://codepen.io 에 작성했습니다. 순수 CSS만을 활용하여 아코디언 메뉴(펼침 텝메뉴) 만들기. * 원리 설명 1. 같은 name으로 묶인 radio 타입의 input은 그 인풋들 중 단 하나만 체크되는 원리를 이용합니다. 2. input 이 체크 되었는지 여부를 확인하여 선택할 수 있는 CSS 가상선택자 :checked 를 사용해 어떤 input이 체크 되었는지 확인합니다. 3. 만약 어떤 input에 체크되었다면 동등한 깊이(depth)의 엘리먼트. 즉, 형제격이면서 인접한 엘리먼트를 선택할 수 있는 선택자 + 를 사용하여 형제이면.. 더보기
순수 CSS만으로 오프캔버스 메뉴 만들기 자바스크립트나 Jquery 도움 없이 순수하게 html과 css만을 이용해 오프캔버스 메뉴를 만드는 방법을 소개합니다.이 방법은 지금 현재 코드랩 블로그에서 타블릿 PC와 모바일 해상도에 적용해 사용하고 있는 방법입니다. 아래 결과물과 소스를 한번 먼저 보여드리고 간략히 원리를 설명하겠습니다. See the Pen #offcanvas - pure css by moksunung (@moksunung) on CodePen. 위와 같이 오프캔버스를 구현하는 원리는 다음과 같습니다. 1. 체크박스를 만든 뒤 display:none; 하여 감춥니다. 2. 위 체크박스에 연결되는 label을 만들어 버튼으로 사용합니다. (토글버튼 = 라벨 1번) 3. 마찬가지로 체크박스에 연결되는 또 하나의 label을 posit.. 더보기
transform을 이용한 3d 기법 CSS3의 transform은 웹사이트 UX를 향상시키는데 아주 중요한 역할을 하고 있는데요. 저는 transform2d만을 사용해왔는데 이참에 공부하고자 3d사용법에 대해서 구글링을 좀 하면서 다양한 사용법을 살펴봤는데 역시나 재미있게 표현하는 사람들이 많더라고요. 그래서 저도 몇가지 사이트를 참조하면서 코드를 하나 짜봤습니다. css3 tranform3d 개념 이해하기 http://www.w3schools.com/css/css3_3dtransforms.asp css3 tranform3d 시뮬레이션 할 수 있는 웹사이트 http://css3.bradshawenterprises.com/transforms/ perspective 시뮬레이션 할 수 있는 웹사이트 http://hanbit.co.kr/exam/.. 더보기