[CSS3] HTML/CSS 7일차

HTML / CSS

✔ Preview

박스 모델 연습 및 용어 정리

---

✍ Summary

용어 정리

출처: https://www.wikidata.org/wiki/Q895501

• Border

: 영역의 테두리를 의미

* solid, dotted, dashed, double 등 다양한 속성 설정 가능

• Content

: 영역의 내용을 의미

• Padding

: Border(테두리) 를 기준으로 border와 content 사이의 여백을 의미 (내부여백)

* 위, 오른쪽, 아래, 왼쪽 방향으로 진행

• Margin

: Border(테두리) 를 기준으로 바깥쪽의 여백을 의미 (외부여백)

* 위, 오른쪽, 아래, 왼쪽 방향으로 진행

h1 {
	margin: 10px 20px 30px 40px; /* 위, 오른쪽, 아래, 왼쪽 방향으로 진행 */
	padding: 30px;
	border: 1px solid blue;
	border-left-width: 15px;
}

 

이미지 가운데 배치

: 이미지의 경우, text가 아니기 때문에 img 태그의 text-align 속성으로는 중앙 배치를 할 수 없다. 이미지를 중앙 배치하기 위해서는 이미지의 display 속성을 block으로 정의해 준 후, margin을 auto로 설정하면 된다.

이미지는 기본적으로 display 속성이 inline으로 되어있어서 이를 수정해야 margin이 자동으로 할당된다.

* inline일 때는 margin이 없기 때문

img {
	display: block; /* inline에서 block으로 변경 */
	margin: auto; /* 바깥쪽 여백 자동으로 설정 */
}