Whiteship's Note

Chapter 6. Strong, EM and Other Phrase Elements

View/HTML/CSS : 2008.03.23 15:17


표현 vs 구조

왜 <b>나 <i> 대신에 <strong>이나 <em>을 사용해야 하는가?

  • 표현법을 알려주는것이 아니라 의미와 구조를 설정하기 위해서다.
  • <em>은 emphasis 강조, <strong>은 strong 강한 강조: 이 둘을 어떻게 표현하느냐는 브라우저에 달려있다. 보통은 <em>은 이탤릭체로, <strong>은 굵은 글씨로 표현한다.
  • <b>와 <i>는 표현을 어떻게 할지 나타낼 뿐이다.

링크

  • 링크를 굵은 글씨나 이탤릭체로 표현하고 싶을 때는 CSS로 다음과 같이 설정한다. 표현과 관련된 것이니까...
#sidebar a {
font-weight: bold;
}

#sidebar a {
font-style: italic;
}

굵은 이탤릭체

  • 젤 먼저 얼마나 중요한지 선택하여 <em>이나 <strong> 둘 중 하나를 선택한다.
Building sites with web standards can be <em>fun</em>!

<span> 사용하기

Building sites with web standards can be <em><span>fun</span></em>!

em span {

font-weight: bold;

}
  • 구조와 관계없는 태그를 삽입하였기 때문에, 의미 구분을 제대로 하지 못했다.

class 사용하기

Building sites with web standards can be <em class="bold">fun</em>!

em.bold {

font-weight: bold;

}
  • 이와 반대로 <string> 태그에 italic을 CSS로 설정할 수도 있다.
Building sites with web standards can be <strong class="italic">fun</strong>!

strong.italic {

font-style: italic;

}

Extra Credit

<cite>

  • "<cite>: Contains a citation or a reference to other sources."

<abbr> and <acronym>

  • <abbr>: Indicates an abbreviated form (e.g., WWW, HTTP, URI, Mass., etc.)
  • <acronym>: Indicates an acronym (e.g., WAC, radar, etc.)
  • 흠.. 두 개 차이가 뭐지..

<code>

  • XHTML 페이지에 소스코드를 적을 때 사용.

<samp>

  • 프로그램이나 스크립트의 예제 결과를 나타낼 때 사용.

<var>

  • <samp>와 비슷하게, <var>는 프로그램 파라미터나 변수를 나타낼 때 사용.

<kbd>

  • 사용자가 입력할 값을 표현할 때 사용.

'View > HTML/CSS' 카테고리의 다른 글

Chpater 13. Styling Text  (0) 2008.03.31
Chapter 10. Applying CSS  (0) 2008.03.26
Chapter 9. Minimizing Markup  (0) 2008.03.23
Chapter 8. More Lists  (0) 2008.03.23
Chapter 7. Anchors  (0) 2008.03.23
Chapter 6. Strong, EM and Other Phrase Elements  (0) 2008.03.23
Chapter 5. Forms  (0) 2008.03.23
Chapter 4. Quatations  (0) 2008.03.23
Chapter 4. Quatations  (0) 2008.03.20
Chapter 3. Tables are Evil?  (0) 2008.03.18
Chapter 2. Headings  (0) 2008.03.18
top

Write a comment.