Programming/CSS 썸네일형 리스트형 [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.. 더보기 [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 2 다음
