[HTML] 기본 지식 정리

Muru·2024년 11월 8일
html
0

[HTML/CSS] 지식저장소

목록 보기
1/8
post-thumbnail

1 : HTML

HTML이란 Hyper Text Markup Language의 약어로, 웹페이지를 만들 때 사용하는 언어입니다. 웹페이지의 구조와 의미를 정의하는 마크업 언어로, 프로그래밍 언어와는 다릅니다.

Hyper Text와 Markup Language

하이퍼텍스트 (Hypertext)
하이퍼텍스트는 비순차적 접근을 가능하게 하는 구조를 말합니다.
영어를 직역하면 "문서를 뛰어넘는"이라는 뜻인데요. 책은 보통 1페이지, 2페이지, 3페이지 순으로 읽지만, 웹에서는 특정 콘텐츠를 읽으면 다른 페이지로 이동하거나 새로운 콘텐츠로 넘어가게 됩니다. 이렇듯 웹은 사용자가 비순차적으로 원하는 대로 콘텐츠를 탐색할 수 있는 구조로 되어 있어 하이퍼텍스트라 부릅니다.

마크업 언어 (Markup Language)
마크업 언어는 텍스트에 구조와 의미를 부여하는 언어입니다. 예를 들어,
"A" 텍스트는 헤더 (header) 영역에 배치하고,
"B" 텍스트는 메인 (main) 부분에 중요한 내용으로 표시하며,
"C" 텍스트는 푸터 (footer)에 카피라이트로 추가합니다.
이처럼 텍스트에 구조와 의미를 부여하면, 브라우저가 이를 해석하여 사용자에게 시각적으로 이해할 수 있는 형태로 표시해줍니다.

브라우저가 HTML 문서를 어떻게 해석하고 렌더링할까? 브라우저 렌더링 과정

2 : HTML 문서의 구조

HTML 문서는 다음과 같이 크게 4가지 순서로 이루어져 있습니다.
<!DOCTYPE html> → <html> → <head> → <body> , 각 영역은 브라우저가 문서를 올바르게 해석하고 렌더링하는 데 필수적입니다.

HTML 문서의 주요 구성 요소
<!DOCTYPE html>
문서의 최상단에 위치하며, 브라우저에게 HTML5 문서임을 알려줍니다.

<html> 요소
모든 HTML 콘텐츠를 감싸는 루트 요소입니다.
lang 속성을 사용하여 문서의 언어를 지정할 수 있습니다.

<head> 요소
메타데이터, 외부 파일 연결, 문서 정보 등을 포함하는 영역입니다. 이 영역의 정보는 웹페이지의 표시에는 직접 영향을 미치지 않지만, 브라우저와 검색 엔진이 페이지를 해석하는 데 중요한 역할을 합니다.

주요 구성 요소:
meta charset="UTF-8" : 문서의 문자 인코딩을 지정하여, 한국어와 같은 다국어가 깨지지 않도록 UTF-8로 설정.
meta name="viewport" : 반응형 웹 디자인을 위한 뷰포트 설정.
title : 브라우저 탭에 표시될 제목으로, SEO(검색 엔진 최적화)에도 영향을 미칩니다.
link : CSS 파일과 같은 외부 리소스를 연결하는 데 사용됩니다.
style : 문서 내에 직접 CSS를 작성할 수 있는 영역입니다.

<body> 요소

실제로 사용자가 웹페이지에서 볼 수 있는 모든 콘텐츠가 포함됩니다. 텍스트, 이미지, 링크, 비디오, 폼 등 다양한 요소들이 위치하며, 브라우저에 렌더링되는 부분입니다.

body 내부에서 흔히 사용하는 요소:
시맨틱 요소: header, nav, section, article, footer 등을 사용해 문서를 논리적으로 구분.
콘텐츠 요소: h1, p, ul, ol, img, a 등, 웹페이지에 보여지는 다양한 콘텐츠들.

3 : DOCTYPE HTML

doctype 은 문서 형식 선언(Document Type Declaration)의 약자 입니다.
특정 버전에 따른 문서 형식 정의를 따르겠다는 의미 입니다.
HTML5를 사용하기 전까지는 해당 문서 형식 선언할때 버전을 일일이 명시 해 주어야 했습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

