Template=>이미 기본구조가 다 만들어져 있는 문서
<태그명> 내용 </태그명>
시작태그 종료태그
1. html문서 구조 및 내용
<!doctype html><!-- html5 태그선언문 -->
<html lang="en">
<!-- 시작태그 -->
<head>
<!-- 현재 문서의 타이틀 제목, 한글처리부분 속성 -->
<meta charset="UTF-8">
<title>1. html문서 구조 및 내용.html</title>
</head>
<body>
<!-- 본문의 내용 -->
<h1>html5 문서의 특징</h1>
1. 태그내부에 또 다른 태그를 사용이 가능(중첩)이 가능하다.<br>
2. 태그는 대소문자 구분하지 않는다.<br>
3. 파일저장->~.htm or ~.html<br>
4. 태그내부에 속성이 존재-> 태그의 자세한 설정을 필요로할때 사용된다.<p>
5. html문서-> 이미지, 문자, 동영상, 음악파일<br>
6. <i>글자가 기울어진 모양</i><!-- <em> -->, <u>강조할 글자체는 밑줄</u>
<!-- font-size(글자크기), font-color(색깔), font-family(글꼴) -->
7. 글자의 모양, 크기, 색깔을 변경
</body>
</html><!-- 종료태그 -->
2. 이미지 불러오기
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<!-- http-equiv="refresh"(새로운 페이지로 이동할 수 있도록 새로고침하라는 옵션)
content="3(초단위);url=이동할 페이지 or 이동할 사이트 주소"
(페이지가 이동이 안되고 화면이 흰색(오타)
-->
<!-- <meta http-equiv="refresh" content="3;url=http://www.naver.com"> -->
<title>2.이미지,링크문자열.html</title>
</head>
<body>
<h2>이미지 불러오기</h2>
<!--
img태그 사용 1.src->불러올 이미지의 경로명 및 파일명
상대경로->현재폴더를 기준으로해서 다른 위치를 지정해주는 방법
. 상위폴더(..)
절대경로->c:\document(드라이브 표시)
픽셀(모니터에 출력하는 점수) 2.width,height(이미지의 크기) 3.border=>테두리, alt(툴팁)(X)
width,height를 생략(원래 이미지 그대로 불러올것)
그림의 설명(html5)->figure(이미지를 논리적으로 묶어줄때 사용), figcaption(이미지와 연결 설명)
-->
<figure>
<img src="../images/waiting.jpg" width="250" height="350" border="3" alt="">
<figcaption><mark>우체통(이미지에 대한 간단한 설명글)</mark></figcaption>
</figure>
<hr><!-- 선을 긋때 사용(선의 속성은 html5에서는 사용X) -->
<figure>
<img src="../images/Penguins.jpg" width="250" height="350">
</figure>
<hr>
<!-- 링크(a) href="이동하는 페이지 또는 사이트 주소 target="_blank" (새창)(브라우저탭이 추가)
#키워드명(main)(상단메뉴) <div id="main"></div>
-->
<a href="http://www.naver.com">네이버</a>
<a href="http://www.daum.net" target="_blank">다음</a><!-- 크롬 -->
<a href="#">문서 내부에서의 특정위치로 이동</a>
<hr>
<!-- mailto:메일보낼 이메일주소-->
공부하시다가 문의가 있으면 <a href="mailto:1@xxxxxx.com">저한테 메일</a> 보내주세요
</body>
</html>
3. 목록보기(ul,li)태그
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>3.목록보기(ul,li)태그.html</title>
</head>
<body>
<h1>목록보기 예제</h1>
<!--
ul(unorder list 순서없는 목록) type="disk"(디폴트) ,square(직사각형)
-->
<ul type="square"> 순서 없는 목록
<li>화면설계 및 화면구현</li>
<li>DB구현,SQL활용</li>
<li>Java</li>
<li>Jsp(Web)</li>
</ul>
<hr>
<ol type="A">순서 있는 목록
<!-- type="1"(디폴트 숫자로표시), 로마자 기호(i), A(대문자로 표시),a(소문자로표시) -->
<li>Ajax,,jQuery(화면디자인)</li>
<li>Bootstrap</li>
<li>Spring</li>
<li>React,Vue.js</li>
<li>프로젝트</li>
</ol>
</body>
</html>
4. semantic(1)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>4.semantic(1).html</title>
</head>
<body>
<!--
semantic->의미를 가진다.
1.header:사이트소개,메인 메뉴(상단메뉴),사이트 로고를 포함=>산악회 홍보 사이트
2.nav:사이트 메뉴(좌측),링크문자열과 연결
3.section:실제 문서 내용이 나오는 영역->소제목이 있는 단락의 구분(=논리적인 단위)
4.article=>실제적인 자세한 문서내용=>문서 내용이 많으면 여러개의 article로 구분
5.aside:블로그 형식
6.footer:작성자정보,저작권 정보
-->
<header>
<!-- 1.머리말 -->
<h1>산과 벗하는 산악회</h1>
<h3>주말 산행 뿐만아니라 주중 산행,무박 산행도 합니다.</h3>
</header><!-- 2.상단메뉴 -->
<nav>
<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>
</nav>
<section>
<!-- 소제목이 있는 단락의 구분(=논리적인 단위) -->
<header>
<h3>산행 예절 </h3>
</header>
<article>
<h4>인사</h4>
<p>인사를 할 때에는 너무 큰소리로 하지 말고 상대방이 똑똑히 들을 정도의 소리로 인사한다. 산쟁이 중에는 "수고 하십니다"란 인사를 싫어하는 사람이 많다.
오히려 그것 보단 "힘내세요" "조금만 가면 정상입니다" "좋은 산행 되세요"라고 인사가 적당하지 않은가 생각한다.
그리고 단체로 갈 땐 모든 사람이 인사를 하면 안된다 여러 명이 줄지어서 갈 땐 선두에 선 사람이 인사를 하고 뒷사람은 가볍게 목례정도만 하면 된다.</p>
<h4>추월을 해야 할땐 먼저 양해를 구하자.</h4>
<p>좁은 등산로에서 예고없이 추월을 한다면 배낭 같은 것이 부딪혀 서로 중심이 흐트러질 경우가 많다. 약한 사람은 튕겨 날 경우도 있다. 추월을 할 땐 미리 "먼저 가겠습니다"라고 하고
비켜주면 그때 "고맙습니다"라고 인사를 하고 추월을 하자.</p>
<h4><mark>올라오는 사람에게 양보를 하자.</mark></h4>
<p>산에서 많이 경험을 하였을 것이다. 내려 오는 사람보단 올라가는 사람이 시간이 촉박하다. 또 페이스 유지도 올라오는 사람이 유지하기가 어렵다. 단체일 경우에는 소수인 그룹이 양보한다.
</p>
</article>
</section>
</body>
</html>
5.semantic(시멘틱활용(2))
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>5.semantic(시멘틱활용(2)).html</title>
</head>
<body>
<header>
<h1>제주 올레</h1>
</header>
<section>
<!-- 코스 소개 -->
<h3>제주 올레 7코스</h3>
<p> 외돌개를 출발하여 법환포구를 경유해 월평포구까지 어어진 해안올레. 올레인들이 가장 아끼고
<mark>자연생태길</mark> 인<mark> '수봉로'</mark>를 만날 수 있다.
수봉로는 세 번째 코스 개척 시기인 2007년 12월, 올레지기인 '김수봉'님이 염소가 다니던 길에 직접 삽과 곡괭이만으로 계단과 길을 만들어서 사람이 걸어다닐 수 있도록 한 길이다. </p>
<strong>패스포트 스탬프 확인 장소</strong>
<p>
<b>시작</b> 외돌개 제주 올레 안내소<br>
<b>중간</b> 강정 올레 쉼터<br>
<b>종점</b> 월평 송이 슈퍼</p>
<p><b>난이도 : 상</b> 총 16.4km(4~5시간)<br>
수봉로는 언덕길이고 일강정 바당올레에서 서건도 사이 바윗길이 험한 편이다.</p>
</section>
<section>
<figure>
<img src="../images/road1.jpg">
<figcaption>수봉로 언덕을 넘자마다 다시 만나게 되는 바다</figcaption>
</figure>
<figure>
<img src="../images/road2.jpg">
<figcaption>외돌개 산책로에서 외돌개가 보인다.</figcaption>
</figure>
</section>
<footer>
<!-- 작가의 이메일,문서 작성 날짜
html5태그 time태그,이메일 주소표시(address)태그(이탤릭체표시)
-->
<p>이 문서는 <time datetime="2020-06-15" pubdate>2020년 6월 15일</time>에 작성되었습니다.
<address>test@daum.net</address>
</footer>
</body>
</html>
6.semantic(시멘틱활용(3))
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>6.semantic(시멘틱활용(3)).html</title>
</head>
<body>
<header>
<h1>제주 올레</h1>
</header>
<section>
<!-- section내부에 또 다른 여러개의 section태그가 나올 수가 있다. -->
<h3>1코스</h3>
<p>제주 올레에서 가장 먼저 열린 길. 오름과 바다가이어지는 '오름-바당 올레'다. 아담하고 예쁜 시흥 초등학교에서 출발해 사시사철 푸른 들을 지나 말미로읆과 알오름에 오르면, 성산 일출봉과 우도,
조각보를 펼쳐놓은 듯한 들판과 바다를 한눈에 볼 수 있다.</p>
<section>
<h4>패스포트 스탬프 확인 장소</h4>
<p>시작 시흥리 안내소</p>
<p>중간 금영 휴게소</p>
<p>종점 광치기 해안소</p>
</section>
<section>
<h4>난이도 : 중 </h4>
<p>총 15km(4~5시간)</p>
</section>
</section>
<!-- 2코드 -->
<section>
<h3>2코스</h3>
<p>성산 광치기 해변에서 출발하여 고성, 대수산봉, 혼인지를 지나 온평리 바닷가까지 이어지는 올레. 물빛 고운 바닷길부터 잔잔한 저수지를 낀 들길, 호젓한 산길까지 색다른 매력의 길들이 이어진다.
</p>
<section>
<h4>패스포트 스탬프 확인 장소</h4>
<p>시작 광치기 해안소</p>
<p>중간 성산 홍마트</p>
<p>종점 온평 혼인지 정보센터</p>
</section>
<section>
<h4>난이도 : 중</h4>
<p>총 17.2km(5~6시간)</p>
</section>
</section>
</body>
</html>
'KIC > HTML-CSS-JS' 카테고리의 다른 글
| [HTML/CSS/JS] DAY6 (0) | 2020.10.12 |
|---|---|
| [HTML/CSS/JS] DAY5 (0) | 2020.10.12 |
| [HTML/CSS/JS] DAY4 (0) | 2020.10.12 |
| [HTML/CSS/JS] DAY3 (0) | 2020.10.12 |
| [HTML/CSS/JS] DAY2 (0) | 2020.10.12 |