오늘은 스스와타리(Susuwatari)를 화면 한가운데 정렬해 보려고 합니다. '그을음 요정(soot)'이라고도 불리는 이 귀여운 생물들은 활발하게 돌아다니는 것을 좋아하기 때문에, 사진을 찍으려면 가만히 두고 정중앙에 배치해야 합니다. 그럼 바로 시작해 볼까요!
참고: 글을 읽으면서 블로그 저장소(repo)를 함께 열어두고 따라오시면 더욱 도움이 됩니다.
HTML에 이미지 추가하기
이미지를 가운데 정렬해야 하는 상황은 웹 개발에서 매우 흔합니다. 예를 들어 스스와타리 이미지가 있다고 하고, 일반적인 <img> 태그로 페이지에 추가해 보겠습니다.
<img class="soot" src="soot.jpg" alt="soot!">
주의할 점: img 태그는 자식 노드를 가질 수 없기 때문에 닫는 태그를 쓰지 않습니다. 브라우저가 </img>처럼 닫는 태그가 있어도 오류를 내지 않을 수 있지만, 해당 요소에 적용한 CSS가 의도대로 동작하지 않을 수 있습니다. 따라서 위의 표준 작성 방식을 그대로 따르는 것이 좋습니다.
CSS를 전혀 적용하지 않은 상태에서 이미지를 추가하면 페이지에서 다음과 같이 보입니다.
이미지가 왼쪽에 딱 붙어 있는 이유는, 이미지가 페이지의 기본 문서 흐름(normal flow)을 따라 배치되기 때문입니다. 제목과 마찬가지로 왼쪽 정렬된 것이죠.
정렬 방법 1: margin: 0 auto
가장 간단한 방법은 img 선택자에 다음 스타일을 적용하는 것입니다.
img.soot {
margin: 0 auto;
display: block;
}
여기서 클래스 이름을 선택자에 함께 명시한 이유는 선택자의 구체성(specificity)을 높이기 위해서입니다. 나중에 스스와타리 이미지를 더 추가하더라도 모든 이미지가 일관되게 가운데 정렬되도록 보장할 수 있습니다.
페이지를 확인해 보면, 이미지가 확실히 화면 한가운데 정렬된 것을 볼 수 있습니다!
그럼 여기서 무슨 일이 일어난 걸까요?
- margin 속성: 값은 최대 네 개를 받을 수 있으며, 앞의 두 값은 위·아래 여백, 뒤의 두 값은 왼쪽·오른쪽 여백을 의미합니다. 여기서는 좌우 여백을 브라우저가 자동으로 계산하도록 했는데, 브라우저는 양쪽 여백을 동일하게 맞추기 때문에 결과적으로 이미지가 정중앙에 위치하게 됩니다.
- display 속성: 다양한 값을 가질 수 있는데, 여기서는 'block'을 지정했습니다. block 값은 img 요소가 전체 폭을 차지하고 혼자 한 줄을 사용하도록 만듭니다. 덕분에 margin이 이미지 전체 폭을 기준으로 적용되어 가운데 정렬이 가능해집니다.
정렬 방법 2: text-align: center
또 다른 방법은 이미지를 부모 요소(예: div) 안에 넣고, 부모에 text-align을 적용하는 것입니다. 부모 요소(흔히 컨테이너라고 부릅니다)에 아래 스타일을 추가하세요.
.container {
text-align: center;
}
div는 본질적으로 블록 컨테이너이기 때문에 전체 폭을 차지하며, 그 안의 자식 요소들이 가운데 정렬됩니다. 우리의 스스와타리 이미지도 마찬가지로 정중앙에 배치되는 거죠!
마무리
스스와타리라는 발음이 꽤 혀를 깨물게 하는 단어라면(여러 번 연속해서 말한다고 상상해 보세요), 이미지 가운데 정렬은 생각보다 훨씬 쉽다는 사실이 위안입니다. 오늘 소개한 두 가지 방법, 즉 margin: 0 auto와 display: block의 조합, 그리고 부모 요소에 text-align: center를 적용하는 방식만 기억하면 어떤 이미지든 손쉽게 정중앙에 배치할 수 있습니다.