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">
<a href="#">헤더 영역 바로가기</a>
<a href="#">슬라이드 영역 바로가기</a>
<a href="#">이미지 영역 바로가기</a>
<a href="#">이미지, 텍스트 영역 바로가기</a>
<a href="#">카드 영역 바로가기</a>
<a href="#">배너 영역 바로가기</a>
<a href="#">텍스트 영역 바로가기</a>
<a href="#">푸터 영역 바로가기</a>
</div>
<!-- skip -->
웹 페이지의 스킵 내비게이션(skip navigation)을 구현한다.
스킵 내비게이션은 웹 페이지에 접근할 때 키보드만으로 해당 페이지의 중요한 부분으로 빠르게 이동할 수 있도록 돕는 역할을 한다.
이를 사용하면 페이지에 접근하는 사람들이 불필요한 컨텐츠를 건너뛰고 중요한 부분으로 바로 이동할 수 있기 때문에 웹 접근성을 향상 시킬 수 있다.
<section id="imageType" class="image__wrap section center nexon" >
<div class="container">
<h2 class="section__h2">Milky way</h2>
<p class="section__desc">Milky way는 은하수 뿐 아니라 우리 은하를 가리키는 말이기도 합니다.</p>
<div class="image__inner">
<article class="image">
<figure class="image__header">
<img src="assets/img/imageType01_01.jpg" alt="태양계가 속해 있는 우리 은하">
</figure>
<div class="image__body">
<h3 class="title">태양계가 속해 있는 우리 은하</h3>
<p class="desc">은하수는 밤하늘에 천구를 아치형으로 가로지르는 흰 빛의 흐릿한 띠 모양으로 보입니다. </p>
<a href="#" class="btn">자세히 보기</a>
</div>
</article>
<article class="image">
<figure class="image__header">
<img src="assets/img/imageType01_02.jpg" alt="우리 은하의 물리적 크기">
</figure>
<div class="image__body">
<h3 class="title">우리 은하의 물리적 크기</h3>
<p class="desc">우리 은하의 원반은 직경이 약 100,000광년이고, 평균적으로 약 1,000광년 두께입니다.</p>
<a href="#" class="btn">자세히 보기</a>
</div>
</article>
</div>
</div>
</section>
<!--//imageType -->
<section id="img-textType" class="img-text__wrap section nexon gray">
<h2 class="blind"></h2>
<div class="img-text__inner container">
<article class="text">
<span>notice</span>
<h3>나선형 은하(Spiral Galaxy)</h3>
<p class="subtitle">나선형 은하는 중심 부분에 바(bar)와 팔(arm) 형태로 뻗어나가는 구조입니다.</p>
<p>
나선형 은하 안에는 주로 별들이 모여있는 은하원반이 있습니다. 이 은하원반 안에는 다양한 크기와 모양의 은하들이 분포해 있습니다.
이러한 은하들은 대부분 나선형 은하 안의 중심 부분인 바 주변이나 나선형 팔 사이에 위치하고 있습니다. 이러한 은하들을 위성 은하(Satellite Galaxy) 또는 동반 은하(Companion Galaxy)라고 합니다.
이렇게 나선형 은하 안에 위치한 위성 은하들은 나선형 은하와 서로 상호작용하면서 형태를 바꾸는 등의 영향을 끼치기도 하며, 형태에 따라 다양한 종류가 있습니다.</p>
</article>
<article class="image img1">
<a href="#">나선형 은하</a>
</article>
<article class="image img2">
<a href="#">위성 은하</a>
</article>
</div>
</section>
<!--//img-textType -->
<section id="cardType" class="card__wrap section nexon">
<div class="container">
<h2 class="section__h2">About the Milky way</h2>
<p class="section__desc">은하수는 우리 태양계가 속해 있는 막대 나선 은하로, 지름은 약 10만 광년이며 약 1000억 개 이상의 별과 더불어 행성과 소행성, 혜성, 가스 구름 등 다양한 천체들이 존재합니다.</p>
<div class="card__inner">
<article class="card">
<figure class="card__header">
<img src="../asset/img/cardType01_01.jpg" alt="은하수의 구성">
</figure>
<div class="card__body">
<h3 class="title">은하수의 구성</h3>
<p class="desc">은하수는 약 130억 년 전에 처음으로 형성 되었으며, 암흑 물질, 별, 가스의 혼합물로 이루어져 있습니다. 은하수의 중심부에는 약 4백만 개의 태양 질량을 가진 거대한 블랙홀이 있습니다.</p>
<a href="#" class="btn">자세히 보기</a>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="../asset/img/cardType01_02.jpg" alt="은하수의 종류">
</figure>
<div class="card__body">
<h3 class="title">은하수의 종류</h3>
<p class="desc">은하수는 크게 타원형 은하와 나선형 은하, 불규칙형 은하까지 총 세 가지 종류로 분류 됩니다. 타원형 은하는 둥근 모양을 가지며, 별들이 잘 정렬되어 있다는 특징이 있습니다.</p>
<a href="#" class="btn">자세히 보기</a>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="../asset/img/cardType01_03.jpg" alt="은하수의 색">
</figure>
<div class="card__body">
<h3 class="title">은하수의 색</h3>
<p class="desc">은하수의 색은 그 안에 포함된 별들의 색과 빛을 반사하는 먼지와 가스의 성분, 그리고 은하의 나이 등에 따라 달라집니다. 보통 은하수는 주황, 노랑, 빨강 등의 색을 가집니다.</p>
<a href="#" 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">
<div class="container">
<span class="section__small">notice</span>
<h2 class="section__h2 mb70">About the Milky way</h2>
<div class="text__inner">
<div class="text">
<h3 class="text__title">명칭 및 어원</h3>
<p class="text__desc">우리 은하의 명칭은 “Milky Way(밀키 웨이)”입니다. 그러나 밀키 웨이는 우리 은하 뿐 아니라 은하수 자체를 가리키기도 합니다. 은하수들도 각각의 명칭이 있습니다.</p>
<a class="text__btn" href="#">더 보기</a>
</div>
<div class="text">
<h3 class="text__title">갤러틱 할로(Galactic Halo)</h3>
<p class="text__desc">은하 중심부를 둘러싸고 있는 둥근 모양의 거대한 구조물 입니다. 은하 중심부에 위치한 은하 플레어와 달리, 할로는 무수히 많은 별, 암석체, 가스, 먼지 등이 혼합된 구조물입니다.</p>
<a class="text__btn" href="#">더 보기</a>
</div>
<div class="text">
<h3 class="text__title">은하 헤일로(Galaxy Hale)</h3>
<p class="text__desc">은하 헤일로는 아메리칸 천문학자 조지 엘리슨 헤일이 처음으로 제안한 은하 분류 체계입니다. 이 체계는 은하를 크기와 모양에 따라 4가지 유형으로 분류하고 있습니다.</p>
<a class="text__btn" href="#">더 보기</a>
</div>
<div class="text">
<h3 class="text__title">우리 은하의 구조</h3>
<p class="text__desc">우리 은하는 막대 나선 은하에 속하며, 허블의 은하 분류에 따르면 Sbc(중심에 막대가 존재하고 나선팔이 느슨히 감긴 형태)입니다. 막대 구조는 대부분 붉고 오래된 항성들로 구성되어 있습니다.</p>
<a class="text__btn" href="#">더 보기</a>
</div>
<div class="text">
<h3 class="text__title">우리 은하의 블랙홀</h3>
<p class="text__desc">우리 은하를 구성하는 별들은 은하의 중심부를 중심으로 나선팔 모양으로 공전합니다. 이는 은하 중심에 초대질량 블랙홀이 있기 때문이라 여겨집니다.</p>
<a class="text__btn" href="#">더 보기</a>
</div>
<div class="text">
<h3 class="text__title">우리 은하의 팔</h3>
<p class="text__desc">우리 은하에는 네 개의 큰 나선 팔이 있다고 여겨졌으나, 2008년에 스피처 적외선 망원경을 이용하여 1억 개 이상의 별의 분포를 분석한 결과, 단지 2개의 나선 팔만이 구분되었습니다.</p>
<a class="text__btn" href="#">더 보기</a>
</div>
</div>
</div>
</section>
<!--//textType -->
</main>
<!-- mainType -->
<section class="text__wrap section center nexon">
<div class="container">
<span class="section__small">notice</span>
<h2 class="section__h2 mb70">About the Milky way</h2>
<div class="text__inner">
<div class="text">
<h3 class="text__title">명칭 및 어원</h3>
<p class="text__desc">우리 은하의 명칭은 “Milky Way(밀키 웨이)”입니다. 그러나 밀키 웨이는 우리 은하 뿐 아니라 은하수 자체를 가리키기도 합니다. 은하수들도 각각의 명칭이 있습니다.</p>
<a class="text__btn" href="#">더 보기</a>
</div>
<div class="text">
<h3 class="text__title">갤러틱 할로(Galactic Halo)</h3>
<p class="text__desc">은하 중심부를 둘러싸고 있는 둥근 모양의 거대한 구조물 입니다. 은하 중심부에 위치한 은하 플레어와 달리, 할로는 무수히 많은 별, 암석체, 가스, 먼지 등이 혼합된 구조물입니다.</p>
<a class="text__btn" href="#">더 보기</a>
</div>
<div class="text">
<h3 class="text__title">은하 헤일로(Galaxy Hale)</h3>
<p class="text__desc">은하 헤일로는 아메리칸 천문학자 조지 엘리슨 헤일이 처음으로 제안한 은하 분류 체계입니다. 이 체계는 은하를 크기와 모양에 따라 4가지 유형으로 분류하고 있습니다.</p>
<a class="text__btn" href="#">더 보기</a>
</div>
<div class="text">
<h3 class="text__title">우리 은하의 구조</h3>
<p class="text__desc">우리 은하는 막대 나선 은하에 속하며, 허블의 은하 분류에 따르면 Sbc(중심에 막대가 존재하고 나선팔이 느슨히 감긴 형태)입니다. 막대 구조는 대부분 붉고 오래된 항성들로 구성되어 있습니다.</p>
<a class="text__btn" href="#">더 보기</a>
</div>
<div class="text">
<h3 class="text__title">우리 은하의 블랙홀</h3>
<p class="text__desc">우리 은하를 구성하는 별들은 은하의 중심부를 중심으로 나선팔 모양으로 공전합니다. 이는 은하 중심에 초대질량 블랙홀이 있기 때문이라 여겨집니다.</p>
<a class="text__btn" href="#">더 보기</a>
</div>
<div class="text">
<h3 class="text__title">우리 은하의 팔</h3>
<p class="text__desc">우리 은하에는 네 개의 큰 나선 팔이 있다고 여겨졌으나, 2008년에 스피처 적외선 망원경을 이용하여 1억 개 이상의 별의 분포를 분석한 결과, 단지 2개의 나선 팔만이 구분되었습니다.</p>
<a class="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) 속성을 주었다.
이미지를 요소의 크기에 맞게 축소해서 모두 보이도록 한다. 요소의 일부가 노출될 수 있다.
길이 값 (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">
<div class="container">
<div class="img-text__inner">
<article class="text">
<span class="section__small">notice</span>
<h2 class="section__h2">나선형 은하(Spiral Galaxy)</h2>
<span class="desc">나선형 은하는 중심 부분에 바(bar)와 팔(arm) 형태로 뻗어나가는 구조입니다.</span>
<p class="desc">
나선형 은하 안에는 주로 별들이 모여있는 은하원반이 있습니다. 이 은하원반 안에는 다양한 크기와 모양의 은하들이 분포해 있습니다.
이러한 은하들은 대부분 나선형 은하 안의 중심 부분인 바 주변이나 나선형 팔 사이에 위치하고 있습니다. 이러한 은하들을 위성 은하(Satellite Galaxy) 또는 동반 은하(Companion Galaxy)라고 합니다.
이렇게 나선형 은하 안에 위치한 위성 은하들은 나선형 은하와 서로 상호작용하면서 형태를 바꾸는 등의 영향을 끼치기도 하며, 형태에 따라 다양한 종류가 있습니다.</p>
</article>
<article class="image">
<figure class="image__body">
<img src="../asset/img/img-textType01_01.jpg" alt="나선 은하">
</figure>
</article>
<article>
<figure class="image__body">
<img src="../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>
<p class="desc">
나선형 은하 안에는 주로 별들이 모여있는 은하원반이 있습니다. 이 은하원반 안에는 다양한 크기와 모양의 은하들이 분포해 있습니다.
이러한 은하들은 대부분 나선형 은하 안의 중심 부분인 바 주변이나 나선형 팔 사이에 위치하고 있습니다. 이러한 은하들을 위성 은하(Satellite Galaxy) 또는 동반 은하(Companion Galaxy)라고 합니다.
이렇게 나선형 은하 안에 위치한 위성 은하들은 나선형 은하와 서로 상호작용하면서 형태를 바꾸는 등의 영향을 끼치기도 하며, 형태에 따라 다양한 종류가 있습니다.</p>
</article>
이전의 유형들과는 다르게 소제목이 없으며, 큰 제목을 제외한 모든 텍스트들이 글자색과 글자 크기 등 자잘한 속성이 모두 같기 때문에 따로 속성을 주지 않고,
각각 span 태그, p 태그에 desc 클래스를 추가하여 한꺼번에 같은 속성이 적용되도록 하였다.
<section class="image__wrap section center nexon">
<div class="container">
<h2 class="section__h2">Milky way</h2>
<p class="section__desc">Milky way는 은하수 뿐 아니라 우리 은하를 가리키는 말이기도 합니다.</p>
<div class="imag_inner">
<article class="image">
<figure class="img__header">
<img src="../asset/img/imageType01_01.jpg" alt="태양계가 속해 있는 우리 은하">
</figure>
<div class="image__body">
<h3 class="title">태양계가 속해 있는 우리 은하</h3>
<p class="desc">은하수는 밤하늘에 천구를 아치형으로 가로지르는 흰 빛의 흐릿한 띠 모양으로 보입니다. </p>
<a href="#" class="btn">자세히 보기</a>
</div>
</article>
<article class="image">
<figure class="img__header">
<img src="../asset/img/imageType01_02.jpg" alt="우리 은하의 물리적 크기">
</figure>
<div class="image__body">
<h3 class="title">우리 은하의 물리적 크기</h3>
<p class="desc">우리 은하의 원반은 직경이 약 100,000광년이고, 평균적으로 약 1,000광년 두께입니다.</p>
<a href="#" 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 클래스를 가지고 있는 요소 모두에 속성이 지정 되어버리기 때문에 필요 시에만 알맞은 속성을 사용할 수 있도록, 그리고 여백 속성이 제일 먼저 우선순위를 가지도록 작성한 코드입니다.
