반응형
1. 블록 요소안에 인라인 요소 넣기
인라인 요소 : 콘텐츠가 차지하는 만큼 영역 차지
블록 요소 : 가로로 넓게 화면 영역을 차지
인라인 요소는 항상 블록 요소 안에 들어가야한다.// h1, div 요소는 블록 요소이고,
// label, span 요소는 인라인 요소입니다.
<label> <h1>나쁜 예시 1</h1> </label>
<span> <div>나쁜 예시 2</div> </span>2. <b>, <i> 요소 보단 <strong>, <em> 요소 사용하기
웹 표준을 준수하기 위해서는 콘텐츠에 의미를 부여하는 <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 /> 의 연속 사용
요소의 간격이 필요한 경우에 <br /> 보다 <p>로 별도의 단락으로 구분하거나 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, CSS, JavaScript 등의 사용 방법을 정리하면서 각 영역이 분리되어 여러 이점을 얻을 수 있었다.
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" }
반응형
'HTML' 카테고리의 다른 글
| [DOM] Input elements should have autocomplete attributes (suggested: "new-password") (0) | 2023.08.13 |
|---|---|
| [DOM] Password field is not contained in a form (0) | 2023.08.13 |
| 웹 표준 (0) | 2023.04.26 |
| [HTML] 시맨틱 요소의 종류 (0) | 2023.02.19 |
댓글