반응형

 

HTML - 꼭 알아야 하는 html 기본 개념 및 태그 종류

 

 

   목차

  1. html 기본 개념 및 구조
  2. 꼭 알아두어야 할 태그 개념
  3. html 필수 태그 

 

 

1. html 기본 개념 및 구조

 

1) html 기본 개념

 

HTML이란 HyperText Markup Language의 약자로, 링크를 통해 다른문서나 사이트로 이동할수 있는 기능(HyperText)을 가진 언어로, 태그(<태그이름>)를 통해 웹문서의 구조를 기술하는데 사용됩니다. 

 

 

2) html 기본 구조

  1. <!DOCTYPE> :  문서의 유형을 알려주는 태그로, <!DOCTYPE html>은 html5 문서임을 웹브라우저에게 알려줍니다. 
  2. <html></html> :  html문서의 시작과 끝을 알려주는 태그로, lang 속성에 사용할 언어를 지정할 수 있습니다. 
  3. <head></head> :  문서의 정보를 웹브라우저에게 알려주는 태그입니다. 
    • <title> : 문서의 제목을 알려주는 태그로, 웹브라우저의 제목표시줄에 나타납니다.
    • <meta> : 메타정보를 알려주는 태그로, 문자인코딩, 문서에 대한 설명등을 지정할 수 있습니다. 
  4. <body></body> :  웹브라우저의 화면에 보여지는 내용을 기술하는 태그입니다. 
    • <h1>, <div>, <br> 등 앞으로 살펴볼 대부분의 태그가 여기에 해당합니다. 

 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
        <title>문서제목</title>
        <!-- head 태그안에는 문서정보를 기술합니다. -->
    </head>
    <body>
        <h1>안녕하세요</h1>
        <!-- body 태그안에는 브라우저 화면에 보여질 내용을 기술합니다.-->
    </body>
</html>

[실행결과]

 

 

 

2. 꼭 알아두어야 할 태그 개념

 

1) 여는태그와 닫는태그, 단일태그

 

태그는 기본적으로 여는 태그와 닫는 태그가 쌍을 이루어 사용됩니다. 하지만 닫는 태그 없이 사용되는 단일 태그도 일부 존재합니다.

  1. 일반적인 태그 :  <h1>내용</h1>, <div>내용</div>와 같이 여는 태그와 닫는 태그로 구성됨
  2. 단일태그 :  <br>, <hr>과 같이 여는 태그 하나로 구성됨

 

 

2) 인라인 태그 vs 블럭태그 (inline tag vs block tag)

 

우리가 주로 사용하는 태그들은 <body>태그안에 기술되는 태그로 웹브라우저의 화면상에 나타나게 됩니다. 이때 태그가 화면에 나타나는 방식에 따라 인라인 태그와 블럭 태그로 나눌 수 있습니다. 

  1. 블럭 태그 :  블럭태그는 너비가 100%로 잡혀있어 한줄을 전부 차지하기 때문에, 다음에 오는 태그는 줄바꿈이 일어납니다. 
    • 블럭 태그 종류 : <h1>, <div>, <p>, <form>, <hr>, <ul>, <ol> 등
  2. 인라인 태그 :  인라인 태그는 요소의 내용만큼만 영역을 차지하기 때문에, 다음에 오는 태그는 줄바꿈이 일어나지 않습니다. 
    • 인라인 태그 종류 : <a>, <span>, <label>, <b>, <img>, <input>, <button> 등

 

 

 

3. html 필수 태그

  1. <h1> :  제목을 나타내는 태그로, 일반 텍스트보다 크고 진하게 표시됩니다. (크기에 따라 <h1> ~ <h6>까지 존재합니다.)
  2. <p> :  텍스트 단락을 나타내는 태그입니다. 
  3. <br> :  줄 바꿈 태그입니다. 
  4. <hr> :  수평으로 줄을 긋는 태그입니다. 
  5. <strong> :  글씨를 굵게 나타냅니다. (내용의 중요도를 강조하여 나타낼 때 사용)
  6. <b> :  글씨를 굵게 나타냅니다. 
  7. <em> :  글씨를 이탤릭체로 나타냅니다. (내용의 중요도를 강조하여 나타낼 때 사용)
  8. <i> :  글씨를 이탤릭체로 나타냅니다. 
  9. <sub> :  글씨를 아래첨자로 나타냅니다. 
  10. <sup> :  글씨를 위첨자로 나타냅니다. 
  11. <del> :  글씨 중간에 선을 그어 삭제된 의미를 나타냅니다.
  12. <span> :  태그 자체의 효과는 없지만, 텍스트의 일부 영역을 묶을 때 사용합니다. 
  13. <a href="url"> :  링크 태그로 클릭시 해당 url 경로로 이동하게 됩니다. 
  14. <img scr="url"> :  이미지 태그로 해당 url 경로에 있는 이미지를 나타냅니다. 
  15. <ul> :  순서가 없는 목록 리스트를 만들때 사용합니다. 
    • <li> : 각 항목을 나타냅니다. (type="속성값"에 1, a, A, i, I 가 올 수 있으며, 숫자, 영문자, 로마숫자로 목록 표시)
  16. <ol> :  순서가 있는 목록 리스트를 만들때 사용합니다. 
    • <li> : 각 항목을 나타냅니다. (type="속성값"에 1, a, A, i, I 가 올 수 있으며, 숫자, 영문자, 로마숫자로 목록 표시)
  17. <dl> :  설명 목록을 만들때 사용합니다.
    • <dt> : 제목을 나타냅니다.
    • <dd> : 설명을 나타냅니다.
  18. <table> :  데이터를 행과 열로 표시되어 있는 테이블 형태로 만들때 사용합니다. 
    • <tr> : 행 
    • <th> : 열(제목) - (속성에 colspan="숫자", rowspan="숫자"로 열 또는 행을 합칠 수 있습니다.)
    • <td> : 열 - (속성에 colspan="숫자", rowspan="숫자"로 열 또는 행을 합칠 수 있습니다.)
    • <caption> : 표에 제목을 붙일 때 사용합니다.(윗쪽 중앙에 표시됩니다.)
    • <figcaption> : 표에 제목이나 설명을 나타낼 때 사용합니다. 

 

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

'IT 개발 > HTML & CSS' 카테고리의 다른 글

[CSS] 선택자 종류 및 사용방법 (태그, id, class, 속성, 자식, 하위, 형제, 가상클래스, 연결)  (0) 2023.12.17
[CSS] css 기본문법 및 적용방법 (인라인스타일, 내부스타일, 외부스타일  (0) 2023.12.16
[HTML] form 태그 사용법과 input 태그 속성 정리  (0) 2023.12.16

+ Recent posts

티스토리툴바