1.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>다양한 태그들</title>
</head>
<body>
<h1>h1태그입니다.</h1>
<h2>h2태그입니다.</h2>
<h1>h3태그입니다.</h1>
<h2>h4태그입니다.</h2>
<h3>h5태그입니다.</h3>
<h4>h6태그입니다.</h4>
<h5>h7태그입니다.</h5>
<h6>h8태그입니다.</h6>
<h1>h1태그입니다.</h1>
<h2>h2태그입니다.</h2>
<h3>h3태그입니다.</h3>
<h4>h4태그입니다.</h4>
<h5>h5태그입니다.</h5>
<h6>h6태그입니다.</h6>
<h1>p태그의 활용</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, reiciendis. <br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic ipsam animi assumenda a ex, <br> perspiciatis, aliquid omnis blanditiis reprehenderit voluptates eius doloribus <br>facere accusamus non fugit optio eveniet inventore soluta cumque id fuga voluptas! <br>Vero nemo quo voluptas voluptates sequi aut laborum est, totam, reiciendis cum <br>blanditiis, fugiat nulla enim.
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam omnis dolor ratione, sint eius! Fuga expedita deserunt nostrum atque rem veritatis aperiam, unde alias rerum illum ad ducimus placeat! Quis eos obcaecati, quaerat excepturi maiores, perferendis a natus unde temporibus modi asperiores libero provident tenetur? Voluptatum impedit facere, quod itaque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis fuga officia nihil alias assumenda deleniti quibusdam dicta, maiores. Quae libero officiis, aperiam est at esse nobis et vitae quis voluptates!</p>
<p>Lorem ipsuwwsm dolor sit amet, consectetur adipisicing elit. Laudantium perspiciatis quae explicabo, maxime dolore laborum iste cumque, repellendus molestias reiciendis pariatur labore numquam ad delectus minus. Voluptatum accusamus qui saepe?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis vitae animi, alias vero ipsam voluptas hic minus corporis excepturi eveniet recusandae repellat. Quidem magni obcaecati accusamus amet blanditiis vel fugiat!</p>
<p>
<i>이탤릭체</i>
</p>
<p>
<b>볼드체</b>
</p>
<p>
2<sup>3
</p>
<p>
<sub>한국</sub>
</p>
<p>
추가하고 싶을 때 insert 태그
<ins>추가하다</ins>
</p>
<p>
삭제하고 싶을 때 delete 태그
<del>삭제해 주세요</del>
</p>
</body>
</html>

 

