Language & Framework

[HTML] - 기본 용어, 기본 구조, 태그

호두는귀엽다 2023. 9. 16. 22:06

HTML(Hypertext Markup Language) 이란?

웹페이지와 그 내용을 구조화하기 위해 사용하는 코드입니다.

콘텐츠의 서로 다른 부분들을 씌우거나 감싸서 다른 형식으로 보이게하거나 특정한 방식으로 동작하도록 하는 일련의 요소로 이루어져 있습니다.

HTML 구조

HTML 페이지는 기본적으로 아래와 같이 구성되어 있습니다.

<!DOCTYPE html> //필수 서문
<html lang="en"> //해당 요소는 페이지의 전체 콘텐츠르 감싸며, 루트(root) 요소라고도 합니다.
<head> //타인에게 조회되는 콘텐츠는 아니며, 페이지 설명, CSS, 문자 집합 선언 등과 같은 것들이 포함됩니다.
    <meta charset="UTF-8"> //
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> //뷰포트 요소는 뷰포트의 너비에서 페이지가 렌더링하도록하고, 모바일 브라우저가 뷰포트보다 넓은 페이지를 렌더링 한 후 축소하는 것을 방지
    <title>Document</title> //페이지의 제목 설정
</head>
<body> //페이지에 방문한 모든 웁 사용자들에게 보여줄 컨텐츠들을 담고 있습니다.
    <h1>Hello World</h1>
</body>
</html>

HTML 태그

HTML 구성 요소

HTML 태그는 위와 같이 구성되며 여는 태그, 닫는 태그, 콘텐츠, 요소로 이루어지고 있습니다.

요소는 다른 요소 안에 놓일 수 있으며 이것을 중첩(nesting)이라고 부릅니다. 

<p>My cat is <strong>very</strong> grumpy.</p>

위 예시는 <p>태그 내 <strong>태그를 중첩한 것입니다.

기본 태그

    <p></p> //문단 태그로 텍스트를 감싸는 태그
    <h1></h1> 헤드라인 요소로 h1~h6까지 활용 가능
    <br> //줄바꿈 태그로 사용
    <img src="" alt=""> //이미지를 삽입하는 태그로, alt 속성에는 이와 관련된 설명 기입이 가능함
    <a href=""></a> //"anchor"의 약자로 하이퍼링크 태그 
    <div></div> //html안의 여러 태그를 div라는 큰 단위로 묶어주는 태그(블록 레벨 요소)
    <span></span> //div 태그와 마찬가지로 단위로 묶어주는 태그(인라인 레벨 요소)
    <ul></ul> //순서에 관계가 없는 목록의 태그
    <ol></ol> //순서가 있는 태그
    <li></li> //목록 항목

 

문자 꾸미기 태그들

    <b></b> //글자 굵게
    <strong></strong> //글자 굵게 + Semantic한 의미
    <i></i> //이탤릭
    <em></em> //Emphasized 강조!, 기울여서 표시
    <del></del> //중간줄
    <u></u> //밑줄

사용자 입력 Form 태그 & Input 태그

form 태그는 웹페이지에서 입력 양식을 의미하며 로그인창, 회원가입 폼 등이 이에 해당됩니다.

화면에는 보이지 않는 추상적인 태그이며, 실제 사용자가 양식을 입력하기 위한 태그는 input 태그를 사용합니다

 

input 태그의 type은 다음과 같으며, name을 통해 데이터의 이름을, value를 통해 기본 값을 지정할 수 있습니다.

    <input type="text" name="" value="" />
    <input type="password" name="" value="" />
    <input type="button" name="" value="" />
    <input type="submit" name="" value="" />
    <input type="reset" name="" value="" />
    <input type="radio" name="" value="" />
    <input type="checkbox" name="" value="" />
    <input type="file" name="" value="" />
    <input type="hidden" name="" value="" />

Semantic Tag

시맨틱 태그는 의미를 부여한 태그라는 의미로 시맨틱 태그를 사용하는 이유는 다음과 같습니다.

  1. HTML 문서의 가독성과 유지보수
  2. Header, Main, Footer, Aside 등 영역 구분
  3. 검색엔진이 검색을 수행할 시 HTML내의 태그를 통한 분석(SEO, 검색최적화)

HTML에서의 Semantic Tag

태그 설명
<header> 소개 콘텐트 또는 탐색 링크 집합에 대한 컨테이너
<nav> 탐색 링크 세트를 정의
<section> 제목이 있는 주제별 콘텐츠 그룹
<article> 독립적이고 자체 포함된 콘텐츠를 지정
<aside> 자신이 배치된 콘텐츠 외에 일부 콘텐츠 정의
<footer> 문서나 섹션의 바닥글을 정의

https://developer.mozilla.org/en-US/docs/Glossary/Semantics

https://www.w3schools.com/html/html5_semantic_elements.asp