728x90
이번에는
가로 가운데 정렬하는 방법을 알아보겠습니다.
우선 사용자가 보기 편하게 배경색을 초록색으로 설정하였습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.hi {
background-color: green;
}
</style>
</head>
<body>
<div class="hi">
<h1>HTML 가운데 정렬하기</h1>
<p>내용 1</p>
<p>내용 2</p>
<button>버튼 1</button>
</div>
</body>
</html>
여기에서 클래스 hi에 있는 모든 항목을 가운데 정렬 하려고 한다.
이때
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
위 4줄의 코드를 사용하면 되는데
<!DOCTYPE html>
<html>
<head>
<style>
.hi {
background-color: green;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="hi">
<h1>HTML 가운데 정렬하기</h1>
<p>내용 1</p>
<p>내용 2</p>
<button>버튼 1</button>
</div>
</body>
</html>
display: flex;
display: flex; 속성은 flex 컨테이너를 생성하고 flex 아이템들을 가로 방향으로 배치하고, 자신이 가진 내용물의 width 만큼만 차지한다.
flex에 관한 자세한 내용은 아래 블로그를 참고하면 더 자세하게 알수있다.
1분코딩 by 스튜디오밀
flex-direction: column;
flex-direction: column; 속성은 flex 컨테이너의 방향성에 대하여 열(column)로 배치를 할것인지, 행(row)으로 배치를 할것인지에 관하여 알려준다.
align-items: center;
align-items: center; 속성은 flex 컨테이너의 아이템들을 정렬하는데 사용하는 속성으로 center 이외에 stretch, flex-start, flex-end, baseline, initial, inherit 등이 있다.
justify-content: center;
justify-content: center;속성은 아이템 사이와 주위에 공간을 분배하는 방법으로 center이외에 flex-start(기본값), space-between, pace-around 등이 있다.
이와 같이 4개의 속성을 함께 사용해주면 div안에 있는 항목을 가운데 정렬 해줄 수 있다.
728x90
'내일배움캠프 > 내일배움캠프 사전캠프' 카테고리의 다른 글
| HTML/CSS <div>에 배경사진 넣기 (0) | 2024.06.26 |
|---|---|
| 내일배움캠프 스타터 노트 작성 (0) | 2024.06.25 |