✍ 복습 자료
자주 틀리는 마크업
-
인라인 요소 안에 블록 요소 넣기
// h1, div 요소는 블록 요소이고, // label, span 요소는 인라인 요소입니다. <label> <h1>나쁜 예시 1</h1> </label> <span> <div>나쁜 예시 2</div> </span>인라인 요소는 항상 블록 요소 안에 들어가야 하며, 반대의 경우는 있어서는 안 된다.
-
b, i 요소 사용하기
각각 글씨를 굵게 만들 때, 글씨를 기울일 때 사용하는 요소<b>글씨를 두껍게</b> -- 대체하기 --> <strong>콘텐츠 매우 강조하기</strong> <i>글씨 기울이기</i> -- 대체하기 --> <em>콘텐츠 강조하기</em>똑같은 스타일을 부여하면서 콘텐츠에 의미를 부여하는 strong 요소와 em 요소를 사용하는 것이 좋다. 두 요소는 글씨에 효과를 줌과 동시에 각 콘텐츠를 강조하는 의미를 부여한다.
-
인라인 스타일링 사용하기
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">이렇게 인라인 스타일링으로는 사용X</h3> //CSS 파일 h2 { color : "yellow" }
크로스 브라우징(Cross Browsing)
목표는 모든 브라우저에서 동등한 수준의 정보와 기능을 제공하는 것이라고 할 수 있다.
그 이유는 브라우저마다 사용하는 렌더링 엔진이 다르기 때문에 화면을 완전히 동일하게 만드는 것은 불가능하다.
웹 접근성의 목적
어떤 상황이든, 어떤 사람이든 정보를 제공받지 못하는 경우가 없도록 하는 것
WAI-ARIA의 필요성
-
시멘틱 요소만으로 의미를 충분히 부여할 수 없는 상황에 WAI-ARIA를 사용하면 HTML 요소에 추가적인 의미를 부여하여 더 원활하게 페이지를 탐색할 수 있게 도와준다.
-
SPA처럼 AJAX를 사용하는 상황, 즉 새로고침 없이 페이지의 내용이 바뀌는 상황에서도 변경된 영역에 대한 정보를 전달해 줄 수 있어 동적인 콘텐츠에서도 웹 접근성을 향상할 수 있다.
