완 성 화 면
(https://fitalux.github.io/web2023/site/site1/index.html)
코드 보기 / CSS
(여러 타입의 화면을 합친 관계로 GitHub 주소로 대체)
https://github.com/Fitalux/web2023/tree/main/site/site1/assets/css
GitHub - Fitalux/web2023: 수업시간에 배운 사이트입니다.
수업시간에 배운 사이트입니다. Contribute to Fitalux/web2023 development by creating an account on GitHub.
github.com
코드 보기 / HTML - head
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>site 1</title>
<!-- SEO -->
<meta name="author" content="Fitalux">
<meta name="description" content="About the milky way">
<meta name="keyword" content="milky way, Galaxy, stars, site">
<meta name="robots" content="all">
<link rel="shortcut icon" type="image/x-icon" href="assets/ico/favicon.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="assets/ico/favicon.png"/>
<link rel="apple-touch-icon" href="assets/ico/favicon.png"/>
<!-- CSS -->
<link rel="stylesheet" href="assets/css/fonts.css">
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/common.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
HTML 문서의 head 섹션이다.
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)을 구현한다.
스킵 내비게이션은 웹 페이지에 접근할 때 키보드만으로 해당 페이지의 중요한 부분으로 빠르게 이동할 수 있도록 돕는 역할을 한다.
이를 사용하면 페이지에 접근하는 사람들이 불필요한 컨텐츠를 건너뛰고 중요한 부분으로 바로 이동할 수 있기 때문에 웹 접근성을 향상 시킬 수 있다.
div 태그로 스킵 내비게이션을 감싸고 a 태그로 스킵 내비게이션의 각 링크를 만든다.
링크의 href 속성은 해당 영역의 id 값을 참조한다.
스킵 내비게이션 링크를 클릭하면 해당 영역으로 포커스가 이동한다.
(그러나, 아직 id값을 참조시키지 않은 상태.)
코드 보기 / HTML - body / headerType
<header id="headerType" class="header__wrap nexon">
<div class="header__inner">
<h1 class="header__logo">🌌 MILKY WAY </h1>
<nav class="header__menu">
<ul>
<li><a href="#">은하수</a></li>
<li><a href="#">우리 은하</a></li>
<li><a href="#">국부 은하군</a></li>
<li><a href="#">타원형 은하</a></li>
<li><a href="#">나선형 은하</a></li>
<li><a href="#">불규칙 은하</a></li>
</ul>
</nav>
<div class="header__memder">
<a href="#">로그인</a>
</div>
</div>
</header>
<!-- headerType -->
** CSS**
/* header__wrap */
.header__wrap {}
.header__inner {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
background-color: #fff;
border-bottom: 1px solid #ccc;
font-weight: 500;
}
.header__logo {
width: 20%;
}
.header__menu {
width: 60%;
text-align: center;
}
.header__menu li {
display: inline-block;
}
.header__menu li a {
display: inline-block;
padding: 10px 20px;
background-color: #fff;
}
.header__memder {
width: 20%;
text-align: right;
}
.header__memder a {
border: 1px solid #000;
padding: 10px 30px;
border-radius: 50px;
font-size: 16px;
}
header__wrap
: 헤더 영역을 감싸는 전체 영역을 지정한다.
header__inner
: 헤더 내부의 요소들을 가로 방향으로 배치하기 위해 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">
<section id="sliderType" class="slider__wrap nexon">
<h2 class="blind">메인 슬라이드 영역</h2>
<div class="slider__inner">
<div class="slider">
<div class="slider__info container">
<span class="small">notice</span>
<h3 class="title">광활한 우주에 펼쳐진 길, 은하수</h3>
<p class="desc"> 은하수는 끝이 없는 우주의 신비로운 대상이며, 그 안에는 끊임없이 진화하는 별들과 이례적인 천문학적 현상들이 숨어 있습니다.</p>
<div class="btn">
<a href="#">자세히 보기</a>
<a href="#">알아보기</a>
</div>
</div>
<div class="slider__arrow">
<a href="#"><span class="blind">이전 이미지</span></a>
<a href="#"><span class="blind">다음 이미지</span></a>
</div>
<div class="slider__dot">
<a href="#" class="dot active"><span class="blind">첫번째 이미지</span></a>
<a href="#" class="dot"><span class="blind">두번째 이미지</span></a>
<a href="#" class="dot"><span class="blind">세번째 이미지</span></a>
<a href="#" class="dot"><span class="blind">네번째 이미지</span></a>
<a href="#" class="dot"><span class="blind">다섯째 이미지</span></a>
<a href="#" class="play"><span class="blind">play</span></a>
<a href="#" class="stop"><span class="blind">stop</span></a>
</div>
</div>
</div>
</section>
<!--//sliderType -->
슬라이드 유형
: https://fitalux.tistory.com/41
[2023 사이트 프로젝트] 슬라이드 유형
슬라이드 유형 사이트 완성 화면 https://fitalux.github.io/web2023/site/sliderType/sliderType01.html 코드 보기 / CSS /* slider__wrap */ .slider__inner .slider { height: 600px; background-image: url(../asset/img/sliderType01_01.jpg); backgrou
fitalux.tistory.com
코드 보기 / HTML - body / imageType
<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 -->
이미지 유형
: https://fitalux.tistory.com/37
[2023 사이트 프로젝트] 이미지 유형
이미지 유형 사이트 완성화면 코드 보기 / CSS /* reset */ * { margin: 0; padding: 0; } a { text-decoration: none; color:#000; } h1,h2,h3,h4,h5,h6 { font-weight: normal; } img { vertical-align: top; width: 100%; } .mt10 {margin-top: 10px !impo
fitalux.tistory.com
코드 보기 / HTML - body / img-textType
<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 -->
이미지/텍스트 유형
: https://fitalux.tistory.com/40
[2023 사이트 프로젝트] 이미지/텍스트 유형
이미지 유형 사이트 완성 화면 코드 보기 / CSS /* reset */ * { margin: 0; padding: 0; } a { text-decoration: none; color:#000; } h1,h2,h3,h4,h5,h6 { font-weight: normal; } img { vertical-align: top; width: 100%; } .mt10 {margin-top: 10px !imp
fitalux.tistory.com
코드 보기 / HTML - body / cardType
<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 -->
카드 유형
: https://fitalux.tistory.com/33
[2023 사이트 프로젝트] 카드 유형
카드 유형 사이트 완성화면 카드 유형 사이트 - 코드 notice About the Milky way 명칭 및 어원 우리 은하의 명칭은 “Milky Way(밀키 웨이)”입니다. 그러나 밀키 웨이는 우리 은하 뿐 아니라 은하수 자체
fitalux.tistory.com
코드 보기 / HTML - body / bannerType
<section id="bannerType" class="banner__wrap section nexon center">
<h2 class="blind">배너</h2>
<div class="banner__inner container">
<h3>은하수 관측</h3>
<p>우리나라에서도 도심에서 떨어진 산이나 산골 지역에서라면 은하수를 관측할 수 있습니다.<br> 하단 링크를 통해 자세히 알아볼 수 있습니다.</p>
<a href="https://www.insight.co.kr/news/123352">https://www.insight.co.kr/news/123352</a>
</div>
</section>
<!--//bannerType -->
** CSS **
.banner__wrap {
background-image: url(../img/bannerType01.jpg);
top: 0;
left: 0;
width: 100%;
box-sizing: border-box;
color: #fff;
}
.banner__inner h3 {
font-size: 50px;
line-height: 1.5;
font-weight: bold;
margin-bottom: 40px;
}
.banner__inner p {
font-size: 18px;
line-height: 1.5;
font-weight: 700;
margin-bottom: 80px;
}
.banner__inner a {
color: #fff;
font-weight: 700;
}
/* 미디어쿼리 */
@media (max-width: 960px) {
.banner__inner h3 {
font-size: 40px;
}
}
@media (max-width: 600px) {
.banner__inner h3 {
font-size: 30px;
}
.banner__inner p {
margin-bottom: 50px;
}
}
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 -->
텍스트 유형
: https://fitalux.tistory.com/45
[2023 사이트 프로젝트] 텍스트 유형
텍스트 유형 사이트 완성 화면 코드 보기 / CSS /* reset */ * { margin: 0; padding: 0; } a { text-decoration: none; color:#000; } h1,h2,h3,h4,h5,h6 { font-weight: normal; } img { vertical-align: top; width: 100%; } .mt10 {margin-top: 10px !imp
fitalux.tistory.com
코드 보기 / HTML - body / footerType
<footer id="footerType" class="footer__wrap section nexon">
<div class="container">
<h2 class="blind">footer</h2>
<div class="footer__inner">
<div class="footer__menu">
<div>
<h3>은하수 관련 정보</h3>
<ul>
<li><a href="#">은하수 소개</a></li>
<li><a href="#">은하수 어원</a></li>
<li><a href="#">우리은하 형태</a></li>
<li><a href="#">우리 은하 크기</a></li>
</ul>
</div>
<div>
<h3>은하수의 종류</h3>
<ul>
<li><a href="#">나선형 은하</a></li>
<li><a href="#">타원형 은하</a></li>
<li><a href="#">불규칙 은하</a></li>
</ul>
</div>
<div>
<h3>은하수의 구조</h3>
<ul>
<li><a href="#">은하 헤일로</a></li>
<li><a href="#">은하의 중심</a></li>
<li><a href="#">블랙홀</a></li>
<li><a href="#">나선 팔</a></li>
</ul>
</div>
<div>
<h3>국부 은하군</h3>
<ul>
<li><a href="#">안드로메다 은하</a></li>
<li><a href="#">우리 은하</a></li>
<li><a href="#">삼각형자리 은하</a></li>
<li><a href="#">대마젤란 은하</a></li>
<li><a href="#">바너드 은하</a></li>
</ul>
</div>
<div>
<h3>은하수의 색</h3>
<ul>
<li><a href="#">청색(靑色)</a></li>
<li><a href="#">적색(赤色)</a></li>
<li><a href="#">자색(紫色)</a></li>
<li><a href="#">황색(黃色)</a></li>
<li><a href="#"> 백색(白色)</a></li>
</ul>
</div>
<div>
<h3>위성 은하</h3>
<ul>
<li><a href="#">큰개자리 왜소은하</a></li>
<li><a href="#">궁수자리 왜소타원은하</a></li>
<li><a href="#">작은곰자리 왜소은하</a></li>
<li><a href="#">사자자리 왜소은하</a></li>
<li><a href="#">목동자리 왜소은하</a></li>
</ul>
</div>
</div>
<address class="footer__right">
2023 Byun Woo Hyun 은하수 사이트 Portfolio is Power <br>All Right Reserved
</address>
</div>
</div>
</footer>
<!-- footerType -->
푸터 유형
: https://fitalux.tistory.com/50
[2023 사이트 프로젝트] 푸터(footer) 유형
완성 화면 푸터 유형 사이트 코드 보기 / HTML footer 은하수 관련 정보 은하수 소개 은하수 어원 우리은하 형태 우리 은하 크기 은하수의 종류 나선형 은하 타원형 은하 불규칙 은하 은하수의 구조
fitalux.tistory.com