위코딩
article thumbnail
Published 2023. 7. 19. 00:58
[HTML] 주요 HTML 태그 Mark Up/HTML
반응형

HTML은 다양한 태그를 사용하여 웹 페이지를 구성합니다. 각 태그들은 웹 브라우저에게 콘텐츠의 의미와 표현 방법을 알려줍니다. 아래에는 주요 HTML 태그들과 간단한 설명을 제시하겠습니다.


<p> 태그 (단락)

<p> 태그는 단락(Paragraph)을 나타냅니다. 이 태그 안에 텍스트를 작성하면 브라우저는 자동으로 단락을 구분하여 표시합니다.

<p>이것은 하나의 단락입니다.</p>
<p>또 다른 단락입니다.</p>

<h1>, <h2>, ..., <h6> 태그 (제목)

<h1><h2>, ..., <h6> 태그는 각각 제목(Heading)을 나타냅니다. 숫자가 작을수록 중요도가 높은 제목을 나타냅니다.

<h1>이것은 제목 1입니다.</h1>
<h2>이것은 제목 2입니다.</h2>

<ul>, <ol>, <li> 태그 (목록)

<ul> 태그는 순서 없는 목록(Unordered List)을, <ol> 태그는 순서 있는 목록(Ordered List)을, <li> 태그는 목록 항목(List Item)을 나타냅니다.

<ul>
    <li>항목 1</li>
    <li>항목 2</li>
</ul>

<ol>
    <li>첫 번째 항목</li>
    <li>두 번째 항목</li>
</ol>

<a> 태그 (링크)

<a> 태그는 하이퍼링크(Hyperlink)를 생성합니다. href 속성을 사용하여 링크의 주소를 지정할 수 있습니다.

<a href="https://www.example.com">이곳을 클릭하세요!</a>

<img> 태그 (이미지)

<img> 태그는 이미지를 삽입할 때 사용됩니다. src 속성을 사용하여 이미지 파일의 경로를 지정합니다.

<img src="image.jpg" alt="이미지 설명">

<div> 태그 (구역 나누기)

<div> 태그는 구역을 나누는데 사용됩니다. 주로 CSS 스타일링이나 자바스크립트 조작을 위해 사용됩니다.

<div>
    <p>이 부분은 구역 1입니다.</p>
</div>
<div>
    <p>이 부분은 구역 2입니다.</p>
</div>

<span> 태그 (인라인 스타일)

<span> 태그는 인라인(Inline) 스타일을 적용하기 위해 사용됩니다. 주로 부분적인 스타일링에 활용됩니다.

<p>이 문장의 일부 단어는 <span style="color: blue;">파란색</span>으로 표시됩니다.</p>

<table>, <tr>, <td> 태그 (테이블)

<table> 태그는 테이블을 생성하며, <tr> 태그는 행(Row)을, <td> 태그는 셀(Cell)을 나타냅니다.

<table>
    <tr>
        <td>셀 1</td>
        <td>셀 2</td>
    </tr>
</table>

이외에도 HTML에는 다양한 태그들이 있으며, 이를 조합하여 다양한 웹 페이지를 만들 수 있습니다. 코딩을 통해 HTML 태그들을 활용하는 방법을 익혀나가면 멋진 웹 페이지를 구성하는데 도움이 될 것입니다.

반응형
loading loading