08 박스 모델

1.

 

 

위와 같이 작성했을 때, 웹 브라우저 에서, 아래와 같이 보여지게 된다.

 

 

보면, CSS는 <h1> 태그에 둘러쌓여 있는데,

<h1> 태그는 화면 전체를 사용 하고 있다.

 

왜그럴까 ?

 

줄바꿈이 되어서 그렇다.

 

그런데, <a> 태그에 둘러쌓여 있는 CSS는 줄바꿈이 되지 않고,

다른 컨텐츠와 함께 같은 라인에 위치 하고 있다.

 

같은 태그 언어인데 왜 이런 차이가 발생할까 ?

 

이유는, 태그의 사용 목적에 따른 이유 이다.

 

사용 목적에 따라서, 각각의 태그들은 기능이 다르게 태어났다.

 

<h1> 태그는 제목 태그중 하나 이다.

 

제목 태그는 화면 전체를 사용하는 것이 더 편리하기 때문에 줄바꿈이 되는 것이다.

 

근데 <a> 태그는 링크 태그 이다.

 

링크 태그가 화면 전체를 사용한다면 어떨까 ?

 

불편하다.

 

링크 앞뒤로 컨텐츠가 줄바꿈이 되면 어색 하지 않을까 싶다.

 

그래서, <a> 태그는 컨텐츠의 크기만큼만 사용 한다.

 

 

 

2.

실제로 얼마나 영역을 사용 하고 있는지를 확인해 보자.

 

 

 

위의 이미지와 같이,

<h1> 태그는 라인 전체를 다 사용 하고 있는 것을 볼 수 있다.

 

<a> 태그는 자기 자신의 컨텐츠 크기만큼의 부피만 사용하고 있는 것도 볼 수 있다.

 

여기서 border은 테두리를 의미 한다.

 

테두리의 두께 : border-width

테두리의 색상 : border-color

테두리의 스타일 : border-style

 

단선 : solid

 

(실선, 점선, .. 등이 있다.)

 

3.

화면 전체를 사용하는 태그 : 블록 레벨 엘리먼트

 

자기 자신의 컨텐츠 크기만큼만 사용하는 태그 : 인라인 엘리먼트

 

용어는 중요하지 않다.

 

어떤 태그는 화면 전체를 사용하고,

어떤 태그는 자기자신의 크기만큼만 사용하는지를

 

구별할줄 알면 된다.

 

4.

근데, 블록 레벨 엘리먼트라 하더라도,

인라인 엘리먼트 처럼 자신의 부피만큼만 사용 하게 할 수 있다.

 

어떻게 할까 ?

 

바로, display 라는 속성을 사용 하면 된다.

 

display : inline;

 

이다.

 

반대로,

 

display : block;

 

을 사용 하면, 블록 레벨 엘리먼트가 된다.

 

5.

 

즉,

블록 레벨 엘리먼트와, 인라인 엘리먼트는 display 속성의 기본값 일 뿐,

 

언제든지 CSS를 통해서 변경 될 수 있다.

 

6.

 

 

위와 같은 코드가 있다고 가정 해 보자.

 

코드의 중복이 발생한다.

 

중복을 없애는 방법을 아래에서 정리하려고 한다.

 

 

바로, 선택자에서 !

, (콤마) 라는 선택자를 통해서, 코드의 양을 획기적으로 줄일 수 있다.

 

하지만, 여전히 중복이 발생 하고 있다. 무엇일까 ?

 

바로, border- 이다.

 

CSS를 만든 사람들은, 코드를 전부 타이핑 하는것이 귀찮아서,

 

중복을 최소한으로 줄일 수 있게 제작 했다.

 

 

순식간에 코드가 엄청 짧아진 것을 확인 할 수 있다.

 

7.

 

예제)

 

 

 

컨텐츠와 (여기서는 CSS) 테두리 사이의 간격 (여백) 을 주고 싶으면

 

padding 값을 주면 된다.

 

 

CSS를 2개 만들어 보자.

 

 

그러면, 위의 이미지와 같이 적용된 모습을 볼 수 있다.

 

이때, 테두리와 테두리 사이에 간격이 발생한 모습을 볼 수 있는데,

바로 margin 값 때문 이다.

 

별도로 현재는, margin을 주지 않았지만, 디폴트로 margin이 적용 되어 있다.

 

만약에, 테두리와 테두리 사이에 간격을 주고 싶지 않다면 ?

 

margin 속성을 선언해서, 값을 부여해 주면 된다.

 

 

 

8.

 

<h1> 태그는 박스 모델상 display : block; 이 생략돼 있다.

 

만약에 <h1> 태그의 width 값을 변경 해주면, 변경 해준 크기만큼,

태그의 크기가 변경 된다.

 

 

9.

 

 

파란색 영역이, Content (컨텐츠) 를 의미 한다.

 

padding : border (테두리) 와 content 사이의 여백 (간격).

 

border : 테두리를 의미 한다.

 

margin : 테두리와 테두리의 여백 (간격).

 

10.

 

 

위와 같은 이미지를,

 

CSS 박스 모델 이라고 부른다.

 

즉, 박스 모델은 HTML 태그 하나하나를 일종의 박스로 취급 해서,

부피감을 결정한다.