하지만 HTML5부터는 버전을 따로 명세하지 않아도 선언만 하면 알아서 최신 HTML 표준을 사용하고 있음을 브라우저에게 알릴 수 있습니다.

그럼 명시하지 않으면 어떻게될까요??

비 표준 모드 (Quirks Mode)가 됩니다. 비 표준 모드란 과거의 HTML 해석 방식을 따르게 하여, 레거시 웹페이지의 레이아웃과 CSS를 해결하려는 모드입니다.
하지만 비 표준 모드를 사용시 최신 JS와 CSS 기능들의 사용에 제약이 생길 수 있습니다.

따라서 문서 형식 선언을 반드시 해서 표준 모드(Standards Mode)로 해석하게끔 해야 합니다. 표준 모드로 해석하게 되면 최신 HTML 표준을 따르게 됩니다.

4 : HTML,XML,XHTML,HTML5

HTML은 초기 웹의 문서 구조와 콘텐츠를 표현하기 위해 사용되었습니다.
그러다가 HTML의 느슨함으로 인해 문법의 불일치 및 호환성 문제가 생깁니다.
HTML의 단점을 보완하고자 XML을 결합한 XHTML이 탄생하게 되는데요

XML(eXtensible Markup Language)은 데이터를 구조화하고 저장하기 위한 마크업 언어입니다. XML은 HTML처럼 태그를 사용하지만, 웹페이지를 만드는 용도가 아닌 데이터를 정의하고 전달하기 위한 목적으로 설계되었습니다. 비교적 엄격한 문법 체계를 가집니다.

그 결과 XHTML은 XML의 엄격한 문법체계로 문법 일치 및 호환성 문제를 해결이 되었습니다.
많이 거슬러 올라가지 않아도 2000년대 까지만해도 XHTML을 사용 했습니다.
우리가 플래시게임을 하려면 플러그인을 설치했거나, 아니면 Active 설치하라는 경험은 해보셨을것 같습니다. 이런 경험이 있다면 XHTML을 사용 했다는 증거입니다!
하지만 XHTML도 시대의 흐름에 따라 바뀌어야만 했습니다. 한계가 보이기 시작합니다.

  • 지나치게 엄격한 문법때문에 제약이 매우 많아졌습니다. 이는 정말 사소한 문법오류를 내도 문서 전체가 렌더링 오류가 발생 하고는 했습니다.
    (img,br태그 반드시 닫힌 태그로 맺음을 내야하는 등..)
  • 웹 어플리케이션의 멀티미디어 사용이 증가했지만 플러그인 설치나 Active 설치를 해야되는 등 사용자 입장에서 매우 불편한 경험을 느낍니다.
  • SEO에 한계를 느낍니다. 지금은 시멘틱태그를 통한 문서 구조를 논리적으로 구분하여 SEO에 유리하게끔 유도할 수 있지만 XHTML은 웹 문서의 의미를 파악하지 못했습니다.

여기에 서술한것 외에도 많은 이유로 다음 단계로 넘어가게 됩니다.

HTML5의 탄생이 시작합니다.
HTML5는 XHTML의 한계를 극복하고 더 유연하고 실용적인 웹 표준을 제공했습니다. 특히, 웹 애플리케이션과 멀티미디어, 시맨틱 웹을 쉽게 구현할 수 있는 기능을 추가하여, 웹 환경을 발전시켰습니다.

  • 더 유연하고 간편한 문법
  • 더 나은 호환성과 보안
  • audio, video태그를 사용하여 플러그인 의존에 벗어나 보안성과 호환성 상승
  • 시멘틱 태그로 구조 명확화하여 SEO 최적화와 접근성도 증가
  • 로컬 저장소 기능 (LocalStorage와 SessionStorage) 제공

5 : 다국어가 포함된 웹페이지

웹 접근성을 높이기위해 HTML의 속성인 lang 을 사용하여 각 언어에 맞게 설정해주어야 합니다. <html lang="ko">
그런데 왜 써야할까요? 누가봐도 영어인것을 알고, 한국어로 쓰여있음을 알 수 있음에도 말이죠

  1. 스크린 리더가 페이지의 언어를 인식하여 올바르게 발음할 수 있도록 합니다.

    스크린 리더(Screen Reader)는 시각장애인이나 시력이 약한 사람들을 위해 웹 페이지나 소프트웨어 화면의 텍스트 내용을 소리로 읽어주는 보조 기술입니다.

  2. 다국어 사이트에서 각 언어 페이지에 적절한 lang속성을 사용하면, 특정 언어 사용자에게 그 언어로 된 페이지가 우선 노출됩니다.

  3. lang속성을 통해 번역 도구가 해당 언어에 맞는 번역을 좀더 정확하게 할 수 있습니다.

