head 섹션에는 브라우저 창에는 표시지되지 않지만 웹 페이지의 기능과 외관에 대한 정보를 포함하고 있다.
<! DOCUTYPE html>
: 브라우저에게 문서가 작성된 HTML 버전을 알리는 선언입니다. 이 경우 HTML5이다.
<html lang="ko">
: HTML 문서의 시작을 나타내며 언어를 한국어로 설정합니다.
<head>
: head 섹션의 시작을 표시합니다.
<meta>
: 문자 인코딩, Internet Explorer 호환성, 뷰포트 설정 및 SEO 관련 정보(작성자, 설명, 키워드, 로봇 설정 등)를 포함한 문서의 메타데이터를 제공한다.
<title>
: 이 태그는 웹 페이지의 제목을 설정하며, 브라우저 타이틀 바와 검색 엔진 결과에 표시된다.
<link>
: 이웹 페이지가 필요로하는 외부 리소스를 정의한다.
이에는 파비콘(브라우저 탭과 즐겨찾기에 표시되는 작은 아이콘), 애플 터치 아이콘(북마크나 홈 화면에 추가될 때 Apple 기기에 표시되는 아이콘) 및 CSS 파일(페이지의 스타일링 및 레이아웃을 정의)이 포함된다.
같은 문서 내에 CSS를 작성하지 않고 외부에 작성하고 link로 연결해줌으로서 가독성을 높일 수 있다.
코드 보기 / HTML - body / skip
<div id="skip">
<ahref="#">헤더 영역 바로가기</a><ahref="#">슬라이드 영역 바로가기</a><ahref="#">이미지 영역 바로가기</a><ahref="#">이미지, 텍스트 영역 바로가기</a><ahref="#">카드 영역 바로가기</a><ahref="#">배너 영역 바로가기</a><ahref="#">텍스트 영역 바로가기</a><ahref="#">푸터 영역 바로가기</a>
</div>
<!-- skip -->
웹 페이지의 스킵 내비게이션(skip navigation)을 구현한다.
스킵 내비게이션은 웹 페이지에 접근할 때 키보드만으로 해당 페이지의 중요한 부분으로 빠르게 이동할 수 있도록 돕는 역할을 한다.
이를 사용하면 페이지에 접근하는 사람들이 불필요한 컨텐츠를 건너뛰고 중요한 부분으로 바로 이동할 수 있기 때문에 웹 접근성을 향상 시킬 수 있다.
: 헤더 내부의 요소들을 가로 방향으로 배치하기 위해 display: flex 속성을 사용하고, 요소들 사이에 동일한 간격을 두기 위해 justify-content: space-between 속성을 사용한다.
그리고 요소들을 세로 중앙에 정렬하기 위해 align-items: center 속성을 사용한다.
헤더의 배경 색상을 #fff (흰색)으로 설정하고, 헤더와 하단 선을 구분하기 위해 border-bottom: 1px solid #ccc 속성을 사용한다.
또한 폰트의 굵기를 500으로 설정(font-weight: 500)한다.
header__logo
:헤더 중앙에 위치한 메뉴 영역을 지정한다.
너비를 20%로 조정한다.
header__menu
: 너비(width)를 60%로 설정하고, 가운데 정렬을 위해 text-align: center 속성을 사용한다.
header__menu li , header__menu li a
: header__menu 내부의 li 태그에 있는 메뉴 항목을 가로로 나열하기 위해 display:inline-block 속성을 사용한다.
각 메뉴 항목은 a로 구성되며 padding: 10px 20px 속성을 사용하여 각 항목의 내부 여백을 설정하고 배경 색상을 흰색(#fff)로 설정한다.
header__member
: 헤더 오른쪽에 위치한 로그인 버튼을 감싸는 영역이다.
너비를 20%로 설정하고, 오른쪽 정렬을 위해 text-align: right 속성을 사용한다.
header__member a
: 로그인 버튼을 지정하며, 테두리를 1px 두께의 검은색(#000)으로 설정하고, 테두리 반경을 50px로 설정하여 원형 모양을 만듭니다. 또한, 글꼴 크기를 16px로 설정한다.
코드 보기 / HTML - body / sliderType
<main id="mainType">
<sectionid="sliderType"class="slider__wrap nexon"><h2class="blind">메인 슬라이드 영역</h2><divclass="slider__inner"><divclass="slider"><divclass="slider__info container"><spanclass="small">notice</span><h3class="title">광활한 우주에 펼쳐진 길, 은하수</h3><pclass="desc"> 은하수는 끝이 없는 우주의 신비로운 대상이며, 그 안에는 끊임없이 진화하는 별들과 이례적인 천문학적 현상들이 숨어 있습니다.</p><divclass="btn"><ahref="#">자세히 보기</a><ahref="#">알아보기</a></div></div><divclass="slider__arrow"><ahref="#"><spanclass="blind">이전 이미지</span></a><ahref="#"><spanclass="blind">다음 이미지</span></a></div><divclass="slider__dot"><ahref="#"class="dot active"><spanclass="blind">첫번째 이미지</span></a><ahref="#"class="dot"><spanclass="blind">두번째 이미지</span></a><ahref="#"class="dot"><spanclass="blind">세번째 이미지</span></a><ahref="#"class="dot"><spanclass="blind">네번째 이미지</span></a><ahref="#"class="dot"><spanclass="blind">다섯째 이미지</span></a><ahref="#"class="play"><spanclass="blind">play</span></a><ahref="#"class="stop"><spanclass="blind">stop</span></a></div></div></div></section>
<!--//sliderType -->
<section id="imageType"class="image__wrap section center nexon" >
<divclass="container"><h2class="section__h2">Milky way</h2><pclass="section__desc">Milky way는 은하수 뿐 아니라 우리 은하를 가리키는 말이기도 합니다.</p><divclass="image__inner"><articleclass="image"><figureclass="image__header"><imgsrc="assets/img/imageType01_01.jpg"alt="태양계가 속해 있는 우리 은하"></figure><divclass="image__body"><h3class="title">태양계가 속해 있는 우리 은하</h3><pclass="desc">은하수는 밤하늘에 천구를 아치형으로 가로지르는 흰 빛의 흐릿한 띠 모양으로 보입니다. </p><ahref="#"class="btn">자세히 보기</a></div></article><articleclass="image"><figureclass="image__header"><imgsrc="assets/img/imageType01_02.jpg"alt="우리 은하의 물리적 크기"></figure><divclass="image__body"><h3class="title">우리 은하의 물리적 크기</h3><pclass="desc">우리 은하의 원반은 직경이 약 100,000광년이고, 평균적으로 약 1,000광년 두께입니다.</p><ahref="#"class="btn">자세히 보기</a></div></article></div></div></section><!--//imageType -->
<section id="img-textType"class="img-text__wrap section nexon gray">
<h2class="blind"></h2><divclass="img-text__inner container"><articleclass="text"><span>notice</span><h3>나선형 은하(Spiral Galaxy)</h3><pclass="subtitle">나선형 은하는 중심 부분에 바(bar)와 팔(arm) 형태로 뻗어나가는 구조입니다.</p><p>
나선형 은하 안에는 주로 별들이 모여있는 은하원반이 있습니다. 이 은하원반 안에는 다양한 크기와 모양의 은하들이 분포해 있습니다.
이러한 은하들은 대부분 나선형 은하 안의 중심 부분인 바 주변이나 나선형 팔 사이에 위치하고 있습니다. 이러한 은하들을 위성 은하(Satellite Galaxy) 또는 동반 은하(Companion Galaxy)라고 합니다.
이렇게 나선형 은하 안에 위치한 위성 은하들은 나선형 은하와 서로 상호작용하면서 형태를 바꾸는 등의 영향을 끼치기도 하며, 형태에 따라 다양한 종류가 있습니다.</p></article><articleclass="image img1"><ahref="#">나선형 은하</a></article><articleclass="image img2"><ahref="#">위성 은하</a></article></div>
</section>
<!--//img-textType -->
<section id="cardType"class="card__wrap section nexon">
<divclass="container"><h2class="section__h2">About the Milky way</h2><pclass="section__desc">은하수는 우리 태양계가 속해 있는 막대 나선 은하로, 지름은 약 10만 광년이며 약 1000억 개 이상의 별과 더불어 행성과 소행성, 혜성, 가스 구름 등 다양한 천체들이 존재합니다.</p><divclass="card__inner"><articleclass="card"><figureclass="card__header"><imgsrc="../asset/img/cardType01_01.jpg"alt="은하수의 구성"></figure><divclass="card__body"><h3class="title">은하수의 구성</h3><pclass="desc">은하수는 약 130억 년 전에 처음으로 형성 되었으며, 암흑 물질, 별, 가스의 혼합물로 이루어져 있습니다. 은하수의 중심부에는 약 4백만 개의 태양 질량을 가진 거대한 블랙홀이 있습니다.</p><ahref="#"class="btn">자세히 보기</a></div></article><articleclass="card"><figureclass="card__header"><imgsrc="../asset/img/cardType01_02.jpg"alt="은하수의 종류"></figure><divclass="card__body"><h3class="title">은하수의 종류</h3><pclass="desc">은하수는 크게 타원형 은하와 나선형 은하, 불규칙형 은하까지 총 세 가지 종류로 분류 됩니다. 타원형 은하는 둥근 모양을 가지며, 별들이 잘 정렬되어 있다는 특징이 있습니다.</p><ahref="#"class="btn">자세히 보기</a></div></article><articleclass="card"><figureclass="card__header"><imgsrc="../asset/img/cardType01_03.jpg"alt="은하수의 색"></figure><divclass="card__body"><h3class="title">은하수의 색</h3><pclass="desc">은하수의 색은 그 안에 포함된 별들의 색과 빛을 반사하는 먼지와 가스의 성분, 그리고 은하의 나이 등에 따라 달라집니다. 보통 은하수는 주황, 노랑, 빨강 등의 색을 가집니다.</p><ahref="#"class="btn">자세히 보기</a></div></article></div></div></div></section><!--//cardType -->
section 태그에 id 값으로 bannerType을 지정하고, class 값으로 banner_wrap, section(padding속성 부여), nexon('NexonLv1Gothic'이라는 font family 속성을 부여), center(가운데 정렬 속성 부여)를 지정하였다.
h2 태그를 통해 "배너"라는 제목을 추가하고 h2 태그에 class로 blind를 주어 화면에서 숨김처리 하였다.
div 태그에 class 값으로 banner__inner와 container를 지정하였고, 배너 내부에는 다음과 같은 요소들이 있다.
h3 태그 - "은하수 관측"이라는 제목
p 태그 - h3 태그 제목에 대한 간단한 설명이 포함되어 있다.
a 태그 - h3 태그 제목에 관한 자세한 정보가 포함된 링크를 포함하고 있다.
코드 보기 / HTML - body / textType
<section id="textType"class="text__wrap section center nexon">
<divclass="container"><spanclass="section__small">notice</span><h2class="section__h2 mb70">About the Milky way</h2><divclass="text__inner"><divclass="text"><h3class="text__title">명칭 및 어원</h3><pclass="text__desc">우리 은하의 명칭은 “Milky Way(밀키 웨이)”입니다. 그러나 밀키 웨이는 우리 은하 뿐 아니라 은하수 자체를 가리키기도 합니다. 은하수들도 각각의 명칭이 있습니다.</p><aclass="text__btn"href="#">더 보기</a></div><divclass="text"><h3class="text__title">갤러틱 할로(Galactic Halo)</h3><pclass="text__desc">은하 중심부를 둘러싸고 있는 둥근 모양의 거대한 구조물 입니다. 은하 중심부에 위치한 은하 플레어와 달리, 할로는 무수히 많은 별, 암석체, 가스, 먼지 등이 혼합된 구조물입니다.</p><aclass="text__btn"href="#">더 보기</a></div><divclass="text"><h3class="text__title">은하 헤일로(Galaxy Hale)</h3><pclass="text__desc">은하 헤일로는 아메리칸 천문학자 조지 엘리슨 헤일이 처음으로 제안한 은하 분류 체계입니다. 이 체계는 은하를 크기와 모양에 따라 4가지 유형으로 분류하고 있습니다.</p><aclass="text__btn"href="#">더 보기</a></div><divclass="text"><h3class="text__title">우리 은하의 구조</h3><pclass="text__desc">우리 은하는 막대 나선 은하에 속하며, 허블의 은하 분류에 따르면 Sbc(중심에 막대가 존재하고 나선팔이 느슨히 감긴 형태)입니다. 막대 구조는 대부분 붉고 오래된 항성들로 구성되어 있습니다.</p><aclass="text__btn"href="#">더 보기</a></div><divclass="text"><h3class="text__title">우리 은하의 블랙홀</h3><pclass="text__desc">우리 은하를 구성하는 별들은 은하의 중심부를 중심으로 나선팔 모양으로 공전합니다. 이는 은하 중심에 초대질량 블랙홀이 있기 때문이라 여겨집니다.</p><aclass="text__btn"href="#">더 보기</a></div><divclass="text"><h3class="text__title">우리 은하의 팔</h3><pclass="text__desc">우리 은하에는 네 개의 큰 나선 팔이 있다고 여겨졌으나, 2008년에 스피처 적외선 망원경을 이용하여 1억 개 이상의 별의 분포를 분석한 결과, 단지 2개의 나선 팔만이 구분되었습니다.</p><aclass="text__btn"href="#">더 보기</a></div></div></div>
</section>
<!--//textType -->
</main>
<!-- mainType -->
<section class="text__wrap section center nexon">
<divclass="container"><spanclass="section__small">notice</span><h2class="section__h2 mb70">About the Milky way</h2><divclass="text__inner"><divclass="text"><h3class="text__title">명칭 및 어원</h3><pclass="text__desc">우리 은하의 명칭은 “Milky Way(밀키 웨이)”입니다. 그러나 밀키 웨이는 우리 은하 뿐 아니라 은하수 자체를 가리키기도 합니다. 은하수들도 각각의 명칭이 있습니다.</p><aclass="text__btn"href="#">더 보기</a></div><divclass="text"><h3class="text__title">갤러틱 할로(Galactic Halo)</h3><pclass="text__desc">은하 중심부를 둘러싸고 있는 둥근 모양의 거대한 구조물 입니다. 은하 중심부에 위치한 은하 플레어와 달리, 할로는 무수히 많은 별, 암석체, 가스, 먼지 등이 혼합된 구조물입니다.</p><aclass="text__btn"href="#">더 보기</a></div><divclass="text"><h3class="text__title">은하 헤일로(Galaxy Hale)</h3><pclass="text__desc">은하 헤일로는 아메리칸 천문학자 조지 엘리슨 헤일이 처음으로 제안한 은하 분류 체계입니다. 이 체계는 은하를 크기와 모양에 따라 4가지 유형으로 분류하고 있습니다.</p><aclass="text__btn"href="#">더 보기</a></div><divclass="text"><h3class="text__title">우리 은하의 구조</h3><pclass="text__desc">우리 은하는 막대 나선 은하에 속하며, 허블의 은하 분류에 따르면 Sbc(중심에 막대가 존재하고 나선팔이 느슨히 감긴 형태)입니다. 막대 구조는 대부분 붉고 오래된 항성들로 구성되어 있습니다.</p><aclass="text__btn"href="#">더 보기</a></div><divclass="text"><h3class="text__title">우리 은하의 블랙홀</h3><pclass="text__desc">우리 은하를 구성하는 별들은 은하의 중심부를 중심으로 나선팔 모양으로 공전합니다. 이는 은하 중심에 초대질량 블랙홀이 있기 때문이라 여겨집니다.</p><aclass="text__btn"href="#">더 보기</a></div><divclass="text"><h3class="text__title">우리 은하의 팔</h3><pclass="text__desc">우리 은하에는 네 개의 큰 나선 팔이 있다고 여겨졌으나, 2008년에 스피처 적외선 망원경을 이용하여 1억 개 이상의 별의 분포를 분석한 결과, 단지 2개의 나선 팔만이 구분되었습니다.</p><aclass="text__btn"href="#">더 보기</a></div></div></div>
</section>
:text__inner 클래스(class)는 텍스트 블록들을 감싸는 부모 요소를 나타낸다.
이 클래스는 왼쪽 정렬이 되며(text-align), 텍스트 블록들은 flexbox를 이용해(display: flex, flex-wrap: wrap) 감싸져서 각각의 텍스트 블록 사이에 공간이 생기도록 하는 속성(justify-content: space-between)이 적용된다.
.text__inner .text {
width: 32.3333333%;
border: 1px solid #f5f5f5;
padding: 90px 20px 20px 20px;
border-radius: 10px;
box-sizing: border-box;
margin-bottom: 20px;
transition: all 0.3s;
cursor: pointer;
position: relative;
}
: text__inner 클래스 안의 text 클래스는 텍스트 블록을 나타낸다.
text__inner .text 클래스는 각각의 텍스트 블록이 32.33%의 너비를 가지고 있으며(width:32.33%), 테두리가 (border: 1px) 있고, 패딩(텍스트를 기준으로 주는 여백, padding: 90px(상/위) 20px(우/오른쪽) 20px(하/아래) 20x(좌/왼쪽)))과 보더 라운딩(테두리를 둥글게 하는 것, border-radius : 10px), 마진 등의 속성을 준다.
마우스가 해당 텍스트 블록 위에 올라갔을 때 배경색이 변하도록 (:hover) 속성을 주었다.
<section class="slider__wrap nexon">
<h2class="blind">메인 슬라이드 영역</h2><divclass="slider__inner"><divclass="slider"><divclass="slider__info container"><spanclass="small">notice</span><h3class="title">광활한 우주에 펼쳐진 길, 은하수</h3><pclass="desc"> 은하수는 끝이 없는 우주의 신비로운 대상이며, 그 안에는 끊임없이 진화하는 별들과 이례적인 천문학적 현상들이 숨어 있습니다.</p><divclass="btn"><ahref="#">자세히 보기</a><ahref="#">알아보기</a></div></div><divclass="slider__arrow"><ahref="#"><spanclass="blind">이전 이미지</span></a><ahref="#"><spanclass="blind">다음 이미지</span></a></div><divclass="slider__dot"><ahref="#"class="dot active"><spanclass="blind">첫번째 이미지</span></a><ahref="#"class="dot"><spanclass="blind">두번째 이미지</span></a><ahref="#"class="dot"><spanclass="blind">세번째 이미지</span></a><ahref="#"class="dot"><spanclass="blind">네번째 이미지</span></a><ahref="#"class="dot"><spanclass="blind">다섯째 이미지</span></a><ahref="#"class="play"><spanclass="blind">play</span></a><ahref="#"class="stop"><spanclass="blind">stop</span></a></div></div></div>
</section>
이미지를 요소의 크기에 맞게 축소해서 모두 보이도록 한다. 요소의 일부가 노출될 수 있다.
길이 값 (ex. 100px, 50px 등)
이미지의 크기를 지정한 길이로 설정한다. 100px, 50px 등과 같이 가로와 세로의 크기를 각각 설정할 수 있다.
백분율 값 (ex. 50%, 100% 등)
이미지의 크기를 요소의 백분율로 설정한다. 50%, 100%와 같이 가로와 세로의 크기를 각각 설정할 수 있다.
background-size: cover;
:배경 이미지를 요소 크기에 맞게 늘리거나 줄여서 모두 보이도록 설정하는 것.
background-repeat
:배경 이미지가 반복되는 방식을 설정하는데 사용된다.
repeat
이미지를 수평, 수직 방향으로 반복해서 배치
repeat-x
이미지를 수평 방향으로 반복해서 배치
repeat-y
이미지를 수직 방향으로 반복해서 배치
no-repeat
이미지를 반복하지 않고 한 번만 배치
background-repeat: no-repeat;
:배경 이미지가 반복되지 않도록 설정하는 것.
background-position: center;
:배경 이미지가 요소 중앙에 위치하도록 설정하는 것.
word-break
:한 줄에 글자가 너무 길어서 줄 바꿈이 필요할 때 단어를 분리하는 방식을 설정한다.
nomal
기본값으로 단어를 분리
break-all
모든 문자에서 줄바꿈을 하여 단어를 분리
keep-all
단어 중간에서는 분리하지 않고 다음 줄로 이동. 단어의 시작 부분에서만 분리.
break-word
단어가 아니라 긴 문자열에서 줄바꿈을 하여 분리. 단어가 아니라도 분리할 수 잇는 경우에는 break-all과 동일하게 처리.
word-break: keep-all
:클래스명이 desc인 요소 안의 텍스트들은 단어의 중간에서 분리하지 않고 다음 단어의 시작 부분에서 줄바꿈하도록 설정.
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 2dppx) {
.slider__inner .slider {
background-image: url(../asset/img/sliderType01_01@2x.jpg);
}
@media 를 사용하여 디바이스의 픽셀 밀도가 2x 이상인 경우에만 적용되는 스타일을 정의한다.
<section class="img-text__wrap section nexon">
<divclass="container"><divclass="img-text__inner"><articleclass="text"><spanclass="section__small">notice</span><h2class="section__h2">나선형 은하(Spiral Galaxy)</h2><spanclass="desc">나선형 은하는 중심 부분에 바(bar)와 팔(arm) 형태로 뻗어나가는 구조입니다.</span><pclass="desc">
나선형 은하 안에는 주로 별들이 모여있는 은하원반이 있습니다. 이 은하원반 안에는 다양한 크기와 모양의 은하들이 분포해 있습니다.
이러한 은하들은 대부분 나선형 은하 안의 중심 부분인 바 주변이나 나선형 팔 사이에 위치하고 있습니다. 이러한 은하들을 위성 은하(Satellite Galaxy) 또는 동반 은하(Companion Galaxy)라고 합니다.
이렇게 나선형 은하 안에 위치한 위성 은하들은 나선형 은하와 서로 상호작용하면서 형태를 바꾸는 등의 영향을 끼치기도 하며, 형태에 따라 다양한 종류가 있습니다.</p></article><articleclass="image"><figureclass="image__body"><imgsrc="../asset/img/img-textType01_01.jpg"alt="나선 은하"></figure></article><article><figureclass="image__body"><imgsrc="../asset/img/img-textType01_02.jpg"alt="나선형 은하"></figure></article></div></div></section>
section 태그 안에 있는 모든 요소들에 폰트가 적용될 수 있도록 클래스명 nexon을 작성함.
section 안에 있는 small 태그나, h2 태그가 미리 작성해놓은 css의 속성을 상속받을 수 있도록 클래스명 section을 작성함
<span class="desc">나선형 은하는 중심 부분에 바(bar)와 팔(arm) 형태로 뻗어나가는 구조입니다.</span>
<pclass="desc">
나선형 은하 안에는 주로 별들이 모여있는 은하원반이 있습니다. 이 은하원반 안에는 다양한 크기와 모양의 은하들이 분포해 있습니다.
이러한 은하들은 대부분 나선형 은하 안의 중심 부분인 바 주변이나 나선형 팔 사이에 위치하고 있습니다. 이러한 은하들을 위성 은하(Satellite Galaxy) 또는 동반 은하(Companion Galaxy)라고 합니다.
이렇게 나선형 은하 안에 위치한 위성 은하들은 나선형 은하와 서로 상호작용하면서 형태를 바꾸는 등의 영향을 끼치기도 하며, 형태에 따라 다양한 종류가 있습니다.</p>
</article>
이전의 유형들과는 다르게 소제목이 없으며, 큰 제목을 제외한 모든 텍스트들이 글자색과 글자 크기 등 자잘한 속성이 모두 같기 때문에 따로 속성을 주지 않고,
각각 span 태그, p 태그에 desc 클래스를 추가하여 한꺼번에 같은 속성이 적용되도록 하였다.
<section class="image__wrap section center nexon">
<divclass="container"><h2class="section__h2">Milky way</h2><pclass="section__desc">Milky way는 은하수 뿐 아니라 우리 은하를 가리키는 말이기도 합니다.</p><divclass="imag_inner"><articleclass="image"><figureclass="img__header"><imgsrc="../asset/img/imageType01_01.jpg"alt="태양계가 속해 있는 우리 은하"></figure><divclass="image__body"><h3class="title">태양계가 속해 있는 우리 은하</h3><pclass="desc">은하수는 밤하늘에 천구를 아치형으로 가로지르는 흰 빛의 흐릿한 띠 모양으로 보입니다. </p><ahref="#"class="btn">자세히 보기</a></div></article><articleclass="image"><figureclass="img__header"><imgsrc="../asset/img/imageType01_02.jpg"alt="우리 은하의 물리적 크기"></figure><divclass="image__body"><h3class="title">우리 은하의 물리적 크기</h3><pclass="desc">우리 은하의 원반은 직경이 약 100,000광년이고, 평균적으로 약 1,000광년 두께입니다.</p><ahref="#"class="btn">자세히 보기</a></div></article></div></div></section>
vertical-align
:CSS 속성 중 하나로, 인라인 요소나 테이블 셀 요소의 수직 정렬을 지정하는 속성이다.
baseline, top, middle, bottom, text-top, text-bottom, sub, super 등의 다양한 속성 값이 있다.
:section__h2 클래스가 여러 곳에서 중복으로 사용되는 클래스이기 때문에 이 페이지에 있는 h2 태그에 여백 속성을 지정하면 다른 페이지에 있는 section__h2 클래스를 가지고 있는 요소 모두에 속성이 지정 되어버리기 때문에 필요 시에만 알맞은 속성을 사용할 수 있도록, 그리고 여백 속성이 제일 먼저 우선순위를 가지도록 작성한 코드입니다.
