[HTML] HTML5 태그 - <h1>, <p>, <span>, <button>, <div>

[HTML] HTML5 태그 - <h1>, <p>, <span>, <button>, <div>

2024. 8. 27. 19:53ㆍLanguage/HTML

당연하게도 HTML 에는 수 많은 태그(=요소)들이 존재한다. 이번에는 그 중에서도 학습을 하면서 사용해본 기본적인 태그들 중 <p>, <h1>, <button> 에 대해 알아보려 한다.

1. <h1>, <h2>, ... , <h6>

<body>
    <h1>요것은 제목! - h1</h1>
    <h2>요것은 부제목! - h2</h2>
    <h6>이건 뭐라 부르지? - h6</h6>
</body>

작성 내용의 제목(heading)을 나타내는 태그

<h1> 태그류는 <body> 영역에 작성, 1부터 6까지의 넘버링을 갖는다.

찾아본 내용들이 다 '제목' 이라는 표현을 사용하는데 나의 경우 'md(Markdown, 마크다운)' 에서 사용하는 '#' 과 비슷하다 느껴 텍스트의 중요도 표현이나 문서를 구분짓는 용도로 이해하였다.
<h1>, <h2> 의 경우 다른 일반 텍스트와 확연히 차이가 보여 자주 사용하겠지만 나머지 넘버들은 일반 텍스트보다 눈에 띄지도 않고 크기고 비슷하거나 작아 잘 사용하지 않을 듯하다. 심지어 이것도 마크다운의 '#' 과 닮았다!
시작 태그와 끝 태그 사이에 작성한 텍스트가 출력되는 방식이다.

2. <p>

<body>
    <p class="p1">이것이 단락!</p>
    <p class="p2">
        이것도 단락! 이것도 단락! 
        이것도 단락! 이것도 단락! 
        이것도 단락! 이것도 단락! 
        이것도 단락! 이것도 단락! 
        이것도 단락! 이것도 단락! 
        이것도 단락! 이것도 단락! 
        이것도 단락! 이것도 단락! 
    </p>
</body>

단락(문단)을 나타내는 태그

'단락' 이라는 단어에 너무 집중하지 말자, 그저 구분지어진 텍스트를 구성할 뿐!

예시에는 2가지 <p> 태그를 사용하였으니 2개의 단락(문단)이 출력되었다.
배경의 초록색은 신경쓰지말자 한 단락이 어느정도의 영역을 갖는지 확인하려 태그의 영역에 배경색을 초록색으로 입혔을 뿐이다. 태그에 함께 작성된 class 또한 같은 이유로 작성한 것이다.
띄어쓰기를 했음에도 2번째 단락은 텍스트가 붙어 출력이 되었다. HTML 에도 마크다운처럼(<br/>) 따로 줄바꿈 태그가 따로 있는데 <br> 이란 태그를 사용하면 줄바꿈을 사용할 수 있다.
두 단락을 보면 두 영역이 사이에 간격이 생긴것을 확인 할 수 있다. 이러한 점 때문에 두 태그가 구분되어 서로 단락을 이루는 것처럼 보여서 '단락' 을 나타낸다 말하는 듯 싶다.
<h1> 태그처럼 시작 태그와 끝 태그 사이에 작성된 텍스트가 출력된다.

3. <span>

<body>
    <P>여기가 단락! : <span>[이곳이 부분 단락!]</span></p>
</body>

단락(<p>)의 부분 단란을 나타내는 태그

<p> 안에 사용하면 부분 단락을 추가할 수 있다!

정확하게는 텍스트의 일부 또는 문서의 일부를 마크업하는데 사용되는 인라인 요소(Inline Elements)라고 한다.
구지 단락 안에 또 다른 단락을 사용하는게 의미가 있을까 하였지만 막상 CSS 와 함께 써보니 텍스트 또는 문서 일부를 지정하여 꾸며줄 때 유용하게 사용되었다. 아마 이러한 부분 때문에 사용하는 태그로 보인다.
이렇게 보면 <div> 와 꽤나 유사해 보이지만 다른데, <div> 가 블록 레벨의 요소(Block-level Elements)라면 <span> 은 인라인 요소인 차이점이 존재한다.

