퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
제대로 배워보는 html과 css, 그리고 웹표준 3.각종 html요소 알아보기
3.1 문자 실제 참조와 수치 문자 참조 적용
xhtml은 수치문자 참조를 쓰는 게 권장 사항이다. 각각 문자 실제 참조, 수치 문자 참조형.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>문자 참조</title>
</head>
<body>
<h1>문자 참조 예제</h1>
<p><Lorem ipsum dolor> sit amet, consectetur adipisicing elit. Rem pariatur maxime dolorem commodi, iste, totam quam quisquam voluptas reprehenderit tempore corrupti vitae eaque modi architecto alias obcaecati reiciendis. Impedit, laborum?</p>
<p>copyright © ©</p>
</body>
</html>
3.2 구문을 강조하거나 하이라이팅 지정하기
html5.clearboth.org/spec
위 사이트를 참조해도 좋다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>strong, em, mark</title>
</head>
<body>
<h1>strong, em, mark</h1>
<!-- emphasis, strong importance, mark 라는 의미의 태그들-->
<p>우리집 화단에서 <em>가장 이쁜 꽃은 장미다.</em></p>
<!-- 약간 주관적인 강조 -->
<p>저기 있는 웅덩이는 깊어서 <strong>위험하므로</strong> 들어가지 마시오.</p>
<!-- 좀 더 객관적인 강조 -->
<p><mark>Lorem ipsum dolor sit amet, </mark>consectetur adipisicing elit. Quisquam animi ad dolorum, dicta earum ea delectus hic similique velit obcaecati, sed ipsum impedit eius explicabo aliquid aut architecto? Fuga, eum!</p>
<!-- 다른 부분과 관계가 있을 때 주위를 환기하고 싶을 때 -->
</body>
</html>
3.3 단의어 정의와 약어, 작품의 제목 표현
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dfn, abbr, cite</title>
<style>
p, span {background: lime;}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<!-- block tag -->
<span> Lorem ipsum dolor sit amet.</span>
<span> Lorem ipsum dolor sit amet.</span>
<span> Lorem ipsum dolor sit amet.</span>
<!-- inline tag -->
</body>
</html>
위는 블록 태그와 인라인 태그의 차이점
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dfn, abbr, cite</title>
</head>
<body>
<p><dfn title="웹 문서를 만드는 프로그래밍 언어의 한 종류">HTML</dfn></p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dfn, abbr, cite</title>
</head>
<body>
<p><dfn title="웹 문서를 만드는 프로그래밍 언어의 한 종류">HTML</dfn></p>
<!-- 단어의 뜻-->
<p>월드 와이드 웹 컨소시엄(<abbr title="World Wide Web Consortium">W3C</abbr>)</p>
<!-- 축약어에 대한 설명 -->
<p> <cite>시차(We are)</cite> 우원재</p>
<!-- 작품의 제목 -->
</body>
</html>
<small>태그는 저작권, 부가적인 설명 등을 덧붙일 때 쓰이는 태그이다.(화면에 조금 작게 나온다)
3.4 루비 주석과 시간의 표현
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ruby, time</title>
</head>
<body>
<!-- 루비 주석은 글자 위에 장식을 표현하고 싶을 때, 설명을 쓰고 싶을 때, 주로 일본어 등 언어에 대한 추가 설명을 덧붙일 때 -->
<h1><ruby>家和萬事成<rt>가화만사성</rt></ruby></h1>
<!-- rt를 표현하지 못하는 브라우저는 rp 태그를 사용하기도 했다 -->
<h1><ruby>
家<rt>가</rt>
和<rt>화</rt>
萬<rt>만</rt>
事<rt>사</rt>
成<rt>성</rt>
</ruby>
</h1>
<p>
<time datetime="2018-09-11">오늘</time>은 친구 생일이라서 일찍 들어가 봐야 합니다.
</p>
<p>
논문 발표일은 <time datetime="2017-09-11T09:20">2017년 9월 11일</time>입니다.
</p>
</body>
</html>
3.5 제목, 문단, 연락처, 인용문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>h1~h6, p, address, blockquote, hr, pre</title>
</head>
<body>
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>
<hr/>
<!-- 이전과 다음 내용을 구분하는 태그 -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil fugiat deleniti corporis, nemo, vel perferendis reiciendis magnam excepturi voluptates dolorem id earum asperiores voluptatem animi dicta eaque expedita aspernatur ullam.</p>
<!-- p는 단락 -->
<hr/>
<address>대구광역시 동구 첨단로 53</address>
<hr/>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam sunt modi natus nisi autem, quae nesciunt nobis ab repellendus enim.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam sunt modi natus nisi autem, quae nesciunt nobis ab repellendus enim.</p>
<footer>출처 : <cite><a href="http://naver.com">웹 접근성 연구소</a></cite></footer>
</blockquote>
<!-- blockquote는 인용문을 나타낼 때, block 태그가 들어갈 수 있음. address나 h 태그 안에는 p가 들어갈 수 없으며 p안에도 다른 p가 들어갈 수 없다 -->
<!-- 예전에는 cite 속성으로 인용문에 대한 출처를 썼다, title 속성으로 주제가 되는 문장을 넣기도 했다 -->
<!-- html5가 되며 조금 다른 방식을 쓰기도 한다. footer태그 -->
<pre>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati dolore, cum incidunt architecto,
aliquam quisquam eius alias magnam. Beatae similique,
reiciendis fuga odio veniam suscipit qui. Aspernatur perferendis odio consectetur.
</pre>
<!-- 코드를 그대로 보여줄 때, 입력한 그대로 출력할 때-->
</body>
</html>
3.6 목록 작성하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ul, ol, li, dl, dt, dd</title>
</head>
<body>
<!-- ul의 자식으론 li만 와야 하지만 li 태그 안엔 다른 태그가 있어도 상관없다 -->
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, cum.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit iure, a!</li>
</ul>
<ol type="i">
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, cum.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit iure, a!</li>
</ol>
<!-- i, a, A, 1 -->
<hr>
<ul>
<li><a href="#">menu1</a>
<ul>
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu2</a></li>
<li><a href="#">submenu3</a></li>
<li><a href="#">submenu4</a></li>
</ul>
</li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
</ul>
<hr>
<!-- dt 태그 안에는 inline 태그만 -->
<dl>
<dt>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, animi?</dt>
<dd>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit natus a exercitationem atque earum quae, officia nam ea quod amet eius voluptatem aliquam sequi architecto, repellat esse eos voluptas dicta.
</p>
</dd>
<dt>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, animi?</dt>
<dd>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit natus a exercitationem atque earum quae, officia nam ea quod amet eius voluptatem aliquam sequi architecto, repellat esse eos voluptas dicta.
</p>
</dd>
</dl>
<!-- dl은 정의형 목록 -->
<dl>
<dt>Lorem ipsum dolor.</dt>
<dd>Lorem ipsum dolor sit amet.</dd>
<dd>Lorem ipsum dolor.</dd>
</dl>
<!-- dl 안에는 dt나 dd만 있으면 안된다. dt가 여러 개인데 dd는 dt보다 적으면 좋지 않다. -->
</body>
</html>
3.7 테이블 작성하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table</title>
</head>
<body>
<table border>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
</table>
<!-- th의 스코프 = col | row | colgroup | rowgroup -->
<table border width = "100%">
<caption>table title</caption> //표의 제목
<colgroup>
<col width="200">
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th scope="col">table header</th>
<th scope="col">table header</th>
<th scope="col">table header</th>
<th scope="col">table header</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">table data cell</td>
<td>table data cell</td>
<td>table data cell</td>
<td>table data cell</td>
</tr>
<tr>
<td>table data cell</td>
<td>table data cell</td>
<td>table data cell</td>
</tr>
<tr>
<td>table data cell</td>
<td>table data cell</td>
<td>table data cell</td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="row"> result</th>
<td colspan="3">...</td>
</tr>
</tbody>
</table>
</body>
</html>
<!-- 표를 쓸 때 caption과 span을 쓰는 게 좋다. -->
3.8 a요소 알아보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>anchore</h1>
<ul>
<li><a href="http://daum.net">daum</a></li>
<li><a href="http://daum.net" title="다음으로 이동">go daum</a></li>
<li><a href="http://daum.net" target="_blank">daum 새 창(새 탭)</a></li>
<li><a href="img/photo.jpg" tabindex="2" download>포도이미지</a></li>
<li><a href="mailto:webazit@naver.com">webazit@naver.com</a></li>
<li><a href="01_char.html">문자참조</a></li>
</ul>
<!--tabindex, accesskey-->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing, elit. Molestias iste nesciunt, asperiores atque ratione saepe dolorum, eaque. Fugit id saepe, inventore nostrum incidunt ipsam odit rem ad, obcaecati error iste? <a href="http://wah.or.kr" accesskey="w" tabindex="2">웹접근성연구소</a></p>
<!-- 크롬은 Alt+w, 익스플로러는 Alt+W + Enter -->
<!-- tabindex : a, input, button, select, textarea,... -->
</body>
</html>
3.9 img 요소 알아보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>img</h1>
<p><img src="img/board.jpg" alt="자동차 계기판"></p>
<!--alt 에 이미지의 설명을 구체적으로 다 넣는다 -->
</body>
</html>
desc 태그로 다른 문서에 이미지의 긴 설명을 넣어줄 수도 있고,
img를 쓰지 않고 div 태그를 이용해 글을 적은 뒤 그 위에 그림이 표현되도록 하는 경우도 있다.
3.10. 이미지맵 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>이미지맵</h1>
<p>
<img src="img/map.png" usemap="#map" alt="">
<map name="map" id="map">
<area shape="rect" coords="3, 71, 230, 150" href="http://www.naver.com" alt="네이버로">
<area shape="circle" coords="354, 124, 100" href="http://www.daum.net" alt="다음으로">
<area shape="poly" coords="477,62,635,79,559,183" href="http://nate.com" alt="네이트로">
</map>
</p>
</body>
</html>
3.11 아이프레임 알아보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<iframe src="img/board.jpg" width="800" height="600"frameborder="1"></iframe>
<iframe src="http://google.com" sandbox="sandbox" width="800" height="600" frameborder="1" title="다음으로 이동, 인라인 프레임"></iframe>
<!-- sandbox 태그를 통해 스크립트가 실행되지 않도록 할 수 있다, 보안 up. 일부 사이트는 보안을 위해 iframe 적용을 막아놓았다 -->
</body>
</html>
3.12 폼 컨트롤 알아보기
<form action="go.php" method="get">
아이디 <input type="text" name="field">
<input type="submit" value="전송">
<!-- submit을 누르면 form tag에 있는 action에 연결된 동됨 -->
</form><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="#" method="post">
<fieldset>
<legend>fieldset legend</legend>
<p>
<label for="name">이름</label>
<input type="text" id="name" name="name" value="">
<!-- label의 for과 control의 id값을 연결해주면 매칭이 된다 -->
</p>
<p>
<label for="idname">아이디</label>
<input type="text" id="idname" name="idname" value="">
<input type="button" value="아이디 중복 확인">
</p>
<p>
<label for="userpass">비밀번호</label>
<input type="password" id="userpass" name="userpass" value="">
</p>
<p>
<label for="usercomm">의견</label>
<textarea name="usercomm" id="usercomm" cols="30" rows="10"></textarea>
</p>
<p>
<label for="usersel">지역선택</label>
<select name="usersel" id="usersel">
<option value="">서울</option>
<option value="">부산</option>
<option value="">경기</option>
<option value="">인천</option>
<option value="">경남</option>
</select>
</p>
<p>
성별
<label for="male">남자</label>
<input type="radio" id="male" name="choice" value="male">
<label for="female">여자</label>
<input type="radio" id="female" name="choice" value="female">
</p>
<!-- name 값이 같아야 하나만 선택할 수 있음, submit 시 전송되는 건 value -->
<!--
<p>
<span>취미는?</span>
<label for="trip">여행</label>
<input type="checkbox" id="trip" name="trip" value="trip">
<label for="read">독서</label>
<input type="checkbox" id="read" name="read" value="read">
<label for="movie">여행</label>
<input type="checkbox" id="movie" name="movie" value="movie">
</p>
아래처럼 for을 사용하는 방법 말고, label 안에 input 태그를 넣는 것도 한 방법이다.
-->
<p>
<span>취미는?</span>
<label>여행<input type="checkbox" name="trip" value="trip"></label>
<label>독서<input type="checkbox" name="read" value="read"></label>
<label>영화감상<input type="checkbox" name="movie" value="movie"></label>
</p>
</fieldset>
<p>
<input type="submit" value="전송">
<!-- <button type="reset" value="취소"> 도 가능 -->
<input type="reset" value="취소">
</p>
</form>
</body>
</html>
3.13 html5에서 추가된 폼 컨트롤과 속성들
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- form 태그에 novalidate 속성을 활성화하면 따로 검증하지 않는다. -->
<!-- disabled=disabled로 입력란을 비활성화시킬 수 있다-->
<form action="#" method="post">
<fieldset>
<legend>html5 form</legend>
<p>
<lable for="username">이름</lable>
<input type="text" id="username" name="username" value="" placeholder="이름을 입력하세요." autofocus="autofocus" autocomplete="off">
</p>
<p>
<label for="email">이메일</label>
<input type="email" id="usermail" name="usermail" value="" required="required">
</p>
<!-- email 형식으로 문법 검사를 자동으로 해 준다 -->
<p>
<label for="userurl">웹사이트</label>
<input type="url" id="userurl" name="userurl" value="">
</p>
<p>
<label for="order">주문수량</label>
<input type="number" id="order" name="order" min="1" max="20" value="3">
<span>개</span>
</p>
<p>
<label for="userrange">길이</label>
<input type="range" id="userrange" name="userrange value="" min="0" max="100" value="30" step="10">
</p>
<p>
<label for="userdate">제출일</label>
<input type="date" id="userdate" name="userdate" value="2020-09-09" min="2020-09-01" max="2020-09-30">
</p>
<p>
<label for="usercolor">색상선택</label>
<input type="color" id="usercolor" name="usercolor" value="#FF0000">
</p>
<p>
<label for="usertel">연락처</label>
<input type="tel" id="usertel" name="usertel" value="">
</p>
</fieldset>
<!-- 이런 특이한 input tag를 하면 해당 타입을 입력하기 편한 자판이 자동으로 뜬다 -->
<input type="submit" value="Send">
</form>
</body>
</html>
'개발 공부 > html & css' 카테고리의 다른 글
| 제대로 배워보는 html과 css, 그리고 웹표준 7. 테이블~8. 배치 스타일 (0) | 2020.09.11 |
|---|---|
| 제대로 배워보는 html과 css, 그리고 웹표준 5. 폰트~6. 배경 스타일 (0) | 2020.09.10 |
| 제대로 배워보는 html과 css, 그리고 웹표준 5.css기초 (0) | 2020.09.09 |
| 제대로 배워보는 html과 css, 그리고 웹표준 4. 웹페이지 코딩 실습 (0) | 2020.09.09 |
| (New) 퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준 1. 설치~2.html작성기초 (0) | 2020.07.09 |
