- img
- header
- nav
- section
- main
- footer
- article
- aside
- ctrl+b
- alt+l+o
- ctrl+/
1) img
img-이미지를 불러온다.
src 부분에 이미지 파일의 경로를 찾아 넣어야 한다.
./ : 현재 폴더
../ : 상위 폴더
/ : 최상위 폴더
<img src="./images/cat0.jpg" alt="">
<img src="images/cat1.jpg" alt="고양이" title="고양이 설명">
<img src="images/cat2.jpg" alt="대체 텍스트의 타이틀만" title="나머지 세부 내용">
<img src="images/cat0.jpg" width="300" alt="">
<img src="images/cat0.jpg" width="300" height="250" alt="">
width : 너비
height : 높이
둘 다 px 단위 사용
2) header, nav, section, main, footer
header : 사이트 상단 머리 부분 주로 로고, 메뉴, 로그인, 회원가입 등
nav : 중요 메뉴
section : 주제가 동일한 페이지 또는 컨텐츠 영역 ( h1~h6 제목이 반드시 있어야 한다.)
main : 실제 컨텐츠 영역 (본문)
footer : 하단, 하단 로고, 패밀리 사이트, 정책, 저작권 등
<div>
<header>
로고
주요메뉴
<nav>
메뉴
</nav>
탑메뉴
전체메뉴
</header>
<!-- //header -->
<section>
<h2>광고영역</h2>
<!-- section에는 제목 필수 -->
</section>
<!-- //visual -->
<main>
<section>
<h2>같은 컨텐츠 묶음</h2>
</section>
<!-- //경제 -->
<section>
<h2>같은 컨텐츠 묶음</h2>
</section>
<!-- //스포츠 -->
</main>
<!-- 실제 본문 내용 -->
<footer>
저작권
패밀리 사이트
정책
</footer>
</div>
3) article, aside
article : 독립된 작은 컨텐츠
aside : 컨텐츠 외에 나머지 영역(하단)
4) 연습
https://www.s1campus.co.kr:1443/main/index
<body>
<div>
<header>
<h1>
<a href="#">
<img src="https://www.s1campus.co.kr:1443/comm/images/header/logo_ko.png" alt="에스원인재개발원">
</a>
</h1>
<ul>
<li><a href="#">ENG</a></li>
<li><a href="#">고객지원</a></li>
</ul>
<nav>
<!-- ul>li*4>a[href="#"] -->
<ul>
<li><a href="#">인재개발원 소개</a></li>
<ul>
<li><a href="#">인사말</a></li>
<li><a href="#">오시는 길</a></li>
<li><a href="#">새 소식</a></li>
</ul>
<li><a href="#">시설 안내</a></li>
<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>
<li><a href="#">프로그램 안내</a></li>
<ul>
<li><a href="#">챌린지 코스</a></li>
<li><a href="#">에스원 바이크 스쿨</a></li>
<li><a href="#">블루에셋 기술교육센터</a></li>
</ul>
<li><a href="#">예약 문의</a></li>
<ul>
<li><a href="#">시설 문의</a></li>
<li><a href="#">프로그램 문의</a></li>
<li><a href="#">예약 조회</a></li>
<li><a href="#">간편 견적</a></li>
</ul>
</ul>
</nav>
<ul>
<li><a href="#">수료증 발급</a></li>
<li><a href="#">내방객 등록</a></li>
</ul>
</header>
<!-- //header -->
<section>
<h2>에스원 인 재 개 발 원</h2>
</section>
<!-- //visual -->
<main>
<section>
<h2>자연과 함께하는 편안한 공간</h2>
</section>
<!-- //content1 -->
<section>
<article><img src="https://www.s1campus.co.kr:1443/comm/images/main/experience_img1.jpg"
alt="Teamwork & Confidence"></article>
<h2>Teamwork & Confidence</h2>
<!-- &는 &로 사용 -->
</section>
<!-- //content2 -->
<section>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
<article>
<h2>더 나은 내일을 위해</h2>
</article>
</section>
<!-- //content3 -->
</main>
<!-- //본문 -->
<footer>
<!-- 옆으로 나열은 ul X -->
<p>
<a href="#">고객지원</a>
<a href="#">개인정보 처리방침</a>
<a href="#">이메일 무단수집거부</a>
<a href="#">사이트맵</a>
<a href="#">오시는 길</a>
</p>
<p>
충청남도 천안시 동남구 북면 양곡1길 262 TEL : 041-529-1114
</p>
<p>
COPYRIGHT S-1 CO., LTD. ALL RIGHTS RESERVED.
</p>
<!-- 옆으로 그룹 처리 -->
<div>
<div>
패밀리사이트
</div>
<p>
<a href="#"><img src="https://www.s1campus.co.kr:1443/comm/images/footer/footer_banner1.png"
alt=""></a>
<a href="#"><img src="https://www.s1campus.co.kr:1443/comm/images/footer/footer_banner2.png"
alt=""></a>
<a href="#"><img src="https://www.s1campus.co.kr:1443/comm/images/footer/footer_logo_ko.png"
alt=""></a>
</p>
</div>
</footer>
<!-- //footer -->
</div>
<!-- 전체 -->
<pre>
</pre>
</body>
5) 단축키
alt+l+o - 라이브 연결
ctrl+b - 탐색기 보기/안 보기
ctrl+/ - 주석
