| p | 본문 글자 태그 -> 단락 생성 |
| br | 줄바꿈 |
| hr | 수평 줄 생성 |
예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>P 태그 테스트</h1>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi praesentium dolores labore autem harum, ad, laboriosam, amet similique esse animi at nihil voluptatem fugit adipisci consectetur molestiae? Molestias, praesentium ut?
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab accusamus perspiciatis veritatis quidem rerum eaque dicta quia? Eos iusto fugit dignissimos dolorum sapiente quo ipsa quas, et, facilis qui alias.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor sint porro corporis ullam! Rerum nesciunt eos quasi id, doloribus delectus ipsum quo enim excepturi rem! Accusamus iusto reprehenderit beatae a.</p>
<h1>br 및 hr태그 테스트</h1>
<h4>br은 줄바꿈 hr은 수평 줄 태그</h4>
Lorem ipsum dolor sit amet,
<br>
<br>
<br>
<br>
<hr>
consectetur adipisicing elit. Molestias reprehenderit in, sit reiciendis vel nulla velit non atque officiis ratione iure labore earum fuga beatae architecto praesentium accusantium animi excepturi.
</body>
</html>
br 태그를 여러번 사용해서 줄바꿈이 되는 결과를 확인 할 수 있다.
hr은 위의 예시 그림과 같이 가로로 긴 줄이 생성되는 것을 확인할 수 있다.
| a | 앵커 태그 -> 웹페이지로 이동하거나 웹페이지 내부에서 특정한 위치로 이동가능하다. |
예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1><a href="http://google.com">네이버</a></h1>
<br>
<li><a href="#">언론사 전체보기 __ 이동하지 않는 a 태그</a></li>
<li><a href="#a">A로 이동하기</a></li>
<li><a href="#b">B로 이동하기</a></li>
<li><a href="#c">C로 이동하기</a></li>
<h1 id="a">A</h1>
<h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, neque culpa quisquam corrupti architecto illum voluptatibus ex rerum sint maxime itaque? Quia iure eaque eligendi earum cum ducimus! Aut, est.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet repellat incidunt numquam aliquam laboriosam non, dolorum dolorem quia dolor sed quos recusandae, corrupti quas eligendi! Saepe dicta blanditiis illum dolorum!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum ducimus earum mollitia reiciendis similique corporis, perspiciatis esse aut harum nisi ipsam, aliquam quas amet repellat saepe autem unde! Sed, adipisci.Lo
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi veniam perferendis hic minus, obcaecati dolorem ratione velit iure qui facilis possimus fugiat quas sapiente quidem magnam neque at vero dolor.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet vitae, ex rem cumque veniam, cum est voluptatum commodi, perspiciatis obcaecati aspernatur cupiditate quo nemo? Aspernatur praesentium illo placeat sed velit.
</h2>
<br>
<hr>
<br><br>
<h1 id="b">B</h1>
<h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni dicta dolorem hic reiciendis dolore repudiandae eligendi odit praesentium maxime quis. Praesentium vel dicta, dolor eum sequi repellat iusto recusandae sapiente.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, corrupti laudantium, impedit quod soluta odio facilis dolores, cum ratione ipsa fuga. Dignissimos magnam quaerat esse, praesentium cupiditate deserunt ipsam ipsum!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae, tempore, rerum nemo similique hic odit unde adipisci dignissimos impedit vel ipsum quidem nobis soluta! Quibusdam fuga quas odio voluptatum! Tempore?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam odio maiores odit. Inventore corporis consequuntur eaque aperiam? Cupiditate officia consequatur asperiores veniam quisquam. Fugiat, est asperiores numquam ex molestias earum!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, quas velit omnis cum assumenda repellat eaque culpa, asperiores sapiente eligendi tempore laboriosam quod aliquid, distinctio consectetur beatae pariatur earum commodi.
</h2>
<br>
<hr>
<br><br>
<h1 id="c">C</h1>
<h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic natus numquam impedit blanditiis repellat, obcaecati eum minus culpa facere, corrupti et. Non veniam dignissimos nihil repudiandae ex explicabo, consectetur recusandae?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, nihil. Iusto dignissimos ipsam sint, nemo, itaque mollitia sunt saepe, quo eius perspiciatis cumque quidem. Fugit repudiandae unde autem debitis odit!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum sunt rerum labore eaque neque odio debitis dolor placeat similique vitae repudiandae obcaecati doloremque laborum, omnis, ratione iste ad ea earum?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo reiciendis dolores quam ipsum delectus inventore esse, quod pariatur, distinctio eaque animi id, dolorum facilis quo est exercitationem enim. Molestiae, maiores?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic ipsa quidem praesentium dicta reprehenderit. Non incidunt nulla, inventore vero perspiciatis, laudantium nisi amet accusantium cumque animi ut error dignissimos eius.
</h2>
</body>
</html>
a 태그를 통해 원하는 곳으로 이동할 수 있다.
네이버를 클릭하면 네이버 홈페이지로 이동하는 것을 확인할 수 있다.
또한 페이지 내부 이동도 가능하다. 위의 페이지와 같이 스크롤이 있는 긴 페이지의 경우 이동하기를 원하는 태그에 id 속성을 부여하고 a href ="" 식으로 입력하면 해당 위치로 자동 이동하는 것을 확인할 수 있다.
| <b> | 굵게 표시된 텍스트 |
| <del> | 삭제된 텍스트 |
| <em> | 강조된 텍스트 |
| <i> | 기울어진 텍스트 |
| <ins> | 삽입된 텍스트 |
| <mark> | 강조 표시된 텍스트 |
| <small> | 작은 텍스트 |
| <strong> | 큰 텍스트 |
| <sub> | 아래 첨자 |
| <sup> | 위 첨자 |
'Web > HTML 기본 개념' 카테고리의 다른 글
| [HTML]입력양식 태그 (1) | 2021.03.05 |
|---|---|
| [HTML]이미지, 오디오 , 비디오 삽입하기 (0) | 2021.03.05 |
| [HTML]테이블 열,행 합치기 (0) | 2021.03.05 |
| [HTML]테이블 태그 (0) | 2021.03.05 |
| [HTML]글자 태그(1) - h 태그 (0) | 2021.03.02 |
