📝강의를 시청하면서 궁금한 점이 있거나, 질문 또는 의견을 남기고 싶다면? 페이지 하단(↓) "토론" 섹션에 남겨주세요.
제목과 단락
제목(Headings), 단락(Paragraph) 도출하는 과정을 공부해봅니다.
툴 테크닉
Emmet 도구 사용법 또는 Sublime Text 툴 테크닉은 Youtube 영상 강의를 시청해서 익혀두세요. 영상 강의의 런타임을 최대한 줄이기 위해 툴 테크닉은 영상에서 설명하지 않습니다.
단락
사용자가 가장 많이 읽는 콘텐츠는 단락(Paragraph)입니다. 단락은 p 요소로 구성됩니다.
<p>사용자가 가장 많이 읽는 콘텐츠는 단락(Paragraph)입니다.</p>
제목의 단계
사용자가 가장 먼저 읽는 콘텐츠는 제목(Headings Level 1-6)입니다. 제목은 h 요소로 구성됩니다.
<h1>제목 1</h1> <!-- 문서에서 단 1회만 사용 (HTML5 표준 부터는 섹션 콘텐츠 마다 사용 가능) -->
<h1>제목 2</h1>
<h1>제목 3</h1>
<h1>제목 4</h1>
<h1>제목 5</h1>
<h1>제목 6</h1>
주석
HTML 주석은 브라우저에서 해석되지 않습니다.
<!-- HTML 주석 코드는 브라우저에서 해석되지 않습니다. -->
영상 강의
PLAY 버튼을 눌러 영상 강의를 시청합니다.
실습 자료
링크 텍스트를 클릭하면 실습 자료를 다운로드 받을 수 있습니다.
참고
- HTML 제목(Headings) → MDN
- HTML 단락(Paragraph) → MDN
- HTML 주석(Comments) → MDN
Q & A
수강생과 주고 받은 질문/답변 입니다. 참고하세요.
Q1
영상 중 meta http-equiv="X-UA-Compatible" contents="IE=Edge"는 무엇인가요? meta 태그 부분은 Charset 밖에 보지 못한거 같은데.. 제가 놓친 걸까요 ㅠㅠ?
A1
해당 코드는 영상 강의에서 설명하지 않았나 보네요. 죄송합니다. ^^; 간략하게 코드에 대해 설명을 남겨봅니다. 저 코드는 비 표준 코드로 오직 MS IE 만을 위한 코드입니다. 다른 웹 브라우저는 비 표준 코드라 무시합니다.
MS 인터넷 익스플로러는 한 때 시장을 지배했지만, 현재는 시대에 뒤떨어진 브라우저로 상당 부분 최신 브라우저에 비해 부족합니다. 과거 IE 8 버전 때부터 하위 브라우저 호환을 목적으로 "호환성 보기"라는 기능이 들어왔는데 그 때 생긴 코드입니다. 예를 들어 사용자가 IE 10을 사용하고 있는데 저 코드가 없으면 기본 값이 7이라서 10 버전을 쓰고 있지만, 7로 동작하게 됩니다.
그래서 제작자는 Edge 라는 키워드를 통해 사용자의 최신 브라우저로 동작하게 만들어야 했습니다. "IE 9 사용자는 9을, IE 10 사용자는 10"을 이렇게 말이죠. Edge 는 "모서리의 가장 끝" 즉, 최신 버전을 의미하는 변수입니다.
그런데 IE 11 부터는 HTML5 문서 사용 시, 기본 값이 Edge로 변경되었습니다. 그러므로 IE 11 이상 고려하는 프로젝트라면 저 코드가 더 이상 필요하지 않습니다. 하지만 IE 10 이하 브라우저를 고려해야 할 경우 필요합니다. 관련 정보는 document mode change 글을 참고하세요. ^^
Q2
blockquote 요소는 실전에서 자주 안쓰이나요?
A2
잘 사용한다 안한다의 기준이 무엇인지에 따라 다를 것 같습니다. 중요한 점은 문서 구조의 의미가 "인용"이라면 blockquote 요소를 사용하는 것이 올바릅니다. 그것이 blockquote 요소가 존재하는 이유죠. 해외에서는 실무에서 이를 잘 지켜 구조화합니다.
반면 국내는 인용을 의미하는 문장일지라도 올바른 구조화를 잘 모르거나, 알아도 지키는 것을 귀찮아 하는 등 사용하지 않을 수도 있습니다. 인용 문장 임에도 단락으로 구조화 했다고 해서 문법 오류는 아니기에 다음과 같이 말할 수 있습니다.
"그래서? 문법 오류 아니잖아?"
제작자의 해석에 따라 사용 되는 요소는 달라질 수 있으므로 강력하게 인용 요소를 사용해야 한다고 강제화 할 수도 없습니다. 즉, 결론은 제작자의 성향에 따라 달라질 수 있고, 실무 범위에 따라 사용 빈도가 높을 수도, 그렇지 않을 수도 있습니다.