08. 박스 모델

 

<h1> 태그가 화면 전체를 쓰고 있음을 알 수 있습니다. 이제 <a태그> 를 한번 달아보겠습니다.

그러나 <a> 태그는 똑같은 태그임에도 줄바꿈 되지 않고 다른 콘텐츠와 같은 라인에 위치합니다.

그것은 <h1> 태그는 제목 태그인데 제목태그는 화면 전체를 쓰는 것이 기본적으로 더 편리하기 때문입니다.

테두리는 영어로 border 입니다.

<style>
h1{
	border-width: 5px;
	border-color: red;
	border-style: solid;
}
a{
	border-width: 5px;
	border-color: red;
	border-style: solid;
}
</style>

 

border에서 테두리의 두께는 border-width 이고 여기서는 5px로 지정하겠습니다. 테두리 스타일, 즉 테두리가 점선인지 실선인지를 지정하는 건데 , 단선인 경우 border-style: solid; 를 지정합니다.

 

 

화면 전체를 쓰는 태그들을 블록 레벨 엘리먼트 , 자기 자신의 콘텐츠 크기만큼 쓰는 태그들을 인라인 엘리먼트라고 합니다. 어떤 태그들이 화면전체를 쓰고 , 어떤 태그는 부분을 쓴다는것을 이해하는 것이 중요합니다. 그리고 블록레벨 엘리먼트라 하더라도 인라인 엘리먼트 처럼 자신의 부피 만큼 쓰게 할 수 있습니다. display속성을 이용

display: inline;

 

즉, 블록 레벨 엘리먼트와 인라인 엘리먼트는 display라는 속성의 기본값일 뿐, 그 기본값은 css를 통해 언제든 바꿀수 있다는 사실을 기억 할 것 .

 

중복이 등장하는데 선택자에서 , 라는 선택자를 통해 코드의 양을 줄일 수 있습니다.

<style>
h1, a{
	border: 5px solid red;
}
</style>
5px solid red 의 순서는 중요하지 않다. 

 

---

이제 글씨와 border 사이의 여백을 주고 싶다면 padding값을 주면 된다.

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

 

 

 

다음과 같이 테두리와 테두리 사이의 간격이 생기는데 , 이 간격은 왜 생기냐면 바로 margin때문입니다.

margin: 0; 이라고 적용하면 아래와 같이 테이블이 딱 붙어있는다.

 

 

---

border 를 기준으로 안쪽은 padding, 바깥쪽은 margin 이다.

 

---

배운 내용 정리

HTML의 태그들은 그 태그의 기본 성격에 따라 화면전체를 쓰기도 하고 자기크기만큼을 쓰기도 합니다.

화면 전체를 쓰는 것을 블록 레벨 엘리먼트, 자기자신의 크기만 갖는 것을 인라인 엘리먼트 라고 합니다.

그리고 콘텐츠의 크기를 지정할 때 폭은 width, 높이는 height로 지정

글씨와 테두리 사이의 간격은 padding

테두리와 테두리 사이의 간격은 margin

 

즉, 박스모델은 HTML 태그 하나하나를 일종의 박스로 취급해서 부피감을 결정하는것이고,

부피감을 결정한다는 것은 디자인에서 핵심적인 요소라는 것을 알 수 있습니다.