box model: border, block, display:none, padding, margin, width

 

 

 

<h1> 태그는 줄 바꿈이 되지만 <a> 태그는 줄 바꿈이 되지 않는 이유

: <h1> 태그는 제목 태그이고, 이는 화면 전체를 쓰는 것이 더 편리하기 때문이다.

링크 앞뒤에 있는 콘텐츠가 줄 바꿈이 된다면 상당히 불편하므로

링크는 줄 바꿈을 하지 않고 자기의 콘텐츠 크기만큼을 사용한다.

 

웹페이지에 있는 모든 <h1>에 대해서 테두리를 만들기: border

 

 

 

border-width: 테두리의 두께

border-color: 테두리의 색상

border-style: 테두리의 생김새(단선인지, 점선인지 등)

 

화면 전체를 쓰는 <h1>과 자기의 콘텐츠 크기만큼의 부피를 쓰는 <a>의 모습이다.

<h1>인 윗 칸과 <a>인 아래칸 박스 크기의 차이로 확인해볼 수 있다.

 

 

"block": 화면 전체를 쓰는 태그

 

한 영역을 차지하는 박스 형태를 가지는 성질.

때문에 width 값은 100%가 되고 라인이 새롭게 추가된다.

height, width, margin, padding을 지정할 수 있다.

 

* element = tag

​

block level element: 화면 전체를 쓰는 태그

inline element: 자기 콘텐츠만큼을 쓰는 태그

​

block level elment와 inline element는 디스플레이라는 속성의 기본값일 뿐

기본값은 CSS를 통해 언제든지 바꿀 수 있다.

​

 

display:none;

해당하는 태그를 보이지 않게 하려고 함

 

중복을 없애고자 할 때 위와 같이 수정한다.

중복의 최소화.

 

padding:

안쪽의 여백을 말한다.

.

 

 

margin:

두 컨텐츠 사이의 '간격'을 조절함.

바깥쪽의 여백을 말한다.

컨텐츠의 넓이 안에 속하지 않는다.

width: 폭

 

 

 

 

 

CSS의 박스 모델

 

 

마우스 우클릭 - 검사를 누르면 위와 같은 화면이 뜬다.