유의해야할점은 다국어사이트라고 해서 여러 언어를 한페이지내에 혼합해서 사용하는것은 지양해야합니다. 가독성면에서도 좋지않고 SEO 최적화면에서도 최악이기 떄문입니다.
되도록이면 언어별로 분리해서 페이지를 구성하는것이 좋습니다.

6 : HTML 시멘틱 태그

HTML5 표준이 등장 하기 전 시멘틱 태그를 사용하지 않았을때 문제점이 많았습니다.
다음과 같은 어려움이 있어 HTML5와 함께 시멘틱 태그가 도입됩니다.

  • SEO 최적화 좋지않음 : div나 span같은 일반 태그로는 웹 페이지의 역할을 파악하는데 어려움을 주었습니다. 이런 어려움은 검색 엔진 최적화 측면에서 좋지 않았습니다.

  • 웹 접근성이 좋지않음 : 최적화 뿐만아니라 신체적 제한이 있는 사람들한테도 문제였습니다. 구조를 표현하지 않는 태그로만 구성된 웹 페이지에서는 스크린 리더가 콘텐츠의 의미나 역할을 파악하기 어려워서 장애인을 포함한 다양한 사용자에게 불편함을 주었습니다.

  • 코드의 가독성 떨어짐 : 코드를 보면 직관적으로 어느 코드를 의미하는지 파악하기 힘듭니다. 이는 유지보수에 좋지않은 영향을 끼칩니다

이처럼 웹의 복잡성이 증가함에 따라 HTML5 표준이 증가하고, 이때 시멘틱 태그들이 함께 도입됩니다.

<nav> : 내비게이션 링크를 묶는데 사용합니다. (주로 페이지 내비게이션 메뉴에 사용)
<header> : 페이지나 섹션의 머리말 역할을 합니다
<main> : 문서의 주요 콘텐츠를 나타냅니다.
<aside> : 주 콘텐츠와는 별개의 보조 콘텐츠를 나타냅니다.
<article> : 독립적으로 구성이 가능한 콘텐츠를 나타냅니다. 독립성이 높습니다.(뉴스,기사...)
<section> : 콘텐츠를 주제별로 나누는 섹션을 나타냅니다. 독립성이 낮습니다.(주제 구분 용도로 주로 사용됨)
<footer> : 페이지의 바닥글을 의미합니다.
<figure> : 이미지,다이어그램,코드 블록과 같은 독립적인 콘텐츠를 나타냅니다.
<figcaption> : figure태그의 설명을 추가할때 사용합니다.
<mark> : 강조나 하이라이트 표시가 필요한 텍스트에 사용됩니다.
<time> : 시간이나 날짜를 나타냅니다.

시멘틱 태그의 도입 효과

  • SEO 최적화 : 검색 엔진이 페이지 구조를 이해하기 쉬워져, 검색 결과에서 콘텐츠의 가시성이 높아집니다.

  • 웹 접근성 개선 : 스크린 리더가 웹 페이지 구조를 잘 이해하여 장애인 등 다양한 사용자들이 웹 콘텐츠를 보다 쉽게 접근할 수 있습니다.

  • 코드 가독성 향상 : 시멘틱 태그를 사용하여 코드를 볼때 쉽게 역할을 파악할 수 있습니다.

7 : 쿠키와 세션 및 웹 스토리지

HTTP는 비연결성으로 인해 무상태의 속성을 항시로 갖습니다.

비연결성 : 클라이언트와 서버가 한번 연결을 맺을경우, 서버는 응답을 마치면 맺었던 연결을 끊어버리는 성질을 의미합니다. HTTP는 인터넷 상에서 불특정 다수의 통신 환경을 기반으로 설계되었기 때문에 연결을 유지하기 위한 리소스를 줄이면 더 많은 연결을 할 수 있으므로 비연결적인 특성을 갖게됩니다.

무상태의 속성을 항시로 갖는다는것은 다음과 같은 예시를 의미합니다.

