4-3. CSS문법 정리

HYUK·2022년 12월 25일

CSS align items display:block display:inline justify content line height padding text align

1. 가운데 정렬

1-1. 가로 가운데 정렬

- text-align : center;

-justify-content : center;

.div {
display : flex;
justify-content : center;
}

display 속성이 flex로 설정되어 있으면 text-align 속성을 지정해도 가운데 정렬이 되지 않습니다.이 때는 위 예제와 같이 justify-content 속성을 설정해 주어야 합니다.

1-2. 세로 가운데 정렬

- padding

.div {
  text-align : center;
  padding : 100px 0;
}

padding : 100px 0; 여기서는 div의 padding을 지정하여 문자열을 div의 가운데(세로)에 오도록 하였습니다. padding 속성에 2개의 값이 입력되었는데, 첫번째 값은 위, 아래의 padding을 설정합니다. 두번째 값은 왼쪽, 오른쪽의 padding을 설정합니다.

- line-height

.div {
  height : 200px;
  text-align : center;
  line-height : 200px;
}

여기서는 line-height의 값을 div의 height 값과 똑같이 지정하여 문자열을 가운데(세로) 정렬하였습니다.

- align-items

.div {
 height : 200px;
 display : flex;
 justify-content : center;
 align-items : center;
}

가로 정렬과 마찬가지로 display 속성이 flex로 지정되면 앞에서 소개한 방법으로는 세로 정렬이 어렵습니다. 따라서, 이 때는 위 예제처럼 align-items 속성을 center로 지정하여 세로 가운데 정렬을 해야합니다.

2. 이미지 가운데 정렬

2-1 text-align

이미지의 부모 요소에 text-align 속성을 추가하는 방법입니다.

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
			div { text-align: center; } // img태그가 아닌 부모요소인 div태그에 적용
		</style>
	</head>
	<body>
		<div>
			<img src="images/200x200.png" alt="">
		</div>
	</body>
</html>

2-2 display: block; margin: 0px auto;

부모 요소를 사용할 수 없고 이미지만 스타일링이 가능하다면, img 요소를 block 요소로 만든 후 margin 속성을 이용해서 가운데에 위치시킵니다.
<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
			img { display: block; margin: 0px auto; }
		</style>
	</head>
	<body>
		<img src="images/200x200.png" alt="">
	</body>
</html>

3. 블락or인라인요소 요소변경

3-1. 블락요소 (block element)

- display:inline

기본적으로 가로폭 전체의 넓이를 가지는 직사각형 형태가 되며 width, height, margin, padding 등을 사용하여 형태를 변형하여 레이아웃을 수정할 수 있습니다. 그리고 블룍 요소 다음에는 줄바꿈이 이루어 집니다.
display:inline CSS명령어로 블록 요소를 인라인 요소의 속성으로 변경 할 수 있습니다.

블락요소의 종류
address, article, aside, audio, blockquote, canvas, dd, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, noscript, ol, output, p, pre, section, table, ul, video

3-2. 인라인요소 (inline element)

- display:block

인라인 요소는 항상 블록 요소안에 포함되어 있으며 인라인 요소안에 다른 인라인 요소가 포함될 수 있습니다. 그리고 기본적으로 컨텐츠가 끝나는 지점까지를 넓이로 가지게 됩니다. 그래서 임의로 width, height로 변형을 줄 수가 없습니다. 인라인 요소는 line-height로 줄의 높낮이를 조절할 수 있고 text-align으로 텍스트의 종앙, 좌,우측 정렬을 할 수 있습니다. 그리고 인라인 요소 다음에는 줄바꿈이 없고 우측으로 바로 이어서 표시가 됩니다.
display:block CSS명령어로 인라인 요소를 블록 요소의 속성으로 변경 할 수 있습니다.

인라인 요소 종류
a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, q, samp, small, script, select, span, strong, sub, sup, textarea, tt, var

HYUK

step by step

다음 포스트