코딩 컨벤션 2024

문서 관리 책임자	[UX]이명주
태그	UXG가이드
최종 편집 일시	@2024년 5월 9일 오후 5:35
최종 편집자	[UX]이명주
추가 카테고리	퍼블리싱
현재 문서 상태	스탠다드

💡

코딩 컨벤션은 프로그래밍 시에 따르는 일련의 지침이나 규칙을 의미합니다. 이 규칙들은 주로 코드의 가독성과 유지보수를 향상시키기 위해 사용됩니다.

Last Update : 2024.05.09

1. 소개

1-1. 목적 및 중요성

이 코딩 컨벤션 문서의 주요 목적은 HTML 및 CSS 작업을 표준화하고 일관성을 유지하기 위함입니다. 이를 통해 다음과 같은 중요한 이점을 얻을 수 있습니다:

가독성 향상: 일관된 코딩 스타일은 코드를 읽고 이해하기 쉽게 만듭니다. 이는 팀원 간의 효율적인 커뮤니케이션을 가능하게 하며, 새로운 팀원이 프로젝트에 빠르게 적응할 수 있도록 도와줍니다.

유지보수 용이: 일관된 코딩 관행은 코드의 유지보수를 용이하게 합니다. 누구든지 코드의 구조와 패턴을 쉽게 파악하고, 필요한 변경 사항을 빠르고 정확하게 적용할 수 있습니다.

오류 감소: 명확한 규칙과 지침은 실수를 줄이고, 잠재적인 오류를 사전에 방지하는 데 도움을 줍니다.

1-2. 적용 범위

이 코딩 컨벤션은 다음과 같은 범위에 적용됩니다.

모든 HTML 및 CSS 코드, 프로젝트 내에서 생성되거나 수정되는 모든 웹 문서 및 스타일시트

그룹 내 모든 퍼블리셔 및 스크립터와 관련 작업에 참여하는 모든 그룹원

현재 진행 중인 프로젝트뿐만 아니라, 향후 시작될 모든 새로운 프로젝트

💡

이 규칙들은 프로젝트의 성격이나 특정 상황에 따라 유연하게 적용될 수 있으며, 지속적인 검토와 피드백을 통해 필요에 따라 업데이트될 수 있습니다.

2. 코딩 스타일

코딩 스타일은 코드의 가독성과 일관성을 보장하기 위해 필수적입니다. 이 섹션에서는 HTML 및 CSS 코드 작성 시 고려해야 할 주요 스타일 규칙에 대해 설명합니다.

2-1. 들여쓰기 및 공백

들여쓰기: HTML 요소의 중첩 구조를 명확하게 표현하기 위해 탭(tab)이나 공백(space) 2개를 사용하여 들여쓰기를 합니다. 이는 부모-자식 관계를 시각적으로 쉽게 구별할 수 있도록 도와줍니다.

공백: CSS 선언 블록에서 속성과 값 사이에는 공백 하나를 두어 가독성을 높입니다. 예: color: red;

들여쓰기를 위해 탭을 사용하거나 탭과 공백을 혼합하지 마세요.

2-2. 코드 포맷팅 규칙

HTML: 모든 HTML 태그는 소문자를 사용합니다. 속성은 항상 큰 따옴표(" ")로 감싸며, 여러 속성이 있는 경우 공백으로 구분합니다.

<!DOCTYPE html>
<html>
<head>
    <title>문서 제목</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>메인 제목</h1>
        <p class="description">이것은 단락입니다.</p>
        <img src="image.jpg" alt="설명 텍스트">
    </div>
</body>
</html>

