프론트엔드 4일차

#background(요소 색상)

 

color : 글자의 색

background-color : 요소의 배경 색

주의해야함 헷갈리지 않게

 

main.css

box { 

background-color : yellowgreen

}

예제 만들어보기

 

header라는 클래스의 요소는 가로 세로 auto 가 가능하다

header는 width는 화면의 가로만큼 100% 만큼 차지하고 (auto의 의미)

height는 글자 컨테이너 의 시작 0 부터 시작을 한다(auto의 의미)

 

 

HTML - 블록레벨(block level) 요소와 인라인(inline)요소

 

1. 블록요소

    1. div , H1 , P

    2. 사용 가능한 최대 가로 너비를 사용한다

    3. 크기를 지정할 수 있다

    4. (width:100% , height : 0으로시작) 브라우저의 기본은 auto 로하지만 width 가 100% 로 설정되어있다

    5. 수직으로 쌓임

    6. margin padding 위 아래 좌 우 여백을 온전하게 사용 가능하다

    7. 사용용도: 레이아웃을 잡는용도로 사용하면 된다.

2. 인라인요소

    1. SPAN , IMG

    2. 필요한 만큼의 너비를 사용한다.

    3. 크기를 지정할 수 없다.

    4. (width:0 height:0;로 시작) 

    5. 수평으로 쌓임 

    6. margin ,padding 위 아래는 사용을 할 수 없다.

    7. 텍스트를 다룰땐 인라인요소를 다루는게 좋다