도라에몽주머니

[CSS3] HTML/CSS 8일차 본문

Study/Web

[CSS3] HTML/CSS 8일차

에몽쓰 2022. 8. 18. 17:20

HTML / CSS

 

✔ Preview

이미지 중앙 정렬, display 속성 정리

✍ Summary

이미지 중앙 정렬

: 이미지를 중앙 정렬하는 방법에는 부모 속성의 text-align을 활용해 정렬하는 법과 display, margin을 사용하는 방법이 있다.

 

  • 이미지의 부모 요소에 text-align 속성을 지정하는 방법

- HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h1><img src="images/img.jpg"><h1> <!-- 이미지의 부모태그로 텍스트 형식의 태그 사용 -->

</body>
</html>

 

- CSS

h1 {
	text-align: center;
}

 

  • display와 margin 속성을 이용해 중앙에 배치하는 방법

- HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<img src="images/img.jpg"> <!-- 이미지 태그만 사용 -->

</body>
</html>

- CSS

img {
	display: block; /* inline에서 block으로 변경 후, */
	margin: auto; /* margin을 자동으로 설정 */
}

 

 

display

: display 속성은 CSS의 중요한 속성 중 하나로, 해당 요소가 웹브라우저에 언제 어떻게 보이는가를 나타낸다. 속성값은 inline, block, inline-block이 있다.

속성값 설명
inline 새로운 라인(line)에서 시작하지 않으며, 해당 요소의 내용(content)만큼의 너비를 차지함
block 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지함
inline-block 설정된 요소 자체는 inline처럼 동작하지만, 요소 내부에서는 block 요소처럼 동작함
(웹사이트의 메뉴나 내비게이션 바를 만들 때 주로 사용됨)
저작자표시 (새창열림)

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

[CSS3] HTML/CSS 10일차  (0) 2022.08.22
[CSS3] HTML/CSS 9일차  (0) 2022.08.19
[CSS3] HTML/CSS 7일차  (0) 2022.08.17
[CSS3] HTML/CSS 6일차  (0) 2022.08.16
[CSS3] HTML/CSS 5일차  (0) 2022.08.12
'Study/Web' Related Articles more