1. 인라인 요소 안에 블록 요소 넣기 => 블록요소안에 인라인요소가 들어가라
-HTML 요소는 표시 방법에 따라 인라인 요소, 블록 요소로 나뉜다.
-인라인요소는 콘텐츠가 차지하는 만큼만, 블록요소는 가로로 넓게 화면 영역을 차지.
-대표적인 인라인 요소로는 <span>, <a>, 블록요소로는 <div>, <h1>
-인라인 요소는 항상 블록 요소안에 들어가야 한다. 반대의경우는 절대 안돼!!!!
2. <b>, <i> 요소 사용하기 => <strong>요소와 <em>요소를 사용해라
-<b>는 글씨를 굵게 만들때, <i>는 글씨를 기울일때
-하지만 웹표준을 준수하기위해서는 이요소들을 사용하지 않는 것이 좋다. (시맨틱하지 않은 표현을 기준으로 이름이 지어진 요소이므로)
-대신 <strong>요소와 <em>요소를 사용해라(똑같은 스타일을 부여하면서 콘텐츠에 의미를 부여하므로)
글씨에 효과를 줌과 동시에 각 콘텐츠를 강조하는 의미를 부여한다.
<b>글씨를 두껍게</b> -> <strong>콘텐츠 매우 강조하기</strong>
<i>글씨 기울이기</i> -> <em>콘텐츠 강조하기</em>
3. <hgroup> 마구잡이로 사용하기
- 목차의 역할을 하면서 콘텐츠의 상하관계를 표시하기위해서 사용.
-숫자가 작을수록 글자의 크기가 크다.
-이러한 특성때문에 hgroup의 시맨틱 요소로서의 역할을 간과한채 글자에 스타일 속성을 적용하기 위한 목적으로 사용하는 경우가 종종 있다.(나같은사람........)
이럴경우 화면은 보기 좋을지 몰라도, 사용자에게 완전히 잘못된 화면 구조 정보를 전달하게 된다.
// 나쁜 예시
<h1>엄청 큰 글씨</h1>
<h3>적당히 큰 글씨</h3>
<h2>큰 글씨</h2>
<h6>엄청 작은 글씨</h6>
<h4>그냥 글씨</h4>
// 좋은 예시
<h1>제목</h1>
<h2>큰 목차</h2>
<h3>작은 목차</h3>
<h3>작은 목차</h3>
<h2>큰 목차</h2>
<h3>작은 목차</h3>
<h4>더 작은 목차</h4>
<h4>더 작은 목차</h4>
4. <br /> 연속으로 사용하기
-쭉 이어지는 텍스트 흐름에 줄 바꿈을 해주기 위해서 사용하는 요소.
요소사이에 간격을 만들기 위한 목적으로 남발해서는 안된다.
요소 사이에 간격이 필요한 경우에는 별도의 단락으로 구별하거나 CSS속성을 주어 여백을 조정해주는 것이 바람직하다.
// 나쁜 예시
요소 사이에 여백을 주고싶을 때
<br />
<br />
이렇게 하시면 안 됩니다.
// 좋은 예시 1
<p>요소 사이에 여백을 주고싶을 땐</p>
<p>아예 별도의 단락으로 구별하세요.</p>
// 좋은 예시 2
//HTML 파일
<p class="margin">요소 사이에 여백을 주고싶을 땐</p>
<p class="margin">CSS 속성으로 여백을 설정해주세요.</p>
//CSS 파일
.margin { margin: 10px }
5. 인라인 스타일링 사용하기
-html 요소안에 인라인으로 스타일링 속성을 설정하는 것은 기껏 분리한 영역을 다시 합치는 것과 같다.
웹표준을 지키기 위해서는 HTML과 CSS코드를 분리해서 작성해라!!
//HTML 파일
<head>
<style>
h1 { color : "red" }
</style>
</head>
(O) <h1>스타일링 속성은 CSS로 작성해주세요.<h1>
(O) <h2>style 요소를 사용해도, CSS 파일을 따로 작성해도 괜찮습니다.<h2>
(X) <h3 style="color: blue">이렇게 인라인 스타일링으로는 사용하지 마세요.</h3>
//CSS 파일
h2 { color : "yellow" }
