[HTML & CSS]
[HTML & CSS] 간단한 화면 만들어보기
북방바다코끼리표범
2023. 8. 14. 17:01
html 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Dream Jeju</title>
<link rel="stylesheet" href="./css/04_exam_structure_header.css" />
<link rel="stylesheet" href="./css/04_exam_structure_body.css" />
<link rel="stylesheet" href="./css/04_exam_structure_footer.css" />
<!-- TODO: 힌트 : margin, font-size, color, list-style-type:none -->
<!-- TODO: .contents { 중앙정렬; width: 1000px;} -->
<!-- TODO: 글과 이미지 배치 : 이미지(float 사용), 글은 float 사용않함 -->
<!-- TODO: main > section : margin-top: 60px; -->
<!-- TODO: .detail p 태그 (단락 글) : float 안씀, margin-bottom: 30px -->
<!-- TODO: .detail > img (이미지) : float:left; -->
</head>
<body>
<!-- container == page (1 페이지(전체 페이지)) -->
<div id="container">
<!-- TODO: header 시작 -->
<header>
<div id="logo">
<a href="#">
<h1>Dream Jeju</h1>
</a>
</div>
<nav>
<ul id="topMenu">
<li><a href="#">단체 여행</a></li>
<li><a href="#">맞춤 여행</a></li>
<li><a href="#">갤러리</a></li>
<li><a href="#">문의하기</a></li>
</ul>
</nav>
</header>
<!-- TODO: header 끝 -->
<!-- TODO: main(본문 , section 과 비슷) -->
<!-- TODO: 본문 시작 -->
<main class="contents">
<section id="headling">
<h2>몸과 마음이 치유되는 섬</h2>
<div class="detail">
<img src="img/healing.jpg" />
<b>
<!-- 소제목 -->
<p>쉼(Healing)의 공간으로 안내합니다</p>
</b>
<!-- 소본문 -->
<p>
탁 트인 바다, 시원한 바람에 몸을 맡기고 뚜벅뚜벅 오름을 오르고
올렛길을 걷다보면 온전히 나에게 집중할 수 있습니다.
</p>
</div>
<div class="schedule">
<!-- 소제목 -->
<h3>상세 일정</h3>
<!-- 본문 일정 -->
<ul>
<li>여행 기간 : 2박 3일</li>
<li>
여행 일정 : (여행 일정은 상담을 통해 결정 및 조정 가능합니다)
</li>
</ul>
</div>
</section>
<section id="activity">
<h2>다양한 액티비티가 기다리는 섬</h2>
<div class="detail">
<img src="img/activity.jpg" />
<b>
<p>모험과 스릴이 넘치는 레저의 천국으로 안내합니다.</p>
</b>
<p>둘러보기만 하는 여행을 하셨나요?</p>
<p>
하늘을 날며 시원한 바다를 내려다보는 패러글라이등과 투명한 물빛
속을 여행하는 스킨스쿠버... 아름다운 제주 해안도로를 씽씽
전동바이크나 전동킥보드로 달려보세요. 시원한 바다를 가까이에서
느낄 수 있는 요트 체험과 배낚시도 빼놓을 수 없겠죠?
</p>
</div>
</section>
</main>
<!-- TODO: 본문 끝 -->
<footer>
<div id="bottomMenu">
<ul>
<li><a href="#">회사 소개</a></li>
<li><a href="#">개인정보처리방침</a></li>
<li><a href="#">여행약관</a></li>
<li><a href="#">사이트맵</a></li>
</ul>
</div>
</footer>
</div>
</body>
</html>css 코드
/* 구글 웹폰트 import(외부 css 파일 가져오기의 뜻) */
@import url('https://fonts.googleapis.com/css2?family=Merienda:wght@700&display=swap');
/* 여백 초기화 */
* {
padding: 0;
margin: 0;
}
/* 점 없애기 */
ul {
list-style-type: none;
}
/* a 링크에 밑줄 없애기 */
a {
/* a 태그 밑줄 없애기 */
text-decoration: none;
}
/* 전체 페이지 디자인 */
#container {
/* 가로 */
width: 1200px;
/* 중앙정렬 */
margin: 0 auto;
}
/*************************************/
/* 헤더 영역 - 로고와 네비게이션 */
/*************************************/
header {
/* 가로 */
width: 100%;
/* 세로 */
height: 100px;
/* 배경색 */
background-color: #045;
}
/* 헤더(header) - 로고(#logo, 왼쪽) + 네비게이션(nav, 오른쪽) */
/* 로고(왼쪽) : 가로(250px) */
#logo {
/* 왼쪽 배치 */
float: left;
/* 가로 */
width: 250px;
/* 세로 */
height: 100px;
/* 글자 세로 중앙 정렬 : height 값 == line-height 값 */
line-height: 100px;
/* 안쪽여백 - 왼쪽 */
padding-left: 20px;
}
/* 구글 웹폰트 적용 : Merienda */
#logo h1 {
/* 구글 웹폰트 적용 */
font-family: 'Merienda', cursive;
/* 글자 크기 */
font-size: 40px;
/* 글자색 */
color: white;
/* 글자 굵기 : bold(키워드), 숫자도 가능 900까지 */
font-weight: 600;
}
/* 헤더 - 네비게이션(nav) : 오른쪽배치, 900px */
nav {
/* 오른쪽 배치 */
float: right;
/* 가로 */
width: 900px;
/* 세로 */
height: 100px;
/* 메뉴를 아래로 내리기 위해 안쪽 여백 추가 (위쪽) */
padding-top: 40px;
}
/* ul(#topMenu) > li : 세로 -> 가로배치 */
#topMenu > li {
/* 가로배치 */
display: inline-block;
}
/* #topMenu(ul) > li > a태그 */
#topMenu > li > a {
/* 글자 크기 */
font-size: 1.1em;
/* 글자색 */
color: white;
/* 글자 굵기 : bold(키워드), 숫자도 가능 100 ~ 900까지 */
font-weight: 600;
/* 안쪽 여백 : 축약식 */
/* padding : 상하 좌우 */
padding: 20px 60px;
}
/* 마우스가 위로 올라갔을때 디자인 적용 :hover */
#topMenu > li > a:hover {
/* 글자색 */
color: skyblue;
}
/* 본문 영역 */
.contents {
/* 가로 */
width: 1000px;
/* 중앙정렬 */
/* margin: 상하 auto */
margin: 50px auto;
}
/* section 별 위쪽 여백 */
main > section {
/* 바깥여백 - 위 */
margin-top: 60px;
}
/* 본문 - 글 */
.detail p {
/* 글자색 */
color: #222;
/* 바깥여백 - 아래 */
margin-bottom: 30px;
}
/* 본문 - 이미지 */
.detail > img {
/* 좌측 배치 */
float: left;
/* 바깥여백 - 오른쪽 */
margin-right: 50px;
/* 둥근 사각형 : 값이 클수록 원이 됨 */
border-radius: 20px;
}
/* 여백 들 추가 */
/* 본문 - 제목 */
main h2 {
/* 글자 크기 */
font-size: 1.5em;
/* 바깥여백 - 아래 */
margin-bottom: 40px;
}
/* div : 이미지(왼쪽) + 상세설명(글) */
main div {
/* 바깥여백 - 위쪽 */
margin-top: 20px;
}
/* main : 소제목 */
main h3 {
/* 글자 크기 */
font-size: 1.2em;
/* 바깥여백 - 아래 */
margin-bottom: 20px;
}
/* 기타 등등 */
/* main - 상세 일정 */
.schedule h4 {
/* 글자 크기 */
font-size: 1.2em;
}
/* main - 상세일정(li) */
.schedule ul li {
/* 바깥여백 - 아래 */
margin-bottom: 30px;
}
/* 푸터(꼬리말) 영역 */
footer {
/* 가로 */
width: 1200px;
/* 세로 */
height: 100px;
/* 외곽선 - 위 */
border-top: 2px solid #222;
/* 바깥 여백 - 위 */
margin-top: 50px;
}
/* 꼬리말 : li -> 세로 -> 가로 */
#bottomMenu ul li {
/* 가로배치 */
display: inline-block;
/* 안쪽 여백:(축약식) */
/* padding: 상하 좌우 */
padding: 5px 20px;
/* 외곽선 - 오른쪽 */
border-right: 1px solid #ddd;
}
#bottomMenu ul {
/* 바깥여백 - 위 */
margin-top: 15px;
/* 바깥여백 - 왼쪽 */
margin-left: 60px;
}
/* 꼬리말 - a태그 */
#bottomMenu ul li a {
/* 글자 크기 */
font-size: 15px;
/* 글자색 */
color: #666;
}