<a href = “이동할 경로” > 내용 </a> :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href = "index.css" rel = stylesheet>
</head>
<body>
<div id = "wrap"> <!-- 웹 전체 구역 -->
<div id = "header"><!-- 헤더 -->
<div class = "logo_img"><!-- 로고 -->
<img alt ="로고" src = "../img/img3.png"> <!-- 로고 이미지 -->
</div>
<div class ="menu"> <!-- 메뉴 목록 -->
<div class = "top_menu"> <!-- 상위 메뉴 -->
<a href = "#">로그인</a> |
<a href = "#">회원 가입</a> |
<a href = "#">공지사항</a>
</div>
<ul class = "main_menu"> <!-- 본 메뉴[ul도 block!] -->
<li><a href = "#">사진이론</a></li>
<li><a href = "#">사진구도</a></li>
<li><a href = "#">사진작가</a></li>
<li><a href = "#">갤러리1</a></li>
<li><a href = "#">갤러리2</a></li>
</ul>
</div>
</div>
<img id = "main_img"> <!-- 대표이미지 -->
<div id = "content"> <!-- 본문 -->
<div id = "side_bar"> <!-- 왼쪽 메뉴 ; 사이드 바 -->
<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 id = "main_contents">
<h3>카메라 동작 원리</h3>
<p> DSLR 카메라에서 DSLR은 “Digital Single Reflex”의 약어로써 우리말로는 디지털 일안 반사식 카메라을 의미합니다.
DSLR은 디지털 카메라로써 카메라 내부에 들어온 빛이 상단의 펜타프리즘을 통하여
뷰파인더에 맺히게 되어 셔터를 누르기 전에 뷰 파인더를 통하여 피사체를 확인할 수 있게 됩니다.</p>
<img alt ="DSLR카메라" src = "../img/img1.png">
<p>[그림 1]은 DSLR 카메라에서 셔터를 누르기 전의 상태를 보여주는데 렌즈를 통해 들어오는
빛은 카메라 내부에서 다음과 같은 과정을 거치게 됩니다.<br/>
<ul>
<li>① 빛이 카메라 렌즈를 통과합니다.</li>
<li>② 빛이 반사 거울에 반사되어 위쪽으로 향합니다.</li>
<li>③ 빛이 펜타프리즘 거울에 반사되어 뷰파인더로 향합니다.</li>
<li>④ 들어온 빛에 의해 뷰파인터들 통하여 피사체를 볼 수 있습니다.</li>
</ul>
</div>
</div>
<div id = "footer"> <!-- 푸터 -->
<div id = "footer_box">
<div class = "ft_logo"> <!-- 하단 로고 -->
<img alt = "하단 로고" src = "../img/img2.png">
</div>
<ul> <!-- 하단 정보 -->
<li> 경기도 안산시 한대앞역 1234 우 : 123-1234 </li>
<li> TEL : 031-123-1234 Email : [email protected] </li>
<li> COPYRIGHT (c) 이젠 ALL RIGHTS RESERVED </li>
</ul>
</div>
</div>
</div>
</body>
</html>
@charset "UTF-8";
/*
웹 폰트 : 눈누 사이트 참고
1. 기본 베이스 폰트 : 맑은 고딕, 굴림
2. 강조 폰트 : 외부 폰트 가져오기 [@font-face]
*/
@font-face {
font-family: 'KyoboHandwriting2021sjy';
src: url('<https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/KyoboHandwriting2021sjy.woff2>') format('woff2');
font-weight: normal;
font-style: normal;
}
/*확인차 넣음 - 나중에 삭제해야함!*/
/* *{
border : 1px solid grey;
} */
/*--------------공통---------------*/
a{
color : black; /*폰트 색상 */
text-decoration: none; /*밑줄 제거*/
}
li{
list-style-type: none; /*글머리 제거*/
}
ul{
padding : 0px;
}
#header{
width : 1200px; /*가로 길이*/
height : 100px; /*세로 길이*/
margin : 0 auto; /*가운데 정렬*/
display : flex; /*하위 요소 가로 배치*/
justify-content: space-between; /*균등 배치[왼/오 여백X]*/
}
/* li 가로 배치 -> 자동적으로 글머리 제거됨 */
.main_menu li{
display : inline-block;
margin-left: 80px; /*li 끼리의 사이 여백*/
font-family: "KyoboHandwriting2021sjy"; /*pc에 설치된 폰트만 가능*/
font-size: 16pt;
}
/*상단 메뉴*/
.top_menu{
text-align: right; /*오른쪽 정렬*/
margin-top: 20px; /* 바깥 위 여백*/
}
#content{
width :1200px;
margin : 0 auto;
display : flex; /*하위 요소 가로 배치*/
justify-content: space-between; /*양쪽 균등 배치*/
}
/*대표 이미지*/
#main_img{
/* 배경이미지*/
background-image : url("../img/img4.png");
width : 100% ;
height : 250px;
/* 배경이미지 자동 채우기 제거 */
background-repeat: no-repeat;
/*배경 위치*/
background-position: center;
margin : 20px 0px;
}
#side_bar{
width : 250px;
/* height : 650px; */
}
#main_contents{
width : 900px;
/* height : 650px; */
}
/*사이드바 제목*/
#side_bar h3{
font-size : 20px;
background-color: #516E7F; /* color 1. RGB 2. HEX 3. KEYWORD*/
color : #54BAA3;
padding : 20px 7px; /*안쪽 여백*/
}
/*사이드바 목록*/
#side_bar li{
list-style-type: none; /*글머리 제거*/
border-bottom: dotted 1px #eeeeee ; /*아래 테두리*/
padding : 10px;
}
#side_bar ul{
padding : 0px; /*기본 padding 값 제거*/
}
/*메인 본문*/
#main_contents h3{
font-size: 20px;
border-bottom: solid 1px #eeeeee;
padding : 15px;
}
/* 푸터 */
#footer{
background-color: #2C2A29;
margin-top: 50px;
}
#footer_box{
width : 1200px;
margin : 0 auto;
display: flex;
justify-content: space-between;
padding : 20px;
}
#footer_box li{
color : white;
}