🔍 CSS 들어가기 전
프론트엔드를 지속적으로 쭉 공부해오지는 않았지만,
프로젝트를 할 때마다 프론트엔드 언어들을 다뤄왔다.
HTML에대해 잘 알면, 여러 방면에서 도움이 정말 많이 된다.
ex) 크롤링, 백엔드 서버 구축 등등
각설하고, CSS를 꾸미다 보면,
항상 이 정렬이 헷갈리는데 이번에 한번 정리해보자 !
📚 중앙 정렬 기본
중앙 정렬을 할 때, 자주 쓰이는 것들이다.
- text-align : center
: 부모 요소 내의 텍스트와 인라인 요소를 중앙에 정렬
- margin : auto
: 요소의 수평 중앙 정렬에 사용하지만, 수직 정렬 지원하지 않음
(부모 요소의 남은 공간을 균등하게 분배하여 중앙 배치하므로, 부모 요소의 width가 적절하게 있어야 함)
- justify-content: center
: Flexbox 컨테이너에서 주 축(수평) 기준으로 요소 중앙 배치
- align-items: center
: Flexbox 컨테이너에서 교차 축(수직) 기준으로 요소 중앙 배치
📕기본값
<style>
.box1 {
width: 300px;
height: 300px;
background-color: darkblue;
}
.box2 {
width: 140px;
height: 140px;
background-color: darkred;
color: white;
}
</style>
<body>
<div class="box1">
<div class="box2">
가운데 정렬
</div>
</div>
</body>📕 글자 중앙 정렬
<style>
.box1 {
width: 300px;
height: 300px;
background-color: darkblue;
/* 글자 가운데 맞춤 */
text-align: center;
}
.box2 {
width: 140px;
height: 140px;
background-color: darkred;
color: white;
}
</style>
<body>
<div class="box1">
<div class="box2">
가운데 정렬
</div>
</div>
</body>요소 안에 글자를 가운데 맞추는 것은 "text-align"으로 간단하게 가능하다.
📕 글자 중앙 정렬 + 빨간 상자 수평 중앙 정렬
<style>
.box1 {
width: 300px;
height: 300px;
background-color: darkblue;
/* 글자 가운데 맞춤 */
text-align: center;
}
.box2 {
width: 140px;
height: 140px;
background-color: darkred;
color: white;
/* 빨간 상자 수평 가운데 정렬 */
margin: auto;
}
</style>
<body>
<div class="box1">
<div class="box2">
가운데 정렬
</div>
</div>
</body>부모 요소의 너비가 300px이고, 빨간 박스 같은 경우 140px 크기를 가진다.
따라서 남은 160의 요소의 공간을 빨간 박스가 균등하게 분배한다.
📕 빨간 상자 수평, 수직 중앙 정렬
<style>
.box1 {
width: 300px;
height: 300px;
background-color: darkblue;
/* 글자 가운데 맞춤 */
text-align: center;
/* 수평,수직 가운데 맞춤 */
display: flex;
justify-content: center;
align-items: center;
}
.box2 {
width: 140px;
height: 140px;
background-color: darkred;
color: white;
/* 빨간 상자 수평 가운데 정렬 */
/* margin: auto; */
}
</style>
<body>
<div class="box1">
<div class="box2">
가운데 정렬
</div>
</div>
</body>파란 상자에서 빨간색을 정중앙(수평,수직) 위치하게 만들려면,
부모(파란 상자)에서 display :flex가 기본으로 설정되어 있어야,
justify-content와 align-items를 적용시킬 수 있다.
📕 빨간 상자 내용 중앙 정렬
<style>
.box1 {
width: 300px;
height: 300px;
background-color: darkblue;
/* 글자 가운데 맞춤 */
text-align: center;
}
.box2 {
width: 140px;
height: 140px;
background-color: darkred;
color: white;
/* 빨간 상자 수평 가운데 정렬 */
margin: auto;
/* 빨간 상자 내용 수평 수직 가운데 정렬 */
display: flex;
justify-content: center;
align-items: center;
}
</style>
<body>
<div class="box1">
<div class="box2">
가운데 정렬
</div>
</div>
</body>이번에는 빨간 상자 내부의 글자를 중앙 정렬 시켰다.
정중앙(수평,수직) 방향으로 중앙에 위치시키려면,
앞서 했던거와 같이 display:flex로 Flexbox로 만들고,
justify-content와 align-items를 적용시키면 된다. (이런 경우 text-align 필요 없음)
📕 빨간 상자 수평, 수직 중앙 정렬 + 빨간 상자 내용 중앙 정렬
<style>
.box1 {
width: 300px;
height: 300px;
background-color: darkblue;
/* 글자 가운데 맞춤 */
/* text-align: center; */
/* 빨간 상자 수평 수직 가운데 정렬 */
display: flex;
justify-content: center;
align-items: center;
}
.box2 {
width: 140px;
height: 140px;
background-color: darkred;
color: white;
/* 빨간 상자 수평 가운데 정렬 */
/* margin: auto; */
/* 빨간 상자 내용 수평 수직 가운데 정렬 */
display: flex;
justify-content: center;
align-items: center;
}
</style>
<body>
<div class="box1">
<div class="box2">
가운데 정렬
</div>
</div>
</body>이번에는 들어가 있는 모든 요소를 정중앙(수평,수직) 정렬 시켰다.
1. 부요(파란)요소에 자식(빨강)을 중앙
-> 부모(파란)요소에 display를 flex 상태로 만들고 justify-content, align-items 적용
2. 빨강 상자에서 내부 글자를 중앙
-> 빨강 요소에 display를 flex 상태로 만들고 justify-content, align-items 적용
'WEB > frontend' 카테고리의 다른 글
| [JS] AJAX(Asynchronous Javascript And XML) 는 무엇일까 ? (0) | 2024.07.05 |
|---|---|
| [JS] HTML 드롭다운(dropdown) 2개 연결 (0) | 2024.05.21 |