Horizontal Alignment Techniques in HTML CSS Web Design

웹 디자인은 가로 정렬에 크게 의존하며, 최신 브라우저용 플렉스 레이아웃과 호환성을 위한 플로트를 활용합니다.

### 웹 디자인의 기초: 수평 정렬의 중요성과 방법
* 🎨 이번 강의에서는 웹 디자인에서 가장 중요한 요소 중 하나인 **수평 정렬**에 대해 알아봅니다.
* 💻 수평 정렬 방법은 크게 **플렉스 레이아웃과 플로트를 사용하는 두 가지**로 나뉘며, **플렉스 레이아웃은 최신 웹 브라우저에서만 지원**됩니다.
* 📊 특히 한국에서는 **인터넷 익스플로러 사용 비율이 10% 이상**이기 때문에 두 가지 방법을 모두 익히는 것이 중요합니다.
* 📝 강의에서는 별도의 웹 페이지를 만들어 **수평 정렬을 적용하는 방법**을 단계별로 설명하고, **div 태그를 활용하여 마크업**을 구성합니다.
* ⚙ ️ 플렉스 레이아웃을 사용하여 부모 요소에 디스플레이 속성으로 플렉스를 적용하면 **요소들이 수평으로 정렬**되는 모습을 확인할 수 있습니다.
* 🔧 또한, 저스티파이 콘텐츠 속성을 사용하여 **요소의 정렬 위치를 조정**할 수 있으며, 다양한 옵션을 통해 원하는 배치를 설정할 수 있습니다.
* 📚 다음 강의에서는 **HTML 페이지 초기화와 배경 이미지 추가 방법**을 포함하여 **수평 정렬의 활용**을 더욱 심화할 예정입니다.
* ✅ 수평 정렬은 웹 디자인에서 매우 자주 사용되므로, **코드를 확실히 숙지**하고 활용하는 것이 중요합니다.

러닝스쿨 한 권으로 끝내는 HTML + CSS 웹 디자인 입문 5강 - 수평 정렬

윤인성

웹 디자인 요소의 수평 정렬 방법 소개

HTML, CSS 웹 디자인 입문 5강에서는 웹 디자인에서 중요한 요소의 수평 정렬 방법을 설명한다.

요소 수평 정렬 방법은 플렉스 레이아웃과 플로트 두 가지로 나뉜다.

플렉스 레이아웃은 유연하지만 최신 브라우저에서만 지원된다는 단점이 있다.

국내 환경을 고려하여 두 가지 방법 모두 숙지해야 대부분의 브라우저에서 지원되는 웹페이지를 만들 수 있다.

새로운 웹페이지를 만들어 수평 정렬을 적용하고 기존 페이지에 적용하는 방식으로 진행한다.

플렉스 레이아웃을 사용한 수평 정렬 실습

div 태그를 이용하여 마크업을 구성하고, 클래스를 부여하여 스타일 적용을 쉽게 한다.

부모 요소의 `display` 속성에 `flex`를 적용하여 요소들을 수평으로 정렬한다.

`justify-content` 속성을 사용하여 요소들의 배치를 조절할 수 있다 (center, flex-end, space-between).

인덱스 페이지의 이미지와 글자들을 수평 정렬하기 위해 플렉스 레이아웃을 적용한다.

이미지의 너비를 지정하고, `justify-content: space-between`을 사용하여 이미지와 리스트를 양쪽 끝에 배치한다.

플렉스 레이아웃을 이용한 추가 스타일 적용 및 네비게이션 수평 정렬

ul 태그에 `display: flex`를 적용하여 네비게이션을 수평 정렬한다.

폰트 크기, 텍스트 변환, 마진, 리스트 스타일 등을 추가로 지정하여 네비게이션을 꾸민다.

마우스 호버 시 색상 변경을 적용한다.

플로트를 사용한 수평 정렬 방법

플렉스 레이아웃은 최신 브라우저에서만 지원되므로 구버전 브라우저 지원을 위해 플로트 속성을 사용하는 방법을 설명한다.

수평 정렬하고 싶은 요소에 `float: left` 또는 `float: right`를 적용한다.

플로트는 전체 균일한 너비 배치나 중앙 배치 설정이 어렵지만, 대부분의 경우 충분하다.

플로트 속성의 문제점과 해결 방법

플로트는 원래 이미지를 글자 위에 띄우기 위한 속성이므로 레이아웃 구성 시 문제가 발생할 수 있다.

해결 방법 1: 부모 요소의 `overflow` 속성을 `hidden`으로 설정한다.

해결 방법 2: `clear: both` 속성을 사용하여 플로트의 영향을 제거한다.