2.Styling Page Sections

4.1 Sytling Page Sections

• ID & Class

-ID는 1번 밖에, Class는 여러번 쓸수 있다.

-ID는 #으로 class는 .으로 불러온다.

• <div>

div는 그냥 html tag들을 묶는 역활이라고 할 수 있다. css를 적용 시키기 위해서

• <span>

span은 중간중간의 문구 같은 것을 css적용시키기 위해서 지정하는 것이다.

• CSS context selectors

A B : A안에 있는 B에만 적용

A > B : A바로 안에있는 B에만 적용

**A~B : 같은 부모에 A뒤에오는B A+B : 같은 부모에 A바로 뒤에 오는 B

ex)

complex ex)

4.2 Introduction to Layout

• Box Model

Box Model은 매우 중요하니 뭐가 어떤 것인지 알아야 한다.

• Document Flow

• Borders

Border은 thickness, style, color을 줄 수 있다. 쉽게 말해 모서리를 말하는 것이다.

요렇게 면마다 따로따로 지정해 줄 수 도 있다. 만약 아무 것도 안쓴다면 기본 값으로 정해진다.

• Border-radius

Border-radius는 border과 문장의 사이의 거리를 뜻한다.

• Padding

• Margin

• Dimentions

• *auto margins

• *Top/bottom margin collapse

4.3 Floating Elements

• Float

float도 정렬과 비슷한개념으로 보면되는데 사진옆에 글자를 바로 옆에 붙여쓰거나 할때 쓴다.

• Float vs alignment

• clear

float 속성을 준 것을 없애거나 일부만 조정할수 있습니다.

• container too short    

• overflow

크기가 너무 클 경우 잘라낼지 스크롤 아래로 내릴지 같은 것을 정하는 것이다.

• multi-column layouts

4.4 Sizing and Positioning

• position

절대 위치이다. 기본적으로 어디에 위치할지 정해져있다.

상대위치이다. 보통 많이 쓰이며 상대적 크기이기 때문에 반응형 웹을짤때 꼭 쓴다.

정렬을 쓸때 순서이다. 중요하다. 1번 부터 하고 안되면 계속 내려온다.

• Alignment vs float vs position

*float element와 position absolute의 차이

1.absolute 는 vertical을 줄수있다

2.wrapping이 안된다 relative 하다

• vertical-align

• space under image : bug

• Details about inline boxes

• Display

• Visibility

• Opacity

• HTML5 Layout