4. display 속성 & border 속성

블록 레벨 요소 vs 인라인 요소

블록 레벨 요소 : 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다.
(ex. div, p, h1 등)

인라인 요소 :
자기에게 필요한 만큼의 공간만 차지한다.

display 속성

display속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지 정의한다.

블록 레벨 요소인 div 요소를 인라인으로 처리하고 싶을 때

div{ 
	display: inline;
}

인라인 요소인 a 요소를 블록 레벨로 처리하고 싶을 떄

a{
	display: block;
}

border 속성

border 속성을 사용하면 요소가 차지하고 있는 영역에 테두리를 그릴 수 있다.
border 속성에는 속성값으로 테두리의 두께, 모양, 크기 등을 함께 지정할 수 있는데, 이러한 속성을 '단축속성'이라 한다.

span {
border: 2px solid greed;
}

=> 두께가 2px인 직선 모양 (solid)의 초록 테두리를 만들어줘

border 속성의 하위 속성

border 속성에 지정하는 값들을 따로 따로 지정할 수도 있다.
각 속성은 다음과 같다.

인라인 요소는 높이와 너비를 임의로 지정할 수 없다.
하지만 블록은 높이와 너비를 임의로 지정 가능 하다.