[음악] 안녕하세요. 러닝 스쿨 한 권으로 끝내는 HTML CSS 웹 디자인 입문 5강 되겠구요. 이번 강의에서는 웹 디자인에서 가장 중요하다고 표현되는 요소의 수평

정렬에 대해서 살펴보도록 하겠습니다. 이어지는 다른 웹 페이지에서도 이 내용을 계속해서 활용하게 되므로 오늘 강의에서 확실하게 짚고 넘어가는 것을 추천됩니다. 요소를 수평

정렬하는 방법은 크게 두 가지로 나뉘게 되는데요. 첫 번째는 플렉스 레이아웃을 사용한 수평 정렬

그리고 두 번째는 플로트를 사용한 수평 정렬 되겠습니다. 이 책에서는 플렉스 레이아웃을 사용한 수평 정렬만을 다루지만 플렉스

레이아웃을 사용한 수평 정렬 방법은 굉장히 유연하지만 최신 웹 브라우저에서만 사용할 수 있다는 단점이 있습니다.

그래서 인터넷 익스플로러가 10% 이상의 비율을 차지하고 있는 우리나라 같은 경우에는 두 가지 사용 방법을 모두 알아야 대부분의 웹 브라우저에서

지원되는 웹 페이지를 만들 수 있습니다. 지난번에 만들던 웹 페이지에서 계속 내용을 진행하게 되면 이번 내용이 약간 혼자 튈 수 있으므로 간단하게 별도의 웹 페이지를 만들고 이 웹

페이지에서 수평 정열에 대해서 알아본 다음에 만들 단 웹페이지에 적용을 하도록 하겠습니다. 그럼 일단 파일을 하나 만들어 주도록 하겠구요.

파일을 적당한 이름으로 html 파일로 저장을 해줍니다. 간단하게 h5_align 이라고 입력을 하고 저장하고 이 파일을 사용해 보도록 하겠습니다.

일단 간단하게 마크업을 구성을 하고 수평 정열을 적용을 해 보도록 하겠는데요. div 태그를 하나 만들고 내부에 div 태그 3개를 넣어 주고

내부의 div 에 간단한 글자를 하나씩 넣어 보고 이를 집안으로 알아보도록 하겠습니다. 스타일 적용을 쉽게 하기 위해서 밖에 있는 녀석에게는

아우터라는 이름의 클래스를 부여를 해 주겠구요. 안에 있는 녀석들에게는 인너라는 클래스를 부여를 해 주도록 하겠습니다. 현재 상태를 보시게 되면 오른쪽과 같이 수직 정렬 되어 있는 모습을 볼

수 있는데요 플렉스 속성을 사용한 플렉스 레이아웃을 사용한 수평적 열에서 이 요소들을 수평 정렬하기 위해서는 부모의 디스플레이 속성에 플렉스만 적용을 해 주시면 됩니다

플렉스를 적용하는 것만으로 지금 오른쪽과 같이 요소들이 수평으로 정렬되는 모습을 보실 수 있습니다

글자가 너무 작으니까 간단하게 h1 태그를 하나씩 씌워 주도록 하겠는데요 요렇게 보시면 지금 abc가 수평 정렬되어 있는 것을 조금 더 확실하게 보실 수 있습니다

e 플렉스 속성에서 저 배치를 약간 넓게 만들고 싶다거나 중간에 위치하게 하고 싶다거나 할 때는 저스티파이 콘텐츠라는 속성을 사용하게 되는데요

이 속성을 사용해서 센터라고 입력을 하게 되면 중앙에 위치가 되고 플렉스 엔드를 입력을 하게 되면 오른쪽에 배치가 되며 스페이스 비트윈을 사용을 하게 되면 균등한 영역을 가지고 배치가 됩니다

이와 관련된 설명은 책의 156 페이지를 참고를 해 보시면 지금 화면과

