본문 바로가기
Develop/Web

[정리] HTML 요약

by Tarra 2022. 2. 13.

월요일에 시험을 보기 때문에 

HTML과 CSS의 핵심 부분만 간단히 요약해보았다. // css 위주

HTML. (Hyper Text Markup Language)

html의 기본 구조는 다음과 같다.

 

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
 cs

 

먼저 !DOCTYPE으로 해당 파일이 html이라는 것을 먼저 알려준 뒤

html 태그로 시작되게 된다.

html태그 안은 <head>와 <body>로 이루어져 있으며, 몇 태그를 제외한 모든 태그는 열린 뒤 닫혀야한다.

 

  • <head> 문서의 형태, 타이틀 정보, 스타일 정보, 자바스크립트에 대한 정보가 들어가는 부분.
    웹 브라우저가 알아야 할 중요한 정보들이 들어간다.

 

  • <body>정보 전달을 위한 데이터가 들어가는 부분
    화면에 직접 출력되는 부분이기도 하다.

 

DOM (Document Object Model) 트리

  • 텍스트 파일인 HTML 문서를 브라우저에서 렌더링하기 위한 구조.
    • HTML 문서에 대한 모델을 구성한다.
    • HTML 문서 내의 각 요소에 접근 / 수정에 필요한 프로퍼티와 메서드를 제공한다.

 

 

 

 

시멘틱 태그 (Semantic tag)

HTML5 에서 새로 나온 태그로 의미론적 요소를 담은 태그이다.

기존의 영역을 의미하는 div 태그를 대체하여 사용한다.

 

대표적 시멘틱 태그 

  • header : 문서 전체나 섹션의 헤더( 머리말 부분 )
  • nav : 네비게이션
  • aside : 사이드에 위치한 공간, 메인 콘텐츠와 관련성이 적은 콘텐츠
  • section :  문서의 일반적인 구분, 컨텐츠의 그룹을 표현
  • article : 문서, 페이지, 사이트 안에서 독립적으로 구분되는 영역
  • footer : 문서 전체나 섹션의 푸터(마지막 부분)

 

 

non semantic 요소는 div, span등이 잇으며 h1, table 태그들도 시멘틱 태그로 볼 수 있다.

개발자 및 사용자 뿐만 아니라 검색엔진 등에 의미있는 정보의 그룹을 태그로 표현한다.

단순히 구역을 나누는 것 뿐만 아니라 "의미"를 가지는 태그들을 활용하기 위한 노력

요소의 의미가 명확해지기 때문에 코드의 가독성을 높이고 유지보수를 쉽게 한다.

검색엔진최적화(SEO)를 위해서 메타태그, 시멘틱 태그 등을 통한 마크업을 효과적으로 활용해야 한다.

 

시멘틱 태그를 이용한 HTML 구조

 

inline과 block

  • inline요소 내용만큼만 차지하기 때문에 height, width 등의 요소를 조정할 수 없다.ex) span, a, input, textarea, image, button ......
  • block한 줄을 다 차지하는 요소ex) p, h1 ~ h6, div, li, ul, ol, table ......

 

HTML의 주요 태그와 속성

문서 기본 태그

  • <html>
  • <head> : 헤드
  • <title> : 타이틀 / 헤드 안에 속하며 문서의 이름을 말한다.
  • <body> : 문서의 본문 - head와 body 사이에는 아무 것도 들어갈 수 없다.
  • <h1> ~ <h6> : 제목
  • <p> : 단락 / 블록 속성
  • <hr> : 수평줄
  • <br> : 줄 바꾸기

 

 

리스트 태그

  • <ol> : 순서가 있는 리스트
  • <ul> : 순서가 없는 리스트
  • <li> : 리스트의 아이템 / 세부 내용
  • <dl> : 정의 리스트

 

 

블록과 링크, 이미지 태그

  • <div> : 블록 속성으로 공간을 분할한다.
  • <span> : 인라인 속성으로 공간을 분할한다.
  • <a> : 하이퍼링크 태그로 현 HTML 페이지에서 다른 HTML 링크를 연결하는데 사용된다.
  • <img> : 이미지 삽입태그

 

 

주요 속성

  • a 태그의 속성
    • href=""해당 a 태그가 어떠한 url에 연결될지 설정할 수 있다.
    • target="_blank" : 새 탭 또는 새 창으로 열게 한다.

 

  • img 태그의 속성
    • scr=""이미지의 경로
    • alt=""이미지가 깨지거나 불러오지 못할 경우 해당 이미지에 대한 설명이 들어간다.
    • title=""마우스를 올려 놓았을 때 설명.

 

  • 그 외의 속성들
    • id="" : 요소에 고유한 이름을 지정할 수 있다.
    • class="" 요소가 특정 집단에 속한 것을 의미한다.
    • type="" 해당 태그의 타입을 지정할 수 있다.

 

 

출처
HTML: Hypertext Markup Language - MDN Web Docs - Mozilla
https://developer.mozilla.org/ko/docs/Web/HTML

'Develop > Web' 카테고리의 다른 글

[HTTP] 쿠키, 세션 그리고 캐시는 무엇일까?  (0) 2022.04.12
[정리] bootstrap gird  (0) 2022.02.14
[정리] CSS 요약  (0) 2022.02.14

관련글

티스토리툴바