2.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>각 타이틀로 링크걸기</title>
</head>
<body>
<a href="#movie1">기생충 관람평</a>
<a href="#movie2">악인전 관람평</a>
<a href="#movie3">알라딘 관람평</a>
<hr>
<h1 id="movie1">기생충</h1>
<h2>하나의 페이지에서 각각 중요한 타이틀이 있고 해당 타이틀을 클릭하면 관련된 내용의 컨텐츠 영역으로 바로 이동하고 싶다면 타이틀을 a태그를 이용해서 넣어주고 href 속성값으로 #id명을 지정한다. 또한, 관련된 내용의 컨텐츠 상단에 위치한 태그에 id속성값을 지정한다!!!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere nostrum sequi hic iusto. A possimus sequi, laborum mollitia sapiente labore perferendis cupiditate beatae tempora praesentium incidunt, animi architecto saepe doloribus, deleniti eaque eos numquam rerum! Neque voluptas ipsam illo non necessitatibus odit aperiam unde, animi eos, qui, id nostrum aliquid.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione unde, quod quisquam assumenda corrupti nulla vel suscipit necessitatibus laudantium porro quasi velit quia animi cum explicabo, itaque repellendus delectus? Consectetur ad, et. Blanditiis dignissimos labore asperiores, cupiditate. Enim architecto itaque, voluptatem velit deserunt aut commodi ad? Beatae, excepturi officia consequatur?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ullam laudantium amet voluptatem, quidem repudiandae deserunt voluptas obcaecati quod dolore ipsa similique, minima cumque ducimus, corporis commodi ratione odit optio eligendi! Est quibusdam necessitatibus quis rem distinctio repudiandae maxime accusantium velit autem vel assumenda iure ad adipisci odio, culpa, obcaecati!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam doloribus nesciunt voluptatem similique, consequuntur optio nostrum, iure! Blanditiis amet animi doloremque dolores nesciunt aspernatur hic aliquid laboriosam reiciendis odio ab pariatur dolorem inventore sit at ullam, beatae nisi incidunt vero quidem doloribus ad illo repudiandae quibusdam. Possimus reiciendis iusto earum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos voluptatum, dicta sequi fuga animi accusamus suscipit veniam quam officia rerum beatae consectetur minus similique sit, error magnam, expedita nobis harum aliquid, consequuntur rem sunt culpa ad quis? Illum incidunt, voluptate magnam nulla optio, blanditiis dolores, dignissimos minima ad maiores dolorum.</p>
<h1 id="movie2">악인전</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere nostrum sequi hic iusto. A possimus sequi, laborum mollitia sapiente labore perferendis cupiditate beatae tempora praesentium incidunt, animi architecto saepe doloribus, deleniti eaque eos numquam rerum! Neque voluptas ipsam illo non necessitatibus odit aperiam unde, animi eos, qui, id nostrum aliquid.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione unde, quod quisquam assumenda corrupti nulla vel suscipit necessitatibus laudantium porro quasi velit quia animi cum explicabo, itaque repellendus delectus? Consectetur ad, et. Blanditiis dignissimos labore asperiores, cupiditate. Enim architecto itaque, voluptatem velit deserunt aut commodi ad? Beatae, excepturi officia consequatur?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ullam laudantium amet voluptatem, quidem repudiandae deserunt voluptas obcaecati quod dolore ipsa similique, minima cumque ducimus, corporis commodi ratione odit optio eligendi! Est quibusdam necessitatibus quis rem distinctio repudiandae maxime accusantium velit autem vel assumenda iure ad adipisci odio, culpa, obcaecati!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam doloribus nesciunt voluptatem similique, consequuntur optio nostrum, iure! Blanditiis amet animi doloremque dolores nesciunt aspernatur hic aliquid laboriosam reiciendis odio ab pariatur dolorem inventore sit at ullam, beatae nisi incidunt vero quidem doloribus ad illo repudiandae quibusdam. Possimus reiciendis iusto earum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos voluptatum, dicta sequi fuga animi accusamus suscipit veniam quam officia rerum beatae consectetur minus similique sit, error magnam, expedita nobis harum aliquid, consequuntur rem sunt culpa ad quis? Illum incidunt, voluptate magnam nulla optio, blanditiis dolores, dignissimos minima ad maiores dolorum.</p>
<h1 id="movie3">알라딘</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere nostrum sequi hic iusto. A possimus sequi, laborum mollitia sapiente labore perferendis cupiditate beatae tempora praesentium incidunt, animi architecto saepe doloribus, deleniti eaque eos numquam rerum! Neque voluptas ipsam illo non necessitatibus odit aperiam unde, animi eos, qui, id nostrum aliquid.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione unde, quod quisquam assumenda corrupti nulla vel suscipit necessitatibus laudantium porro quasi velit quia animi cum explicabo, itaque repellendus delectus? Consectetur ad, et. Blanditiis dignissimos labore asperiores, cupiditate. Enim architecto itaque, voluptatem velit deserunt aut commodi ad? Beatae, excepturi officia consequatur?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ullam laudantium amet voluptatem, quidem repudiandae deserunt voluptas obcaecati quod dolore ipsa similique, minima cumque ducimus, corporis commodi ratione odit optio eligendi! Est quibusdam necessitatibus quis rem distinctio repudiandae maxime accusantium velit autem vel assumenda iure ad adipisci odio, culpa, obcaecati!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam doloribus nesciunt voluptatem similique, consequuntur optio nostrum, iure! Blanditiis amet animi doloremque dolores nesciunt aspernatur hic aliquid laboriosam reiciendis odio ab pariatur dolorem inventore sit at ullam, beatae nisi incidunt vero quidem doloribus ad illo repudiandae quibusdam. Possimus reiciendis iusto earum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos voluptatum, dicta sequi fuga animi accusamus suscipit veniam quam officia rerum beatae consectetur minus similique sit, error magnam, expedita nobis harum aliquid, consequuntur rem sunt culpa ad quis? Illum incidunt, voluptate magnam nulla optio, blanditiis dolores, dignissimos minima ad maiores dolorum.</p>
</body>
</html>

 

