github.com/baeharam/Must-Know-About-Frontend
baeharam/Must-Know-About-Frontend
:mortar_board: 취준생이라면 반드시 알아야 하는 프론트엔드 관련 지식들. Contribute to baeharam/Must-Know-About-Frontend development by creating an account on GitHub.
github.com
따라 타이핑하면서 공부
DOCTYPE
Document Type의 약자로, HTML이 어떤 버전으로 작성되었는지 미리 선언하여 웹 브라우저가 내용을 올바로 표시할 수 있도록 해주는 것. <!DOCTYPE>으로 선언하는데 이걸 해주지 않으면 호환 모드로 동작함. 호환 모드의 경우 각 브라우저마다 문서를 나타내는 방식이 다르기 때문에 크로스 브라우징 이슈가 훨씬 심해지게 된다.
현 시점, HTML5의 DTD로 DOCTYPE을 명시한게 <!DOCTYPE html>
표준 모드와 호환 모드
과거의 웹 페이지는 넷스케이프와 익스플로러 버전이 따로 존재했고 웹 표준이 없었다. 그러나 W3C가 웹 표준을 만들면서 브라우저가 웹 사이트를 제대로 표현할 수 없게 되자 렌더링을 할 때 표준모드와 호환모드로 렌더링을 할 수 있게 옵션을 제공함.
브라우저는 HTML 문서가 DOCTYPE을 갖고 있지 않으면 호환 모드로 렌더링을 하고, 가지고 있다면 주어진 DOCTYPE에 맞게 표준 모드로 렌더링을 한다. 호환 모드로 렌더링을 하게 되면 오래된 웹페이지들을 최신 버전의 브라우저에서도 깨지지 않게 하기 때문에 각 브라우저마다 다르게 보일 수 있다. IE의 경우 호환모드에서 박스 모델을 잘못 해석함.
결론적으로 특별한 경우가 아니면 DOCTYPE을 명시해서 브라우저가 표준 모드로 렌더링 하도록 하자.
data - 속성
DOM에 데이터를 저장할 수 있는 사용자 정의 데이터 속성으로 data- 다음 오는 값이 데이터가 된다. 이 속성은 사용하고자 하는 용도에 적합한 속성이나 요소가 없을 때 사용하며 해당 웹페ㅣ지가 독자적으로 사용하는 값이다. 즉, 웹페이지와 독립적인 소프트웨어가 이 속성을 사용해서는 안된다.
예를 들어, 음악 사이트에서 앨범 트랙의 음알을 리스트 형식으로 나타내는데 그걸 시간 순으로 정렬하기 위해서 data- 속성으로 음악 시간을 삽입한다고 하자. 아래와 같이 사용할 수 있다.
<li data-length="2m11s">빨간맛</li>그냥 사용자 변수 개념인듯.
script, script async, script defer
- <script> : HTML 파싱이 중단되고 즉시 스크립트가 로드되며 로드된 스크립트가 실행되고 파싱이 재개된다.
- <script async> : HTML 파싱과 병렬적으로 로드가 되는데, 스크립트를 실행할 때는 파싱이 중단된다. 구글 애널리틱스와 같이 다른 스크립트가 의존하지 않는 독자적인 스크립트를 로드할 때 적합
- <script defer> : HTML 파싱과 병렬적으로 로드가 되는데, 파싱이 끝나고 스크립트를 로드한다.
이미지 참고
github.com/baeharam/Must-Know-About-Frontend/raw/master/images/html/script.png
시맨틱 마크업
시맨틱이란 '의미론적인'의 뜻을 가지며 마크업이란 HTML 태그로 문서를 작성하는 것을 말한다. 따라서 시맨틱 마크업이란 의미를 잘 전달하도록 문서를 작성하는 것을 말한다.
작성 방법
- 헤더 푸터에 <header> 와 <footer>
- 메인 컨텐츠에 <main> 과 <section> 사용
- 독립적인 컨텐츠에 <article> 사용
- 제목은 <h1> 목록은 <ul> 이나 <li>
- 네비게이션은 <nav>
이런식으로 태그가 가지고 있는 의미에 맞게 사용하는 것인데, 이런 점 이외에도 CSS 스타일을 명시하는 태그를 사용하지 않는 것 또한 시맨틱 마크업의 한 종류이다. 즉, 태그가 가지는 의미 자체가 스타일이라면 이는 마크업 자체가 스타일을 갖는 것이기 때문에 시맨틱 마크업에 적합하지 않다.
예를들어, 동일한 효과를 부여하는 <strong> 과 <b> 태그가 있다면 b의 경우 bold의 약어이기 때문에 태그 자체가 스타일을 가진다는 의미에서 그친다고 할 수 있지만 strong의 경우 그 안의 내용이 다른 내용보다 더 강조되어야 한다는 의미를 가지기 때문에 시맨틱 마크업에 적합하다.
'공부' 카테고리의 다른 글
| JS (0) | 2020.11.28 |
|---|---|
| CSS (0) | 2020.11.28 |
| 프론트엔드 지식 - 프론트엔드 전반 (0) | 2020.11.27 |
| 웹팩 바벨 요약 (0) | 2020.11.25 |
| 토익 문법 정리 - 접속사 (0) | 2020.09.01 |