CSS: 선택자와 중괄호 사이에는 공백을 두고, 선언 블록의 시작 중괄호 {는 선택자와 같은 줄에 둡니다. 선언은 각각 새로운 줄에 작성합니다. 속성 값에 따옴표를 사용해야 하는 경우 큰 따옴표(" ")를 사용합니다.
```
.container {
    width: 100%;
    margin: auto;
}

h1 {
    color: blue;
    font-size: 20px;
}

.image-background {
    background-image: url("background.jpg");
}
```

2-3. 코드 사용 규칙

2-3-1. 링크태그 (<a href=””>)

<a href=””> 태그의 href 값은 빈 값으로 둡니다. a태그로 버튼 태그를 만들 때는 href=”javascript:void(0)” 등으로 처리 했었지만 링크와 버튼의 구분이 명확한 현재는 url값이 기획서에 있을 경우는 해당 url을 넣어주고 없을 경우는 빈 값으로 두도록 합니다.

2-3-2. 헤딩태그 (<h1> ~ <h6>)

h1, h2, h3, h4, h5, h6 태그는 HTML에서 제목의 중요도를 계층적으로 나타내는 헤딩(heading) 태그입니다. 이들은 웹 문서의 구조를 명확히 하고, 콘텐츠의 이해를 돕는 데 중요한 역할을 합니다. 코딩 컨벤션에 포함시킬 수 있는 몇 가지 주요 마크업 원칙을 정리하면 다음과 같습니다:

1. 계층적 사용

h1부터 h6까지의 헤딩은 계층적으로 사용해야 합니다. h1은 가장 높은 수준의 제목을 나타내고, h2는 h1의 하위 섹션, h3은 h2의 하위 섹션처럼 계속 이어지게 설계해야 합니다. 제목의 수준은 문서의 섹션 구조를 반영해야 합니다.

2. 유일한 h1

각 페이지에는 하나의 h1 태그만 사용하는 것이 일반적인 권장사항입니다. 이는 페이지의 주제나 목적을 가장 잘 나타내는 제목입니다.

3. 의미적 정확성

제목 태그는 오로지 제목을 위해 사용되어야 합니다. 스타일링 목적으로 제목 태그를 사용하지 않아야 하며, 대신 CSS를 사용하여 스타일을 적용해야 합니다.

2-3-3. 아이콘 사용 (<i>)

아이콘을 컨텐츠의 CSS 배경 이미지가 아닌, 별도의 HTML 마크업 요소로 포함하는 방식은 여러 유리한 점을 가지고 있습니다. 이 방식은 웹 접근성, 인터랙티브 디자인, 컨텐츠 관리 측면에서 장점을 제공합니다.

<!-- 스크린 리더에 읽히지 않아야 할 경우 -->
<i class="ico-close ico-normal" aria-hidden="true"></i>

<!-- 스크린 리더에 읽혀야 할 경우 -->
<i class="ico-close ico-normal" role="img" aria-label="닫기"></i>

<!-- 버튼 사용 예시 -->
<button type="button" class="btn">
  <i class="ico-search ico-normal" aria-hidden="true"></i>
  <span class="btn-txt">검색</span>
</button>

2-4. 코멘트 사용 지침

구조 주석: 큰 섹션의 시작과 끝을 표시하거나, 파일의 주요 부분을 구분하는 데 주석을 사용합니다.

일시적 주석: 향후 수정이 필요하거나 잠시 비활성화된 코드에 대해 주석을 달아 해당 상황을 명확히 합니다.

💡

주석 사용은 코드의 의도와 구조를 명확히 하여 다른 개발자들이 코드를 이해하고 유지보수하는 데 큰 도움이 됩니다. 불필요하거나 오해를 불러일으킬 수 있는 주석은 피해야 합니다.

HTML 주석: HTML 주석은  형태로 사용합니다. 페이지 레이아웃의 주요 부분이나 복잡한 구조를 설명할 때 유용합니다.

HTML 수정 주석: HTML 수정 주석은   형태로 시작과 끝을 표시 해줍니다. 기본 형태는 위와 같고 프로젝트 내에서 변경하여 사용할 수 있습니다. 목적은 개발자가 알아보기 쉽게 하기 위함입니다.

CSS 주석: CSS 주석은 /* 주석 내용 */ 형태로 사용합니다. 스타일 규칙의 목적이나 특정 속성의 사용 이유를 설명할 때 사용합니다.

CSS 수정 주석: CSS 수정 주석은 개발자에게 전달 할 필요가 없기 때문에 표시하지 않지만 예외로 표시가 필요할 경우는 /* 20240228 수정 */ /* // 20240228 수정 */ HTML 주석과 동일하게 표시 합니다.

/*! 주석 */ 형태의 주석은, Gulp와 같은 빌드 도구를 사용하여 CSS 파일을 최소화(minify)하는 과정에서도 해당 주석을 보존하기 위한 명시적인 지시자입니다. 이러한 주석은 주로 라이브러리 라이선스 정보 또는 저작권 표기와 같은 중요 메타데이터를 유지하기 위해 사용됩니다. 일반적인 사용 사례에서는 필요하지 않으므로 ! 는 사용하지 않습니다.

💡

HTML과 CSS 코드를 작성할 때 기본적으로 따라야 할 들여쓰기, 공백 처리, 코드 포맷팅 및 주석 사용에 대한 지침을 제공합니다. 이러한 규칙들은 코드의 일관성과 가독성을 높이는 데 도움이 됩니다.

3. HTML

효과적이고 접근성 높은 웹사이트를 구축하기 위해 HTML을 작성할 때 따라야 할 주요 규칙과 모범 사례를 정리했습니다.

3-1. 문서구조

Doctype 선언: 모든 HTML 문서는 <!DOCTYPE html>로 시작하여 HTML5 문서임을 명시해야 합니다.

문서 인코딩: 문자 인코딩은 <meta charset="UTF-8">를 사용하여 UTF-8로 설정합니다.

<!DOCTYPE html>
<meta charset="UTF-8">

3-2. 메타데이타

메타 태그(meta tag)는 웹 페이지의 메타데이터(metadata)를 정의하는 데 사용되며, HTML 문서의 <head> 섹션 내에 위치합니다. 메타 태그는 웹 페이지에 대한 정보를 제공하지만, 페이지의 콘텐츠로 직접적으로 표시되지는 않습니다. 메타 태그의 주요 목적은 다음과 같습니다:

검색 엔진 최적화(Search Engine Optimization, SEO): 메타 태그는 검색 엔진이 웹 페이지의 내용을 이해하고 적절하게 색인화하는 데 도움을 줍니다. 예를 들어, <meta name="description" content="페이지 설명">은 검색 결과에 표시될 페이지의 간략한 설명을 제공합니다.

문서 메타데이터 제공: 페이지의 문자 인코딩, 저자, 만료 날짜, 페이지 설명 등과 같은 다양한 메타데이터를 정의합니다. 이 정보는 브라우저나 검색 엔진이 문서를 올바르게 해석하고 처리하는 데 필요합니다.

웹 브라우저 제어: 일부 메타 태그는 웹 브라우저의 행동을 제어하는 데 사용됩니다. 예를 들어, <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover">은 반응형 웹 디자인에서 모바일 기기에서의 보기 영역(viewport)을 설정합니다.

소셜 미디어 통합: Open Graph(OG) 태그와 같은 메타 태그는 소셜 미디어 플랫폼에서 페이지가 공유될 때 어떻게 보여질지를 정의합니다. 이를 통해 페이지의 제목, 설명, 이미지 등이 소셜 미디어에서 적절하게 표시될 수 있도록 합니다.

Open Graph(OG) 태그: 카톡 공유하기 기능이라고 보면 됩니다. OG 데이타의 사용 여부는 전부 기획 담당자 또는 현업과 상담 후 내용을 적어야 합니다.

메타 태그는 웹 페이지의 효과적인 표현, 검색 엔진과의 상호작용, 그리고 사용자 경험 개선에 중요한 역할을 합니다. 따라서, 웹 페이지를 개발할 때 메타 태그의 적절한 사용은 매우 중요합니다.

<!-- mobile 및 반응형 viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover">

<!-- pc용 viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- meta sample -->
<meta name="keywords" content="이트라이브,etribe,디지털 에이전시 , 웹에이전시 키워드는 10개 미만 대표 적인 것으로 구성 : ">
<meta name="description" content="이트라이브는 홍대에 위치한 디지털 미디어 에이전시. 우리는 혁신적 사고와 고객 경험의 향상을 위해 열정을 공유하는 기획자, 디자이너, 퍼블리셔, 개발자들이 근무하고 있다.">
<meta property="og:title" content="이트라이브">
<meta property="og:url" content="etribe.co.kr / www.etribe.co.kr">
<meta property="og:image" content="">
<meta property="og:description" content="당신이 흥미를 가질 만한 에이전시 ">

<!-- Favicon 과 기타 앱 아이콘 -->
<link rel="shortcut icon" type="image/x-icon" href="../../images/temp-icons8-two-hearts-color-32.png">
<!-- iOS icons -->
<link rel="apple-touch-icon" sizes="57x57" href="/icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/icon-152x152.png">

<!-- Android icons -->
<link rel="icon" type="image/png" sizes="192x192" href="/icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/icon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/icon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icon-16x16.png">

<!--
	웹 앱 매니페스트는 웹 애플리케이션에 대한 메타데이터를 제공하는 JSON 파일로, 애플리케이션의 이름, 시작 URL, 아이콘, 배경 색상, 표시 방법 등을 정의할 수 있습니다. 주로 Progressive Web Apps (PWA)의 일부로 사용됩니다. - Android
-->
<link rel="manifest" href="site.webmanifest">

<!-- 주소창 없애줌 웹앱일떄 - iOS.   -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- 주소창 없애줌 웹앱일떄 - Android. -->
<meta name="mobile-web-app-capable" content="yes">

<!-- Make the app title different than the page title - iOS. -->
<meta name="apple-mobile-web-app-title" content="Mobile web app title">

<!-- 상태바 색 - iOS only. -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<!-- 웹 애플리케이션 또는 웹사이트의 테마 색상을 지정 - Android -->
<meta name="theme-color" content="#fafafa">

<!-- 번호 전화 번호로 자동 인식 금지. -->
<meta name="format-detection" content="telephone=no">

3-3. 태그 사용 기준

시맨틱 태그 사용: 의미론적으로 적합한 태그를 사용하여 내용의 구조를 명확히 합니다. 예를 들어, <header>, <footer>, <article>, <section> 등의 태그를 적절하게 활용합니다.

비시맨틱 태그 사용 최소화: <div>와 <span> 같은 비시맨틱 태그의 사용은 최소화하며, 필요한 경우에만 사용합니다.

시맨틱 태그의 사용은 프로젝트 퍼블리싱 PL과 협의하여 결정하도록 합니다.

3-4. 속성 순서 및 작성 방식

속성 순서: 일관된 속성 순서를 따릅니다. 일반적으로, id, class, name, data-*, src, for, type, href, value, title, alt, role, aria-* 순으로 작성합니다.

불필요한 속성 생략: 불필요하거나 기본값인 속성은 생략합니다. 예를 들어, <script> 태그의 type 속성은 HTML5에서는 불필요합니다.

속성 순서는 참고 해주시면 됩니다. gulp에서 자동으로 정렬 됩니다.

3-5. 시맨틱 태그 사용 예제

시맨틱 태그의 사용은 프로젝트 퍼블리싱 PL과 협의하여 결정하도록 합니다.

3-5-1. 시맨틱 태그 올바른 사용 예제 모음

<main>

<main> 태그는 웹 페이지에서 가장 중요한 콘텐츠를 감싸는 용도로 사용됩니다. 이 태그는 문서의 핵심 주제나 애플리케이션의 핵심 기능을 나타내는 콘텐츠를 담기 위한 것으로, 문서 내에서 단 한 번만 사용되어야 합니다. 검색 엔진과 보조 기술(예: 스크린 리더)은 <main> 태그를 사용하여 주요 콘텐츠를 식별할 수 있습니다. 다음은 <main> 태그 사용 예시입니다:

예제 1: 블로그 페이지

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>블로그 포스트</title>
</head>
<body>
  <header>
    <h1>나의 블로그</h1>
    <nav>
      <ul>
        <li><a href="#">홈</a></li>
        <li><a href="#">블로그</a></li>
        <li><a href="#">연락처</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h2>HTML5의 시멘틱 태그</h2>
      <p>HTML5에서 도입된 시멘틱 태그는 웹 개발에 혁신을 가져왔습니다...</p>
      <!-- 포스트 내용 계속 -->
    </article>
  </main>

  <footer>
    <p>© 2023 나의 블로그. 모든 권리 보유.</p>
  </footer>
</body>
</html>

이 예제에서 <main> 태그는 블로그 포스트의 본문을 감싸고 있으며, 이는 페이지에서 가장 중요한 콘텐츠 부분을 나타냅니다.

예제 2: 제품 목록 페이지

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>제품 목록</title>
</head>
<body>
  <header>
    <h1>온라인 스토어</h1>
    <nav>
      <ul>
        <li><a href="#">홈</a></li>
        <li><a href="#">제품</a></li>
        <li><a href="#">세일</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section>
      <h2>최신 제품</h2>
      <ul>
        <li>제품 1</li>
        <li>제품 2</li>
        <li>제품 3</li>
      </ul>
    </section>
    <section>
      <h2>인기 제품</h2>
      <ul>
        <li>제품 A</li>
        <li>제품 B</li>
        <li>제품 C</li>
      </ul>
    </section>
  </main>

  <footer>
    <p>© 2023 온라인 스토어. 모든 권리 보유.</p>
  </footer>
</body>
</html>

이 페이지에서는 <main> 태그가 제품 목록을 포함하고 있으며, 사용자에게 제공되는 주요 정보를 담고 있습니다. 여기에는 최신 제품과 인기 제품 섹션이 포함됩니다.

💡

이러한 예시들은 <main> 태그가 문서 내에서 어떻게 핵심 콘텐츠를 명확하게 구분하는지 보여줍니다. 이를 통해 웹 접근성과 구조화된 마크업을 개선할 수 있습니다.

<article>

독립적으로 구분되거나 재사용 가능한 영역을 정의합니다. 예를 들어, 포럼 글, 신문 기사 등에 사용됩니다.

예제 1: 블로그 포스트

<article>
  <header>
    <h2>HTML5의 시멘틱 태그</h2>
    <p>작성일: <time datetime="2023-02-21">2023년 2월 21일</time></p>
  </header>
  <section>
    <h3>시멘틱 태그란 무엇인가요?</h3>
    <p>시멘틱 태그는 웹 페이지의 구조를 더 명확하게 설명하기 위해 HTML5에서 도입된 태그입니다. 이 태그들은 검색 엔진 최적화(SEO) 및 접근성 향상에 도움을 줍니다.</p>
  </section>
  <section>
    <h3>왜 시멘틱 태그를 사용해야 하나요?</h3>
    <p>시멘틱 태그를 사용하면 문서의 구조를 더 잘 파악할 수 있으며, 이는 검색 엔진과 사용자 모두에게 유용합니다. 또한, 스크린 리더를 사용하는 사람들이 콘텐츠를 더 쉽게 이해할 수 있도록 도와줍니다.</p>
  </section>
  <footer>
    <p>작성자: 홍길동</p>
  </footer>
</article>

이 예제는 HTML5의 시멘틱 태그에 대한 간단한 블로그 포스트를 나타냅니다. 각 섹션은 별도의 주제를 다루며, <header>, <section>, <footer> 태그를 사용하여 구조화되어 있습니다.

예제 2: 신문 기사

<article>
  <header>
    <h2>지속 가능한 에너지에 대한 새로운 연구 발표</h2>
    <p>작성일: <time datetime="2023-02-20">2023년 2월 20일</time></p>
  </header>
  <p>최근 발표된 연구에 따르면, 지속 가능한 에너지 기술이 전 세계적으로 확산될 가능성이 높아지고 있습니다. 이 연구는 특히 태양광과 풍력 에너지의 비용 효율성이 크게 향상되었다고 지적합니다.</p>
  <figure>
    <img src="sustainable-energy.jpg" alt="지속 가능한 에너지">
    <figcaption>지속 가능한 에너지 기술의 발전</figcaption>
  </figure>
  <footer>
    <p>출처: 환경 연구 센터</p>
  </footer>
</article>

이 예제는 지속 가능한 에너지에 대한 신문 기사를 나타냅니다. 기사는 제목, 날짜, 본문, 이미지(그림) 및 출처 정보로 구성됩니다. <figure>와 <figcaption> 태그를 사용하여 기사 내용과 관련된 이미지와 설명을 포함하는 방법을 보여줍니다.

💡

두 예제 모두 <article> 태그를 사용하여 독립적인 콘텐츠 단위를 나타내며, 시멘틱 웹의 원칙에 따라 콘텐츠의 구조를 명확하게 표현합니다.

<section>

<section> 태그는 웹 페이지 내에서 관련 콘텐츠를 논리적으로 그룹화하고, 각 그룹에 명확한 제목을 제공하는 데 사용됩니다. 이는 문서의 구조를 개선하고, 콘텐츠의 가독성과 접근성을 향상시키는 데 도움이 됩니다. 다음은 <section> 태그 사용 예시입니다:

예제 1: 블로그 포스트의 섹션

<article>
  <h1>웹 접근성의 중요성</h1>
  <section>
    <h2>접근성이란?</h2>
    <p>웹 접근성은 모든 사용자가 웹 콘텐츠에 접근하고 사용할 수 있도록 보장하는 것을 의미합니다. 이는 장애가 있는 사용자를 포함하여 모든 사람에게 중요합니다.</p>
  </section>
  <section>
    <h2>왜 접근성이 중요한가?</h2>
    <p>웹 접근성은 사용자의 다양성을 인정하고, 모든 사람이 정보와 기능을 동등하게 이용할 수 있게 만듭니다. 또한, 법적 요구사항을 충족시키는 데에도 도움이 됩니다.</p>
  </section>
</article>

이 예제에서는 블로그 포스트를 위한 <article> 안에 두 개의 <section> 태그를 사용하여 "접근성이란?"과 "왜 접근성이 중요한가?"라는 두 주제로 콘텐츠를 나누고 있습니다. 각 섹션에는 자체 제목(<h2>)이 있어 콘텐츠의 구조를 명확하게 합니다.

예제 2: FAQ 섹션

<section>
  <h2>자주 묻는 질문(FAQ)</h2>
  <article>
    <h3>웹사이트 사용에 대한 비용이 있나요?</h3>
    <p>아니요, 저희 웹사이트는 무료로 이용 가능합니다.</p>
  </article>
  <article>
    <h3>계정을 생성하는 방법은 무엇인가요?</h3>
    <p>홈페이지 상단의 '회원가입' 버튼을 클릭하고, 필요한 정보를 입력해 주세요.</p>
  </article>
</section>

이 예제에서는 <section>을 사용하여 FAQ 콘텐츠를 한 그룹으로 묶고 있습니다. 각 질문은 별도의 <article> 태그로 구분되어 있으며, 이는 각 질문이 독립적인 콘텐츠 단위임을 의미합니다. <section> 태그 안에는 관련된 질문들이 그룹화되어 있으며, 이 구조는 사용자와 검색 엔진 모두에게 콘텐츠의 구조를 명확하게 전달합니다.

💡

<section> 태그를 사용함으로써, 웹 페이지의 콘텐츠를 논리적으로 구분하고 각 섹션에 명확한 제목을 제공하여, 웹 문서의 구조와 접근성을 향상시킬 수 있습니다.

<aside>

<aside> 태그는 주로 본문(content)과는 간접적으로 관련된 콘텐츠를 담는 데 사용됩니다. 이는 사이드바, 광고, 사이트 내 네비게이션 링크, 콜아웃 박스, 추가 정보 등을 포함할 수 있습니다. <aside> 내의 콘텐츠는 주 콘텐츠와 독립적이기 때문에, 주 콘텐츠와 분리하여도 내용의 흐름에 큰 영향을 주지 않습니다. 다음은 <aside> 태그 사용 예시입니다:

샘플 코드 1: 사이드바 광고

<main>
  <article>
    <h1>HTML5 시멘틱 태그</h1>
    <p>HTML5에서 도입된 시멘틱 태그는 웹 페이지의 의미론적 구조를 향상시킵니다...</p>
    <!-- 기사 내용 계속 -->
  </article>
</main>

<aside>
  <h2>광고</h2>
  <p>여기에 광고 콘텐츠가 들어갑니다.</p>
</aside>

이 예제에서 <aside>는 주 콘텐츠(본문)와는 별개로 광고를 표시하는 데 사용됩니다.

샘플 코드 2: 관련 기사

<article>
  <h1>시멘틱 웹의 중요성</h1>
  <p>시멘틱 웹은 웹 콘텐츠의 의미를 명확하게 해서 더 나은 검색 결과와 접근성을 제공합니다...</p>
  <!-- 기사 내용 계속 -->
</article>

<aside>
  <h2>관련 기사</h2>
  <ul>
    <li><a href="#">HTML5 소개</a></li>
    <li><a href="#">웹 접근성 가이드</a></li>
    <li><a href="#">시멘틱 태그 활용법</a></li>
  </ul>
</aside>

이 예제에서 <aside>는 본문 기사와 관련된 추가 정보인 "관련 기사" 목록을 제공하는 데 사용됩니다. 이러한 사용은 주 콘텐츠 옆에 보조 정보나 관련 콘텐츠를 제공하고자 할 때 유용합니다.

💡

<aside> 태그를 사용함으로써, 웹 페이지의 구조를 더 명확하게 하고, 콘텐츠의 의미론적 관계를 강화할 수 있습니다. 이는 검색 엔진 최적화(SEO)와 웹 접근성 개선에도 도움이 됩니다.

<header>

<header> 태그는 웹 페이지나 섹션의 헤더(머리글) 부분을 정의하는 데 사용됩니다. 이 태그는 일반적으로 로고, 제목, 네비게이션 메뉴, 검색 폼 등의 요소를 포함할 수 있습니다. <header>는 문서나 섹션의 도입부를 나타내며, 시각적으로 독립된 영역을 형성합니다. 다음은 <header> 태그 사용 예시입니다:

예제 1: 웹사이트의 메인 헤더

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>웹사이트 제목</title>
</head>
<body>
  <header>
    <h1>웹사이트 로고 및 제목</h1>
    <nav>
      <ul>
        <li><a href="#">홈</a></li>
        <li><a href="#">제품</a></li>
        <li><a href="#">서비스</a></li>
        <li><a href="#">연락처</a></li>
      </ul>
    </nav>
  </header>

  <!-- 본문과 기타 콘텐츠는 여기에 위치합니다. -->

  <footer>
    <!-- 푸터 콘텐츠 -->
  </footer>
</body>
</html>

이 예제에서 <header>는 웹사이트의 메인 헤더로 사용되며, 웹사이트의 제목과 함께 주 네비게이션 메뉴를 포함합니다.

예제 2: 기사의 헤더

<article>
  <header>
    <h2>기사 제목</h2>
    <p>작성자: 홍길동 | 작성일: <time datetime="2023-02-21">2023년 2월 21일</time></p>
  </header>
  <p>기사의 본문 내용이 이곳에 위치합니다...</p>
</article>

이 예제에서 <header>는 <article> 내부에 사용되어 기사의 제목과 메타 정보(작성자와 작성일)를 담고 있습니다. 이는 기사 내용의 도입부를 구성하며, 기사의 주요 정보를 요약적으로 보여줍니다.

💡

<header> 태그를 사용하면 문서의 구조를 더 명확하게 하고, 콘텐츠의 특정 부분을 논리적으로 그룹화하여 사용자와 검색 엔진 모두에게 유용한 정보를 제공할 수 있습니다. <header>는 그 자체로 중요한 정보를 포함하며, 문서나 섹션의 서론적인 역할을 합니다.

<footer>

<footer> 태그는 웹 페이지나 섹션의 바닥글(푸터) 부분을 정의하는 데 사용됩니다. 이 태그 내에는 저작권 정보, 연락처 정보, 사이트 맵 링크, 관련 문서 링크 등의 콘텐츠가 포함될 수 있습니다. <footer>는 문서나 섹션의 맺음말이나 추가 정보를 제공하는 영역으로 사용됩니다. 다음은 <footer> 태그 사용 예시입니다:

예제 1: 웹사이트 전체에 대한 푸터

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>웹사이트 제목</title>
</head>
<body>
  <header>
    <!-- 헤더 콘텐츠 -->
  </header>

  <main>
    <!-- 주 콘텐츠 -->
  </main>

  <footer>
    <p>© 2023 회사명. 모든 권리 보유.</p>
    <a href="/privacy-policy">개인정보 처리방침</a> |
    <a href="/terms">이용 약관</a>
  </footer>
</body>
</html>

이 예제에서 <footer>는 웹사이트 전체에 대한 푸터로 사용되며, 저작권 정보와 개인정보 처리방침, 이용 약관에 대한 링크를 포함합니다.

예제 2: 기사 섹션에 대한 푸터

<article>
  <header>
    <!-- 기사 헤더 -->
  </header>
  <p>기사 본문 내용...</p>
  <footer>
    <p>작성자: 홍길동</p>
    <p>연락처 정보: <a href="mailto:example@example.com">example@example.com</a></p>
    <p>공유하기: <a href="#">페이스북</a> | <a href="#">트위터</a></p>
  </footer>
</article>

이 예제에서 <footer>는 개별 기사에 대한 푸터로 사용되며, 작성자 정보, 연락처, 그리고 소셜 미디어 공유 링크를 포함합니다. 이는 기사의 추가 정보를 제공하며, 독자가 작성자에게 연락하거나 기사를 소셜 미디어에서 공유할 수 있도록 합니다.

💡

<footer> 태그를 사용함으로써 웹 페이지나 섹션의 마무리 부분에 위치한 중요한 정보를 논리적으로 그룹화하고, 접근성과 웹 문서의 구조를 개선할 수 있습니다. <footer>는 해당 문서나 섹션에 대한 추가 정보나 링크를 제공하는 데 적합한 영역입니다.

<details>

<details> 태그는 사용자가 클릭하여 세부 정보를 보거나 숨길 수 있는 컨텐츠를 만드는 데 사용됩니다. 이 태그는 기본적으로 접힌 상태로 표시되며, 사용자가 상호작용하여 내용을 펼치거나 다시 접을 수 있습니다. <details> 태그 안에는 <summary> 태그를 사용하여 세부 정보의 제목이나 요약을 제공할 수 있습니다. 다음은 <details> 태그 사용 예시입니다:

예제: FAQ 섹션

<details>
  <summary>HTML5란 무엇인가요?</summary>
  <p>HTML5는 월드 와이드 웹의 핵심 언어인 HTML의 5번째 대대적 개정판입니다. 새로운 요소, 속성, 행동들을 포함하며, 더 큰 기술적 다양성을 가능하게 합니다. 멀티미디어, 그래픽, 애플리케이션 개발 등을 위한 더 많은 기능들이 추가되었습니다.</p>
</details>

<details>
  <summary>웹 접근성이란?</summary>
  <p>웹 접근성은 장애를 가진 사람들도 웹사이트, 도구, 기술을 사용할 수 있도록 보장하는 방법을 말합니다. 웹 접근성은 모든 사용자가 정보와 기능을 이용할 수 있게 하는 것을 목표로 합니다.</p>
</details>

<details>
  <summary>시멘틱 웹이란?</summary>
  <p>시멘틱 웹은 웹에 있는 데이터들을 더 잘 이해하고 처리할 수 있도록, 데이터에 의미(시멘틱)를 부여하는 웹 기술들의 집합을 말합니다. 이를 통해 데이터를 더 효과적으로 검색, 해석, 공유할 수 있습니다.</p>
</details>

이 예제는 자주 묻는 질문(FAQ) 섹션에 <details>와 <summary> 태그를 사용하여 각 질문에 대한 답변을 접었다 폈다 할 수 있는 인터랙티브한 UI를 구성한 것입니다. 사용자는 각 질문의 제목(<summary>)을 클릭하여 답변(<details> 내부의 <p>)을 볼 수 있으며, 다시 클릭하여 답변을 숨길 수 있습니다.

💡

<details> 태그를 사용함으로써, 콘텐츠의 가독성을 향상시키고, 사용자가 필요한 정보를 쉽게 찾을 수 있도록 도와줍니다. 이는 문서의 내용을 간결하게 유지하면서도, 필요에 따라 추가 정보를 제공할 수 있는 효과적인 방법입니다.

<summary>

<summary> 태그는 <details> 요소와 함께 사용되어 사용자가 클릭할 수 있는 요약, 제목 또는 범례를 제공합니다. <details> 요소 내부에 위치한 <summary> 태그는 기본적으로 접혀있는 (collapsed) 상세 정보의 개요를 보여주며, 사용자가 이를 클릭하면 상세 정보가 펼쳐지게 (expanded) 됩니다. 다음은 <summary> 태그 사용 예시입니다:

예제: 간단한 FAQ 섹션

<details>
  <summary>웹 접근성이란 무엇인가요?</summary>
  <p>웹 접근성은 장애가 있는 사용자들도 웹 사이트와 웹 애플리케이션을 사용할 수 있도록 보장하는 방법론입니다. 이는 모든 사용자가 정보에 접근하고, 기능을 사용할 수 있게 하여, 웹의 잠재력을 모두에게 개방하는 것을 목표로 합니다.</p>
</details>

<details>
  <summary>HTML5에서 새롭게 도입된 시멘틱 태그는 무엇이 있나요?</summary>
  <p>HTML5는 다양한 시멘틱 태그를 도입하여 문서의 구조를 더 명확하게 표현할 수 있도록 했습니다. 이에 포함된 태그로는 `<article>`, `<aside>`, `<footer>`, `<header>`, `<nav>`, `<section>` 등이 있습니다.</p>
</details>

이 예제는 두 개의 질문과 답변을 포함하는 간단한 FAQ 섹션을 보여줍니다. 각 <details> 요소의 <summary> 태그는 질문을 제시하며, 사용자가 이를 클릭하면 해당하는 답변이 표시됩니다.

💡

<summary> 태그를 사용함으로써, 사용자는 관심 있는 정보를 쉽게 찾아내고, 웹 페이지의 내용을 효율적으로 탐색할 수 있습니다. 이 기법은 사용자 경험을 개선하고, 웹 콘텐츠의 접근성을 향상시키는 데 유용합니다.

<figure>

figure> 태그는 웹 문서 내에서 독립적인 콘텐츠, 예를 들어 이미지, 다이어그램, 차트, 코드 조각 등을 나타낼 때 사용됩니다. <figure> 요소는 주로 <figcaption> 태그와 함께 사용되어 콘텐츠에 대한 설명이나 캡션을 제공합니다. <figure>와 <figcaption>을 함께 사용함으로써, 콘텐츠와 그 설명을 시각적으로 연결하여 정보의 접근성과 문서의 구조를 향상시킬 수 있습니다. 다음은 <figure> 태그 사용 예시입니다:

예제 1: 이미지와 캡션

<figure>
  <img src="example-image.jpg" alt="아름다운 풍경">
  <figcaption>그림 1: 아름다운 풍경을 포착한 사진.</figcaption>
</figure>

이 예제에서 <figure> 요소는 이미지를 포함하고 있으며, <figcaption>은 해당 이미지에 대한 캡션을 제공합니다. 이 구조를 통해 이미지와 캡션 사이의 관계가 명확해지며, 콘텐츠의 의미를 풍부하게 합니다.

예제 2: 코드 스니펫과 캡션

<figure>
  <pre><code>
    function greet() {
      console.log("Hello, world!");
    }
  </code></pre>
  <figcaption>코드 1: "Hello, world!"를 출력하는 JavaScript 함수.</figcaption>
</figure>

이 예제에서는 <figure> 요소 안에 <pre>와 <code> 태그를 사용해 형식화된 코드 스니펫을 넣고, <figcaption>으로 코드에 대한 간단한 설명을 추가하고 있습니다. 이는 독자에게 코드 스니펫의 용도나 기능에 대한 이해를 돕습니다.

💡

<figure> 태그의 사용은 문서 내에서 독립적인 콘텐츠를 의미론적으로 구분하고, 콘텐츠에 대한 추가 정보를 제공하는 데 유용합니다. 이는 웹 접근성을 향상시키고, 콘텐츠의 가독성 및 이해도를 높이는 데 기여합니다.

<figcaption>

<figcaption> 태그는 <figure> 요소 내의 콘텐츠, 예를 들어 이미지, 도표, 코드 스니펫 등에 대한 캡션(설명)을 제공하는 데 사용됩니다. 이 태그는 <figure> 요소 안에 위치해야 하며, 해당 콘텐츠에 대한 추가적인 정보나 설명을 텍스트 형태로 제공합니다. <figcaption>을 사용함으로써, 콘텐츠와 그 설명을 시각적으로 연결하여 웹 페이지의 접근성과 구조를 향상시킬 수 있습니다. 다음은 <figcaption> 태그 사용 예시입니다:

예제 1: 이미지와 캡션

<figure>
  <img src="path/to/image.jpg" alt="설명적인 텍스트">
  <figcaption>이 이미지는 <strong>설명적인 텍스트</strong>를 보여줍니다.</figcaption>
</figure>

이 예제에서 <figure> 요소는 이미지를 포함하고 있으며, <figcaption>은 해당 이미지에 대한 설명 또는 캡션을 제공합니다. alt 속성을 통해 이미지에 대한 대체 텍스트도 제공하여, 이미지가 보이지 않는 사용자나 스크린 리더 사용자가 내용을 이해할 수 있도록 합니다.

예제 2: 코드 블록과 캡션

<figure>
  <pre><code>
    function sayHello() {
      console.log("Hello, world!");
    }
  </code></pre>
  <figcaption>리스트 1: 간단한 JavaScript 함수 예제.</figcaption>
</figure>

이 예제에서는 <pre>와 <code> 태그를 사용하여 형식화된 코드 블록을 <figure> 요소 안에 넣고, <figcaption>으로 해당 코드 블록에 대한 캡션을 추가하고 있습니다. 이 캡션은 코드의 내용이나 목적을 간단하게 설명하여, 독자가 코드의 의도를 더 쉽게 이해할 수 있도록 돕습니다.

💡

<figcaption> 태그를 사용함으로써, 콘텐츠와 그에 대한 설명을 논리적으로 그룹화하여 문서의 의미와 구조를 강화하고, 콘텐츠에 대한 이해를 돕습니다. 이러한 방법은 웹 접근성과 사용자 경험을 개선하는 데에도 기여합니다.

<mark>

<mark> 태그는 웹 페이지 내에서 텍스트의 일부분을 하이라이트하여 사용자의 주목을 끌고자 할 때 사용됩니다. 이 태그는 주로 검색 결과에서 검색어를 강조하거나, 문서 내에서 중요한 부분을 표시하는 데 유용합니다. <mark> 태그로 감싸진 텍스트는 일반적으로 배경색이 바뀌어 하이라이트 효과를 나타냅니다. 다음은 <mark> 태그 사용 예시입니다:

예제: 검색 결과 내 하이라이트

<p>HTML5는 웹 개발에 많은 새로운 기능을 도입했습니다. 그 중 <mark>시멘틱 태그</mark>는 웹 페이지의 의미론적 구조를 향상시키는 데 큰 역할을 합니다.</p>

이 예제에서는 "시멘틱 태그"라는 텍스트 부분을 <mark> 태그로 감싸 하이라이트 처리하였습니다. 이를 통해 해당 텍스트가 문맥상 중요하거나 사용자의 검색과 관련이 있음을 시각적으로 나타냅니다.

예제: 중요한 내용 강조

<p>오늘의 할 일 목록:</p>
<ul>
  <li>이메일 확인</li>
  <li><mark>프로젝트 보고서 작성</mark></li>
  <li>회의 준비</li>
</ul>

이 예제에서는 할 일 목록 중 "프로젝트 보고서 작성" 항목을 <mark> 태그를 사용하여 강조합니다. 이는 사용자가 해당 항목에 특히 주의를 기울여야 함을 나타냅니다.

💡

<mark> 태그를 사용함으로써, 특정 텍스트 부분을 시각적으로 돋보이게 하여, 문서 내에서의 중요성이나 관련성을 강조할 수 있습니다. 이는 사용자의 주의를 끌고, 정보의 전달력을 향상시키는 효과적인 방법입니다.

<nav>

<nav> 태그는 웹 페이지 내에서 주요 내비게이션 링크를 그룹화하는 데 사용됩니다. 이 태그는 사용자가 사이트 내에서 다른 페이지나 섹션으로 이동할 수 있도록 돕는 하이퍼링크를 포함합니다. <nav> 태그로 구성된 내비게이션은 사이트의 주요 부분으로 이동하는 데 중요한 역할을 하며, 웹 접근성과 사용자 경험을 개선하는 데 기여합니다. 다음은 <nav> 태그 사용 예시입니다:

예제: 메인 메뉴 내비게이션

<nav>
  <ul>
    <li><a href="/">홈</a></li>
    <li><a href="/about">소개</a></li>
    <li><a href="/services">서비스</a></li>
    <li><a href="/contact">연락처</a></li>
  </ul>
</nav>

이 예제에서 <nav> 태그는 웹사이트의 메인 메뉴 내비게이션을 구성하고 있습니다. <ul>과 <li> 태그를 사용하여 링크 목록을 구성하고, 각 <a> 태그로 사이트의 주요 섹션으로 이동할 수 있는 링크를 제공합니다.

예제: 사이드바 내비게이션

<aside>
  <nav>
    <h2>카테고리</h2>
    <ul>
      <li><a href="/technology">기술</a></li>
      <li><a href="/design">디자인</a></li>
      <li><a href="/culture">문화</a></li>
      <li><a href="/business">비즈니스</a></li>
    </ul>
  </nav>
</aside>

이 예제에서는 <aside> 태그 내에 <nav> 태그를 사용하여 사이드바에 카테고리 별 내비게이션을 추가하고 있습니다. 이를 통해 사용자는 특정 카테고리의 페이지로 쉽게 이동할 수 있습니다.

💡

<nav> 태그를 사용함으로써, 웹 페이지의 내비게이션 링크를 명확하게 구분하고, 사용자가 원하는 정보나 페이지로 효과적으로 이동할 수 있도록 돕습니다. 이는 웹사이트의 구조를 개선하고, 검색 엔진 최적화(SEO) 및 접근성 측면에서도 긍정적인 영향을 미칩니다.

<time>

<time> 태그는 문서 내에서 날짜나 시간을 나타내는 데 사용됩니다. 이 태그는 인간이 읽을 수 있는 형식으로 날짜나 시간을 표시하는 동시에, datetime 속성을 사용하여 기계가 읽을 수 있는 정확한 형식도 함께 명시할 수 있습니다. 이를 통해 검색 엔진이나 브라우저가 날짜나 시간 정보를 정확하게 해석할 수 있도록 도와줍니다. 다음은 <time> 태그 사용 예시입니다:

예제 1: 이벤트 날짜

<p>다가오는 이벤트 날짜: <time datetime="2024-05-01">2024년 5월 1일</time></p>

이 예제에서 <time> 태그는 특정 이벤트의 날짜를 나타냅니다. datetime 속성은 ISO 8601 날짜 형식을 사용하여 날짜 정보를 명시적으로 제공합니다. 이는 사용자에게는 "2024년 5월 1일"로 표시되며, 기계가 읽기에는 "2024-05-01" 형식으로 인식됩니다.

예제 2: 게시글의 작성 시간

<article>
  <header>
    <h2>HTML5의 중요성</h2>
    <p>게시된 시간: <time datetime="2023-02-21T14:30">2023년 2월 21일 14:30</time></p>
  </header>
  <p>HTML5는 웹 표준 기술에서 중요한 역할을 합니다...</p>
</article>

이 예제에서는 게시글의 작성 시간을 나타내는 데 <time> 태그를 사용하고 있습니다. 여기서도 datetime 속성은 날짜와 시간을 ISO 8601 형식으로 명시하고, 사용자에게는 보다 읽기 쉬운 형태로 내용이 표시됩니다.

💡

<time> 태그를 사용함으로써 문서 내의 날짜나 시간 정보를 명확하게 구분하고, 이 정보가 검색 엔진에 의해 적절하게 처리될 수 있도록 돕습니다. 이는 이벤트, 블로그 포스트, 뉴스 기사 등에서 특히 유용하며, 웹 콘텐츠의 의미와 구조를 향상시키는 데 기여합니다.

<address>

<address> 태그는 웹 페이지나 문서에서 작성자, 소유자, 관련된 연락처 정보를 제공하는 데 사용됩니다. 주로 이메일 주소, 전화번호, 물리적 주소 등을 포함하며, 문서의 푸터에 위치하는 경우가 많습니다. 이 태그는 해당 정보가 연락처 정보임을 명시적으로 나타내어, 검색 엔진과 사용자 모두에게 유용한 정보를 제공합니다. 다음은 <address> 태그 사용 예시입니다:

예제: 웹사이트 푸터의 연락처 정보

<footer>
  <address>
    <strong>회사명: 예제 회사</strong><br>
    주소: 서울시 강남구 예제로 123<br>
    전화번호: 02-1234-5678<br>
    이메일: <a href="mailto:info@example.com">info@example.com</a>
  </address>
</footer>

이 예제에서 <address> 태그는 웹사이트의 푸터 내에 위치하여, 회사의 이름, 물리적 주소, 전화번호, 이메일 주소 등의 연락처 정보를 제공합니다. <strong> 태그를 사용하여 회사명을 강조하고, <br> 태그로 줄바꿈을 하여 각 정보 항목을 명확하게 구분합니다. 또한, 이메일 주소는 <a> 태그와 mailto: 프로토콜을 사용하여 링크로 만들어, 사용자가 클릭하면 자동으로 이메일 작성 화면으로 넘어갈 수 있도록 합니다.

💡

<address> 태그를 사용함으로써, 웹 페이지나 문서의 연락처 정보를 구조화하고 의미론적으로 표시할 수 있으며, 사용자에게 유용한 연락 수단을 명확하게 제공합니다. 이는 웹 접근성과 사용자 경험을 향상시키는 데 기여합니다.

<blockquote>

<blockquote> 태그는 문서 내에서 다른 출처에서 가져온 긴 인용문을 표시할 때 사용됩니다. 이 태그는 인용문을 논리적으로 구분하여, 인용문이 원문의 내용을 그대로 반영하고 있음을 명확히 합니다. 또한, cite 속성을 사용하여 인용문의 출처 URL을 제공할 수 있습니다. 다음은 <blockquote> 태그 사용 예시입니다:

예제: 유명한 인용문과 출처 링크

<blockquote cite="https://www.example.com/famous-quotes">
  <p>“나는 생각한다, 고로 존재한다.”</p>
  <footer>— 르네 데카르트, <cite>방법서설</cite></footer>
</blockquote>

이 예제에서 <blockquote> 태그는 르네 데카르트의 유명한 인용문을 포함하고 있습니다. cite 속성은 인용문의 출처인 특정 웹페이지의 URL을 가리킵니다. 인용문 아래에 위치한 <footer> 태그 내의 <cite> 태그는 인용문이 실린 작품의 이름을 제공합니다. 이러한 구조를 통해 인용문과 그 출처가 명확하게 표시됩니다.

예제: 연구 보고서에서의 인용

<p>다음은 최근 발표된 연구 보고서에서 인용한 내용입니다:</p>
<blockquote cite="https://www.researchexample.com/reports/2023">
  <p>“2023년까지 글로벌 인터넷 사용자 수는 50억 명을 초과할 것으로 예상된다.”</p>
</blockquote>
<p>이러한 증가는 디지털 기술의 발전과 접근성 향상에 기인한다.</p>

이 예제에서는 연구 보고서에서 가져온 인용문을 <blockquote> 태그로 표시하고 있으며, 인용문의 출처 URL은 cite 속성을 통해 제공됩니다. 이를 통해 독자는 인용문의 출처를 쉽게 찾아볼 수 있습니다.

💡

<blockquote> 태그의 사용은 문서 내에서 인용된 내용을 구조적으로 표현하는 데 도움을 주며, 인용문의 출처를 명확하게 밝히는 것은 정보의 신뢰성을 높이는 데 기여합니다.

<cite>

<cite> 태그는 창작물의 제목을 나타낼 때 사용되며, 주로 책, 노래, 영화, 연구 논문 등의 출처나 참조를 표기하는 데 활용됩니다. 이 태그는 문서 내에서 인용하거나 참조하는 창작물의 제목을 의미론적으로 구분해주어, 해당 창작물에 대한 존중과 그 출처의 명확성을 제공합니다. 다음은 <cite> 태그 사용 예시입니다:

예제 1: 책 제목 인용

<p>웹 표준에 대해 더 자세히 알고 싶다면 <cite>HTML & CSS: Design and Build Websites</cite>를 참고하세요.</p>

이 예제에서는 <cite> 태그를 사용하여 "HTML & CSS: Design and Build Websites"라는 책 제목을 인용하고 있습니다. 이로써 독자는 해당 텍스트가 창작물의 제목임을 알 수 있습니다.

예제 2: 영화 제목 인용

<p>내가 가장 좋아하는 영화는 <cite>인셉션</cite>입니다.</p>

이 예제에서는 "인셉션"이라는 영화 제목을 <cite> 태그로 감싸 강조하고 있습니다. 이것은 문서 내에서 해당 영화를 참조하고 있음을 나타내며, 영화 제목에 적절한 의미를 부여합니다.

예제 3: 연구 논문 제목 인용

<p>이 연구 결과는 <cite>Journal of Web Development</cite>에 발표된 <cite>Web Accessibility Guidelines and Their Implementation</cite> 논문을 기반으로 합니다.</p>

이 예제에서는 연구 논문의 제목과 그것이 발표된 저널의 이름을 <cite> 태그로 표기하고 있습니다. 이를 통해 독자는 인용된 논문과 저널에 대한 정보를 명확하게 인식할 수 있습니다.

💡

<cite> 태그를 사용함으로써 문서 내에서 창작물의 제목을 시각적으로도 의미론적으로도 구분하여, 정보의 정확성과 출처의 명확성을 높일 수 있습니다.

<code>

<code> 태그는 HTML 문서 내에서 컴퓨터 코드의 짧은 조각을 나타내는 데 사용됩니다. 이 태그로 감싸진 텍스트는 일반적으로 브라우저에 의해 고정폭 글꼴(monospace font)로 표시되어, 주변의 일반 텍스트와 구분됩니다. <code> 태그는 단독으로 사용될 수도 있지만, 더 복잡한 코드 블록을 형식화하기 위해 <pre> 태그와 함께 사용될 때가 많습니다. <pre> 태그는 공백과 줄바꿈을 그대로 유지하여 코드의 형식을 보존합니다. 다음은 <code> 태그 사용 예시입니다:

예제 1: 단독으로 사용된 <code> 태그

<p>HTML 문서에서 <code>&lt;title&gt;</code> 태그는 웹 페이지의 제목을 정의합니다.</p>

이 예제에서는 <code> 태그를 사용하여 HTML의 <title> 태그를 문서 내에서 강조하고 있습니다. 이는 코드나 특정 기술 용어를 나타낼 때 유용합니다.

예제 2: <pre>와 함께 사용된 <code> 태그

<pre><code>
function sayHello() {
  console.log("Hello, world!");
}
</code></pre>

이 예제에서는 <pre> 태그 안에 <code> 태그를 넣어 JavaScript 함수를 형식화된 코드 블록으로 표시하고 있습니다. <pre> 태그는 코드의 줄바꿈과 들여쓰기를 그대로 유지하여, 코드가 원래 작성된 형태대로 보이도록 합니다.

💡

<code> 태그는 프로그래밍 코드나 컴퓨터 명령어 등을 문서 내에서 명확하게 구분하고 강조하는 데 도움을 줍니다. 이를 통해 독자는 텍스트 중에서 코드 부분을 쉽게 식별할 수 있으며, 코드의 의미를 더 잘 이해할 수 있습니다.

<dfn>

<dfn> 태그는 HTML 문서 내에서 용어의 정의를 제공하거나 용어가 처음으로 등장할 때 이를 나타내는 데 사용됩니다. 이 태그는 문서에서 특정 용어를 설명하거나 용어집을 작성할 때 유용하며, 용어에 대한 정의나 설명을 명확하게 하기 위해 사용됩니다. <dfn> 태그는 보통 <abbr>, <cite>, 또는 <a> 태그와 함께 사용되어 추가 정보나 출처를 제공하기도 합니다. 다음은 <dfn> 태그 사용 예시입니다:

예제: 용어 정의

<p>
  <dfn>HTML</dfn>은 HyperText Markup Language의 약자로, 웹 페이지를 만들기 위한 표준 마크업 언어입니다.
</p>

이 예제에서는 <dfn> 태그를 사용하여 "HTML"이라는 용어를 정의하고 있습니다. 이 태그는 "HTML"이라는 용어가 문서에서 처음으로 등장하며 그 의미를 설명할 때 사용되어, 독자가 용어의 의미를 명확하게 이해할 수 있도록 돕습니다.

예제: 용어집 항목

<dl>
  <dt><dfn>HTTP</dfn></dt>
  <dd>Hypertext Transfer Protocol의 약자로, 웹에서 데이터를 주고받기 위한 프로토콜입니다.</dd>

  <dt><dfn>CSS</dfn></dt>
  <dd>Cascading Style Sheets의 약자로, 웹 페이지의 스타일을 지정하기 위한 언어입니다.</dd>
</dl>

이 예제에서는 <dl>(정의 목록), <dt>(용어), <dd>(용어 설명) 태그와 함께 <dfn> 태그를 사용하여 HTTP와 CSS라는 두 용어의 정의를 제공하고 있습니다. 이 구조는 문서 내에서 용어와 그 정의를 명확하게 구분하며, 독자가 각 용어의 의미를 쉽게 이해할 수 있도록 돕습니다.

💡

<dfn> 태그를 사용함으로써, 문서 내에서 특정 용어의 중요성과 정의를 강조할 수 있으며, 용어의 의미를 명확하게 전달하는 데 도움이 됩니다. 이는 문서의 가독성과 정보의 전달력을 향상시키는 효과적인 방법입니다.

<em>

<em> 태그는 HTML 문서 내에서 텍스트의 의미상 중요성을 강조할 때 사용됩니다. 이 태그로 감싸진 텍스트는 일반적으로 이탤릭체로 표시되어, 문서의 다른 부분과 구분됩니다. <em> 태그의 사용은 텍스트의 특정 부분에 대한 주의를 끌고자 할 때 유용하며, 읽는 사람으로 하여금 그 부분을 강조해서 읽게 합니다. 다음은 <em> 태그 사용 예시입니다:

예제 1: 텍스트 강조

<p>이 문장에서 <em>중요한</em> 부분을 강조하고 싶습니다.</p>

이 예제에서는 "중요한"이라는 단어를 <em> 태그로 감싸 강조하고 있습니다. 이로써 해당 단어가 문장 내에서 특별한 의미를 가지거나 중요하다는 점을 시각적으로 나타냅니다.

예제 2: 문맥상의 의미 변경

<p>그녀는 그의 말을 <em>정말로</em> 믿었습니다.</p>

이 예제에서는 "정말로"라는 단어를 <em> 태그로 감싸 문장에서 그 단어의 의미를 강조하고 있습니다. 이는 문장을 읽는 사람에게 해당 단어가 단순한 수식어가 아니라, 그녀가 그의 말을 얼마나 깊이 신뢰했는지를 강조하는 데 사용됩니다.

💡

<em> 태그는 텍스트 내에서 감정의 강도를 높이거나, 의미상 중요한 부분을 명확하게 하고자 할 때 사용됩니다. 이는 문서의 읽기 흐름에 영향을 주며, 텍스트에 추가적인 의미 레이어를 제공합니다. 사용자에게 텍스트의 특정 부분에 더 많은 주의를 기울이도록 유도하며, 문서의 전달력과 표현의 풍부함을 향상시킵니다.

<strong>

<strong> 태그는 HTML 문서 내에서 텍스트의 중요성을 더 강하게 강조할 때 사용됩니다. 이 태그로 감싸진 텍스트는 일반적으로 굵은 글씨로 표시되어, 의미상 중요한 정보나 긴급하게 주의를 끌어야 하는 부분에 사용됩니다. <em> 태그와 마찬가지로, <strong> 태그도 텍스트에 의미를 추가하지만, <strong>은 더 높은 수준의 중요성을 나타냅니다. 다음은 <strong> 태그 사용 예시입니다:

예제 1: 중요한 경고 메시지 강조

<p><strong>경고:</strong> 이 영역은 접근이 제한되었습니다.</p>

이 예제에서 "경고:" 부분을 <strong> 태그로 감싸 굵은 글씨로 표시하여, 해당 메시지가 매우 중요하며 사용자의 주의를 즉시 끌어야 함을 나타냅니다.

예제 2: 중요한 정보 강조

<p>당신의 계정은 <strong>48시간 내에</strong> 활성화되어야 합니다.</p>

이 예제에서는 "48시간 내에"라는 시간 제한 정보를 <strong> 태그로 감싸, 사용자가 이 정보를 놓치지 않도록 강조하고 있습니다. 이는 텍스트 내에서 해당 부분의 중요성을 부각시키고, 사용자가 필요한 조치를 취하도록 유도합니다.

💡

<strong> 태그의 사용은 문서 내에서 특정 텍스트의 중요도를 높이고, 의미상 중요한 부분을 시각적으로 강조하는 데 도움을 줍니다. 이는 문서의 읽기 경험을 개선하고, 중요한 정보가 사용자에 의해 쉽게 인식되도록 만듭니다. <strong> 태그는 특히 긴급한 경고, 중요한 알림, 사용자가 주의 깊게 읽어야 하는 내용 등에 유용하게 사용될 수 있습니다.

레이아웃 샘플

시맨틱 태그를 사용하여 구성하는 기본 웹 페이지 레이아웃은 웹의 구조를 명확하게 하고, 접근성과 검색 엔진 최적화(SEO)에 긍정적인 영향을 줍니다. 다음은 HTML5의 시맨틱 태그를 활용한 간단한 웹 페이지 레이아웃 샘플 코드입니다:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <title>시맨틱 태그 샘플 레이아웃</title>
</head>
<body>

<header>
    <nav>
        <ul>
            <li><a href="#home">홈</a></li>
            <li><a href="#about">소개</a></li>
            <li><a href="#services">서비스</a></li>
            <li><a href="#contact">연락처</a></li>
        </ul>
    </nav>
</header>

<main>
    <article>
        <header>
            <h1>주요 기사 제목</h1>
            <p>게시일: <time datetime="2021-02-18">2021년 2월 18일</time></p>
        </header>
        <p>여기에 기사 내용이 들어갑니다. 이 부분은 <strong>중요한 정보</strong>를 포함할 수 있습니다.</p>
        <footer>
            <p>작성자: 홍길동</p>
        </footer>
    </article>

    <section>
        <h2>서비스 소개</h2>
        <p>우리 회사의 서비스에 대한 설명입니다.</p>
    </section>

    <aside>
        <h2>관련 링크</h2>
        <ul>
            <li><a href="#">외부 링크 1</a></li>
            <li><a href="#">외부 링크 2</a></li>
        </ul>
    </aside>
</main>

<footer>
    <address>
        연락처: <a href="mailto:info@example.com">info@example.com</a>
    </address>
</footer>

</body>
</html>

이 샘플 코드에서는 <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <address>, <time>, 그리고 <strong> 같은 시맨틱 태그들을 사용하여 웹 페이지의 기본 구조를 구성하고 있습니다. 각 태그는 웹 페이지의 특정 부분의 의미를 명확하게 설명해주어, 콘텐츠의 구조와 목적을 더 잘 이해할 수 있게 합니다. 이와 같은 시맨틱 태그의 사용은 웹 접근성과 SEO에 긍정적인 영향을 미치며, 사용자와 검색 엔진 모두에게 웹 페이지의 내용을 명확하게 전달할 수 있습니다.

3-5-2. 시맨틱 태그 잘 못 된 사용 예제 모음

<header>

예시: <header> 태그를 페이지의 제목이 아닌 문단 제목에 사용

<article>
  <header>이것은 문단 제목입니다</header>
  <p>여기에 문단 내용이 들어갑니다...</p>
</article>

예시: <header> 태그로 전체 레이아웃을 감싸는 경우

<header>
  <nav>
    <!-- 내비게이션 링크 -->
  </nav>
  <article>
    <!-- 기사 내용 -->
  </article>
  <footer>
    <!-- 푸터 정보 -->
  </footer>
</header>

이 예제에서 <header> 태그는 웹 페이지의 헤더 부분에만 사용되어야 하는데, 전체 페이지 레이아웃을 감싸는 데 사용되었습니다. 이는 시맨틱 태그의 의도와 용도에 맞지 않습니다.

<footer>

예시: <footer> 태그를 페이지 하단 정보가 아닌 각 섹션의 결론 부분에 사용

<section>
  <p>섹션의 내용...</p>
  <footer>이 섹션의 결론입니다.</footer>
</section>

<nav>

예시: <nav> 태그를 내비게이션이 아닌 일반 문단에 사용

<nav>
  이것은 내비게이션 메뉴가 아닌 단순한 정보 제공 문단입니다.
</nav>

<section>

예시: <section> 태그를 관련 없는 내용을 그룹화하는 데 사용

<section>
  <h2>커피 종류</h2>
  <p>아메리카노, 라떼...</p>

  <h2>운영 시간</h2>
  <p>월~금: 9am - 5pm</p>
</section>

예시: <section> 태그의 비의미론적 사용

<section>
  <h1>웹사이트 제목</h1>
</section>
<section>
  <p>웹사이트 설명 텍스트입니다.</p>
</section>

<section> 태그는 문서의 독립적인 섹션을 정의할 때 사용되어야 하며, 관련된 콘텐츠를 그룹화하는 데 사용됩니다. 위 예제에서는 제목과 설명을 별도의 <section>으로 분리하여 사용했는데, 이는 각 섹션이 의미론적으로 독립적인 내용을 담고 있지 않아 잘못된 사용입니다.

<article>

예시: <article> 태그를 독립적인 콘텐츠가 아닌 사이트의 레이아웃 구성 요소에 사용

<article>
  <div class="sidebar">사이드바 내용...</div>
  <div class="main-content">메인 콘텐츠...</div>
</article>

예시: <article> 태그의 잘못된 사용

<article>
  <div>로그인 폼</div>
  <form>
    <!-- 로그인 폼 -->
  </form>
</article>

<article> 태그는 독립적으로 구분되거나 재사용 가능한 콘텐츠(예: 블로그 포스트, 뉴스 기사 등)를 나타낼 때 사용됩니다. 로그인 폼과 같은 대화형 콘텐츠는 <article> 태그의 목적에 부합하지 않습니다.

<aside>

예시: <aside> 태그를 주요 콘텐츠로 사용

<aside>
  <h2>메인 기사 제목</h2>
  <p>이것은 웹사이트의 주요 기사입니다. Aside 태그는 이러한 용도로 사용되어서는 안 됩니다.</p>
</aside>

<main>

예시: <main> 태그를 여러 번 사용

<body>
  <main>
    <p>이것은 첫 번째 주요 콘텐츠 영역입니다.</p>
  </main>
  <main>
    <p>HTML5 사양에 따르면, 하나의 문서에 여러 개의 main 태그를 사용해서는 안 됩니다.</p>
  </main>
</body>

<figure>

예시: <figure> 태그를 비시각적 콘텐츠에 사용

<figure>
  <p>이것은 그림이나 이미지가 아닌 텍스트 콘텐츠입니다. Figure 태그는 시각적 매체(이미지, 도표, 코드 조각 등)를 묶을 때 사용해야 합니다.</p>
</figure>

<mark>

예시: <mark> 태그를 강조가 아닌 일반 텍스트에 사용

<p>다음 문장에서 <mark>모든 텍스트</mark>를 마크 태그로 감쌌습니다. 하지만, mark 태그는 특정 부분을 강조하기 위해 사용되어야 합니다.</p>

<time>

예시: <time> 태그를 시간과 날짜가 아닌 다른 텍스트에 사용

<p>다음 회의는 <time>다음 주 월요일</time>에 열립니다. 여기서 time 태그는 정확한 날짜나 시간을 나타내는 데 사용되어야 합니다, 예를 들어 <time datetime="2024-02-27">2024년 2월 27일</time>.</p>

3-6. 시맨틱 마크업 준수

의미적으로 올바른 마크업: 웹 페이지의 각 부분이 어떤 역할과 의미를 가지는지 명확히 전달하기 위해 시맨틱 마크업을 사용합니다.

접근성 고려: 스크린 리더와 같은 보조 기술에 적합한 마크업을 사용하여 웹 접근성을 높입니다. 예를 들어, 이미지에 alt 텍스트를 제공하고, 표에는 <th> 태그를 사용합니다.

3-7. HTML 유효성

표준 준수: 가능한 한 HTML5와 같은 최신 웹 표준을 따르세요. 이는 기술의 호환성을 보장하고, 미래 지향적인 웹 개발을 지원합니다.

유효성 검사 도구 사용: W3C Markup Validation Service와 같은 도구를 사용하여 HTML 코드가 표준을 준수하는지 검사하세요. 이러한 도구는 구문 오류, 누락된 태그, 잘못된 속성 등을 식별할 수 있습니다.

코드 오류 수정: 유효성 검사 도구에서 지적한 모든 오류를 수정하세요. 이는 웹 사이트의 기능성 향상은 물론 검색 엔진 최적화(SEO)에도 도움이 됩니다.

uxg-boilerplate-2024에 포함된 유효성 검사 기능을 사용 합니다.

html 유효성 검사 사용 예시

// vscode 터미널에서 아래 명령어 실행
npm run checkhtml



// 아래와 같은 메세지가 나타날 경우 내용 확인하여 조치 필요 (ChatGPT 활용 가능)
C:\workspaces\uxg-boilerplate-2024>npm run checkhtml

> uxg-boilerplate-2024@0.4.0 checkhtml
> gulp checkhtml

[14:14:09] Using gulpfile C:\workspaces\uxg-boilerplate-2024\gulpfile.js
[14:14:09] Starting 'checkhtml'...
[14:14:09] Starting 'validateHtml'...
<-------------------- s: 검사 --------------------> 
원본소스(src): cl.html
검사소스(dist): C:\workspaces\uxg-boilerplate-2024\dist\guide\cl.html
[14:14:10] w3c-html-validator ✔ pass HTML String (characters: 2098) 
<-------------------- e: 검사 --------------------> 

<-------------------- s: 검사 --------------------> 
원본소스(src): radio.html
검사소스(dist): C:\workspaces\uxg-boilerplate-2024\dist\guide\pages\components\radio.html
[14:14:16] w3c-html-validator ✘ fail HTML String (characters: 11245) (messages: 1)
[14:14:16] HTML error: Element “ul” not allowed as child of element “ul” in this context. (Suppressing further errors from this subtree.)
[14:14:16] line 135, column 15:           <ul class="uid-list">\n     
<-------------------- e: 검사 -------------------->

💡

효과적이고 표준에 부합하는 HTML 마크업을 작성하는 데 필요한 규칙과 지침을 제공합니다. 이러한 규칙들은 웹사이트의 접근성, 검색 엔진 최적화(SEO), 그리고 유지보수의 용이성을 향상시키는 데 중요한 역할을 합니다.

4. CSS

CSS를 작성할 때 효율성과 일관성을 유지하기 위한 주요 규칙들을 아래에 정리했습니다.
이트라이브 UX그룹은 현재(2024년) CSS 전처리기인 SASS를 사용 합니다.
.scss 확장자를 사용 합니다.

4-1. 선언 순서

CSS 속성을 선언할 때는 일관된 순서를 따르는 것이 중요합니다. 다음은 권장되는 속성 선언 순서의 예입니다:

박스 모델 속성: display, width, height, margin, padding, border

위치 및 정렬: position, top, right, bottom, left, z-index, align-items, justify-content

텍스트 스타일링: font-family, font-size, font-weight, text-align, color

배경: background-color, background-image, background-position

기타 시각적 효과: opacity, box-shadow, border-radius

애니메이션 및 전환: transition, animation

4-2. 기본 규칙

규칙 선언부에서 선택자를 한 줄에 한개씩 적어주세요.

/* 규칙 선언 - 비추천 */
.example {
  border-radius: 50%; border: 2px solid white;
}

/* 규칙 선언 - 추천 */
.example {
  border-radius: 50%;
  border: 2px solid white;
}

색상 값은 소문자로 표기하며 HEX 색상 코드를 사용하며 6자리 숫자와 알파벳(a-f)의 조합으로 구성합니다.

/* HEX 색상 코드 - 비추천 */
.example {
	color:#FF0000;
}

/* HEX 색상 코드 - 추천 */
.example {
	color:#ff0000;
}

가상요소(pseudo-element)는 :: 더블 콜론을 사용 합니다.

/* 가상요소 - 비추천 */
.example:before {
	content:'';
	display:block;
}

/* 가상요소 - 추천 */
.example::before {
	content:'';
	display:block;
}

가상클래스(pseudo-class)는 : 콜론을 사용 합니다.

/* 가상클래스 - 비추천 */
.example::active{
	color:red;
}

/* 가상클래스 - 추천 */
.example:active{
	color:red;
}

!important 선언을 사용하지 않습니다.

/* important - 비추천 */
.example3 {
  font-weight: bold !important;
}

/* important - 추천 */
.example3 {
  font-weight: bold;
}

값이 0일때는 단위를 표시하지 않습니다.

/* 값이 0일때 - 비추천 */
.example4 {
	width: 0px;
	margin: 0rem 2rem 3rem 0rem;
}

/* 값이 0일때 - 추천 */
.example4 {
	width: 0;
	margin: 0 2rem 3rem 0;
}

4-3. 중첩

CSS 셀렉터를 과도하게 중첩하는 것은 여러 가지 문제를 야기할 수 있습니다. 성능 저하, 유지보수의 어려움, 그리고 코드의 가독성 저하가 주된 이유입니다. CSS 셀렉터가 너무 구체적이 되면, 스타일 규칙이 예상치 못한 방식으로 적용되거나, 다른 스타일을 오버라이드하기 위해 더 구체적인 셀렉터를 계속 추가해야 하는 상황이 발생할 수 있습니다. 이는 코드의 복잡성을 증가시키고, 나중에 스타일을 변경하거나 디버깅할 때 어려움을 겪게 만듭니다.

예제: 과도한 셀렉터 중첩

body home-page main-content .content-section .section-header .title {
  color: blue;
}

이 예제에서 셀렉터는 body부터 시작하여 home-page, main-content, content-section, section-header, 그리고 title 클래스까지 매우 구체적으로 지정되어 있습니다. 이러한 과도한 중첩은 다음과 같은 문제를 일으킬 수 있습니다:

성능 저하: 브라우저는 DOM 트리를 탐색할 때 더 많은 작업을 해야 하므로, 페이지 렌더링 속도가 저하될 수 있습니다.

유지보수 어려움: 나중에 section-header나 title 클래스를 다른 곳에서 재사용하고 싶을 때, 이 셀렉터 규칙 때문에 해당 스타일을 적용하기 어려울 수 있습니다.

가독성 저하: 긴 셀렉터 체인은 코드를 읽고 이해하는 데 시간이 더 걸립니다.

개선된 예제

.title {
  color: blue;
}

이 예제에서는 .title 클래스에 직접 스타일을 적용합니다. 필요에 따라 추가적인 구체성이나 컨텍스트가 요구되는 경우, 부모 셀렉터를 하나 또는 두 개 정도 사용하는 것이 적절할 수 있습니다. 예를 들어, .content-section .title은 적당한 수준의 구체성을 제공하면서도 유지보수와 가독성을 고려한 좋은 접근법입니다.

4-4. 중첩 자세히 보기

CSS를 작성할 때 중첩의 정도는 주로 특정 선택자에 스타일을 적용하는 데 필요한 명확성과 코드의 유지보수성 사이의 균형을 고려하여 결정됩니다. 일반적으로, CSS에서의 중첩은 가능한 한 최소화하는 것이 좋습니다. 깊은 중첩은 CSS 코드의 복잡성을 증가시키고, 성능 저하를 일으킬 수 있으며, 유지보수를 어렵게 만듭니다.

적당한 중첩의 정도

2~3단계 중첩은 대부분의 경우에 적당하다고 볼 수 있습니다. 이 정도의 중첩은 코드의 가독성을 유지하면서도 필요한 선택자의 명확성을 제공할 수 있습니다.

깊은 중첩을 피하는 방법

클래스 기반 선택자 사용: 가능한 한 태그나 ID 선택자 대신 클래스 선택자를 사용하고, 구체적인 클래스 이름을 통해 스타일을 적용합니다.

Sass, Less와 같은 CSS 전처리기의 중첩 기능 적절히 활용: CSS 전처리기를 사용할 때는 중첩 기능을 적절히 활용하되, 깊은 중첩이 발생하지 않도록 주의합니다. 전처리기의 중첩 기능을 사용할 때도 3단계를 넘지 않도록 하는 것이 좋습니다.

sass로 코드 작성시 css로 변환 됐을때 5중첩 이상 되지 않도록 /dist/assets/styles/style.css 에서 확인해보는 것도 좋은 방법입니다.

클래스의 중첩을 피하기 위하여 컨텐츠유형, 컴포넌트유형 클래스를 잘 활용 하길 바랍니다.

4-5. 중첩 코드 최소화

예제 코드 1

HTML

<table class="component-table-col01">
  <thead>
    <tr>
      <th>번호</th>
      <th>이름</th>
      <th>직업</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>홍길동</td>
      <td>도적</td>
    </tr>
    <tr>
      <td><div class="num">2</div></td>
      <td><div class="name">이순신</div></td>
      <td><div class="work">장군</div></td>
    </tr>
  </tbody>
</table>

CSS

/* 잘못된 예 */
.component-table-col01 thead tr th { X }
.component-table-col01 thead tr td .name { X }

/* 올바른 예 */
.component-table-col01 { O }
.component-table-col01 th, .component-table-col01 td { O }
.component-table-col01 td .name { O }
.component-table-col01 thead { O }
.component-table-col01 tbody tr:nth-child(even) { O }

SCSS

/* 잘못된 예 */
.component-table-col01 {
	thead {
		tr {
			th {}
			td {
				.name {}
			}
		}
	}
}
/* 올바른 예 */
.component-table-col01 {
  th {
  }
  td {
	  .name {}
  }
  thead {
  }
  tbody tr:nth-child(even) {
  }
}

예제 코드 2

/* 중첩하지 않고 */
.table > thead > tr > th { … }
.table > thead > tr > td { … }

/* 중첩 포함 */
.table > thead {
  th { … }
  td { … }
}

/* 클래스를 활용하는 경우 */
.component-table {
	.table-thead {}
	.table-tr {}
	.table-td {}
}

예제 코드 3

HTML

<div class="component-accordion">
  <div class="accordion-item">
    <button class="accordion-button" type="button">Section 1</button>
    <div class="accordion-content">
      <p>This is the content of Section 1.</p>
    </div>
  </div>
  <div class="accordion-item">
    <button class="accordion-button" type="button">Section 2</button>
    <div class="accordion-content">
      <p>This is the content of Section 2.</p>
    </div>
  </div>
</div>

CSS

.component-accordion .accordion-button {}
.component-accordion .accordion-button:after {}
.component-accordion .accordion-button.active:after {}
.component-accordion .accordion-content {}

SCSS

.component-accordion {
  .accordion-item {
    .accordion-button {
      &:after {}
      &.active:after {}
    }
    .accordion-content {}
  }
}

예제 코드 4

html

<div class="component-board">
  <div class="board-frame">
    <div class="board-container">
      <div class="board-header">
        <div class="board-info">
          <p>총 <span class="board-count">304</span>건, <span class="board-current">1</span>/<span class="board-total">31</span>페이지</p>
        </div>
        <div class="board-search">
          <div class="select-wrap">
            <select>
              <option value="title" selected>제목</option>
              <option value="content">내용</option>
              <option value="name">작성자</option>
            </select>
          </div>
          <div class="component-input">
            <div class="input-box">
              <input type="text" class="input" placeholder="검색어를 입력해주세요.">
              <button type="button" class="btn-reset">
                  <span class="hide-txt">리셋</span>
              </button>
              <button type="button" class="btn-search">
                <span class="hide-txt">검색</span>
              </button>
            </div>
            <p class="input-desc"></p>
          </div>
        </div>
      </div>
      <div class="board-content">
        <table class="component-table">
          <caption>공지사항 게시물: 번호, 제목, 등록일, 등록자, 조회수</caption>
          <colgroup>
            <col style="width: 8%">
            <col>
            <col style="width: 15%">
            <col style="width: 15%">
            <col style="width: 10%">
          </colgroup>
          <thead>
            <tr>
              <th scope="col">번호</th>
              <th scope="col">제목</th>
              <th scope="col">등록일</th>
              <th scope="col">등록자</th>
              <th scope="col">조회수</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>5</td>
              <td>
                <a href="#">
                  공지사항 게시물 제목입니다.
                </a>
              </td>
              <td>2024-02-14</td>
              <td>등록자이름</td>
              <td>1555</td>
            </tr>
        </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

sass

/* 수정 전 코드 */
.component-board {
  .board-frame {
    .board-container {
      .board-header {
        .board-info {
        }
        .board-search {
          .select-wrap {
            select {
            }
          }
          .input-box {
            .input {
            }
            .btn-reset {
            }
            .btn-search {
            }
          }
        }
      }
      .board-content {
        .component-table {
          th {}
          th,
          td {
            > a {
              &:hover {
                text-decoration: underline;
              }
            }
          }
        }
      }
    }
  }
}

/* 수정 후 코드 */
.component-board {
	.board-frame {}
	.board-container {}
	.board-header {}
	.board-info {}
	.board-search {
		.select-wrap {
	      select {
	      }
    }
    .input-box {
      .input {
      }
      .btn-reset {
      }
      .btn-search {
      }
    }
	}
	.board-content {
	
		/* 수정 전 소스 */
		.component-table {
      td {
        > a {
          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
    
    /* 수정 후 소스 */
    .component-table {
      .txt-link {
		    &:hover {
	        text-decoration: underline;
	      }
	    }
    }
    
	}
}

💡

CSS 셀렉터를 사용할 때는 가능한 한 간결하게 유지하고, 과도한 중첩을 피하는 것이 좋습니다. 이는 스타일 시트의 성능을 최적화하고, 코드의 유지보수와 확장성을 개선하는 데 도움이 됩니다.

4-5. 타입 선택자

꼭 필요한 경우 요소(태그)와 함께 ID, Class를 지정하여 스타일링 하지 않는다.

/* 비추천 : 꼭 필요한 경우가 아니라면 요소에 ID, Class를 지정하여 사용하지 않는다. */
ul#example {...}
div.error {...}

/* 추천 */
#example {...}
.error {...}

4-6. 변수 규칙

kebab-case (케밥 케이스 표기법)
케밥 케이스에서는 단어 사이를 하이픈(-)으로 연결합니다. 이 방식은 CSS 네이밍에서 가장 일반적으로 사용되는 표기법입니다. 케밥 케이스는 CSS 속성과 값에서 자연스럽게 사용되기 때문에, CSS 클래스나 ID 네이밍에도 일관성을 제공합니다.

변수명은 되도록 직관적으로 네이밍 합니다.

$global-background-color: #ffffff;
$global-font-color: #000000;
$global-font-size: 10;

4-7. z-index 변수 규칙

기본 z-index 속성 값을 기준으로 +, - 하여 관리합니다.

기본값은 100부터 시작하지만 프로젝트에 따라 변경 가능 합니다.

공통 ui의 z-index 순으로 정리 합니다.

공통 ui외에 컨텐츠의 z-index는 1~10 단위를 사용하며 변수를 사용하지 않고 css에서 직접 관리 합니다.

/* 공통 UI 관리 */
$base-z-index: 100; // 기본 z-index
$mobile-mode-dimm-container: $base-z-index + 900; // 반응형 미지원 페이지 안내 컨텐츠 컨테이너 z-index 1000
$popup-zindex: $base-z-index; // 팝업 : z-index 100
$global-dimm-zindex: $base-z-index - 10; // 딤드 영역 : z-index 90
$gnb-container-zindex: $base-z-index - 15; // pc & mobile gnb : z-index 85
$mobile-subpage-header-title-zindex: $base-z-index - 19; // 모바일 서브페이지 헤더 타이틀 fixed : z-index 81
$header-scroll-fixed-zindex: $base-z-index - 20; // 헤더 스크롤 fixed : z-index 80

/* 개별 컨텐츠일 경우 */
.sample {
	position: relative;
	z-index: 1;
}
.sample .sub-sample01 {
	position: absolute; 
	top: 0; 
	left: 0;
	width: 100px; 
	height: 100px;
	z-index: 2;
}
.sample .sub-sample02 {
	position: absolute; 
	top: 0; 
	left: 0;
	width: 100px; 
	height: 100px;
	z-index: 3;
}

4-8. color 변수 규칙

폰트컬러(color), 배경컬러(background-color), 라인컬러(border)로 구분합니다.

아래와 같이 구분하면 HEX 코드가 같아도 폰트, 배경, 라인 별로 일괄 변환하기 수월합니다.

다양한 프로젝트를 수행해야 하기 때문에 특정 네이밍을 사용할 경우 매번 변경해야 하는 이슈가 있습니다.

figma 연동 시 figma 변수 규칙을 따르도록 합니다.

/* 폰트 컬러 */
$color-000000: #000000;
$color-ffffff: #ffffff;
$color-ffe53f: #ffe53f;
$color-e1002a: #e1002a;

/* 배경 컬러 */
$bg-000000: #000000;
$bg-ffffff: #ffffff;
$bg-ffe53f: #ffe53f;
$bg-e1002a: #e1002a;

/* 라인 컬러 */
$line-000000: #000000;
$line-ffffff: #ffffff;
$line-ffe53f: #ffe53f;
$line-e1002a: #e1002a;

4-9. Sass 믹스인(mixin)

Sass에서 믹스인(mixin)은 스타일 선언을 그룹화하여 재사용할 수 있게 해주는 강력한 기능입니다. 믹스인은 특정 스타일 블록을 다양한 곳에서 호출하여 사용할 수 있게 해주며, 매개변수를 받아 커스터마이징할 수 있는 옵션을 제공함으로써 CSS 코드의 재사용성과 유지 관리를 획기적으로 개선합니다.

src/assets/styles/abstracts/_mixins.scss 파일에서 사용 가능한 믹스인과 사용 방법 확인해주세요.

4-9-1 주요 Sass 믹스인(mixin) 사용법

font 믹스인 사용 방법

// 믹스인 선언
// src/assets/styles/abstracts/_mixins.scss - f12 이하 믹스인 참고 바랍니다.

// 믹스인 사용
.abc1 {
	@include f12(); // 기본사용
}
.abc2 {
	@include f12(900, 1.8); // 둘다 변경해야 할 경우(순서 중요)
}
.abc3 {
	@include f12(bold); // 폰트 굵기만 변경해야 할 경우
}
.abc4 {
	@include f12($lineHeight: 1.8); // 행간만 변경해야 할 경우
	line-height: 1.2; // 중복 코드 생성됨(비추천)
}

// css 출력
.abc1 {
	font-size: 1.2rem;
	line-height: 1.4;
}
.abc2 {
	font-size: 1.2rem;
	line-height: 1.8;
	font-weight: 900;
}
.abc3 {
	font-size: 1.2rem;
	line-height: 1.4;
	font-weight: bold;
}
.abc4 {
	font-size: 1.2rem;
	line-height: 1.8;
	line-height: 1.2;
}

flex-grid 믹스인 사용 방법

// 믹스인 선언
// src/assets/styles/abstracts/_mixins.scss - flex-grid 믹스인 참고 바랍니다.

// 믹스인 사용
.form-row {
	// form row - col 2
  &.two-col {
    @include flex-grid((1, 1), 4);
  }

  // form row - col 3
  &.ratio-2-1 {
    @include flex-grid((2, 1), 4);
  }
}

// css 출력 two-col
.form-row.two-col > [class*=-col-1] {
  flex: 0 0 calc(50%);
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}
.form-row.two-col > [class*=-col-2] {
  flex: 0 0 calc(50%);
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}

// css 출력 ratio-2-1
.form-row.ratio-2-1 > [class*=-col-1] {
  flex: 0 0 calc(66.6666666667%);
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}
.form-row.ratio-2-1 > [class*=-col-2] {
  flex: 0 0 calc(33.3333333333%);
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}

4-10. 미디어 쿼리 및 반응형 디자인 규칙

미디어 쿼리 위치: 미디어 쿼리는 관련된 선택자 근처에 배치하거나, 문서의 맨 하단에 모아두어 관리를 용이하게 합니다.

단위 사용: 반응형 디자인에서는 상대적 단위(rem)를 사용하여 더 유연하고 접근성 높은 디자인을 구현합니다.

rem에 대한 자세한 사항은 → rem이해하기

REM 기본사용예시

// 믹스인 사용
.abc {
	@include rem(width, 30);
	@include rem(border-radius, 4);
	@include rem(padding, 20);
	border:1px solid red;
	flex: 1 1 5rem;
	width:calc(100% - 5rem);
}

// css 출력
.abc {
	width: 3rem;
	border-radius: 0.4rem;
	padding: 2rem 2rem 2rem 2rem;
	border:1px solid red;
	flex: 1 1 5rem;
	width:calc(100% - 5rem);
}

4-11. 벤더 프리픽스 사용

자동화 도구 사용: Gulp에서 Autoprefixer와 같은 도구를 사용하여 벤더 프리픽스를 자동으로 관리합니다.

필요한 경우에만 사용: 최신 브라우저 지원 상황을 고려하여 필요한 경우에만 벤더 프리픽스를 추가합니다. (package.json)

4-12. CSS 유효성

가능하다면 유효한 CSS를 사용하세요. CSS 유효성 검사기 버그를 다루거나 독점 구문이 필요한 경우를 제외하고 유효한 CSS 코드를 사용하세요.

W3C CSS 유효성 검사기 와 같은 도구를 사용하여 테스트하세요.

유효한 CSS를 사용하는 것은 효과가 없거나 제거할 수 있는 CSS 코드를 찾아내고 적절한 CSS 사용을 보장하는 측정 가능한 기준 품질 속성입니다.

uxg-boilerplate-2024에 포함된 유효성 검사 기능을 사용 합니다.

css 유효성 검사 사용 예시

// vscode 터미널에서 아래 명령어 실행
npm run checkstyle


// 아래와 같은 메세지가 나타날 경우 내용 확인하여 조치 필요 (ChatGPT 활용 가능)
C:\workspaces\uxg-boilerplate-2024>npm run checkstyle

> uxg-boilerplate-2024@0.4.0 checkstyle
> gulp checkstyle

[08:58:24] Using gulpfile C:\workspaces\uxg-boilerplate-2024\gulpfile.js
[08:58:24] Starting 'checkstyle'...
[08:58:24] Starting 'validateStyle'...

dist/assets/styles/style.css
2831:34 !!  Expected "33.3333333333" to be "33.3333" (number-max-precision) [stylelint]
2832:18 !!  Expected "33.3333333333" to be "33.3333" (number-max-precision) [stylelint]
4290:3  !!  Unexpected duplicate "line-height" (declaration-block-no-duplicate-properties) [stylelint]
4465:3  !!  Unexpected duplicate "line-height" (declaration-block-no-duplicate-properties) [stylelint]

💡

이 규칙들은 CSS 코드를 작성할 때 일관성을 유지하고, 효율적으로 관리할 수 있도록 도와줍니다. 또한, 반응형 웹 디자인과 최신 웹 표준을 따르는 데 중요한 역할을 합니다.

5. Naming

이미지, 클래스, 아이디에 대한 네이밍 규칙을 설명합니다.

5-1. 네이밍 규칙

왜 파일 네이밍 규칙(File Naming Rules)을 사용하는가?

정확한 CSS 네이밍을 한다면, 코드를 읽기 쉽고 유지 보수하기 쉽게 만들어 줄 것입니다.

5-2. ID와 클래스 이름의 사용

ID 사용: ID는 고유한 요소를 식별하는 데 사용되며, 한 페이지에서 한 번만 사용해야 합니다. ID는 JavaScript와의 상호 작용이 필요한 경우나 앵커 포인트로 사용할 때 주로 적용합니다.

클래스 사용: 스타일 적용을 위해서는 주로 클래스 선택자를 사용합니다. 클래스는 재사용 가능하고, 여러 요소에 동일한 스타일을 적용하는 데 유용합니다.

5-3. 이미지 네이밍 규칙

Snake-Case (스네이크 표기법)
스네이크 표기법에서는 단어 사이를 밑줄(_)로 연결합니다. 이 방식은 단어의 경계가 명확하게 보이도록 해주며, 주로 프로그래밍 언어나 환경에서 변수명이나 함수명을 지을 때 사용됩니다. CSS에서는 일반적으로 스네이크 표기법을 자주 사용하지 않으나, 일부 프로젝트 또는 팀에서는 이를 선호할 수 있습니다.

유형 + 속성(순서) + 상태 순으로 작성합니다.
- 유형과 속성 이란?
  "유형"은 보다 넓은 범주에서 객체, 사물, 개념 등을 분류하는 기준을 말합니다. 유형은 동일한 특성이나 속성을 공유하는 그룹을 식별하는 데 사용되며, 일반적으로 범주나 클래스를 정의하는 용도로 사용됩니다. 예를 들어, 웹 개발에서 버튼, 입력 필드, 드롭다운 메뉴와 같은 UI 컴포넌트의 '유형'을 구분할 때 사용할 수 있습니다.
  속성은 객체, 요소, 또는 개체의 특징이나 상태를 설명하는 정보입니다. 웹 개발에서 HTML 요소의 속성은 해당 요소의 특징이나 설정을 정의합니다. 속성 안에 역할이 포함될 수 있으며, 역할은 요소의 속성 중 하나로서 그 요소가 사용자에게 어떻게 작용해야 하는지를 명시하는 역할을 합니다.

특정 카테고리에 따라 이미지를 구분할 필요가 있을 경우, 관련 이미지들을 별도의 폴더에 분류합니다.

폴더로의 구분이 실질적이지 않거나 가능하지 않을 경우, 접두사 뒤에 카테고리명을 추가하여 이미지를 구분합니다.

이미지의 상태를 나타내는 네이밍은 해당 컨텐츠의 클래스 상태 네이밍과 일치하도록 합니다.

네이밍 샘플
- ico_login_user01_on.png
  - 유형: ico - 아이콘을 의미합니다.
  - 속성(순서): login_user01 - 로그인 관련 특정 유저의 첫 번째 버전을 의미합니다.
  - 상태: on - 활성 상태를 의미합니다.
- btn_submit_order02_off.svg
  - 유형: btn - 버튼을 의미합니다.
  - 속성(순서): submit_order02 - 주문 제출 버튼의 두 번째 스타일을 의미합니다.
  - 상태: off - 비활성 상태를 의미합니다.

<!-- 이미지 네이밍 예제 -->
<img src="ico_home.png" alt="">
<img src="ico_star01_on.png" alt="">
<img src="btn_add_file_off.png" alt="">
<img src="btn_add_file_on.png" alt="">
<img src="img_swiper_item01.png" alt="">
<img src="thumb_event_swiper01_item01.png" alt="">
<img src="bu_circle_gray01_off.png" alt="">
<img src="line_dot01_red.png" alt="">
<img src="line_dot02_red.png" alt="">
<img src="thumb_main_size01_on.png" alt="">
<img src="thumb_main_size01_off.png" alt="">
<img src="logo_header_lightmode.png" alt="">
<img src="logo_footer_darkmode.png" alt="">
<img src="map_pin01_on.png" alt="">
<img src="map_pin01_off.png" alt="">
<img src="sp_ico01_24x24.png" alt="">
<img src="sp_ico01_48x48.png" alt="">

순서가 있는 이미지 규칙은 01, 02, 03과 번호대로 표기 합니다.

<img src="gradient_bg01_green01.png" alt="">
<img src="gradient_bg01_green02.png" alt="">

<img src="tab_notice01_item01_on.png" alt="">
<img src="tab_notice01_item02_on.png" alt="">

순서가 없던 이미지 중에 추가 이미지가 발생 하면 01을 건너뛰고 02부터 표기 합니다.

<img src="img_main_notice.png" alt="">
<img src="img_main_notice02.png" alt="">

<img src="tit_member_red.png" alt="">
<img src="tit_member02_red.png" alt="">

숫자 표기는 분리자/구분자를 사용하지 않고 연속적인 네이밍으로 작성 합니다.

<img src="banner_notice_01_black_01_on.png" alt=""> ( X )
<img src="banner_notice01_black01_on.png" alt=""> ( O )

이미지 파일들의 폴더 구조는 공통 폴더와 카테고리 폴더로 구분 합니다.

assets/images/common/ <!-- 공통 이미지 -->
assets/images/join/ <!-- 회원가입 이미지 -->
assets/images/main/ <!-- 메인 이미지 -->

5-4. 이미지 네이밍 규칙: 접두사를 활용한 파일 구분

btn_	버튼
bu_	블릿
line_	선
img_	이미지
thumb_	썸네일
gradient_	그라데이션
logo_	로고
map_	지도관련 이미지

ico_	아이콘
tab_	탭
bg_	배경
temp_	임시
ad_	광고
sp_	스프라이트 이미지
banner_	배너
mask_	마스크 이미지
avatar_	프로필 이미지

5-5. CSS 네이밍 규칙

kebab-case (케밥 케이스 표기법)
케밥 케이스에서는 단어 사이를 하이픈(-)으로 연결합니다. 이 방식은 CSS 네이밍에서 가장 일반적으로 사용되는 표기법입니다. 케밥 케이스는 CSS 속성과 값에서 자연스럽게 사용되기 때문에, CSS 클래스나 ID 네이밍에도 일관성을 제공합니다.

유형 + 속성(순서) + 상태 순으로 작성합니다.
- 유형과 속성이란?
  "유형"은 보다 넓은 범주에서 객체, 사물, 개념 등을 분류하는 기준을 말합니다. 유형은 동일한 특성이나 속성을 공유하는 그룹을 식별하는 데 사용되며, 일반적으로 범주나 클래스를 정의하는 용도로 사용됩니다. 예를 들어, 웹 개발에서 버튼, 입력 필드, 드롭다운 메뉴와 같은 UI 컴포넌트의 '유형'을 구분할 때 사용할 수 있습니다.
  속성은 객체, 요소, 또는 개체의 특징이나 상태를 설명하는 정보입니다. 웹 개발에서 HTML 요소의 속성은 해당 요소의 특징이나 설정을 정의합니다. 속성 안에 역할이 포함될 수 있으며, 역할은 요소의 속성 중 하나로서 그 요소가 사용자에게 어떻게 작용해야 하는지를 명시하는 역할을 합니다.

네이밍 샘플
- .ico-login-user01.on
  - 유형: ico - 아이콘을 의미합니다.
  - 속성(순서): login-user01 - 로그인 관련 특정 유저의 첫 번째 버전을 의미합니다.
  - 상태: on - 활성 상태를 의미합니다.
- .btn-submit-order02.off
  - 유형: btn - 버튼을 의미합니다.
  - 속성(순서): submit-order02 - 주문 제출 버튼의 두 번째 스타일을 의미합니다.
  - 상태: off - 비활성 상태를 의미합니다.

/* 클래스 네이밍 예제 */
.ico-login-user01 {}
.btn-submit-order02 {}

상태 클래스는 하이픈(-)으로 연결하는 방식을 쓰지 않고 클래스 분리 방식을 사용 합니다.

<div class="btn-type01-on"></div> ( X )
<div class="btn-type01 on"></div> ( O )

순서가 있는 클래스 규칙은 01, 02, 03과 같이 표기 합니다.

.btn-type01 {}
.btn-type02 {}

순서가 없던 클래스 중에 추가 이미지가 발생 하면 02부터 표기 합니다.

.tit-notice {}
.tit-notice02 {}

숫자 표기는 분리자/구분자를 사용하지 않고 연속적인 네이밍으로 작성 합니다.

.btn-type-02 { X }
.btn-type02 { O }

5-6. 레이아웃 아이디 및 클래스

아이디는 한 문서 내에서 고유해야 합니다. 같은 아이디를 두 번 이상 사용하지 않습니다.

소문자 사용을 원칙으로 합니다. label아이디는 필요에 따라서 카멜케이스를 사용 합니다.

레이아웃과 관련된 아이디는 아래와 같이 정의하고 필요한 경우 프로젝트 팀내에서 협의하여 사용 합니다.

.layer-wrap 클래스 영역은 모달, 얼럿등 레이어 컴포넌트들을 컨트롤 하는 공간 입니다.

기본 구조

/* 페이지 기본 구조 */
#wrap {} 
	#header {} 
	#container {} 
		#content {} 
	#footer {}
	
/* 레이어 컨트롤 영역 */
.layer-wrap {}

<input>, <label> 태그등 임시 아이디가 필요할 경우 네이밍

<!-- 임시라는 temp_ 로 시작하여 해당 컴포넌트 관련 이름으로 만듭니다. -->
<!-- 단어 구분은 언더바(_)로 구분 합니다. -->
<!-- 여러곳 에서 쓰일 경우를 대비해 0000 숫자로 넘버링 해줍니다. -->

<div class="component-input">
  <label for="temp_input_0001" class="input-label">
    <span class="label-txt">
      <i class="ico-required-mark" role="img" aria-label="필수">*</i>
      인풋 레이블
    </span>
    <span class="label-util">인풋 텍스트,버튼등등 위치</span>
  </label>
  <div class="input-field">
    <input type="text" id="temp_input_0001" placeholder="input text">
  </div>
  <div class="input-info">인풋 유틸리티 Info 영역</div>
</div>

5-7. CSS 클래스 구조

구조 유형은 크게 컨텐츠와 컴포넌트(단일, 복합) 2가지로 분류 합니다.

컨텐츠는 -wrap 이라는 접미사를 사용합니다.

컴포넌트는 component- 라는 접두사를 사용합니다.

컨텐츠 & 컴포넌트를 레이아웃이 필요할 경우 .components-layout 클래스를 사용합니다.

참고로 네이밍 구조는 부모의 접미사를 자식의 접두사로 사용할수도 있습니다. (참고사항)

.component-tab {}
	.tab-item {}
		.item-bg {}
			.bg-color01 {}
		.item-txt {}
			.txt-info {}

5-8. 일반 컨텐츠 클래스

약속어

.visual {}
.ceo {}
.company {}
.history {}
...
/* 컨텐츠에 맞게 생성 */

구조

/* 컨텐츠 구조 */
.컨텐츠유형-wrap {}
	 .컨텐츠유형-속성클래스 {}
	 
.컨텐츠유형-dimm {}
.컨텐츠유형-spinner {}

예제

/* 작성 예제 */
.ceo-wrap {
	.ceo-head {
		.head-info {}
	}
	.ceo-body {
		.intro-txt {}
	}
	.ceo-foot {
		.foot-sub-txt {}
	}
}
.ceo-dimm {}
.ceo-spinner {}

5-9. 단일 컴포넌트 클래스

약속어

.skipnav {}
.browserupgrade {}
.logo {}
.dimm {}

.btn {}
.badge {}
.ico {}
.bu {}
...
/* 추가시 협의 필요 */

구조

/* 컴포넌트 구조 */
.skipnav- {}
.browserupgrade- {}
.logo- {}
.dimm- {}

.btn-{}
.ico-{}
.badge-{}
.bu-{}

예제

/* 작성 예제 */
.btn-cancel {}
.btn-confirm {}
.btn-primary {}
.ico-arrow {}
.ico-star-gold {}
.badge-round {}
.bu-dot-red {}
.bu-circle {}

5-10. 복합 컴포넌트 클래스

약속어

/* 복합 스페셜 컴포넌트 */
.gnb {}
.lnb {}
.allmenu {}
.utilmenu {}

/* 복합 그룹 컴포넌트 */
.hgroup {}
.btns {}
.form {}
.lists {}
.carousels {}

/* 복합 컴포넌트 */
.input {}
.checkbox {}
.radio {}
.selectbox {}
.dropdown {}
.progressbar {}

.tab {}
.card {}
.table {}
.step {}
.accordion {}
.breadcrumb {}
.pagination {}
.carousel {}

.empty {}
.spinner {}
.skeleton {}
.error-page {}
.lottie {}

/* 복합 레이어 컴포넌트 */
.modal {}
.popup {}
.dialog {}
.alert {}
.picker {}
.tooltip {}
.snackbar {}
.toast {}
...
/* 추가시 협의 필요 */

구조

/* 복합 컴포넌트 구조 */
.component-컴포넌트유형 {}
	.컴포넌트유형-속성클래스 {}
	
.컴포넌트유형-dimm {}
.컴포넌트유형-spinner {}
.컴포넌트유형-skeleton {}

/* 복합 그룹 컴포넌트 구조 */
.component-컴포넌트유형 {}
	.컴포넌트유형-row {}
	.컴포넌트유형-col {}

/* 레이어 컴포넌트 구조 */
.component-컴포넌트유형 {}
	.컴포넌트유형-frame {}
		.컴포넌트유형-container {}
			.컴포넌트유형-header {}
			.컴포넌트유형-content {}
			.컴포넌트유형-footer {}
	.컴포넌트유형-close {}
	
.컴포넌트유형-dimm {}
.컴포넌트유형-spinner {}
.컴포넌트유형-skeleton {}

예제

/* 복합 컴포넌트 작성 예제 - accordion */
.component-accordion {
	.accordion-head {
		.head-tit {}
	}
	.accordion-body {
		.body-view {}
	}
	.accordion-foot {
		.foot-info {}
	}
}

/* 복합 그룹 컴포넌트 구조 */
.component-form {}
	.form-row {}
	.form-col {}

/* 레이어 컴포넌트 작성 예제 - modal */
.component-modal {
	.modal-frame {}
	.modal-container {}
	.modal-header {}
	.modal-content {}
	.modal-footer {}
	.modal-close {}
}
.modal-dimm {}
.model-spinner {}

5-11. 클래스 작성 구조

/* 컨텐츠 클래스 구조 */
.컨텐츠유형-wrap {
	.컨텐츠유형-속성클래스 {}
	.컨텐츠유형-속성클래스 {}
	.컨텐츠유형-속성클래스 {}
}

/* 컴포넌트 클래스 구조 */
.component-컴포넌트유형 {
	.컴포넌트유형-속성클래스 {}
	.컴포넌트유형-속성클래스 {}
	.컴포넌트유형-속성클래스 {}
}

/* 유의 사항 */
.component-accordion {
	h1 { O }
	h3 { O }
	header { O }
	article { O }
	section { O }
	footer { O }
	
	p { X }
	div { X }
	span { X }

	.accordion-sub-copy { O }
	.accordion-txt { O }
	.accordion-item { O }
	.accordion-box { O }
	
	.txt-rank { X }
	.temp-rank { X }
}

5-12. 컨텐츠 & 컴포넌트 레이아웃 클래스

components-layout 은 컴포넌트 또는 컨텐츠의 레이아웃이 필요한 경우 사용합니다.

레이아웃에 관련된 스타일 클래스 ( components-layout )는 주로 두 가지 방법으로 정리하는 것이 좋습니다. 자주 사용되는 일반적인 레이아웃 스타일은 layout.css 파일에 모아두세요. 반면, 특정 내용이나 컴포넌트에만 적용되는 레이아웃 스타일은 각각의 카테고리.css 파일에 따로 정리하는 것이 좋습니다.

예를 들어 ceo.html 에서 특정 레이아웃이 발생해서 components-layout 을 사용해야 할때 .components-layout-compnay 또는 .components-layout-ceo 라는 클래스를 만들고 해당 클래스는 company.css 파일에 정리를 하는 것 입니다.

물론, components-layout 을 사용하지 않고 .ceo-wrap 에서 처리 할 수 있다면 더 좋을 것 같습니다.

주의사항으로 components-layout 자식으로 포함되는 컨텐츠 및 컴포넌트 클래스들은 레이아웃과 관련된 속성들만 컨트롤 합니다. 컨텐츠 구성 스타일은 해당 카테고리.css 에서 컨트롤 하고 컴포넌트 구성 스타일은 해당 컴포넌트.css 에서 컨트롤 합니다.

<!-- 1번 샘플 -->
<div class="components-layout">
	<div class="layout-row">
		<div class="layout-col">
			<div class="visual-wrap"></div>
		</div>
		<div class="layout-col">
			<div class="component-lists"></div>
		</div>
	</div>
	<div class="layout-row">
		<div class="layout-col">
			<div class="component-form"></div>
		</div>
		<div class="layout-col">
			<div class="component-btns"></div>
		</div>
	</div>
</div>

<!-- 2번 샘플 -->
<div class="components-layout-company">
	<div class="layout-company-row">
		<div class="layout-company-col">
			<div class="ceo-wrap"></div>
		</div>
		<div class="layout-company-col">
			<div class="history-wrap"></div>
		</div>
	</div>
	<div class="layout-company-row">
		<div class="layout-company-col">
			<div class="about-wrap"></div>
		</div>
		<div class="layout-company-col">
			<div class="bi-wrap"></div>
		</div>
	</div>
</div>

/* 1번 샘플 */
.components-layout {
	.layout-row {
		@include flex-grid((1, 1), 4); // flex-grid mixin 사용
	}
	[class^="layout-col"] {}
	
	.visual-wrap {}
	.component-lists {}
	.component-form {}
	.component-btns {}
}

/* 2번 샘플 */
.components-layout-company {
	.layout-company-row {
		@include flex-grid((1, 1), 4); // flex-grid mixin 사용
	}
	[class^="layout-company-col"] {}
	
	.ceo-wrap {}
	.history-wrap {}
	.about-wrap {}
	.bi-wrap {}
}

/* 컨텐츠 & 컴포넌트 레이아웃 클래스 및 구조 예제 */
.components-layout-유형 {
	.layout-유형-row {}
	[class^="layout-유형-col"] {}
	.layout-유형-col-1 {}
	.layout-유형-col-2 {}
	
	// 간격, 꾸밈 등 부가적인 스타일만 아래에 정리 
	.ceo-wrap {}
	.history-wrap {}
	.component-accordion {}
	.component-btns {}
}

5-13. 유형 확장 클래스 작성 방법

기본형식

/* 컨텐츠 확장 */
.ceo-wrap {}
.ceo-wrap-type02 {}
.ceo-wrap.bg01 {}

/* 단일 컴포넌트 확장 */
.btn-primary {}
.btn-primary-type02 {}
.btn-primary.round {}

/* 복함 컴포넌트 확장 */
.component-card {}
.component-card-type02 {}
.component-card.bg02 {}

예제

/* 기본 유형 */
.component-accordion {
	.accordion-group {
		.txt-name {}
	}	
}

/* 완전 다른 유형일 경우 */
.component-accordion-type02 {
	/* 완전 다른 네이밍이 됩니다. */
	.accordion-type02-group {
		.txt-name {}
	}
}

/* 같은 유형 스타일이 다른 경우 */
.component-accordion {
	/* 기존 네이밍을 따라 가고 추가 클래스를 통해서 확장 합니다. */
	&.round {
		.accordion-group {
			.txt-name {}
		}	
	}
	&.bg01 {
		.accordion-group {
			.txt-name {}
		}	
	}
	&.type02 {
		.accordion-group {
			.txt-name {}
		}	
	}
}

5-14. 감싸는 클래스 작성 방법

<!-- 기본 유형 -->
<div class="component-accordion">
	<div class="accordion-head"></div>
</div>

<!--
	갑작스런 감싸는 영역이 필요한 경우
	-sup 접미사를 붙여 줍니다. 
-->
<div class="component-accordion">
	<div class="accordion-head-sup">
		<div class="accordion-head"></div>
	</div>
</div>

<!--
	갑작스런 감싸는 영역이 필요한 경우
	-sup 접미사를 붙여 줍니다. 
-->
<div class="component-accordion-sup">
	<div class="component-accordion">
		<div class="accordion-head"></div>
	</div>
</div>

5-15. 상태 클래스 약속어 (css스타일 + 스크립트 호출 + 개발 호출)

/* 버튼, 체크박스, 탭등 */
.on {}
.off {}

/* 모달, 툴팁, 드롭다운, 아코디언등 */
.show {}
.hide {}

/* 고정 영역 */
.fixed {} /* position: fixed */
.sticky {} /* position: sticky */

/* 스텝등 */
.current {} /* 현재위치 */
.complete {} /* 완료된 항목 */

/* 폼 그룹 */
.form-disabled {} /* 폼 요소가 비활성화된 상태일 때의 스타일을 적용합니다. */
.form-readonly {} /* 읽기 전용 필드에 스타일을 적용합니다. */
.form-valid {} /* 입력 값이 검증 조건을 만족했을 때의 스타일을 적용합니다. */
.form-invalid {} /* 입력 값이 검증 조건을 만족하지 않았을 때의 스타일을 적용합니다. */
.form-required {} /* 필수 입력 필드에 스타일을 적용합니다. */

/* input 그룹 */
.input-disabled {} /* 폼 요소가 비활성화된 상태일 때의 스타일을 적용합니다. */
.input-readonly {} /* 읽기 전용 필드에 스타일을 적용합니다. */
.input-valid {} /* 입력 값이 검증 조건을 만족했을 때의 스타일을 적용합니다. */
.input-invalid {} /* 입력 값이 검증 조건을 만족하지 않았을 때의 스타일을 적용합니다. */
.input-required {} /* 필수 입력 필드에 스타일을 적용합니다. */

expand(확장하다), reduction(축소하다), fold(펼치다), unfold(접다) → 사용하지 않습니다.

위 단어들은 on, off, show, hide로 대체 합니다.

5-16. 유틸리티 클래스

유틸리티 클래스를 생성할 때는 _display.scss _margin.scss _padding.scss _text.scss 와 같이 파일명으로 유틸리티 종류를 구분해서 정리 하도록 합니다.

/* 
	유틸리티 클래스 
	규칙은 tailwindcss를 참고합니다.
	https://tailwindcss.com/docs/display
*/

/* _text.scss */
.text-center {text-align: center;}
.text-left {text-align: left;}
.text-right {text-align: right;}

/* _font.scss */
.font-bold {font-weight: bold;}
.font-normal {font-weight: normal;}

/* _cursor.scss */
.cursor-pointer {cursor: pointer;}

/* _display.scss */
.pc-show {display: block;}
.pc-hide {display: none;}
.mo-show {display: block;}
.mo-hide {display: none;}

/* _width.scss */
.w-10 {width: 10px;}
.min-w-200 {min-width: 200px;}
.min-w-full {min-width: 100%;}
.max-w-200 {max-width: 200px;}
.max-w-full {max-width: 100%;}

/* _height.scss */
.h-10 {height: 10px;}
.min-h-400 {min-height: 400px;}
.min-h-full {min-height: 100%;}
.max-h-400 {max-height: 400px;}
.max-h-full {max-height: 100%;}

/* _margin.scss */
.m-0 {margin: 0;}
.mt-5 {margin-top: 5px;}
.mb-5 {margin-bottom: 5px;}
.mr-5 {margin-right: 5px;}
.ml-5 {margin-left: 5px;}

/* _padding.scss */
.p-0 {padding: 0;}
.pt-5 {padding-top: 5px;}
.pb-5 {padding-bottom: 5px;}
.pl-5 {padding-left: 5px;}
.pr-5 {padding-right: 5px;}

/* _editor_reset.scss */
.editor-reset {/* 에디터 영역 reset */}

/* _base.scss */
.clfix {/* float 해제 */}
.hide-txt {/* 숨김 텍스트 */}

5-17. 스크립트 클래스 약속어

/* script에서 사용하는 클래스 */
.ui- {}

5-18. 영역 약속어

wrap wrapper layout main 은 영역 네이밍에 사용하지 않습니다.

main section article nav hgroup 은 영역 네이밍에 사용하지 않습니다.

container header footer frame dialog 은 영역 네이밍에 사용하지 않습니다.

head	body	foot	cont
group	area	zone	inner
list	box	item	part
form	field	unit	space
grid	segment	panel	tile
cluster	chunk	nook	slice
enclave	pocket	hub	alcove
vestibule	mezzanine	atrium	niche
berth	dais	grotto

head: 일반적으로 구조물의 상단 또는 시작 부분을 의미합니다.

body: 본문이나 주요 부분을 나타냅니다.

foot: 구조물의 하단 또는 마무리 부분입니다.

cont (content): 내용물 또는 콘텐츠를 지칭합니다.

group: 공통된 특성이나 목적을 가진 항목들의 집합입니다.

area: 지정된 또는 특정한 공간을 가리킵니다.

zone: 특별한 목적이나 활동을 위해 설정된 구역입니다.

inner: 내부적인 부분이나 영역을 의미합니다.

list: 순서대로 나열된 항목들의 모임입니다.

box: 일반적으로 담는 기능을 가진 사각형 모양의 용기나 영역입니다.

item: 개별적인 항목이나 물건을 지칭합니다.

part: 전체 중 일부분을 나타냅니다.

form: 형태나 양식, 특정 목적을 위한 입력 필드들의 집합을 의미합니다.

field: 입력 또는 데이터를 담을 수 있는 공간을 지칭합니다.

unit: 독립적인 하나의 요소나 측정 단위를 나타냅니다.

space: 물리적 또는 가상의 공간을 의미합니다.

grid: 격자 또는 표와 같이 구성된 배열을 나타냅니다.

segment: 나뉘어진 부분 또는 구분된 영역입니다.

panel: 일반적으로 정보를 표시하거나 제어할 수 있는 구역입니다.

tile: 바닥이나 벽 등을 장식하는 사각형 모양의 조각입니다.

cluster: 비슷한 특성이나 목적을 공유하는 집단입니다.

chunk: 크기나 양이 상당한 부분을 의미합니다.

nook: 작고 아늑한 공간 또는 구석을 지칭합니다.

slice: 전체에서 잘라낸 조각이나 부분을 의미합니다.

enclave: 주변과 구별되는 작은 영역입니다.

pocket: 작은 공간이나 주머니 같은 저장 공간을 지칭합니다.

hub: 중심지 또는 중앙 집중점을 의미합니다.

alcove: 벽에 설치된 작은 공간, 종종 장식적 목적으로 사용됩니다.

vestibule: 건물의 입구와 내부를 연결하는 작은 공간입니다.

mezzanine: 두 주요 층 사이에 위치한 중간층을 나타냅니다.

atrium: 건물 내부의 큰 개방 공간, 종종 중앙 로비를 의미합니다.

niche: 특별한 목적을 위해 만들어진 작은 공간입니다.

berth: 배가 정박하는 위치나 잠을 잘 수 있는 침대 공간을 의미합니다.

dais: 발언자나 주요 인물이 서 있는 높은 플랫폼 또는 단상입니다.

grotto: 자연적으로 형성되었거나 인공적으로 만들어진 작은 동굴로, 장식적이거나 명상적인 용도로 사용될 수 있습니다.

💡

이 단어들은 다양한 구조, 공간, 또는 구성 요소의 특정 부분을 지칭할 때 사용되며, 각각의 맥락에 따라 그 의미가 조금씩 달라질 수 있습니다. 주로 건축, 웹 디자인, UI/UX 디자인, 문서 구조화 등에서 활용되며, 각 영역이나 구성 요소의 위치, 목적, 기능을 설명하는 데 도움을 줍니다.

5-19. 기타 약속어

text 네이밍은 유틸리티 클래스 및 input text를 제외하고는 txt로 사용합니다.

아래 단어들을 임의로 변경해서 사용하지 않습니다.

rank	순위
square	사각
circle	원
star	별
shadow	그림자
arrow	화살표
dot	점
detail	상세내용
widget	위젯
thumb	썸네일
img	이미지
link	링크
time	시간
date	날짜
copyright	저작권
type	타입
animation	애니메이션
display	디스플레이
download	다운로드
upload	업로드
add	첨부
cancel	취소
confirm	확인
modify	수정
write	쓰기
del	삭제
lock	잠금
unlocked	잠금해제
point	강조
submit	전송
update	업데이트
profile	프로필
feature	특징
description, desc	설명

home	홈
ad	광고
round	라운드
temp	임시
info	정보
code	코드
line	라인
special	스페셜
bar	바
num	숫자
txt	텍스트
tit	제목
banner	배너
file	파일
bg	배경
overflow	오버플로우
prev, next	이전, 다음
up, down	위, 아래
refresh	새로고침
top, middle, bottom	위, 중간, 아래
left, right	좌, 우
stop	정지
read	읽기
search	검색
find	찾기
reg	등록
install, setup	설치
run, play	실행
check	체크
h, v	수평, 수직
contact	연락처
social	소셜
back	뒤로

6. 접근성(Accessibility) 준수

웹 접근성은 모든 사용자가 웹 사이트의 정보에 접근하고, 기능을 사용할 수 있도록 보장하는 것을 목표로 합니다. 이는 장애가 있는 사용자들을 포함하여 모든 사용자에게 동등한 웹 경험을 제공하는 것을 의미합니다.

6-1. 접근성을 위한 HTML 및 CSS 사용법

시맨틱 HTML 마크업: 의미론적인 HTML 태그 사용으로 콘텐츠의 구조를 명확하게 합니다. 예를 들어, <header>, <nav>, <main>, <footer> 등의 태그를 사용하여 문서의 주요 부분을 나타냅니다.

키보드 접근성: 모든 인터랙션은 키보드만으로도 접근 가능해야 합니다. CSS를 사용하여 포커스가 있는 요소에 시각적 표시를 제공합니다.

대체 텍스트 제공: 이미지에는 alt 속성을 사용하여 대체 텍스트를 제공합니다. 이는 시각 장애가 있는 사용자들이 이미지의 내용을 이해하는 데 필요합니다.

색상 대비: 색상 대비는 WCAG 가이드라인에 따라 충분해야 합니다. 텍스트와 배경 사이에 충분한 대비를 제공하여 콘텐츠의 가독성을 높입니다.

6-2. 숨김 텍스트 `hide-txt` 클래스

컨텐츠 및 컴포넌트의 설명과 상태 정보는 hide-txt 클래스를 사용 합니다.

<!-- 검색 아이콘만 있는 버튼일 경우 : 숨김텍스트로 버튼 설명 -->
<button type="button" class="btn-search">
	<span class="hide-txt">검색</span>
	<i class="ico-search" aria-hidden="true"></i>
</button>

상태 정보를 표기할 때 가상클래스인 ::after ::before 의 content:” ” 속성은 사용하지 않습니다.

상태 정보는 aria 태그를 사용 합니다. aria 태그 사용 불가시 hide-txt 를 사용합니다.

<!-- 탭 컴포넌트 예제 -->
<div class="component-tab" role="tablist" aria-label="Sample Tabs">
  <button class="btn-tab-item" role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1" tabindex="0">Tab 1</button>
  <button class="btn-tab-item" role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2" tabindex="-1">Tab 2</button>
  <button class="btn-tab-item" role="tab" aria-selected="false" aria-controls="panel-3" id="tab-3" tabindex="-1">Tab 3</button>
  
  <div id="panel-1" role="tabpanel" aria-labelledby="tab-1" tabindex="0">
	  <p>Content for Tab 1</p>
	</div>
	<div id="panel-2" role="tabpanel" aria-labelledby="tab-2" tabindex="0" hidden>
	  <p>Content for Tab 2</p>
	</div>
	<div id="panel-3" role="tabpanel" aria-labelledby="tab-3" tabindex="0" hidden>
	  <p>Content for Tab 3</p>
	</div>
</div>

<!-- 숨김 텍스트를 사용할 경우 -->
<div class="component-tab" role="tablist" aria-label="Sample Tabs">
  <button role="tab" aria-controls="panel-1" id="tab-1" tabindex="0">
    Tab 1
    <span class="hide-txt">선택됨</span>
  </button>
  <button role="tab" aria-controls="panel-2" id="tab-2" tabindex="-1">
    Tab 2
  </button>
  <button role="tab" aria-controls="panel-3" id="tab-3" tabindex="-1">
    Tab 3
  </button>
  <!-- 코드 생략 -->
</div>

/* 탭 컴포넌트 예제 */
.component-tab {
  display: flex;
  border-bottom: 1px solid #ccc;
  padding: 0;
  margin: 0;

  .btn-tab-item {
    padding: 10px 15px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    margin-bottom: -1px;
    border-bottom: 1px solid transparent;

    &:focus {
      outline: none;
    }

    &[aria-selected="true"] {
      background-color: #fff;
      border-color: #ccc;
      border-bottom-color: #fff;
    }

    &:not([aria-selected="true"]) {
      background-color: #eee;
    }
  }
  
  [role="tabpanel"] {
	  padding: 20px;
	  border: 1px solid #ccc;
	
	  &[hidden] {
	    display: none;
	  }
	}
}

7. WAI-ARIA

7-1. No ARIA is better than Bad ARIA

나쁜 ARIA보다 ARIA가 없는 것이 낫습니다.

기능적으로, ARIA 역할, 상태, 속성은 보조 기술을 위한 CSS에 비유됩니다. 스크린 리더 사용자에게 ARIA는 그들의 비시각적 경험을 제어합니다. 잘못된 ARIA는 시각적 경험을 잘못 표현하여, 해당 비시각적 경험에 잠재적으로 파괴적인 영향을 줄 수 있습니다.

이 문서의 ARIA 사용이나 어떤 지침을 사용하기 전에, 다음 두 가지 필수 원칙을 이해하는 데 시간을 할애해 주세요.

원칙 1: 역할은 약속입니다
다음 코드:

<div role="button">주문하기</div>

는 해당 <div>의 저자가 버튼으로 기대되는 키보드 상호작용을 제공하는 자바스크립트를 통합했다는 약속입니다. HTML 입력 요소와 달리, ARIA 역할은 브라우저가 키보드 동작이나 스타일링을 제공하도록 하지 않습니다.

역할의 약속을 이행하지 않고 역할을 사용하는 것은 주문을 포기하고 쇼핑 카트를 비우는 "주문하기" 버튼을 만드는 것과 유사합니다.

이 가이드의 목표 중 하나는 각 ARIA 역할에 대한 기대되는 행동을 정의하는 것입니다.

원칙 2: ARIA는 숨기기도 하고 강화하기도 하여, 힘과 위험을 동시에 생성합니다.
사용자 인터페이스 요소의 의미와 목적에 대한 보조 기술이 필요로 하는 정보를 접근성 의미론이라고 합니다. 보조 기술의 관점에서 ARIA는 저자들에게 HTML과 SVG 요소를 보조 기술이 그렇지 않으면 신뢰할 수 있게 파악할 수 없는 중요한 접근성 의미론으로 꾸밀 수 있는 능력을 줍니다.

ARIA의 일부는 마치 망토와 같습니다; 원래의 의미론이나 내용을 가리거나 덮어씁니다.

<a role="menuitem">보조 기술 사용자는 이 요소를 메뉴의 항목으로 인식하며, 링크가 아닙니다.</a>
<a aria-label="보조 기술 사용자는 이 aria-label의 내용만 인식할 수 있으며, 링크 텍스트는 인식할 수 없습니다.">링크 텍스트</a>

반면에, ARIA의 일부 사용법은 더 많이 멜빵이나 벨트와 같습니다; 원래의 내용에 필수적인 지원을 제공하는 의미를 추가합니다.

<button aria-pressed="false">음소거</button>

이것이 ARIA의 힘입니다. 저자들이 보조 기술이 신뢰할 수 있게 해석할 수 있는 방식으로 거의 모든 사용자 인터페이스 구성 요소를 설명할 수 있게 하여, 구성 요소를 보조 기술 사용자에게 접근 가능하게 합니다.

이것이 또한 ARIA의 위험입니다. 저자들은 실수로 접근성 의미론을 덮어쓸 수 있습니다.

<table role="log">
  <!--
    보조 기술 사용자가 테이블로 인식하지 못하는 테이블입니다.
    로그 역할은 이것이 로그임을 브라우저에 알립니다, 테이블이 아닙니다.
  -->
</table>
<ul role="navigation">
  <!-- 이것은 리스트가 아닌 내비게이션 영역입니다. -->
  <li><a href="uri1">내비게이션 링크 1</a></li>
  <li><a href="uri2">내비게이션 링크 2</a></li>
  <!-- 오류! 이전 리스트 항목들이 리스트에 있지 않습니다! -->
</ul>

브라우저 및 보조 기술 지원

보조 기술 상호 운용성 테스트는 프로덕션 환경에서 이 가이드의 코드를 사용하기 전에 필수적입니다. 이 가이드의 목적은 ARIA 1.2의 적절한 사용을 ARIA 사양에 정의된 대로 설명하는 것이기 때문에, 디자인 패턴, 참조 예제, 및 샘플 코드는 의도적으로 브라우저와 보조 기술에서 ARIA 1.2에 대한 지원의 격차로 인해 발생하는 문제를 해결하기 위한 코딩 기술을 설명하고 구현하지 않습니다. 따라서 대상 청중 내에서 관련 있는 각 브라우저와 보조 기술 조합으로 구현을 철저히 테스트하는 것이 좋습니다.

마찬가지로, 이 가이드의 JavaScript와 CSS는 작성 시점의 최신 버전의 Chrome, Firefox, 및 Safari와 호환되도록 작성되었습니다.

ARIA 작업 그룹과 다른 기여자들이 오류를 간과한 경우를 제외하고, 특정 브라우저나 특정 보조 기술에서 잘 작동하지 않는 이 가이드의 예제들은 브라우저나 보조 기술의 버그를 보여줍니다. 따라서 브라우저 및 보조 기술 개발자들은 이 가이드의 코드를 사용하여 ARIA 1.2에 대한 지원의 품질을 평가하는 데 도움을 받을 수 있습니다.

모바일 및 터치 지원

현재, 이 가이드는 어떤 예제들이 모바일 브라우저나 터치 인터페이스와 호환되는지를 나타내지 않습니다. 일부 예제들은 모바일 및 터치 지원을 강화하는 특정 기능을 포함하고 있지만, 일부 ARIA 기능은 모든 모바일 브라우저에서 지원되지 않습니다. 또한, 모바일 브라우저에서 작동하는 터치 상호 작용을 제공하기 위한 표준화된 접근 방식이 아직 없습니다.

터치 및 모바일 지원에 대한 추가 지침은 가이드의 향후 릴리스에서 계획되어 있습니다.

7-2. 지원되는 상태 및 속성

📄WAI-ARIA Attributes

7-3. 역할 모델

📄WAI-ARIA Roles

💡

접근성 준수는 웹사이트가 다양한 사용자와 환경에서 원활하게 작동하도록 보장합니다. WAI-ARIA 지침과 접근성을 위한 HTML 및 CSS 사용법을 따르는 것은 법적 요구사항을 충족시키는 것뿐만 아니라, 보다 포괄적이고 포용적인 웹 경험을 제공하는 데 중요합니다.