HTML 태그 기초

html

이번 포스트는 HTML에 대한 기초적인 내용에 대해 다루도록 하겠습니다.


HTML의 탄생

웹 페이지는 한글문서 같은 것들을 다른 사람과 쉽게 공유하기 위해 제작되었다. 한글문서 자체를 타인과 공유하기 위해서는 파일시스템과 이메일 같은 것들이 필요했고, 이에 대한 불편함을 느껴서 http protocal을 통하여 웹 페이지를 구성하기 시작했다.

그리고 HTML의 tag는 GUI대신에 어떻게 하면 텍스트에 의미를 부여할 수 있을까 고민하다가 고안해낸 방법이다. Text를 Tag로 감싸는 행위를 Markup이라고 한다. 이렇게 Markup된 Text는 의미를 갖게 된다. 또한 브라우저에서 의미에 대응하는 형태로 렌더링 되어 표현된다.



HTML5

HTML에는 다양한 버전이 있다. 현재는 HTML5를 사용하고 있다. HTML5는 2014년 10월 28일 확정된 차세대 웹 표준이며, 다음과 같은 기능들이 추가되어 사용중이다.

  • [멀티미디어] 비디오, 오디오 등의 기능을 자체적으로 지원
  • [그래픽] SVG, Canvas, WebGL을 이용하여 2차원, 3차원 그래픽 지원
  • [통신] Socket을 통한 서버와 양방향 통신 가능
  • [디바이스 접근] 카메라 등의 하드웨어 제어
  • [저장소] 브라우저에서 자체 저장소 제공
  • [시멘틱 태그] HTML 요소의 의미를 명확히 설명

이를 통하여 HTML5는 더욱 강력한 플랫폼으로 거듭났다.



HTML5의 기초 구조

<!doctype html> <!-- HTML5 버전 정의 -->
<html>
  <head>
    <title>사이트 제목</title>
  </head>
  <body>
    <h1>사이트의 컨텐츠 제목</h1>
    <p>사이트의 내용</p>
  </body>
</html>

HTML5는 위와 같은 구조로 이루어져 있다.

<!doctype html> : doctype은 html의 버전을 의미하며 <!doctype html> 이라고 쓰게 되면 html5로 문서를 작성한다는 뜻이다.

<html></html> 내부는 head와 body 태그가 있다. 기본적으로 html > head + body 형태의 구조로 작성한다.

head에는 사이트에 대한 기초 정보를 명시한다. 여기서 title 태그는 사이트의 제목을 의미한다. 이외에 script, style, meta 등의 태그가 head 내부에 위치한다.

body에는 사이트 내용을 작성한다. 실제로 사용자에게 보여지는 부분이 된다.


자주 사용하는 HTML Tag

  • h1 ~ h6 : 내용에 대한 제목. 숫자가 작을 수록 상위 제목이다.
  • ul : Unordered List, 즉, 순서가 없는 리스트. li와 함께 사용된다.
  • ol : Ordered List, 즉, 순서 리스트. li와 함께 사용된다.
  • li : 리스트 요소. ul, ol과 함께 사용된다.
  • p : 문단
  • span : 아무 의미 없음. 꾸밈을 목적으로 사용한다. inline 요소
  • div : 아무 의미 없음. 꾸밈을 목적으로 사용한다. block 요소
  • strong : 굵게 강조
  • el : 기울임 강조
  • header : 머릿말
  • footer : 꼬릿말
  • section : 내용. section 내부에는 heading 요소가 있어야 한다.
  • article : 일관적인 구조를 갖는 내용
  • main : 웹 페이지의 메인이 되는 내용
  • nav : 웹 페이지의 네비게이션
  • br : 줄바꿈
  • a : 하이퍼 링크
  • img : 이미지 삽입
  • iframe : 외부 페이지를 삽입
  • form : 서버에 전달하게 될 사용자 입력 폼
  • input : text, password 등을 입력
  • select : 여러 요소 중 하나를 선택할 수 있게 함
  • textarea : 장문의 내용을 입력할 수 있음
  • button : 버튼 요소
  • label : 사용자 입력 요소(input, select, textarea 및 기타 등)에 대한 label 제공

더 다양한 태그를 보고싶다면 다음 링크에서 확인 : https://www.w3schools.com/tags/default.asp



Tag Attribute

HTML Tag에는 다양한 Attribute(속성)이 존재한다. 대표적으로 id, title, class 등이 있으며 태그마다 고유한 속성이 존재한다. 그리고 속성을 함께 기술해야 정확히 작동하는 태그들이 많다. 다음은 그러한 태그에 대한 예시이다.

<a href="http://naver.com"> 네이버로 이동 </a>
<img src="/img/test.png" alt="test 이미지">
<form action="/submit" method="post">
  <label for="user-id">아이디 선택</label>
  <input type="text" name="id" id="user-id" size="10">
  <button type="submit">전송</button>
</form>

위에 적은 태그로 설명하도록 하겠다.

  • a
    • href : 필수 / 하이퍼링크(이동할 페이지)를 의미함
  • img
    • src : 필수 / source의 줄임말 / 서버상의 이미지 요소 위치
    • alt : 필수 / 대체 텍스트 / img가 없을 경우 alt에 기술된 내용이 이미지 대신에 보여짐
  • form
    • action : 정보를 전송할 페이지의 주소
    • method : 정보 전송 방식. post, get 등이 있음
  • label
    • for : for의 값과 일치하는 id 요소에 포커싱
    • 예를 들어 <label for="user-id">아이디</label> 클릭시 <input type="text" id="user-id"> 에 포커싱된다.
  • input
    • type : input의 형태를 의미 / password, text, radio, checkbox, file, number, tel, email, button, submit 등이 있음 / type에 따라 input의 형태와 기능이 달라진다.
    • name : 서버에서 처리하게 될 키워드 명
    • size : input 요소의 크기
  • button
    • type : button, submit 등으로 할 수 있음 / 기본으로 submit
    • submit 지정시 해당 버튼을 클릭 할 경우 form의 내용이 전송 됨

Tag의 Attirbute 또한 굉장히 많이 있다. 하지만 제일 많이 사용 되는 속성은 몇 개 없으니 금방 외울 수 있다.

속성에 대한 내용은 다음 링크를 참고 https://www.w3schools.com/tags/ref_attributes.asp


참고링크

  1. http://junil-hwang.com/blog/html-default-tag/
  2. https://poiemaweb.com/html5-syntax