[HTML 기초] 3. HTML 태그 - 텍스트 관련 태그(h1~h6, p, b, br, ol, ul, li, a)
zeo.y2022. 3. 13. 18:18
반응형
1. 태그의 구조
기본적인 태그의 구조는 아래와 같습니다.
앞부분을 열린 태그(Opening tag), 뒷부분을 닫힌 태그(Closing tag)가 하고 그 사이에 내용이 들어갑니다.
열린 태그 안에 속성(Attribute) 값이 들어가는데 이를 활용해 태그를 효율적으로 활용할 수 있습니다.
열린 태그와 닫힌 태그, 그 사이의 내용을 모두 포함한 것을 요소(Element)라고 합니다.
태그의 구조
참고) 요소를 구성하는 태그
사실 위의 그림은 요소의 구조라고 하는 것이 정확합니다. 요소는 웹 페이지를 구성하는 것으로, 요소를 구성하는 것 중 하나가 태그인 것이지요. 하지만 여기서는 태그를 사용하는 방식을 이해하기 위해 태그의 구조라고 소개했습니다. 요소에 대한 구체적인 내용이 궁금하다면여기를 참고하세요.
<body>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but
also the leap into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
</body>
강조 - bold
<b>
글자 굵게 표시
<body>
<p>
<b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting
industry. ...
</p>
</body>
줄 바꿈 - break
<br>
텍스트 안에서 줄 바꿈
<body>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.<br />
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, <br />
when an unknown printer took a galley of type and scrambled it to make a
type specimen book.<br />
</p>
</body>
3. 좌측 작업 창(아래 그림)에서 마우스 우 클릭 -> New File -> index.html 파일 하나 생성하기
4. 코드 작성하기
5. 웹에서 확인하기 (윈도우 기준, alt + L -> O 누르면 라이브 서버 동작함)
<!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>HTML 태그에 대하여</h1>
<h2>텍스트 관련 태그의 존재 파악</h2>
<p>
태그의 종류는 매우 많습니다. 그래서 처음부터 모든 태그를 외우려고 덤벼들면
중간에 지쳐버릴지도 몰라요.
<b
>이런 태그가 있구나, 이 태그는 이런 동작을 하는구나, 이럴 때 이 태그를
사용하는구나, 이 태그에 이런 속성도 있네</b
>
정도로 이해하고 태그들의 존재만 알아가도 성공입니다! <br />
당장 외우는 것 보다 나중에 이것저것 직접 만들어볼 때 필요한 태그들을 찾아
적용할 줄 아는 것이 훨씬 더 중요합니다.
</p>
<h2>추가적인 정보</h2>
<p>
MDN 사이트는 웹 개발을 하며 가장 많이 들어가 볼 사이트입니다.
<a
href="https://developer.mozilla.org/ko/docs/Web/HTML/Element"
target="_blank"
>여기</a
>를 클릭해 HTML 태그들과 그 속성을 더 알아보세요. 내가 구현하고 싶은 것들
대부분은 아마 이미 누군가가 속성으로 만들어 놓았을 가능성이 99%입니다. 즉,
속성값만 잘 활용해도 태그를 엄청 효율적으로 쓸 수 있습니다!
</p>
<h2>오늘 배운 태그 리스트</h2>
<ol type="i">
<li>제목</li>
<li>문단</li>
<li>강조</li>
<li>줄바꿈</li>
<li>리스트</li>
<li>링크</li>
</ol>
</body>
</html>
<!DOCTYPE html>