같이 어떠한 값을 입력할 수가 있는지 나오기 때문에 쉽게 확인을 하실 수 있을 거라고 생각을 합니다. 그럼 이를 활용을 해서 원래 인덱스 페이지의 위쪽에 있는 이미지와

아래쪽에 있는 글자들이 수평 정렬 되게 만들어 보도록 하겠습니다. 지난번 회의 제 모습은 지금 화면과 같은 대형 컨텐트 부분은 닫도록

하겠고 페이지에 헤더 부분만 조정을 해서 이 이미지와 r 리스트가 수평 정렬 그리고 리스트들이 수평 정렬 되게 만들어 보도록 하겠습니다.

일단 이미지의 너비를 지정하는 작업부터 먼저 지정을 하도록 하겠는데요. 슬랙스 레이아웃을 사용할 경우에 이미지 등은 그 너비를 미리 지정을 해

주셔야 됩니다. 현재 이미지 태그 같은 경우에는 로고 라는 클래스를 갖고 있기 때문에 점 로고를 사용을 해서 스타일을 적용 을 하도록 하겠구요.

너비는 책에 나오는 것처럼 210 픽셀 그리고 마진 탑을 적용을 하고 있는 뒤 14 픽셀을 적용해서

모른 쪽과 같이 너비를 지정해 주도록 하겠습니다. 그럼 방금 되어 어떤 수평 정렬을 적용을 해 보도록 하겠는데요.

수평 정렬 할 것들에 부모가 되는 요소의 디스플레이를 플렉스로 지정을 합니다. 이것만으로 일단 수평 정렬은 완료가 되는 데 용 페이지를 넓게 보게

되면 이미지 왼쪽에 바로 리스트가 붙어 있는 모습을 볼 수 있습니다. 우리가 만들고자 하는 페이지는 왼쪽에 이미지가 붙어 있고 오른쪽의

리스트가 붙어 있는 형태이기 때문에 방금 살펴보았던 저스티스 파일 컨텐츠를 사용을 해서 스페이스 비트윈을 적용함으로써 두 녀석을 양쪽

끝에 붙이도록 하겠습니다. 요것만 지정을 하면 일단 수평 정렬이 끝났다고 볼 수 있겠구요. 이어서 ul 태그의 내부에 있는 li 태그들도 수평 정렬을 하게

만들도록 하겠습니다. ul 태그에 해당하는 메인 네비게이션을 클래스로 잡아 주도록 하겠구요. 디스플레이를 간단하게 플렉스로 적용을 해서 수평 정렬을 하도록

하겠습니다 이렇게만 구성을 하면 지금 오른쪽 화면과 같이 네비게이션들이 수평 정렬되고 이미지와 리스트도 수평 정렬되는 모습을 볼 수 있습니다 굉장히

간단한데요 책에 나오는 4가지 일들을 적용을 해서 리스트도 함께 꾸며 보도록 하겠습니다 메인 네비게이션 내부에 있는 녀석들에게 폰트 사이즈를 1.25em으로

지정을 하고 있구요 이어서 텍스트 트랜스폼 지난번에 살펴보았던 그 녀석을 uppercase 로

지정을 해서 대문자로 만들고 마진 탑을 34픽셀 그리고 리스트 스타일을 none으로 지정을 해서 앞에 붙어 있는 리스트

동그라미들을 떼어 주고 있습니다 이어서 메인 네비게이션 안에 li 태그를 잡아주고 마진 레프트를 36픽셀

메인 네비게이션 아니 a 태그에 칼라를 # 타사 미루 지정을 해서 색상을 적용을 해 주고 있습니다 마지막으로 현재 메인 네비게이션에 마우스를 올리게 되면 책이 따로

바뀌지 않는 데요 이 녀석을 변경을 하기 위해서 메인 네비게이션 의 a 에 호버 가 일어났을 때 칼날을 #0bd 로 지정을 해서 마우스 가 올라갔을 때 도색이 변경되게

