[생활코딩] WEB2 - CSS (박스모델)

- h1태그 : 화면 전체를 씀 : block level element (그림에서 큰 박스)

- a태그 : 자신의 크기만큼 부피를 씀 : inline element (그림에서 작은 박스)

 

display속성을 쓰면 block level element을 inline element으로, inline element을 block level element로 바꿀 수 있다. 단지 각각의 태그가 기본 값으로 설정되어 있을 뿐이다. 또한 display : none으로 하면 화면에 안보이게 된다. block level이 기본값으로 되어있는 박스모델에 width를 주면 박스를 줄일 수 있다.

 

- padding : 테두리와 글자 간의 간격

- margin : 테두리와 테두리 사이의 간격(elements간의 간격)

- border : 테두리 두께

 

● margin, padding의 다양한 축약표기법

• margin : 0px, 0px, 0px, 10px; (top, right, bottom, left)
• margin : 10px; (네개의 분면이 모두 10px)
• margin : 10px 15px; (top, bottom은 10px, right left는 15px)

 

ㄴ> 중복되는 것들이 너무 많다!

ㄴ> h1, a태그를 묶자!

ㄴ> 그래도 중복되는 항목이 더 있다!

ㄴ> 또 중복을 제거하자! (5px, solid, red를 쓰는 순서는 딱히 없음)

---

박스모델을 써먹을때는 개발자도구를 활용하자!

그러면 어떤 속성을 써야하고, 값을 할당해야하는지 알 수 있다. 예를 들어 어떤 부분의 여백이 너무 많다!

개발자 도구를 사용하면 어떤 태그의 margin이 있어서 그렇구나! 이거를 0으로 주면 여백이 없어지겠구나!함

오른쪽 버튼 클릭 후 검사 버튼 누름 -> element와 styles들어가면 확인 가능.