3.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>리스트태그</title>
</head>
<body>
<h1>점심시간에 뭘 먹을까? 내가 좋아하는 음식 리스트</h1>
<ol>
<li>apple pie</li>
<li>strawberry smoothie</li>
<li>macaron</li>
<li>brocoli soup</li>
</ol>
<h2>my goals</h2>
<ul>
<li>Pray</li>
<li>Working out</li>
<li>Beagle Beauty Character</li>
<li>Making unique website</li>
<li>Speaking English every single day</li>
<li>Attitude</li>
<li>Positive mind</li>
<li>Be happy</li>
</ul>
<p>네이버 실시간 검색순위</p>
<ol>
<li>토스 차시세검색</li>
<li>
<a href="http://program.kbs.co.kr/2tv/drama/perfume/pc/" target="_blank">퍼퓸</a>
</li>
<li>고원희</li>
<li>조현병</li>
<li>윤종신</li>
</ol>
</body>
</html>

 

4.

Emmet 사용하면편리!:
d1>h1{browser's kind}+(dt{browser's name}+dd{브라우저에 대하여 정의}*2)*4 ---> body부분에다가 적고tab하면끝!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>정의목록태그</title>
</head>
<body>
<dl>
<h1>browser's kind</h1>
<dt>browser's name</dt>
<dd>브라우저에 대하여 정의</dd>
<dd>브라우저에 대하여 정의</dd>
<dt>browser's name</dt>
<dd>브라우저에 대하여 정의</dd>
<dd>브라우저에 대하여 정의</dd>
<dt>browser's name</dt>
<dd>브라우저에 대하여 정의</dd>
<dd>브라우저에 대하여 정의</dd>
<dt>browser's name</dt>
<dd>브라우저에 대하여 정의</dd>
<dd>브라우저에 대하여 정의</dd>
</dl>
</body>
</html>

 

5.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>테이블 태그</title>
</head>
<body>
<h1>표를 만드는 테이블 태그</h1>
<table border="1">
<tr align="center">
<th>grade</th>
<th>French</th>
<th>Spanish</th>
<th>English</th>
</tr>
<tr align="center">
<td rowspan="2">midterm test <br> final test</td>
<td>80</td>
<td>70</td>
<td>100</td>
</tr>
<tr align="center">
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr align="center">
<td>중간고사 성적총합</td>
<td colspan="3">250</td>
</tr>
<tr align="center">
<td>기말고사 성적총합</td>
<td colspan="3">300</td>
</tr>
</table>

<table width="553" border="5" cellpadding="3" cellspacing="1">
<tr>
<th width="68" align="center" bgcolor="#9966CC" scope="col">성적</th>
<th width="68" align="center" scope="col">국어</th>
<th width="68" align="center" scope="col">영어</th>
<th width="68" align="center" scope="col">수학</th>
<th width="68" align="center" scope="col">과학</th>
<th width="68" align="center" scope="col">지리</th>
<th width="71" align="center" scope="col">영상</th>
</tr>
<tr>
<th rowspan="2" align="center" bgcolor="#9966CC" scope="row">중간기말</th>
<td align="center">50</td>
<td align="center">100</td>
<td align="center">70</td>
<td align="center">10</td>
<td align="center">20</td>
<td align="center">100</td>
</tr>
<tr>
<td align="center">100</td>
<td align="center">100</td>
<td align="center">100</td>
<td align="center">100</td>
<td align="center">100</td>
<td align="center">100</td>
</tr>
<tr>
<th align="center" bgcolor="#9966CC" scope="row">총합</th>
<td colspan="6" align="center">300</td>
</tr>
<tr>
<th align="center" bgcolor="#9966CC" scope="row">평균</th>
<td colspan="6" align="center">80</td>
</tr>
</table>

</body>
</html>

반응형

'IT' 카테고리의 다른 글

div / span / semantic tag  (0) 2022.06.22
audio / form / input / radio / select / checkbox / label 태그연습  (0) 2022.06.21
서브라임 에밋 Emmet / html attribute, list, table  (0) 2022.06.19
서브라임 텍스트 Sublime text3 다운 및 플러그인 설치  (0) 2022.06.18
web / html / Protocol / IP / DNS / Port  (0) 2022.06.17

티스토리툴바