[3일차] #8. 박스 모델

3일차

1. CSS 등장 (30분)

- 수업소개

- CSS 등장 이전의 상황

- CSS의 등장

- 혁명적 변화

2. CSS 속성을 스스로 알아내기 (8분)

3. CSS 선택자를 스스로 알아내는 방법 (15분)

4. 박스모델 (16분)

5. 그리드 (10분)

6. 반응형 디자인 (9분)

7. CSS 코드의 재사용 (12분)

8. 수업을 마치며 (15분)

#8. 박스 모델

▲ 링크 걸기 (<a href=""></a>)

▲ 글자 꾸미기

□ 테두리 만들기 : border ⇒ 두께 : width / 색상 : color / 스타일 : style (예:점선,단선)

▲ display 스타일

□ 화면전체 테두리 설정 : Block level element

□ 자신의 크기만큼 테두리 설정 : inline element

CSS 주석처리하기

/*

*/

▲ 코드 단순화하기 (refactoring)

Html

<style>
   h1,a {
      border; 5px solid red;
        }
</style>

▲ padding / margin 설정하기

▲ 테두리 가로길이 설정하기

▲ 박스모델 설정관련 사항

PLAYCE