HTML5과 CSS3 핵심 개념 정리

웹 개발의 기초는 HTML과 CSS에 있으며, 이 기술들은 지속적으로 진화하고 있습니다. 현재 HTML5와 CSS3는 표준으로 자리 잡았으며, 그 뒤에는 여러 국제 단체가 협력하여 규격을 제정하고 있습니다.

주요 표준화 기구로는 WHATWG(Web Hypertext Application Technology Working Group), W3C, 그리고 IETF(Internet Engineering Task Force)가 있습니다. WHATWG는 HTML5의 실질적인 주도권을 가지고 있으며, 실시간 웹 애플리케이션 지원을 중심으로 발전시키고 있습니다.

브라우저별 HTML5 지원 수준은 HTML5test에서 확인할 수 있으며, 특정 기능의 호환성은 Can I use를 통해 쉽게 조사할 수 있습니다. 자바스크립트 라이브러리인 Modernizr를 사용하면 브라우저가 새로운 기능을 지원하는지 실행 시점에 판단할 수 있어, 폴백 처리나 대체 UI 구현에 유용합니다.

문서 구조와 의미론적 태그

HTML은 의미(semantic)를 중시하는 방향으로 발전했습니다. 예를 들어 <abbr>은 약어를, <cite>은 인용 출처를 나타내며, 두 태그 모두 인라인 요소입니다. <em>과 <strong>은 강조를 표현하지만, 전자는 어조상 강조, 후자는 중요도 강조로 의미가 다릅니다.

태그는 닫는 방식에 따라 닫힘 태그를 요구하는 일반 태그(<p></p>)와 셀프 클로징 태그(<img src="" alt="">)로 나뉩니다. XHTML에서는 셀프 클로징 태그에 반드시 슬래시(/)를 붙여야 하지만, HTML5에서는 생략 가능합니다.

CSS 선택자와 스타일 적용 방식

CSS는 세 가지 방법으로 문서에 적용할 수 있습니다:

  • 인라인 스타일: style 속성에 직접 작성. 범위는 좁지만 우선순위가 가장 높습니다.
  • 임베디드 스타일: <style> 태그 내부에 작성. 현재 페이지에만 적용됩니다.
  • 외부 스타일시트: .css 파일을 만들고 <link>로 연결. 유지보수와 재사용 측면에서 가장 바람직합니다.

스타일시트 내에서 다른 스타일시트를 불러오려면 @import url("another.css");를 사용하며, 이 명령은 반드시 파일 최상단에 위치해야 합니다.

선택자 유형

CSS 선택자는 다음과 같은 종류가 있습니다:

  • 기본 요소 선택자: p, h1 등 태그 이름 기반
  • 계층 선택자:
    • section > h1: section의 직계 자식 h1 선택
    • h2 + p: h2 바로 다음 형제 p 선택
    • h2 ~ p: h2 이후 모든 동위 p 선택
  • ID 및 클래스 선택자: #header, .btn 등. ID는 문서 내 유일해야 하며, 클래스는 여러 개 부여 가능합니다.
  • 속성 선택자: img[alt], a[href="home.html"]
  • 의사 클래스(pseudo-class): 상태 기반 스타일링
    • 링크 상태: :link, :visited, :hover, :active
    • 포커스: :focus
    • 구조 기반: :first-child, :last-child, :nth-child(n)
  • 의사 요소(pseudo-element): ::before, ::after, ::first-line, ::first-letter

박스 모델과 배치

모든 요소는 박스 모델로 구성되며, 기본적으로 content, padding, border, margin 영역을 가집니다. box-sizing: border-box;를 설정하면 width와 height가 테두리와 패딩을 포함한 전체 크기를 의미하게 되어 레이아웃 제어가 쉬워집니다.

다음과 같은 초기화 규칙은 공통 관행입니다:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

이렇게 하면 모든 요소의 여백을 일관되게 시작할 수 있습니다.

포지셔닝과 플로트

