📃 1) 퀴즈
결과 화면 :
코딩 :
- html
<!-- 02_exam_company.html -->
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link rel="stylesheet" href="./css/02_exam_company.css" />
<!-- TODO: 힌트 -->
<!-- TODO: 전체 페이지(#page) : width: 995px; margin: 0 auto -->
<!-- TODO: header : width: 995px; height: 100px; -->
<!-- TODO: #logo : float:left; , #top : float:right -->
<!-- TODO: nav : width: 995px; -->
<!-- TODO: nav li : display: inline-block; width:150px -->
<!-- TODO: footer : width: 995px; -->
</head>
<body>
<div id="page">
<header>
<div id="logo">
<img src="./img/logo.png" />
</div>
<div id="top">로그인 | 회원가입 | 사이트 맵 | 회사소개</div>
</header>
<div class="clear"></div>
<!-- float 속성 해제 -->
<nav>
<ul>
<li><img src="./img/menu01.png" /></li>
<li><img src="./img/menu02.png" /></li>
<li><img src="./img/menu03.png" /></li>
<li><img src="./img/menu04.png" /></li>
<li><img src="./img/menu05.png" /></li>
<li><img src="./img/menu06.png" /></li>
</ul>
</nav>
<div class="clear"></div>
<!-- float 속성 해제 -->
<section>
<img src="./img/main_img.png"
width="600px" height="200px"
/>
</section>
<aside>
<ul>
<li><img src="./img/banner01.png" /></li>
<li><img src="./img/banner02.png" /></li>
</ul>
</aside>
<div class="clear"></div>
<!-- float 속성 해제 -->
<footer>
<div id="address">
<img src="./img/address.png" />
</div>
<div id="customer">
<img src="./img/customer.png" />
</div>
</footer>
<div class="clear"></div>
<!-- float 속성 해제 -->
</div>
<!-- 아이디 page의 끝 -->
</body>
</html>
- css
/* 문제 풀이 */
/* 여백 초기화 */
* {
padding: 0;
margin: 0;
}
/* 목록 점 없애기 */
li {
list-style-type: none;
}
/* 전체 페이지 */
#page {
/* 가로 */
width: 995px;
/* 중앙 정렬 */
margin: 0 auto;
/* 임시 */
/* background-color: beige; */
}
/* 머리말 디자인 */
header {
/* 가로 */
width: 995px;
/* 세로 */
height: 100px;
/* 외곽선 - 아래 */
border-bottom: 1px solid #cccccc;
/* 임시 */
/* background-color: aqua; */
}
/* 로고 디자인 : 왼쪽 배치 */
#logo {
/* 왼쪽 배치 */
float: left;
/* 임시 */
/* background-color: aquamarine; */
}
/* 소메뉴 디자인 : 오른쪽 배치 */
#top {
/* 오른쪽 배치 */
float: right;
/* 바깥여백 - 위쪽 */
margin-top: 30px;
/* 임시 */
/* background-color: blueviolet; */
}
/* 더미 div : float 영향 제거용 */
.clear {
/* float 영향 제거 */
clear: both;
}
/* 대메뉴 크기 */
nav {
/* 가로 */
width: 995px;
/* 세로 */
height: 70px;
/* 바깥여백 - 위쪽 */
margin-top: 10px;
}
/* 대메뉴(이미지들) 세로 -> 가로배치 */
/* inline-block : 가로로 배치하되 크기가 모자라면 줄바꿈이 됨 */
/* 세로 -> 가로배치 : display(inline-block), float:left */
nav li {
/* 가로배치 */
display: inline-block;
/* float:left; */
/* 가로 */
width: 150px;
}
/* 본문 : 좌측 */
section {
/* 왼쪽 배치 */
float: left;
/* 가로 */
width: 600px;
/* 임시 */
/* background-color: aqua; */
}
/* 사이드바 : 우측 */
aside {
/* 우측 배치 == 왼쪽 배치 */
float: right;
/* 가로 */
width: 370px;
/* 임시 */
/* background-color: blueviolet; */
}
/* 꼬리말 */
footer {
/* 가로 */
width: 995px;
/* 세로 */
height: 100px;
/* 바깥여백 - 위쪽 */
margin-top: 20px;
/* 외곽선 - 위쪽 */
border: 1px solid #cccccc;
/* 임시 */
/* background-color: blue; */
}
/* 꼬리말 - 주소 */
#address {
/* 왼쪽 배치 */
float: left;
/* 바깥여백 - 위 */
margin-top: 30px;
/* 바깥여백 - 왼쪽 */
margin-left: 50px;
/* 임시 */
/* background-color: aqua; */
}
/* 꼬리말 - 고객센터 */
#customer {
/* 오른쪽 배치 */
float: right;
/* 바깥여백 - 위 */
margin-top: 20px;
/* 바깥여백 - 오른쪽 */
margin-right: 80px;
/* 임시 */
/* background-color: blueviolet; */
}📃 2) 퀴즈
결과 화면 :
코딩 :
- html
<!-- 03_exam_photo_academy.html -->
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link rel="stylesheet" href="./css/03_exam_photo_academy.css">
<!-- TODO: 힌트 -->
<!-- TODO: 전체 페이지(header) : width: 1140px; height: 100px; -->
<!-- TODO: 큰 로고 이미지(#main_img) background-image: url("../img/main_img.png")
background-size: cover; background-position: center; height: 281px; -->
</head>
<body>
<header>
<!-- 로고 시작 : 왼쪽 -->
<div id="logo">
<img src="img/logo.png" />
</div>
<!-- 로고 끝 -->
<!-- 소메뉴 시작 : 오른쪽 -->
<nav id="menus">
<!-- 소소메뉴 #1 시작 -->
<div id="top_menu">로그인 | 회원가입 | 공지사항</div>
<!-- 소소메뉴 #1 끝 -->
<!-- 소소메뉴 #2 시작 , 세로 -> 가로배치(li) -->
<ul id="main_menu">
<li>사진이론</li>
<li>사진구도</li>
<li>사진작가</li>
<li>갤러리</li>
<li>커뮤니티</li>
</ul>
<!-- 소소메뉴 #2 끝 -->
</nav>
<!-- 소메뉴 끝 -->
</header>
<!-- 단축키 : 찾기/바꾸기 ctrl + f/r -->
<!-- 이미지 헤더 -->
<section id="main_img">
</section>
<!-- 본문( 소본문 + 사이드바 ) 시작 -->
<section id="contents">
<!-- 사이드바 시작 : 왼쪽 -->
<nav id="sub_menu">
<h3>사진이론</h3>
<ul>
<li>카메라 동작 원리</li>
<li>무조건 찍어보자!</li>
<li>피사체의 배경</li>
<li>조리개와 심도</li>
<li>카메라 촬영 모드</li>
</ul>
</nav>
<!-- 사이드바 끝 -->
<!-- 소본문 시작 : 오른쪽 -->
<div id="main_contents">
<h3>카메라 동작 원리 background-position: top center;</h3>
<p>
DSLR 카메라에서 DSLR은 “Digital Single Lens Reflex”의 약어로써
우리말로는 디지털 일안 반사식 카메라을 의미합니다. DSLR은 디지털
카메라로써 카메라 내부에 들어온 빛이 상단의 펜타프리즘을 통하여
뷰파인더에 맺히게 되어 셔터를 누르기 전에 뷰 파인더를 통하여 피사체를
확인할 수 있게 됩니다.
</p>
<div id="figure">
<img src="./img/dslr.png" />
</div>
<p>
[그림 1]은 DSLR 카메라에서 셔터를 누르기 전의 상태를 보여주는데 렌즈를
통해 들어오는 빛은 카메라 내부에서 다음과 같은 과정을 거치게 됩니다.
</p>
<ul>
<li>① 빛이 카메라 렌즈를 통과합니다.</li>
<li>② 빛이 반사 거울에 반사되어 위쪽으로 향합니다.</li>
<li>③ 빛이 펜타프리즘 거울에 반사되어 뷰파인더로 향합니다.</li>
<li>④ 들어온 빛에 의해 뷰파인터들 통하여 피사체를 볼 수 있습니다.</li>
</ul>
</div>
<!-- 소본문 끝 -->
</section>
<!-- 본문( 소본문 + 사이드바 ) 끝 -->
<!-- 더미 div : float 속성 해제 -->
<div class="clear"></div>
<!-- float 속성 해제 -->
<footer>
<!-- 전체 꼬리말 div 시작 -->
<div id="footer_box">
<!-- 꼬리말 로고 시작 -->
<div id="footer_logo">
<img src="img/footer_logo.png" />
</div>
<!-- 꼬리말 로고 끝 -->
<!-- 꼬리말 주소 시작 -->
<ul id="address">
<li>서울시 강남구 삼성동 1234 우:123-1234</li>
<li>TEL:031-123-1234 Email : email@domain.com</li>
<li>COPYRIGHT (C) 루바토 ALL RIGHTS RESERVED</li>
</ul>
<!-- 꼬리말 주소 끝 -->
</div>
<!-- 전체 꼬리말 div 끝 -->
</footer>
</body>
</html>- css
/* 문제 풀이 */
/* 여백 초기화 */
* {
padding: 0;
margin: 0;
}
/* 목록 점 없애기 */
li {
list-style-type: none;
}
/* 폰트 , 글자 크기, 색깔 */
body {
/* 폰트 스타일 */
font-family: Arial, Helvetica, sans-serif;
/* 글자 크기 */
font-size: 14px;
/* 글자색 */
color: #444444;
}
/* 머리말 디자인 */
header {
/* 전체 가로 크기 */
width: 1140px;
/* 세로 */
height: 100px;
/* 중앙 정렬 */
/* 사용법 : margin: 상/하 auto */
margin: 0 auto;
}
/* 머리말 - 로고 (왼쪽) */
#logo {
/* 왼쪽 배치 */
float: left;
/* 바깥여백 : 축약형 */
/* margin: 상 우 하 좌 */
margin: 20px 0 0 20px;
}
/* 머리말 - 소메뉴(오른쪽) */
#menus {
/* 오른쪽 배치 */
float: right;
}
/* 머리말 - 소메뉴 - 소소메뉴#1 */
#top_menu {
/* 글자 오른쪽 정렬 */
text-align: right;
/* 바깥여백 - 위 */
margin-top: 20px;
}
/* 머리말 - 소메뉴 - 소소메뉴#2 */
#main_menu {
/* 바깥여백 - 위 */
margin-top: 20px;
/* 글자 크기 */
font-size: 20px;
/* 글자색 */
color: black;
}
/* 소소메뉴#2 : 세로 -> 가로배치(li) */
#main_menu li {
/* 가로 배치 */
display: inline-block;
/* 바깥여백 - 왼쪽 */
margin-left: 80px;
}
/* 대메뉴 부분 : 큰 로고 이미지 */
#main_img {
/* 세로 */
height: 281px;
/* 배경이미지 넣기 */
background-image: url("../img/main_img.png");
/* 배경이미지 반복 중지 */
background-repeat: no-repeat;
/* 배경이미지 크기 */
/* TODO: background-size: cover(최대한 이미지를 늘려서 화면을 채움, 원본 훼손) */
background-size: cover;
/* 배경이미지 위치 지정 */
/* TODO: background-position: center(배경이미지가 중심에 위치하는 예약 키워드) */
background-position: center;
/* 바깥여백 - 위 */
margin-top: 20px;
}
/* 본문 (소본문(main_contents) + 사이드바(sub_menu)) : 1140px */
#contents {
/* 가로 */
width: 1140px;
/* 중앙 정렬 */
margin: 0 auto;
}
/* 본문 - 사이드바(왼쪽): 234px */
#sub_menu {
/* 왼쪽 배치 */
float: left;
/* 가로 */
width: 234px;
/* 바깥여백 - 위 */
margin-top: 25px;
}
/* 본문 - 사이드바(왼쪽) - li : 밑줄(점선) */
#sub_menu li {
/* 외곽선 - 아래 (점선) */
border-bottom: 1px dotted #cccccc;
/* 안쪽 여백 */
padding: 10px;
}
/* 본문 - 소본문(오른쪽) : 880px */
#main_contents {
/* 오른쪽 배치 */
float: right;
/* 가로 */
width: 880px;
/* 바깥여백 - 위 */
margin-top: 25px;
}
/* 더미 div : float 해제 */
.clear {
/* float 속성 해제 (위에 본문 사용된것) */
clear: both;
}
/* 꼬리말 : 로고(왼쪽) + 주소(오른쪽) */
#footer_box {
/* 가로 */
width: 1140px;
/* 중앙 정렬 */
/* margin: 상/하 auto */
margin: 0 auto;
}
/* 꼬리말 */
footer {
/* 세로 */
height: 150px;
/* 배경색 */
background-color: #2c2a29;
/* 바깥 여백 - 위 */
margin-top: 30px;
}
/* 꼬리말 - 로고(왼쪽) */
#footer_logo {
/* 왼쪽 배치 */
float: left;
/* 바깥여백 - 위 */
margin-top: 50px;
/* 바깥여백 - 왼쪽 */
margin-left: 30px;
}
/* 꼬리말 - 주소(오른쪽) */
#address {
/* 오른쪽 배치 */
float: right;
/* 바깥여백 - 위 */
margin-top: 50px;
/* 바깥여백 - 오른쪽 */
margin-right: 30px;
}
📃 3) 퀴즈
결과 화면 :
코딩 :
- 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, padding, font-size, color, border-top, border-right -->
<!-- TODO: footer { width: 1200px; height: 100px; } -->
<!-- TODO: #bottomMenu ul li { display: inline-block; } (세로 -> 가로배치)-->
</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 #1
/* 구글 웹폰트 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;
}
- css #2
/* 본문 영역 */
.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 - 상세 일정 */
/* TODO: .schedule h4 -> .schedule h3 */
.schedule h3 {
/* 글자 크기 */
font-size: 1.2em;
}
/* main - 상세일정(li) */
.schedule ul li {
/* 바깥여백 - 아래 */
/* TODO: 30px --> 20px 수정 */
margin-bottom: 20px;
}
- css #3
/* 푸터(꼬리말) 영역 */
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;
}
IT FullStack 강사