📓
개발노트
CtrlK
  • Introduction
  • Fundamentals
    • HTML
      • HTML 페이지 로딩 최적화 기법
    • CSS
      • CSS 문제 해결
    • JavaScript
      • JavaScript 문제 해결
  • Toolchain
    • VCS: Git & GitHub
    • Ecosystem: React
      • 리액트 개발 환경 세팅하기
      • 리액트로 작업하기
      • 렌더링 또는 재렌더링
      • React Testing Library
    • Unit Test: Jest
    • Build Tool
    • Linter: ESLint
  • Accessibility
    • 접근성 개념 정리
      • Cross Browser Testing
Powered by GitBook
On this page
  • 고려사항
  • 기초적인 구조 잡기
  • 텍스트에 의미 부여하기
  • 멀티미디어 임베딩
  • 복합 구조 만들기
  • 데이터 표현
  • 국제화
  • 성능
  1. Fundamentals

HTML

웹사이트를 만들 때, 웹콘텐츠로 구성된 웹페이지의 구조를 정의하는 기본 기술.

유저가 웹사이트를 방문하면 브라우저는 HTML을 해석하여 웹페이지의 구조를 파악하고 이를 화면에 표시한다.

고려사항

기초적인 구조 잡기

  • 웹페이지를 논리적 영역으로 분할하기

  • 제목과 단락 구조 설정하기

텍스트에 의미 부여하기

  • 목록

  • 강조 및 중요 표시

  • 컴퓨터 코드

  • 이미지에 주석 달기

  • 약어 표시

  • 인용문

  • 용어 정의

  • 윗첨자와 아랫첨자

  • 삽입 & 제거

  • 하이퍼링크

멀티미디어 임베딩

  • 이미지

  • 반응형 이미지

  • 벡터 이미지

  • 이미지 위에 히트맵 처리

  • 비디오

  • 다른 웹페이지

복합 구조 만들기

  • 웹폼 구성하기

  • 테이블 구성하기

  • 접근성을 고려한 테이블

데이터 표현

  • 데이터 어트리뷰트 사용

국제화

  • 단일 웹페이지에 여러 언어 마크업하기

  • 날짜와 시간 마크업하기

성능

  • 빠른 HTML 로딩을 위한 팁

PreviousIntroductionNextHTML 페이지 로딩 최적화 기법

Last updated 2 years ago