만듭니다 간단하게 실수가 나왔는데요 1.25 램 배수가 아니라 1.25 램이 얻습니다 그래서 이렇게 지정을 하게 되면 지금 화면에 나오는 것과

같은 간단한 웹 페이지가 만들어지게 됩니다 책을 보시게 되면 여기에다가 전체 에다가 마진을 제로로 먹여서 배치를

초기화를 하고 중앙 정렬하는 내용도 나와서 뭐 책에서는 래퍼 라는 클래스를 만들었지만 바디 에다가 리스 를 지정을 하고

마진 제로 오토를 먹임 으로서 이 요소들이 중앙에 배치 되게 도 만들고 있는데요 이와 관련된 내용은 다음 강의에서 알아보고

오늘은 수평 정렬 과 관련된 내용만 계속해서 살펴보도록 하겠습니다 플렉스 를 사용한 수평 정렬은 그냥 디스플레이 플렉스 추구 저스티파이드

콘텐츠를 줌으로써 원하는 곳에 배치만 하시면 됩니다. 하지만 방금 언급했던 플렉스 박스 레이아웃 같은 경우에는 최신 웹

브라우저에서만 사용할 수 있기 때문에 구 버전의 웹브라우저에서 활용하기 위해서는 플롯 속성을 사용해서 수평

정렬을 해야 되는데요. 어떻게 적용을 하는지 간단하게 알아보도록 하겠습니다. 일단 수평 정렬 하고 싶은 요소를 잡아주시고 플롯을 레프트로 적용을 해

줍니다. 이렇게 적용을 하기만 하면 지금 오른쪽과 같이 글자들이 수평 정렬 되는 모습을 볼 수 있습니다.

일반적으로 플롯 속성은 레프트로 지정을 하게 되는데요. 예를 들어서 어떠한 특정한 요소를 오른쪽 끝에 붙이고 싶다 그러면

라이트를 적용하게 됩니다. 이러한 형태로 사용하면 A는 왼쪽에 붙이고 C는 오른쪽에 붙이는 등의 코드를 작성할 수 있게 되는데요.

플렉스 레이아웃과 다르게 전체를 균일한 너비로 배치를 한다거나 중앙에 모아서 배치를 한다라고 하는 것은 설정하기는 약간 힘듭니다.

하지만 사실 그런 페이지를 만들 경우가 굉장히 드물기 때문에 클론 레프트와 물론 라인만 기억을 해 주시면 수평 정열을 어느 정도 조절하실 수 있을

거라고 생각을 합니다. 그런데 이 플로우 속성이라는 녀석은 원래 글자 위에 이미지를 띄우기 위해서 만들어진 속성입니다. 그래서 글자를 쥐

에다가 입력을 하게 되면 지금 화면에 보이시는 것처럼 플로우를 적용한 요소가 글자 위에 떠서 출력되는 모습을 볼 수 있는데요.

레이아웃을 구성할 때는 이를 막아야 되기 때문에 또 두 가지 방법 중에 하나를 활용하게 됩니다. 첫 번째는 부모의 오버플로우 속성을 히든으로 주는 것입니다.

이렇게 적용을 하게 되면 다른 글자가 왔을 때 이 요소들을 파괴되지 않게 됩니다. 왜 이렇게 하면 안 되는지에 대한

질문들이 굉장히 많은 편인데요 이는 초기에 CSS 버그로 알려진 내용이어서 딱히 이유가 없습니다.

그냥 부모의 오버플로우 히든을 적용하게 되면 안다고 든다고 기억을 해 주시면 좋겠습니다. 이어서 두 번째 방법은 더 이상 플로우 석성으로 파고 들지 않겠다고 선언을

하는 스타일 속성인 클리어 보스를 사용하는 것입니다. 더 이상 타고 들지 않게 하고 싶은 부분, 일반적으로 감싸고 있는 것 바로

뒤에다가 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` 속성을 사용하여 플로트의 영향을 제거한다.