[CSS] 상자(box)

728x90

1. 상자(box)

1-1. width, height : px, %, em 등으로 수치를 표기

1-2. margin(바깥 여백), border(테두리), padding(안쪽 여백)

1-3. margin 병합

- 세로 방향 마진을 지정한 두 개의 서로 다른 요소가 수직 방향으로 접해있을 때 두 요소 사이의 margin 간격은 큰 쪽으로 병합

1-4. margin을 이용한 중앙 정렬

- 박스의 좌우 속성값을 auto로 지정해서 중앙에 위치.

(정렬하려는 박스의 width를 반드시 지정)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>box</title>

<style type="text/css">

	dl, dd, dt, p{
		margin: 0;
		padding: 0;
	}
	.box{
		width: 600px;
		border: 3px #123456 double;
	}
	dt{
		background: #abcdef;
		text-align: center;
		font-size: 20px;
		letter-spacing: 15px;
		padding: 25px;
		border-bottom: #123456 5px double;
	}
	dd{
		padding: 10px;
	}
	.line{
		border-bottom: #123456 1px dotted;
	}
	
</style>

</head>
<body>

	<dl class="box">
		<dt>드래곤 라자 명언</dt>
		<dd class="line">
			<h2>샌슨 네드발</h2>
			<p>저와 말이 함께 후치를 타면 됩니다.</p>
		</dd>
		<dd>
			<h2>핸드레이크</h2>
			<p>나는 단수가 아니다.</p>
		</dd>
	</dl>

</body>
</html>

728x90

'Web > CSS' 카테고리의 다른 글

[CSS] border, background, text (0)	2021.12.14
[CSS] 레이아웃(layout) - float, clear, display, overflow, position (0)	2021.12.13
[CSS] 배경(background) (0)	2021.12.11
[CSS] 단락(paragraph) (0)	2021.12.10
[CSS] 폰트(font) (0)	2021.12.09

'Web > CSS' 카테고리의 다른 글

티스토리툴바