스마트 폰을 사용해 보지 않는 사람은 있어도 html을 접해보지 못한 사람은 없을 것 같습니다.
html은 프로그래밍 언어인가? 에 대한 유머 글은 웹 프로그래머라면 한번 쯤은 봤을 법한 아티클입니다.
오늘은 저한테는 너무나도 친숙하지만 공부하다보니 놓치고 있었던 부분이 많아 의외로 놀랐던 html에 글을 써보려고 합니다.
프론트엔드 엔지니어의 입장에서 꼭 알고 있어야 할 부분이 무엇인지를 위주로 다뤘습니다.
👉 DOCTYPE
우리가 사용하는 웹은 html이라는 스케치보드에서 여러 태그를 조합하여 만들어집니다.
리엑트 , 뷰라는 최신 UI 라이브러리도 예외는 없습니다. html 도화지 위에 여러 기술들을 조합하여
사용자 경험(UX)를 극대화 시키려는 노력이 많이 추가되었을 뿐 html을 도외시하지는 않죠.
DOCTYPE은 브라우저가 올바른 태그를 사용할 수 있도록 어떤 html 버전을 사용하는지 명시해주는 것입니다.
우리가 바로 이어서 알아볼 시멘틱 태그는 html5에서 등장했습니다. 이렇게 새로 추가된 태그를 사용하기 위해서는 브라우저에게 html5를 사용한다고 알려줘야 하며 이것을 DOCTYPE을 명시함으로 대신할 수 있습니다.
<!DOCTYPE html>여타 다른 태그들과 동일하게 꺽쇠로 표시되어있지만 이것은 태그가 아닙니다!
html버전에 따라 어떤 태그를 적용할 수 있는지 더 자세히 알아보시려면 여기를 참조해주세요.
DOCTYPE을 설정해주지 않는다면 어떻게 될까요?
👉 쿼크모드, 스탠다드 모드
앞서 말한 DOCTYPE을 선언해주지 않는다면 웹 페이지는 비표준 모드인 quirks mode로 동작하게 되는데요, 이렇게 표준모드 말고도 비표준 모드가 따로 존재하는 이유는 W3C 표준이 정립되기 이전에 만들어진 브라우저가 있기 때문입니다. 4 버전 부터 순차적으로 지원하기 시작한 익스플로러의 경우 오래된 버전일 경우 현대의 HTML, CSS 명세에 따라 코드를 적는다고 하더라도 재대로 동작하지 않을 확률이 있습니다.
따라서 오래된 브라우저를 모방하는 quirks mode 와
표준 모드 인 standards mode,
엄격모드인 strict mode가 있습니다.
👉 html5 와 시멘틱 태그
- 시멘틱 웹
생소한 학문 주제를 공부할 때는 그 기원과 처음 제안한 사람의 이야기를 듣는 것이 무엇보다 좋은 출발점이 된다고 생각합니다. 웹의 창시자 팀 버너스 리는 The semantic web. Scientific American Magazine 에서 다음과 같이 말합니다.The Semantic Web is not a separate Web but an extension of the current one, in which information is given well-defined meaning, better enabling computers and people to work in cooperation
시멘틱 웹은 인터넷의 발달로 수 많은 정보가 범람되는 가운데, 컴퓨터가 웹 페이지가 가지고 있는 의미를 더욱 잘 파악하기 위해 생겨난 개념입니다. 기존 웹과 완전 구별된 개념이 아니며 확장판이라고 할 수 있습니다.
<header>
<section>
<article>html5에서 부터 생겨난 시멘틱 태그는 웹에서 해당 영역이 주로 어떠한 내용을 담고 있으며 코드에서 어떤 부분이 제목이고 어떤 부분이 메인 내용인지를 더 잘 파악할 수 있게 해줍니다.
이렇게 하면 컴퓨터는 웹 페이지의 의미를 좀 더 잘 분석할 수 있게 되며 프로그래머가 읽는 코드의 가독성도 향상되게 됩니다.
👉 meta tag
사용자 디스플레이에는 노출이 되지 않지만 기계가 파싱할 수 있게 도와주는 태그입니다.
페이지 요약정보, 키워드 , 저자에 대해 알려줄 수 있으며 <head> 태그 안에 넣어주어야 합니다.
덧붙여서, name="viewport" 속성을 포함하고 있는 meta tag는 viewport를 지정해줍니다. 지정되어있지 않다면 default로 980px 뷰포트가 설정됩니다.
메타태그에 대한 더 자세한 내용과 예제들은 여기서 확인하실 수 있습니다.
