퍼블리싱을 할 때 이런 가이드로 작업합니다!

1. 마크업 (HTML)

• HTML5를 이용한 논리적 순서로 시멘틱한 마크업을 기본으로 한다.
• ID는 큰 레이아웃(header, footer..)을 제외한 사용을 지양한다. (접근성 제외)
• Form요소(input,select,textarea)에는 title 속성을 기입한다. 규칙은 아래와 같다.

<input type="text" title="필드명 입력">
<textarea title="필드명 입력">
<select title="필드명 선택">
<!-- checkbox, radio의 경우 label을 같이 사용함으로 제외한다. -->

• 섹셔닝 관련하여 Heading level을 준수한다. [6번 목차 참고]
• 섹셔닝에 관련된 태그를 남발하지 않으며 문서(document)에 필요한 요소들로 마크업한다.
• 의미가 없는 이미지는 가급적 배경처리하되 개발에 관련하여 들어가야하는 동적인 이미들은 alt값을 넣어준다. alt값은 필수이며 의미가 없더라도 빈값의 alt 속성을 추가한다. 빈 alt값을 가지는 img에 한해 role="presentation" 속성을 추가한다.
• Heading은 순서에 맞게 논리적 순서로 작성한다. (예: h2 다음 h4가 위치할 수 없다)
• inline 태그 단독 사용을 지양한다. inline 태그 사용의 경우 감싸는 부모 태그로 block 태그를 사용한다. (아래 예시)

<p>
	<button type="button"></button>
</p>

• 간격을 나타내는 .mt, .mb, .pt, .pb 와 같은 class를 사용하지 않는다.
• 속성의 값을 쓸 때에는 "를 쓰고 '사용은 지양한다.
• ID는 웹접근성에 한해서만 사용되며 style을 위해서는 class만을 사용한다.

---

2. CSS

2.1. 초기화 (reset.css, normalizing.css)

• strong의 기본 속성을 살릴 것
• 반응형의 경우 html, body 에 min-width:280 을 넣어줄 것 (갤럭시 폴드1 접은 사이즈가 280px)

2.2. 사용

• 쉬운 유지보수와 컴포넌트 재사용성, class명을 통한 예측을 위해 CSS 방법론으로 B.E.M (block, element, modifier) 방식을 사용한다. [참고 링크]
• 벤더프리픽스 사용을 의무화한다.
• selector의 경우 ID, Tag 사용을 지양한다.

---

3. 네이밍

3.1. class

• CSS 방법론으로 B.E.M (block, element, modifier) 방식을 사용하며 이에 맞게 클래스 네이밍을 한다. [참고 링크]
• 시작을 대문자, 숫자, 특문으로 시작할 수 없다.
• 네이밍은 kebab-case 방식을 사용하여 작성한다.

3.2. id

• camelCase 방식을 사용하여 작성한다.
• UI개발 시 큰 레이아웃 또는 WAI-ARIA의 경우가 아니라면 id의 사용을 지양한다.

3.3. img

• kabab-case 방식을 사용하여 작성한다.
• Prefix 로는 해당하는 이미지가 나타내는 네이밍을 뜻한다.Image type Image prefix

  Icon	icon-
  button	btn-
  image	img-
  background	bg-
  ...

---

4. 접근성

WAI-ARIA

접근성

---

5. SEO

검색엔진최적화

---

6. HTML Outline 구조 설계 (Heading)

참고 : https://www.slideshare.net/NULINTS/2014-html5

웹이란 HTML로 이루어진 하나의 웹 문서이다.

웹 문서는 HTML 이란 마크업 언어로 작성을 하는데 책에서는 제목과 목차가 있듯 HTML 내에도 이러한 시멘틱 태그를 사용하여 의미론적인 웹 문서의 구조 설계를 진행해야 한다.

이는 웹 문서를 만드는데 있어서 웹 표준, 웹 접근성, 검색엔진최적화와 더불어 효율적인 컴포넌트화 하는데에 큰 도움이 된다.

정보 구조를 사용자에게 전달할 때에 HTML에서는 Heading이 중요하게 작용된다.

올바른 정보 구조는 사용자와 더불어 서비스를 개발하는데 있어서 통일화된 웹 서비스를 제공하기 때문이다.

❗ HTML5 에서는 섹션이 만드는 구역과 헤딩이 조합하여 아웃라인을 만들고, 이 아웃라인은 목차의 역할을 한다.

❗ 여기서 말하는 섹션은 태그가 아니다.

Heading

각 섹션의 머리말을 정의함, 섹션 요소 안의 헤딩이 여러 개인 경우 헤딩이 섹션을 만들게 된다. 관련 태그로는 h1... h6 가 있다.

Sectioning

문서의 내용을 분류하는 구역을 생성한다. 이에 header, footer는 섹셔닝 요소에 포함되지 않는다. 관련 태그로는 article, aside, nav, section 가 있다.

Sectioning Roots

• 섹셔닝 루츠는 별개의 새로운 문서로 취급하기 때문에 해당 태그의 하위에 있는 내용은 또다른 섹셔닝루츠는 아웃라인에 포함시키지 않는다.
• 하위에 있는 내용을 구조설계에 포함 시키고 싶다면 Heading tag를 넣어서 구조를 만들어 주어야 한다.
• 섹셔닝 루츠에서는 Heading tag가 없을 경우에 아웃라인은 제목이 없는 섹션으로 표기되기 때문에 Heading tag를 추가하여 구조적인 설계를 해야한다.
• 관련 태그로는 body, blockquote, details, fieldset, figure, td가 있다.

위의 이미지의 구조는 아래와 같다.

1. 섹션 (body > h1)
   1. 섹션 (nav > heading)
   2. 섹션 (section > heading)
      1. 섹션 (article > heading)
   3. 섹션 (aside > heading)

그렇다면 Heading 태그의 순서 어떻게 할 것인가?

❗HTML5에서는 새로운 섹셔닝 요소에서 h1부터 다시 카운팅을 시작해도 된다.

아웃라인을 설계를 돕는 도구 : https://gsnedders.html5.org/outliner/

---