티스토리 뷰
이번 포스팅에서는 토글 목록을 구성해보도록 하겠습니다.
STEP.1 토글이 무엇이냐?
STEP.2 코딩 시작
이렇게 <div> 태그를 2개 사용한 이유는 테두리를 이쁘게 2겹으로 만들기 위해서 이렇게 사용한 것 입니다.
여기서 <li>태그를 사용했음에도 불구하고 앞에 아무런 모양이 없는 이유는
이렇게 초기화 코드에서 list-style:none 으로 해주었기 때문입니다.
STEP.3 터치할때 목록을 숨겼다 보엿다 하게 만들기
일단 제가 레이아웃 구성을 할때 <!--토글 목록-->을 추가를 못햇어요.... 이걸 추가해주세요
설명 들어가기 전 <body> 태그를 잠깐 볼게요
여기에 보시면 맨 위쪽에
<input id="toggle" type="checkbox"/>
가 있습니다. 이게 무엇인지 다들 궁금해 하셨죠???
그래서 밑에 부분에 보시면
<label class="right" for="toggle" onclick="">Toggle</label>
이부분!! 이부분이 바로 스마트폰에서 터치를 하면 어떠한 반응을 보이는 놈들 입니다.
원래 input 태그의 type이 checkbox인데 <label> 태그에서 for="toggle"로 인해서 input태그에다가 설명을 붙이려고 사용하는 것 입니다.
말로 계속 설명할려니 이해하기 힘든데요 코딩을 통해서 직접 확인을 시켜드리도록 하겠습니다.
현재 이 사진들은 style.css를 적용하기 전 모습입니다.
이러한 내용을 이용해서 터치기능이 사용되는 것 입니다.
이제 이쁘게 style을 입여보도록 할게요
#toggle{display:none;}
<body>태그에 <input>태그의 #toggle가 있었습니다. 이 태그를 화면상에서 안보이도록(display:none) 시켜준 것 입니다.
#toggle + #wrap > #toggle_gnb_wrap{display:none;}
#toggle와 #wrap의 자손인 #toggle_gnb_wrap를 화면 상에서 안보이도록(display:none) 시켜준 것 입니다.
※ [여기서 > 는 자손선택자 입니다.]
#toggle:checked + #wrap > #toggle_gnb_wrap{display:block;}
#toggle가 checked 즉, <input>태그의 checkbox가 체크상태(checked)이면 #toggle와 #wrap 의 자손인 #toggle_gnb_wrap를 화면상에서 block 상태로 보이도록 해준 것 입니다.
그래서 이 상태가 toggle를 누르기 전
toggle 누른 후
STEP.3 버튼의 가로정렬과 테두리 입히기
#toggle_gnb_wrap의 배경(background)을 #363636[색상표에서 확인 바람]
padding(안쪽 여백)을 15px 로 설정을 해준다.
그러면 이렇게 보여져요
#toggle_gnb에 <ul>태그와 <li> 태그가 있습니다.
그래서 배경색을 #FFFFFF으로 안쪽 여백(padding) 을 5px 로 해주면 아래처럼 보입니다.
이제 "버튼" 을 가로정렬로 시켜보도록 하겠습니다.
#toggle_gnb 의 자손인 <ul>태그에서 네모박스 영역에서 내용들이 초과하게되면 그 초과한 내용들은 안보이도록 (overflow:hidden) 해주겠는 뜻 입니다.
그리고 가로 폭 크기(width)는 80px로, 정렬(float)은 왼쪽 정렬 로 하면 아래처럼 보여집니다.
스마트폰 어플 테스트.html
'허접한 프로그래밍 > HTML5+CSS3' 카테고리의 다른 글
| meta 태그에 대한 설명 (0) | 2014.02.01 |
|---|---|
| [스마트폰]스마트폰 레이아웃 구성 #4(네비게이션 구성) (0) | 2014.01.29 |
| [스마트폰]스마트폰 레이아웃 구성 #2(스프라이트 이미지) (0) | 2014.01.27 |
| [스마트폰]스마트폰 레이아웃 구성 #1(초기화 및 헤더 구조 작성) (0) | 2014.01.24 |
| [스마트폰] 스마트폰 웹 개발할때 주의사항 (0) | 2014.01.24 |
