[CSS]2.박스모델

@@@@@유튜브 생활코딩으로 학습한걸 메모하는 용도인 점 참조 부탁드립니다@@@

 

@@@@@@@8강~9강@@@@@ 박스모델

[1]박스모델

1. 태그 영역 구분 (전체영역 vs 내영역)

(1) block level element(태그)

- 전체 블록을 사용하는 태그

(2) inline element

- 자기 자신의 부피만큼 사용하는 태그

예시)h1태그는 블록라벨,  a태그는 인라인

 

 

(3) display

-블록레벨이지만 인라인으로 변경해 사용하는 방법

 

 

 

Cf)display:none; 으로 코딩하면 해당 태그 자체가 사라짐

>>>위에

Border-width:5px;  border-color:red; border-style:solid;이거를 간단하게

Border:5px solid red;  이렇게 사용도 가능

 

 

2. 박스모델 기본

(1)padding

- 콘텐츠와 테두리 사이

(2)margin

- 테두리와 테두리사이

 

 

 

 

[2]박스모델 활용