1. 로그인 
2. 상품 클릭
3. 로그인
4. 물품 수량 기재 후 구매 버튼 클릭
5. 로그인
6. 사용자 정보 입력 후 폼 제출
7. 로그인
8. 결제
9. 로그인

이런식으로 매번 끊임없이 인증을 해야합니다..

그래서! 상태를 기억하기 위해 쿠키(브라우저)와 세션(서버)의 방식으로 클라이언트를 식별 할 수 있게 됩니다.

쿠키 : 클라이언트 측 저장소이며 주로 인증 상태 유지 및 관리에 사용됩니다.
세션 : 서버측 저장소이며 마찬가지로 인증 상태 유지 및 관리에 사용됩니다.

두개 중 어느것을 사용할것인지는 장단점을 잘 알고 선택하는것이 중요합니다.

쿠키의 장점 :
1 :서버에 저장을 하지 않기 때문에 서버에 부하가 가지 않습니다.
2 :쿠키는 브라우저에서 쉽게 관리되어 클라이언트 측 인증 상태를 간편하게 유지 가능합니다.

쿠키의 단점 :
1 : 쿠키는 보안에 취약합니다.

  • 크로스 사이트 스크립팅(XSS) 공격에 취약합니다. 쿠키에 저장된 데이터는 자바스크립트를 통해 접근이 가능하므로 XSS 공격으로 탈취될 가능성이 있습니다.
  • 크로스 사이트 요청 위조(CSRF) 공격에 취약합니다. CSRF는 다음과 같은 과정을 거칩니다.
    1.사용자가 은행 사이트로 로그인하여 인증된 상태가 됩니다.
    2.사용자는 실수로 공격자의 조작된 URL로 들어가버려서 공격자의 계좌로 이체요청이 자동으로 전달 됩니다.
    3.쿠키를 사용하는 은행에서는 사용자의 인증 쿠키가 자동으로 포함되어 정상적인 요청으로 처리됩니다.
    4.사용자는 자신의 계좌의 돈을 빼앗기게 됩니다.

2 : 쿠키는 작은 용량으로 제한되어 있습니다.

세션의 장점 :
1 : 서버에서 상태 관리를 하므로 보안성이 쿠키보다 높습니다. 따라서 XSS의 보얀 취약성이 줄어듭니다.**
2 : 쿠키는 작은 용량으로 제한되어 있는 반면에 세션은 보다 많은 용량이 가능합니다.

세션의 단점 :
1 : 사용자가 많아질 경우 각 사용자의 세션 정보를 서버에 저장해야 하므로, 동시 접속자가 많아질때 서버의 메모리와 리소스가 매우 부담이 갈 수 있습니다.



쿠키와 세션의 단점을 보완하고 장점을 가져오는 방식으로 토큰 기반의 인증 방식이 도입됩니다.

토큰 기반의 인증 방식의 핵심은 보호할 데이터를 토큰으로 치환하여 원본 데이터 대신 토큰을 사용하는 기술 입니다.

그래서 중간에 공격자로부터 토큰이 탈취당하더라도 데이터에 대한 정보는 알 수 없으므로, 보안성이 높은 기술이라 할 수 있습니다.

대표적으로 JWT이 있습니다.
JWT(Json Web Token)의 약자로 전자 서명된 Url-Safe JSON을 의미합니다.
서버가 사용자의 인증 상태를 유지하기 위해서 세션을 따로 저장할 필요가 없어서 서버에 부담이 가지 않고 이는 확장성이 높음을 의미하고 보안이 좋은 방식입니다.

다음과같은 흐름으로 동작됩니다.
1. 사용자가 로그인합니다.
2. 사용자의 필요한정보(ID,이메일,권한)등 JWT 토큰에 담아 생성합니다.
3. 비밀키를 이용하여 해당 토큰에 서명을 추가하여, 이후에 이 토큰이 위조되지 않았는지 확인 가능합니다.
4. 생성된 JWT는 클라이언트측에 전달되고 이를 클라이언트에 저장합니다.
어디에 저장할것인가는 (쿠키 or 로컬 스토리지 or 세션 스토리지 ) 각 프로젝트에 맞게 선택합니다.


Q. 갑자기 로컬 스토리지와 세션 스토리지는 무슨말인가요??
쿠키와 동일한 저장소로 클라이언트 저장소(브라우저 저장소) 입니다.
쿠키와 동일한 클라이언트 저장소이지만 용도는 다릅니다.

