[Chapter 2] HTML과 CSS 작성 하는 방법

HTML 요소

HTML은 여는 태그와 닫는태그를 같이 쓰이며, 사이에는 컨텐츠가 들어간다.

<tagname>contents</tagname>

HTML Tip: HTML요소는 소문자를 사용한다.

HTML tags are not case sensitive: <P> means the same as <p>.

The HTML5 standard does not require lowercase tags, but W3C recommends lowercase in HTML4, and demands lowercase for stricter document types like XHTML.

태그 속성 순서

HTML 태그 속성들은 코드의 가독성 향상을 위해 특정 순서로 놓는 것이 좋다.

• class
• id, name
• data-*
• src, for, type, href, value
• title, alt
• aria-*, role

class는 컴포넌트의 재사용성을 높여주기 때문에 가장 먼저 오게 하는 것이 좋다. id는 좀 더 구체적이고 제한적으로 쓰이므로 두 번째로 오게 하는 것이 좋다.

예) :

<a class="link" id="page" data-modal="toggle" href="#">
샘플 링크
</a>

<input class="input_control" type="text">

<img src="http://www.naver.com" alt="태그 속성 이미지" />

불리언 태그 속성

불리언 태그 속성은 굳이 속성값을 넣을 필요가 없다.
XHTML에서는 속성값이 지정이 필요햇지만 HTML5에서는 그런 제약이 없다.

예:

<input type="text" disabled>

<input type="checkbox" value="1" checked >

<select>
    <option value="1" checked>1</option>
</select>

CSS

속성 선언 순서

1. 포지션관련
2. 박스모델
3. Typography
4. Visual

문서의 정상적인 흐름에서 엘리먼트들을 없앨 수 있고, 박스 모델 관련 스타일들을 재정의 할 수 있기 때문이다. 또한 css를 읽어오면서 먼저 위치를 잡아주고, 영역을 잡은 후 꾸며 주는 것이 좋기 때문에 이렇게 사용하는 것이 좋다.

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* 기타 */
  opacity: 1;
}

CSS속성 선언 순서 전체 보기

@import 사용 금지

<link>에 비해 @import는 상대적으로 느리고 추가 페이지 요청을 필요로 하기 때문에 결과적으로 예측 할 수 없는 문제를 일으킬 수 있다. @import의 사용을 피하는 대신 다른 방법을 사용하는게 낫다.

• 여러 개의 <link> 엘리먼트를 사용.
• SASS 또는 LESS와 같은 전처리기를 사용해서 CSS를 하나의 파일로 만든다.
• Rails, Jekyll 또는 다른 환경에서 제공하는 기능들을 활용해 CSS파일을 하나의 파일로 만든다.
  참고

미디어쿼리 위치

가급적이면 관련 규칙들이 모여 있는 곳에 미디어 쿼리들을 최대한 가까이 모아 둔다.
미디어 쿼리들을 별도의 스타일시트에 묶어 놓는다든가 문서의 맨 마지막에 놓는 것은 좋지 않다. 이럴 경우, 오히려 나중에 까먹기 딱 좋다.

.element { ... }
.element-avatar { ... }
.element-selected { ... }

@media (min-width: 480px) {
  .element { ...}
  .element-avatar { ... }
  .element-selected { ... }
}

축약형

모든 가능한 속성값들을 명시적으로 설정해야만 하는 경우에는 축약형 선언문을 사용하지 않는 것이 좋다.

• padding
• margin
• font
• background
• border
• border-radius

축약형 속성들을 남용하게 되면 불필요하게 재정의하는 경우가 많아 원하지 않는 부작용이 발생한다.
MDN 발행한 축약형 속성

클래스 작명

• 클래스 이름들은 소문자와 대시 또는 하이픈(-)을 사용한다. 밑줄(_)과 camelCase는 사용하지 않 것이 좋다. 하이픈은 관련 클라스에서 자연스로운 브레이클 제공한다. (예: .btn과 .btn-danger)
• 지나친 축약형은 사용하지 않는 것이 좋다. 예를 들어 .btn정도의 button을 위해서는 괜찮지만 .b를 쓰게 되면 아무런 의미가 없다.
• 클래스 이름은 짧고 간결할 수록 좋다.
• 의미 있는 이름을 사용.

/* 안좋은 예 */
.t { ... }
.red { ... }
.header { ... }

/* 좋은 예 */
.tweet { ... }
.important { ... }
.tweet-header { ... }

선택자

• 선택자는 가능한 짧게하고, 각각의 선택자는 최대 세 개정로만 선택할 수 있게 하는 것이 좋다.
• 필요하다면 가장 가까운 부모로부터만 속성을 물려 받을 수 있는 것이 좋다.

접두사를 이용한 CSS 클래스의 스코핑
중첩을 피하라