스마트 폰을 사용해 보지 않는 사람은 있어도 html을 접해보지 못한 사람은 없을 것 같습니다.
html은 프로그래밍 언어인가? 에 대한 유머 글은 웹 프로그래머라면 한번 쯤은 봤을 법한 아티클입니다.
오늘은 저한테는 너무나도 친숙하지만 공부하다보니 놓치고 있었던 부분이 많아 의외로 놀랐던 html에 글을 써보려고 합니다.
우리가 사용하는 웹은 html이라는 스케치보드에서 여러 태그를 조합하여 만들어집니다.
리엑트 , 뷰라는 최신 UI 라이브러리도 예외는 없습니다. html 도화지 위에 여러 기술들을 조합하여
사용자 경험(UX)를 극대화 시키려는 노력이 많이 추가되었을 뿐 html을 도외시하지는 않죠.
DOCTYPE은 브라우저가 올바른 태그를 사용할 수 있도록 어떤 html 버전을 사용하는지 명시해주는 것입니다.
우리가 바로 이어서 알아볼 시멘틱 태그는 html5에서 등장했습니다. 이렇게 새로 추가된 태그를 사용하기 위해서는 브라우저에게 html5를 사용한다고 알려줘야 하며 이것을 DOCTYPE을 명시함으로 대신할 수 있습니다.
<!DOCTYPE html>
여타 다른 태그들과 동일하게 꺽쇠로 표시되어있지만 이것은 태그가 아닙니다!
html버전에 따라 어떤 태그를 적용할 수 있는지 더 자세히 알아보시려면 여기를 참조해주세요.
앞서 말한 DOCTYPE을 선언해주지 않는다면 웹 페이지는 비표준 모드인 quirks mode로 동작하게 되는데요, 이렇게 표준모드 말고도 비표준 모드가 따로 존재하는 이유는 W3C 표준이 정립되기 이전에 만들어진 브라우저가 있기 때문입니다. 4 버전 부터 순차적으로 지원하기 시작한 익스플로러의 경우 오래된 버전일 경우 현대의 HTML, CSS 명세에 따라 코드를 적는다고 하더라도 재대로 동작하지 않을 확률이 있습니다.
따라서 오래된 브라우저를 모방하는 quirks mode 와
표준 모드 인 standards mode,
엄격모드인 strict mode가 있습니다.
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에서 부터 생겨난 시멘틱 태그는 웹에서 해당 영역이 주로 어떠한 내용을 담고 있으며 코드에서 어떤 부분이 제목이고 어떤 부분이 메인 내용인지를 더 잘 파악할 수 있게 해줍니다.
이렇게 하면 컴퓨터는 웹 페이지의 의미를 좀 더 잘 분석할 수 있게 되며 프로그래머가 읽는 코드의 가독성도 향상되게 됩니다.
사용자 디스플레이에는 노출이 되지 않지만 기계가 파싱할 수 있게 도와주는 태그입니다.
페이지 요약정보, 키워드 , 저자에 대해 알려줄 수 있으며 <head>
태그 안에 넣어주어야 합니다.
덧붙여서, name="viewport" 속성을 포함하고 있는 meta tag는 viewport를 지정해줍니다. 지정되어있지 않다면 default로 980px 뷰포트가 설정됩니다.
메타태그에 대한 더 자세한 내용과 예제들은 여기서 확인하실 수 있습니다.