Programming/HTML 썸네일형 리스트형 [모작연습] BYN 메뉴바 레이아웃 잡아보기 See the Pen BYN 모작연습 by 김기태 (@kkt9102) on CodePen. 더보기 [예제]top-menu, side-menu, image See the Pen side-menu, top-menu,img by 김기태 (@kkt9102) on CodePen. 더보기 [HTML] 리스트 관련 태그 HTML에서 메뉴를 만들거나 리스트를 만들 때 쓰이는 태그들이 있다. 각 태그들의 속성을 간단하게 정리하면 아래의 표와 같다. ul ol dl 특징 순서가 필요없는 목록 순서가 필요한 목록 용어를 설명하는 목록 항목 태그 li li dd -먼저 ul 태그를 살펴보면 1 2 3 4 5 6 ul 정의 ul 메뉴 ul 메뉴 ul 메뉴 ul 메뉴 ul 태그의 경우 li 태그 앞에 순서를 나타내는게 아닌 모두 동일한 조건의 리스트가 되는 모습을 볼 수 있다. 1 2 3 4 5 6 ol 정의 ol 메뉴 ol 메뉴 ol 메뉴 ol 메뉴 ol 태그의 경우 li태그 앞에 순번을 나타내고 있다. 1 2 3 4 5 6 dl 정의 dl 메뉴 dl 메뉴 dl 메뉴 dl 메뉴 dl 태그의 경우 ul 이나 ol 과 다르게 리스트 .. 더보기 [HTML] Emmet 문법 몇가지 HTML 작성 시 작성 속도를 올려주는 문법이 바로 'Emmet 문법' 이다. 주로 쓰이는 Emmet 문법은 아래의 표와 같다. . > $ + # [ ] { } * 예시 div.sub ul>li {sub $} div+div div#sub a[href="#"] div{sub} div*4 설명 div의class는 sub ul의자식인 li sub 1~ sub 3 div의 형제인 div div의 id는 sub a의 속성은 href="#" div의 텍스 트는 sub div를 4개 만든다 위의 표에 있는 Emmet 문법 외에도 다양한 문법들이 존재한다. Emmet 문법을 쓸 때는 Space ber 를 사용하지 않고 모든 문장을 다 붙여줘야 한다. (공백 금지!) 1 2 3 4 5 6 7 8 9 10 11 12 13.. 더보기 [HTML]HTML에 class 와 id HTML에 쓰이는 태그들은 한정적이다보니 한 페이지에 많은 컨텐츠가 들어가는 경우 태그들이 부족하거나 중복되는 경우가 있어 스타일시트를 적용할 때 속성이 겹치거나 스타일시트 작성 시 적용시킬 태그들을 순차적으로 작성해야하는 번거로움이 생긴다. 이렇듯 한정적인 태그들에게 스타일시트를 적용시키려 할 때 각 태그들에게 class 와 id 를 만들어주면 스타일시트 적용이 편리해진다. 입력방법 CSS 적용방법 차이점 id #id명 하나의 태그가 개별적 스타일을 가짐 class .class명 여러 태그가 종합적 스타일을 가짐 1 2 3 4 5 6 7 8 9 10 11 12 13 14 1 1-1 2-1 2-2 1-2 2-1 2-2 1-3 2-1 2-2 위의 이미지처럼 div 태그가 중복되게 여러게 있거나 div 태그.. 더보기 이전 1 2 3 다음