로컬 스토리지 (Local Storage)

  • 저장 기간: 브라우저를 닫아도 데이터가 남아 있으며, 사용자가 직접 삭제하지 않는 한 유지됩니다.
  • 용도: 장기적으로 저장해야 하는 데이터를 보관할 때 사용합니다.
  • 특징:
    모든 탭과 창에서 동일한 도메인에 대해 데이터가 공유됩니다.
    비교적 큰 용량을 지원하며(약 5~10MB), 쿠키보다 더 많은 데이터를 저장할 수 있습니다.
    사용 예: 사용자 설정(예: 테마, 언어 설정), 장기적인 사용자 정보 저장.

세션 스토리지 (Session Storage)
저장 기간: 현재 브라우저 탭에서만 유효하며, 탭을 닫으면 데이터가 삭제됩니다.

  • 용도: 특정 탭에서만 유지되어야 하는 임시 데이터를 보관할 때 사용합니다.
  • 특징:
    세션 스토리지는 현재 탭 내에서만 데이터를 공유하며, 탭 간 공유가 되지 않습니다.
    로컬 스토리지와 마찬가지로 쿠키보다 많은 양의 데이터를 저장할 수 있습니다.
  • 사용 예: 특정 페이지에서 임시로 입력한 폼 데이터, 특정 탭에서만 필요한 임시 데이터.

요약하자면
로컬 스토리지는 영구적인 클라이언트 저장소이고, 세션 스토리지는 탭 단위의 임시 저장소입니다.
쿠키는 클라이언트와 서버 간의 세션 관리에 적합하며, HTTP 요청마다 서버에 자동으로 전송됩니다. 또한 세션 만료를 정할 수 있습니다.

8 : data- 속성

data- 속성은 HTML 요소에 추가적인 정보를 저장하기 위한 사용자 정의 속성입니다. JavaScript로 데이터를 쉽게 읽고 조작할 수 있어 유용합니다.

사용 예시: data- 속성은 CSS로도 접근할 수 있고, JavaScript에서 dataset 객체를 통해 간편하게 값을 가져오거나 설정할 수 있습니다.

활용 사례: 사용자 ID, 상태 값 등 특정 요소에 관련된 데이터를 저장하여 동적인 UI를 구현하거나, 별도의 요청 없이 필요한 데이터를 요소에 저장하는 데 유용합니다.

<body>
  <div id="user" data-user-id="77777" data-user-role="관리자">
    사용자 정보: 
    <span id="userInfo"></span>
  </div>

  <script>
    // data-속성 데이터를 가져와 화면에 표시
    const userElement = document.getElementById("user");
    const userId = userElement.dataset.userId;
    const userRole = userElement.dataset.userRole;

    document.getElementById("userInfo").textContent = `ID: ${userId}, Role: ${userRole}`;
  </script>
</body>
사용자 정보: ID: 77777, Role: 관리자

9 : script, script-async, script-defer 차이

  1. <script>
    기본적으로 HTML을 위에서 아래로 읽어 내려가며 JavaScript를 만나면 즉시 실행합니다.
    단점: 스크립트가 로드되는 동안 HTML 파싱이 멈추기 때문에, 렌더링 속도 저하가 발생할 수 있습니다.
    사용 시기: DOM의 생성 이전에 스크립트가 실행돼야 할 때 사용합니다.
  2. <script async>
    비동기 로딩을 하며, 스크립트가 로드되는 동안 HTML 파싱이 계속 진행됩니다.
    로드 완료 후 즉시 실행되기 때문에, 실행 순서가 HTML에 작성된 순서와 다를 수 있습니다.
    사용 시기: 스크립트가 다른 스크립트와 독립적이며, 로딩 시점에 따른 실행 순서가 중요하지 않을 때 사용합니다. 예를 들어, 추적 코드나 분석 코드에 적합합니다.
  3. <script defer>
    비동기 로딩을 하지만, HTML 파싱이 완료된 후에 순서대로 실행됩니다.
    사용 시기: DOM이 완성된 후 실행되어야 하는 스크립트에 적합하며, 순서가 중요한 스크립트들에 유용합니다.

profile
Muru
Developer
다음 포스트

[HTML] 브라우저의 렌더링 과정및 최적화작업

0개의 댓글