[css] 박스 모델, 중복의 제거, display:inline, block

중복의 제거

border-width:5px;

border-color:red;

border-style:solid;

위 3개의 코드를 한 줄로 줄일 수 있다.

아래처럼

border:5px solid red

순서는 중요하지 않다.

display:block, inline

<h1> 태그는 block level element이다.

한마디로 화면 전체를 사용한다는 뜻이다.

<a href> 태그는 inline element이다.

화면 전체를 사용하지않고, inline 형식으로 사용된다.

하지만 여기서 display 라는 옵션을 사용해주면 <h1> 태그를 inline으로도 변경할 수 있고,

반대로 <a href> 태그를 block으로 변경할 수도 있다.

사용법은

display:block; // inline 의 태그인 <a href> 태그를 display를 사용하여 block 으로 변경하면 전체화면으로 한 칸을 사용한다.

dlisplay:inline // block 의 태그인 <h1> 태그를 display:inline 을 사용하여 inline 으로 변경하면 아래 사진과 같이 변경하면

inline 처럼 사용된다.

margin:20px;

테두리와 테두리 사이의 길이 조절