- 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 표준을 지키는 것은 왜 중요할까요? 답 : 표준을 알아야 누구나 접근할 수 있게 되어 차별없는 접근이 가능. 이러한 상호 간의 호환성이 이유이다. 산업에 있어서도 규격화된 기준이 있으면 개발과 제작물을 만드는데 편함.
-
XHTML 2.0은 왜 세상에 나오지 못하게 되었을까요? 답: xml과 html 을 합성하여 확장된 태그와 엄격한 문법을 가진 xhtml이며, xml은 버전과 버전사이의 하위 호환성을 지원하지 않고 이전 태그들이 사용도 안되는 문제도 존재.
-
HTML5 표준은 어떤 과정을 통해 정해질까요? 답: w3c의 정기적인 컨소시엄을 통해 10년간 w3c 권고안을 발표한다. 이런 웹에 관하여 토론할 수 있는 열린포럼, 심포지엄을 통해 사용자의 불편을 이해하고 차기 표준안을 반영할 수 있게 지속적인 활동함.
-
-
브라우저의 역사는 어떻게 될까요? 답: 브라우저는 1990년대 초반에 시작되었고, 그 당시에는 텍스트와 이미지만을 표시가 가능했다. 1993년에 Mosaic 개발하면서 그래픽 및 멀티미디어 지원 가능해지고 사용자들이 웹 컨텐츠가 더 많아짐.
-
Internet Explorer가 브라우저 시장을 독점하면서 어떤 문제가 일어났고, 이 문제는 어떻게 해결되었을까요? 답: Internet Explorer 는 웹 표준을 준수하지 않아서 사이트를 구현시 거기에 맞춰서 해야했다. 또한 보안취약점이 많아서 사용자들이 개인 정보 유출 빈도가 많았음. Eu와 미국정부에서 인터넷 익스플로러를 제거하거나 다른 브라우저를 기본 브라우저로 지정하고, 웹 표준 준수도 개선시켜, 웹 개발자들이 웹 사이트를 구현할 때 호환성 문제를 최소화시킴.
-
현재 시점에 브라우저별 점유율은 어떻게 될까요? 이 브라우저별 점유율을 알아보는 것은 왜 중요할까요? 답: 2020년 기준 크롬이 64.1% 압도적 1위이며 뒤이어 사파리 17.7% , 파이어폭스 4.6 %로 되어있다. 점유율을 알아보는 것이 중요한 이유는 웹 개발자와 디자이너에게 중요한 정보를 제공해주며, 마케팅과 비즈니스 전략 수립에 도움이되고, 웹 표준 준수를 위한 가이드 제공, 웹 기술의 발전을 예측하는 데 도움이 되기 때문이다.
-
브라우저 엔진(렌더링 엔진)이란 무엇일까요? 어떤 브라우저들이 어떤 엔진을 쓸까요? 답: 브라우저 엔진이란 내용 정보인 HTML, XML과 서식정보인 CSS,XML 등을 읽어들여 사람이 읽을 수 있는 문서로 표시하는, 웹 브라우저의 핵심 기능을 담당하는 소프트웨어이다. 구글 크롬: Blink 엔진 모질라 파이어폭스: Gecko 엔진 애플 사파리: WebKit 엔진 마이크로소프트 엣지: Blink 엔진 또는 이전에는 Trident 엔진 인터넷 익스플로러: Trident 엔진 오페라: Blink 엔진 모질라 파이어폭스는 Quantum 엔진을 개발하여 자체 엔진을 개발하여 씀.
-
모바일 시대 이후, 최근에 출시된 브라우저들은 어떤 특징을 가지고 있을까요? 답: 1. 모바일 퍼스트 디자인: 모바일 사용량이 PC 사용을 앞서고 나서, 최근 브라우저들이 모바일 퍼스트 디자인을 채택함. 2. 브라우저 제작사들은 보안 강화를 위해 매년 보안 업데이트 출시, 그리고 브라우저에서 HTTPS 프로토콜을 사용하여 개인정보 보호 3. HTML5와 CSS3은 최신 웹 기술의 예로서, 이제 모든 브라우저에서 이러한 웹 표준을 지원 4. 인공지능 기술의 적용: 인공지능 기술을 활용한 브라우저가 등장하고 있다. 5. 다양한 기기 지원: 모바일 기기뿐만 아니라 데스크탑, 노트북, 태블릿 등 다양한 기기에서 동작하도록 최적화된 브라우저들이 출시되고 있다.
-
-
HTML 문서는 어떤 구조로 이루어져 있나요? 답: 선언: 문서가 HTML5로 작성되었음을 나타냄
-
<head>
에 자주 들어가는 엘리먼트들은 어떤 것이 있고, 어떤 역할을 할까요? 답: 엘리먼트는 HTML 문서의 메타데이터, 즉 문서의 정보를 설명하는 데이터를 포함하는 부분으로, 주로 브라우저가 이용하는 정보이기 때문에 사용자에게 직접적으로 보여지지 않는다. -
시맨틱 태그는 무엇일까요? 답: 시맨틱이라는 '의미의' 라는 뜻을 가진 형용사로서, 시맨틱 태그는 의미를 부여한 태그라는 뜻.
-
시맨틱 엘리먼트를 사용하면 어떤 점이 좋을까요? 답: HTML 문서의 가독성과 유지보수가 쉬워지기 때문, 웹 브라우저가 HTML만 보고도 상단(header), 본문(main), 하단(footer), 사이드(aside) 어느 영역인지 쉽게 알 수 있음. 검색엔진이 검색을 수행할 때 HTML내의 태그를 분석할 수 있음.
-
<section>
과<div>
,<header>
,<footer>
,<article>
엘리먼트의 차이점은 무엇인가요? 답:은 보통 컨텐츠를 그룹화하여 문서의 구조를 명확히하는 데 사용되고, 는 보통 레이아웃을 정의하거나 CSS 스타일링을 적용하기 위해 사용
-
-
블록 레벨 엘리먼트와 인라인 엘리먼트는 어떤 차이가 있을까요? 답: 블록 레벨 엘리먼트는 새로운 줄에서 시작하며, 화면의 가로 폭 전체를 차지 대표적으로
,,
,
- ,
Quest
- 이 화면의 정보를 HTML 문서로 표현해 보세요. 다만 CSS를 전혀 사용하지 않고, 문서의 구조가 어떻게 되어 있는지를 파악하여 구현해 보세요.
- CSS Naked Day는 매년 4월 9일에 CSS 없는 웹 페이지를 공개하여 내용과 마크업에 집중한 HTML 구조의 중요성을 강조하는 행사입니다.
- 폴더에 있는
skeleton.html
파일을 바탕으로 작업해 보시면 됩니다.- 화면을 구성하는 큰 요소들을 어떻게 처리하면 좋을까요?
- HTML 문서상에서 같은 층위에 비슷한 요소들이 반복될 때는 어떤 식으로 처리하는 것이 좋을까요?
Advanced
- XML은 어떤 표준일까요? 어떤 식으로 발전해 왔을까요?
- YML, Markdown 등 다른 마크업 언어들은 어떤 특징을 가지고 있고, 어떤 용도로 쓰일까요?
- 이 화면의 정보를 HTML 문서로 표현해 보세요. 다만 CSS를 전혀 사용하지 않고, 문서의 구조가 어떻게 되어 있는지를 파악하여 구현해 보세요.