Programming 썸네일형 리스트형 [CSS]자주쓰이는position 속성 position 속성은 뜻 그대로 위치를 담당하고 있습니다. position 속성에서 주로 쓰이는 속성값은 absolute 와 relative 가 있습니다. absolute fixed relative static 넓이 최소화 최소화 그대로 유지 그대로 유지 본질 유령화 유령의 집화 겹침혀용 가능 가능 불가능 불가능 이동 top, bottom, left, right 이용 - - 먼저 아래와 같이 HTML과 스타일 시트를 작성했습니다. See the Pen vYNRBMm by 김기태 (@kkt9102) on CodePen. div class="top" 안에 div class="sub$" 란 상자를 만들어 주었습니다. 각각의 sub 박스들이 top 박스 안에 자리잡고 있는 것을 볼 수 있는데 3번박스에 pos.. 더보기 [CSS]float 속성 정의 float 은 display 나 position 과 같이 레이아웃을 잡을 때 자주 쓰이는 속성값이다. 1 2 3 4 5 6 7 8 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officia eveniet ipsam perspiciatis fugiat voluptate eum ipsa consequatur numquam ullam alias. Nihil optio inventore labore! Mollitia repellendus dignissimos impedit perferendis tempora. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga reiciendis similiq.. 더보기 [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 태그.. 더보기 [CSS]display display 속성에는 inline , inline-block , block , none 이 있다 각 속성마다 속성값이 inline inline-block block none width 글자크기를 따라감 지정한 값 지정한 값 보이지 않음 본질 글자화 글자화 블록화 - line 사용 한줄에 여러개 한줄에 여러개 한줄을 혼자씀 - 정렬 방법 부모의 text-align 부모의 text-align margin-left, margin-right 사용 - 먼저 div 5개를 만든 뒤 글을 입력하고 4개의 div 에만 각각 width: 200px; height: 200px; 을 주고 각각 background-color 를 다르게 주었다. 그리고 각 박스마다 display 값을 inline , block , none .. 더보기 [CSS] 자손선택자, 후손선택자 HTML 작성 후 CSS 에서 대상을 선택할 때 두가지 방법이 있는데 바로 '자손선택자' 와 '후손선택자' 가 있다. 자손선택자의 경우 'A > B' 로 쓰이는데 이러는 경우 A 의 자손에 있는 B 를 지칭한다. 후손선택자의 경우 'A B' 로 쓰이는데 이러는 경우 A 의 후손에 있는 B 를 지칭한다. 1 2 3 4 5 6 7 8 sub1 sub2 sub11 sub22 sub33 cs 위의 경우 nav > article , nav > section 이 자손선택자 이며 1 2 nav > article {color: #f00;} nav > section {color: #0f0;} cs 1. nav > article 의 경우 2. nav > section 의 경우 nav div 는 후손선택자가 된다. 1 na.. 더보기 이전 1 ··· 7 8 9 10 다음