요소 배치는 position과 float 속성으로 제어합니다.

  • static: 기본값. 문서 흐름에 따라 배치
  • relative: 원래 위치를 기준으로 오프셋
  • absolute: 가장 가까운 position이 static이 아닌 조상 요소를 기준으로 배치
  • fixed: 뷰포트를 기준으로 고정. 스크롤과 무관

float는 주로 레이아웃 용도로 사용되었으나, flexbox와 grid가 보편화되면서 점차 대체되고 있습니다. float된 자식을 포함하는 부모 요소의 높이 문제는 다음 방법으로 해결합니다:

  • overflow: hidden; 적용
  • 부모 요소에도 float 적용
  • clearfix 기법 사용

글꼴과 텍스트 스타일

글꼴 관련 속성은 font-family, font-size, font-weight, font-style 등을 포함합니다. 상대 단위로는 em, rem, %가 있으며, 특히 rem은 루트(html) 요소의 글꼴 크기를 기준으로 하므로 일관된 스케일 조절이 가능합니다.

웹 폰트는 @font-face 규칙이나 Google Fonts 같은 외부 서비스를 통해 로드할 수 있습니다. 일반적으로 사용 가능한 보안 폰트군(fallback fonts)은 serif, sans-serif, monospace, cursive, fantasy 등이 있습니다.

텍스트 정렬은 text-align으로 제어하며 justify 값은 양끝 정렬을 구현합니다. line-height는 줄 간격을 결정하며, 단위 없이 숫자로 지정하면 폰트 크기에 비례해 계산됩니다.

반응형 디자인과 미디어 쿼리

반응형 웹 디자인은 다양한 화면 크기에 적응하기 위해 미디어 쿼리를 사용합니다. 미디어 쿼리는 조건에 따라 스타일을 적용하며, 두 가지 방식으로 사용할 수 있습니다:

  • CSS 내부의 @media (max-width: 768px) { ... }
  • HTML의 <link> 태그에 media="(prefers-color-scheme: dark)"

뷰포트 설정은 모바일 환경에서 필수이며, 다음 메타 태그를 <head>에 추가해야 올바른 확대/축소가 동작합니다:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

애니메이션과 효과

CSS3의 transition 속성을 사용하면 속성 변화를 부드럽게 애니메이션할 수 있습니다. 예를 들어:

.button {
  background: blue;
  transition: background 0.3s ease;
}

.button:hover {
  background: red;
}

transform은 회전(rotate), 이동(translate), 스케일(scale) 등의 변형을 제공하며, transform-origin으로 기준점을 조정할 수 있습니다. 그림자 효과는 box-shadow와 text-shadow로 각각 요소와 텍스트에 적용 가능합니다.

폼과 접근성

폼 컨트롤은 <label>과 연결되어야 접근성이 보장됩니다. for 속성과 id를 매칭하거나, label 내부에 컨트롤을 중첩하면 됩니다. placeholder 속성은 입력 전 안내 문구를 표시하며, autocomplete는 자동 완성 기능을 제어합니다.

<figure>와 <figcaption>은 이미지나 코드 조각에 설명을 붙일 때 의미적으로 적합합니다. figcaption은 figure 내에서 첫 번째 또는 마지막 자식이어야 합니다.

기타 유용한 팁

  • z-index는 position이 static이 아닐 때만 작동합니다.
  • border-radius는 모서리를 둥글게 만듭니다.
  • opacity는 투명도를 조절하며, 0~1 사이 값을 가집니다.
  • word-wrap: break-word;는 긴 단어를 줄바꿈합니다.
  • display: inline-block은 인라인과 블록 특성을 결합합니다.
  • webkit 계열 브라우저에서 폰트를 부드럽게 하려면 -webkit-font-smoothing: antialiased;를 사용합니다.

태그: html5 CSS3 반응형웹 미디어쿼리 박스모델

7월 16일 04:44에 게시됨

인기 태그

©2026 괴물 클럽