- HTML은 HyperText Markup Language의 약자로, 웹 브라우저에 내용을 표시하기 위한 가장 기본적인 언어입니다. 이번 퀘스트를 통해 HTML에 관한 기초적인 사항들을 알아볼 예정입니다.
- HTML의 역사
- HTML 4.01, XHTML 1.0, XHTML 1.1
- XHTML 2.0과 HTML5의 대립
- HTML5와 현재
- 브라우저의 역사
- Mosaic와 Netscape
- Internet Explorer의 독점시대
- Firefox와 Chrome의 등장
- iOS Safari와 모바일 환경의 브라우저
- Edge와 Whale 등의 최근의 Chromium 계열 브라우저
- HTML 문서의 구조
<html>,<head>와<body>등의 HTML 문서의 기본 구조- 시맨틱 엘리먼트
- 블록 엘리먼트와 인라인 엘리먼트의 차이
- HTML 표준의 역사는 어떻게 될까요?
HTML 1.0(1991) -> W3C 등장(1994) -> HTML 2.0(1995) -> HTML 3.2(1997) -> HTML 4.01(1999) -> XHTML1.0(2000) -> WHATWG 등장(웹 기술 표준화 조직) -> HTML5(2007)- HTML 표준을 지키는 것은 왜 중요할까요?
정보의 접근에 있어서 표준을 알면 누구나 쉽게 접근할 수 있게 됩니다. 산업에 있어서도 규격화된 기준이 있다면 보다 원활하게 개발과 제작물을 만들어 내는 경제적인 효과도 누릴 수 있습니다.- XHTML 2.0은 왜 세상에 나오지 못하게 되었을까요?
하위 호환성에 대한 문제와, HTML5에 의해 개발이 중단되었습니다.- HTML5 표준은 어떤 과정을 통해 정해질까요?
W3C의 정기적인 컨소시엄을 통해 W3C 권고안을 발표합니다. - 브라우저의 역사는 어떻게 될까요?
- Internet Explorer가 브라우저 시장을 독점하면서 어떤 문제가 일어났고, 이 문제는 어떻게 해결되었을까요?
기술 발전이 더디게 이루어졌습니다. 5년간 두번의 서비스팩 업데이트 외에는 기능 개선이 거의 이루어지지 않았기 때문에 느리고, 웹표준을 어기며, ActiveX로 인한 호환성 하락 등의 문제가 있었습니다. 크롬, 파이어폭스 등 새로운 브라우저가 부상하면서 독점은 해결되고있습니다.- 현재 시점에 브라우저별 점유율은 어떻게 될까요? 이 브라우저별 점유율을 알아보는 것은 왜 중요할까요?
(2022년 1월 기준, Stat Counter) 크롬 54.25%, 사파리 12.9%, 삼성인터넷 12.88%, 웨일 8.34%, 엣지 7.5%, IE 1.43% 등 점유율을 확인하는 것은 개발자가 사용자 환경을 파악하고 크로스 브라우징에 대응하기 위해서 중요합니다. 항상 호환성과 폴리필에 신경써야합니다.- 브라우저 엔진(렌더링 엔진)이란 무엇일까요? 어떤 브라우저들이 어떤 엔진을 쓸까요?
렌더링 엔진(Web Browser Engine, Web Layout Engine): 웹 페이지에 대한 콘텐츠 및 데이터를 표시하기 위해 동작하는 엔진. 렌더링 역할을 하는 엔진이 브라우저마다 다르기 때문에 같은 페이지가 다르게 보이는 경우가 있습니다. Gecko: 모질라, 파이어폭스 Blink: 크롬, 오페라 Webkit: 사파리- 모바일 시대 이후, 최근에 출시된 브라우저들은 어떤 특징을 가지고 있을까요?
웹 브라우저를 보다 소형화하면서 빠른 속도와 적은 데이터 용량을 기반으로 하며 디바이스별 반응형 뷰를 제공하는 브라우저들이 대두되고 있습니다. 또한 기기 제조사들이 직접 브라우저 구현에 뛰어 들면서 사용자 편의성과 확장성을 향상시키는데 노력하고 있습니다. - HTML 문서는 어떤 구조로 이루어져 있나요?
<head>에 자주 들어가는 엘리먼트들은 어떤 것이 있고, 어떤 역할을 할까요?
<title>: 브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의합니다. 텍스트만 포함할 수 있으며 태그를 포함하더라도 무시합니다. <base>: 문서 안의 모든 상대 URL이 사용할 기준 URL을 지정합니다. 문서에는 하나의 <base>요소만 존재할 수 있습니다. <link>: 요소는 현재 문서와 외부 리소스의 관계를 명시합니다. <link>는 스타일 시트를 연결할 때 제일 많이 사용하지만, 사이트 아이콘("파비콘"과 홈 화면 아이콘) 연결 등 여러가지로 쓰일 수 있습니다. <style>: style요소는 문서나 문서 일부에 대한 스타일 정보를 포함합니다. <meta>: meta요소는 base, link, script, style, title과 같은 다른 메타 관련 요소로 나타낼 수 없는 메타데이터를 나타냅니다. <script>: 데이터와 실행 가능한 코드를 문서에 포함할 때 사용하며 보통 Javascript코드와 함께 씁니다. WebGL의 GLSL 셰이더 프로그래밍 언어, JSON등 다른 언어와도 사용할 수 있습니다. <noscript>: 페이지의 스크립트 유형을 지원하지 않거나, 브라우저가 스크립트를 비활성화한 경우 보여줄 HTML 구획을 정의합니다. ex) <noscript> <a href="http://www.mozilla.com/">External Link</a> </noscript> <p>Rocks!</p> <template>: template 요소는 페이지를 불러온 순간 즉시 그려지지는 않지만, 이후 Javascript를 사용해 인스턴스를 생성할 수 있는 HTML 코드를 담을 방법을 제공합니다. 콘텐츠 조각을 사용하기 위한 일종의 컨테이너로써, 페이지를 불러오는 동안 구문 분석기가 <template>요소의 콘텐츠를 읽기는 하지만, 이는 렌더링 목적이 아닌 유효성 검증입니다. 스크립트 활성화 상태라면 noscript내부의 내용은 보이지 않습니다. 스크립트 비활성화 상태라면 noscript내부와 스크립트가 아닌 내용들이 보입니다.- 시맨틱 태그는 무엇일까요?
예를 들어 h1은 시맨틱 요소입니다. "이 페이지에서 최상위 제목"인 텍스트를 감싸는 역할(또는 의미)를 나타냅니다. 의미가 있는 태그들이 해당됩니다. (form, table, article,,,)- 시맨틱 엘리먼트를 사용하면 어떤 점이 좋을까요?
- 검색 엔진은 의미론적인 마크업을 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주합니다. (SEO) - 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 의미론적 마크업을 푯말로 사용할 수 있습니다. - 의미없고 클래스 이름이 붙여져있거나 그렇지 않은 끊임없는 div들을 탐색하는 것보다, 의미있는 코드 블록을 찾는 것이 훨씬 쉽습니다. - 개발자에게 태그 안에 채워질 데이터 유형을 제안합니다. - 의미있는 이름짓기(Semantic naming)는 적절한 사용자 정의 요소 / 구성 요소의 이름짓기(namimg)를 반영합니다.<section>과<div>,<header>,<footer>,<article>엘리먼트의 차이점은 무엇인가요?
article은 다른 형식으로 추출해서 제공할 수 있는 콘텐츠입니다. 독자적인 페이지가 되기도 하지만, 다른 페이지에 광고로 등장할 수도 있고, 뉴스레터 기사 중 하나로 나타날 수도 있습니다. section은 이에 비해 좀 더 문서의 독립적인 구획을 나타냅니다. - 블록 레벨 엘리먼트와 인라인 엘리먼트는 어떤 차이가 있을까요?
블록 레벨 엘리먼트는 한 라인에 하나만 위치할 수 있습니다. 인라인 엘리먼트는 한 라인에 두개 이상 올 수 있습니다. 블록 레벨 엘리먼트가 한줄을 다 차지한다고 하더라도 자신을 포함한 element가 허용하는 한도내에서 차지합니다.
- 이 화면의 정보를 HTML 문서로 표현해 보세요. 다만 CSS를 전혀 사용하지 않고, 문서의 구조가 어떻게 되어 있는지를 파악하여 구현해 보세요.
- CSS Naked Day는 매년 4월 9일에 CSS 없는 웹 페이지를 공개하여 내용과 마크업에 집중한 HTML 구조의 중요성을 강조하는 행사입니다.
- 폴더에 있는
skeleton.html파일을 바탕으로 작업해 보시면 됩니다.- 화면을 구성하는 큰 요소들을 어떻게 처리하면 좋을까요?
header, footer, article, section같은 시맨틱한 요소들로 묶어서 나눠준다.- HTML 문서상에서 같은 층위에 비슷한 요소들이 반복될 때는 어떤 식으로 처리하는 것이 좋을까요?
- XML은 어떤 표준일까요? 어떤 식으로 발전해 왔을까요?
- YML, Markdown 등 다른 마크업 언어들은 어떤 특징을 가지고 있고, 어떤 용도로 쓰일까요?