1. 인라인 요소 안에 블록 요소 넣기
IN-Line 요소는 콘텐츠가 차지하는 만큼의 크기를 가진 요소입니다. 대표적으로 이 있습니다.
Block 요소는 가로로 넓게 화면 영역을 차지하는 요소입니다. div가 대표적인 요소입니다.
!codepen[MODAC0/embed/PoBNEor?default-tab=html%2Cresult]
2. 글씨를 굵게 혹은 기울게 사용하기
**와 <i> 요소는 표현을 기준으로 이름이 지어진 시멘틱하지 않은 요소로 같은 사용도를 가지고 있는 시멘틱 요소 **, em을 사용하는 것이 바람직합니다.
**글씨를 두껍게** -- 대체하기 --> **콘텐츠 매우 강조하기** <i>글씨 기울이기</i> -- 대체하기 --> <em>콘텐츠 강조하기</em>
3. <hgrop> 남용하지 않기
<hgroup> 요소들은 콘텐츠의 뎁스 별로 사용하고 글자 크기만을 위한 스타일 요소로 사용하지 않습니다.
4.
연속으로 사용하지 않기
`
` 은 쭉 이어지는 텍스트 흐름에 줄 바꿈을 해주기 위해서 사용하는 요소입니다. 그런데 이러한 목적이 아니라 요소 사이에 간격을 만들기 위한 목적으로 남발해서는 안 됩니다. 요소 사이에 간격이 필요한 경우에는 아예 별도의 단락으로 구별하거나 CSS 속성을 주어 여백을 조정해주는 것이 바람직합니다.
5. 인라인 스타일링 사용하지 않기
웹 표준으로 HTML, CSS, JavaScript 등의 사용 방법을 정리하면서 각 영역이 분리되어 여러 이점을 얻을 수 있었습니다. 그런데 HTML 요소 안에 인라인으로 스타일링 속성을 설정하는 것은 기껏 분리한 영역을 다시 합치는 것과 같습니다. 웹 표준을 지키기 위해서는, HTML과 CSS 코드를 분리해서 작성해주세요.
!codepen[MODAC0/embed/XWBdVKz?default-tab=html%2Cresult]