※ Block-level Elements : 항상 새 줄에서 시작되는 요소로 브라우저는 요소 앞뒤에 자동적으로 약간의 공백을 추가한다. 또한 항상 사용 가능한 전체 너비(width)를 차지한다. 대표적인 요소로 <p> 와 <div> 가 있다.

※ Inline Elements : 새 줄에서 시작되지 않는 요소이다. 컨텐츠 표시에 필요한 너비(width)만을 차지한다.

4. <button>

<body>
    <button>버튼입니다. 누르고 싶죠?</button>
</body>

버튼을 정의하는 태그

이름 그대로 누르면 반응하는 버튼을 정의해 화면에 출력할 수 있다.

결과 이미지의 왼쪽은 평상시 버튼이고 오른쪽은 마우스 커서를 가져다 댔을 때의 버튼의 모습니다. 그게 티는 안나지만 약간 색이 더 짙은 회색이 되며 누를 수 있다는 이미지를 심어준다.
시작 태그와 끝 태그 사이에 작성한 텍스트가 버튼의 중앙에 출력되며 기본적으로 텍스트의 길이가 버튼의 크기에 영향을 주는 듯 하다.
물론 태그 지정시 텍스트만 작성할 수 있는 건 아니다. <i>, <b>, <strong>, <img> 같은 요소들도 넣어 작성 가능하다고 한다. 하지만 조건이 있는데 <input> 로 작성된 버튼의 경우에는 불가능하다.
정말 한 번은 들어봤을 유명한 웹 브라우저(크롬, 마이크로소프트 엣지, 파이어 폭스, 사파리, 오라클 등)에서 전부 지원된다.

5. <div>

<div class="div2">
    <p>여기가 첫 번째 섹션!</p>
</div>
<div class="div3">
    <p>여기가 두 번째 섹션!</p>
</div>

HTML 문서에서 구분 또는 섹션을 정의하는 태그

HTML 요소의 컨테이너 역할을 한다!

위에서 <span> 설명시 <div> 는 블록-레벨 요소(Block-level Elements)라고 하였는데, 결과 이미지를 확인해 보면 영역에 배경색으로 각 섹션을 표시하였다. 두 섹션 모두 새 줄에서 시작되고 각 섹션에 자동적으로 여백(간격)이 있는 것을 확인할 수 있다. 또한 섹션이 차지하는 너비(width)가 차지할 수 있는 최대를 차지해 좌우로 길게 배경색이 생긴 것이다.
<div> 시작태그 안에 작성된 class="div2" 는 해당 요소에 CSS 를 적용하기 위해서 사용한 것 이다. CSS 사용시 HTML 요소를 사용할 때는 이렇게 시작 태그 내부에 'class' 속성을 통해 클래스명을 지어주고 이것으로 <style> 영역에서 지정한 요소를 다룰 수 있다.
Javascript 를 사용할 때는 'class' 속성이 아닌 'id' 속성을 사용해 위와 비슷하게 작성하여 요소의 명칭을 지정해 <script> 영역에서 다룰 수가 있다.

6. 정리

<p> 는 문단을 작성할 때 사용하는 구분 태그, <h1> ~ <h6> 은 내용의 구분이나 텍스트의 강조로 중요성을 보여주는 태그, 마지막으로 <button> 은 마우스 클릭으로 반응하는 버튼을 생성하는 태그였다. 이 세 종류의 태그는 웹 브라우저 화면에 출력되는 기능을 가지므로 당연히 <body> 영역에 작성 되어야 한다.

작성을 하다보니 가장 많이 사용되는 태그인 <span> 과 <div> 를 빼먹어 추가하였다. - 24.08.28

참고 문서

HTML Tutorials - w3schools

저작자표시 비영리 변경금지

'Language > HTML' 카테고리의 다른 글

[HTML] CSS 적용 우선순위 - CSS Specificity (0)	2024.08.30
[HTML] OpenAPI 다루기 - function, fetch (0)	2024.08.29
[HTML] 꾸미기 - <style>, CSS (0)	2024.08.27
[HTML] HTML5 - 기본 구성 (0)	2024.08.27

나를 위한 개발 일기