반응형 반응형 메뉴 만들기3 css로 반응형 메뉴 만들기. 상단에서 내려오는 드롭다운 메뉴. css로 반응형 메뉴 만들기. 상단에서 내려오는 드롭다운 메뉴. 지난 시리즈에 이어지는 반응형 메뉴 만들기 연습입니다. css로 토글 메뉴 만들기(메뉴 열고 닫기) 반응형 메뉴 만들기(select 태그를 이용) css로 반응형 메뉴 만들기 off canvas (left) 오늘은 화면 너비 480px 이하에서, MENU라는 글자와 메뉴 아이콘이 등장하며 (가로 화면 100%) 메뉴 클릭 시 하단으로 펼쳐지는 메뉴를 만들어 보겠습니다. (아래 그림 참조) A 화면 (너비 480px 이상일 때) B 화면(너비 480px 이하일 때) C 화면(너비 480px 이하에서 메뉴 클릭할 때) 이번에도 체크박스를 응용했습니다. 체크박스 기초가 필요하신 분은 아래 링크 참조 css로 토글 메뉴 만들기(메뉴 열고 닫기) h.. 2015. 3. 16. css로 반응형 메뉴 만들기 off canvas (left) css로 반응형 메뉴 만들기 off canvas (left) 지난 시간엔 select 요소로 드롭다운 메뉴를 만들었어요. 반응형 메뉴 만들기(select 태그를 이용) 오늘은 반응형 메뉴 중 off canvas 메뉴를 배워보겠습니다. 캔버스란 화폭을 말하죠. off canvas란 화폭 밖으로 분리된 것이라 보면 되겠습니다. 화면이 축소될 때 메뉴 아이콘이 등장히고, 아이콘을 클릭하면 메뉴바가 나타나며 본문을 밀어내는 형식입니다. 아래 이미지를 보고 A화면→B화면→C화면 순으로 코드 작성을 해 보세요 A 화면 B 화면 C 화면 전체 html ≡ /*메뉴 아이콘*/ /*체크박스*/ /*메뉴*/ Home Guest Notice 본문 /*본문*/ 접이식 메뉴를 만들 때 label와 체크박스를 이용하는 법을 배웠.. 2015. 2. 13. 반응형 메뉴 만들기(select 태그를 이용) 반응형 메뉴 만들기(select 태그를 이용) 어제는 체크박스와 :checked 선택자를 이용하여 토글 메뉴 만드는 법을 배웠습니다. 오늘은 select 요소를 이용하여, 반응형 메뉴를 만들어 보겠습니다. select 요소는 드롭다운 목록 만들 때 사용하며, 각 선택 항목은 option을 사용합니다. [html] select 태그 [html] option 태그 ▶전체 html Home Guest Notice Home Guest Notice 본문 우선 메뉴 목록을 만드는 것은 지난 시간에 배운 것과 동일합니다. 그리고, 화면 너비가 25em 이하에서는 드롭다운 목록이 나올 수 있도록 select를 이용하여 새로운 목록을 구성합니다. Home Guest Notice onchange="if (this.valu.. 2015. 2. 12. 이전 1 다음 반응형
