📃 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
📃 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
📃 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
IT FullStack 강사