HTML 4.x 이후의 HTML 표준의 변천사
HTML 4.01 이전에는 CSS는 HTML 안에 embedded된 형식이었다. 그렇기 때문에 여러 개의 페이지가 있으면 각각의 페이지마다 CSS를 모두 입력해주어야 했고, 반복된 CSS도 굉장히 많았다.
HTML 4.01 이후로는 외부의 스타일 시트가 도입되었다.파일 형태로 스타일 시트를 작성하고, HTML 안에 삽입하는 방식이다.
HTML에서 사용할 수 있는 새로운 태그도 도입되었다.
HTML5는 input, geolocation을 나타내는 등의 많은 양의 새로운 HTML Tags를 도입했다.(아래는 몇 개의 간단한 예시이다)
- Email: form tag 밖에서도 사용이 가능하며, email 타입에 사용되며 validation check가 되는 tag이다.
- Password: form tag의 한 종류로 비밀번호를 입력에 사용되는 tag이다. 사용자에게 입력한 내용이 직접적으로 보여지지 않고 다른 형태의 이미지가 보이게 된다.
- Audio: 웹페이지에서 오디오를 삽입할 때 사용할 수 있는 태그이다.
- Semantic: HTML에서 구조를 표현할 때 사용할 수 있는 tag이다.예를 들어
<header>, <footer>와 같은 것들이 있다. - Section: HTML 문서의 구조를 표현할 때 사용할 수 있는 tag의 한 종류이고, 웹페이지의 구역을 나타낼 때 사용된다.
MS와 IE... ;(
IE는 크롬과 비교해서 속도, 기능, 디자인 등에서 꽤 많은 차이가 난다. 하지만 가장 큰 차이점은 보안과 관련한 이슈이다.
IE는 메모리의 개체에 부적절하게 엑세스될 경우, 원격 코드 실행 취약점이 존재한다. 이 취약점으로 인해 메모리가 손상되면 해커들은 악성 코드를 실행시킬 수 있다.
IE의 취약한 보안에 대해서는 MS도 인정했다. 그러나 고치거나 패치할 수 없다는 것이 더 큰 문제이다.
그래서 MS는 Internet Explorer의 사용 중지를 권장하고, Microsoft Edge를 내놓았다.
<section>과 <div>, <header>, <footer>, <article> 엘리먼트의 차이점
<section>은 독립적인 구역을 표현할 때 사용된다.
<header>는 제목과 같은 내용을 담을 때 사용된다. 소개하거나 네비게이션의 역할에 사용되기도 하며, 로고, 검색창 등을 사용할 때도 쓰인다.
<div>는 division, 컨텐츠의 구획을 구분할 때 사용된다. 기본적으로 적합한 sematice tag가 없을 때, 사용된다.
<footer>는 보통 페이지의 맨 밑에 있는 구역에 사용되는 태그이다. copyright나 링크, 관련 문서와 같은 각 페이지의 공통된 정보들을 담는데 활용된다.
<article>은 자체적으로 구성이 되어있는 콘텐츠 덩어리를 묶을 때 사용된다. 독립적으로 존재할 수 있어야 하며 재사용될 수 있다.
블럭 레벨 엘리먼트와 인라인 엘리먼트의 차이는 무엇일까요?
블록 레벨 엘리먼트: 기본적으로 부모 엘리먼트의 가로 길이에 맞춰 최대 가로 길이를 가지며, 항상 새로운 줄을
차지한다. 그래서 하나의 블록을 형성한다.
인라인 엘리먼트: 태그 안에 있는 콘텐츠의 크기만큼의 구획을 가진다. 블록 레벨 엘리먼트가 항상 새로운 줄을 차지한다면, 인라인 엘리먼트는 그렇지 않다.
Chrome이전의 browsers
Mosaic
Mosaic는 이미지를 표시할 수 있는 최초의 그래픽 웹 브라우저이다.
1995년 마이크로소프트가 저작권을 지불하고, Mosaic의 소스 코드를 활용해 Internet Explorer를 개발했다.
모자이크 개발팀의 수장 중 마크 앤드리슨이 일리노이 대학교의 학생과 교원을 데리고 Netscape Communication Cooperation을 설립, 넷스케이프 내비게이터를 출시
스파이글래스 모자이크를 출시했으나, 추후 MS에게 인수, Internet Explorer로 이름이 변경되었다.
Netscape Navigator
Mosaic 출신의 마크 앤드리슨, 짐 클락이 만들었다.
초기에 폭발적인 인기를 얻어 약 90%의 시장 점유율을 차지했다.
1995년 MS가 IE를 개발하고 Windows와 함께 무료로 배포하면서 Netscape의 시장 점유율이 급감했다.
IE와의 경쟁이 치열해지면서 비표준 기능의 표준 등재 시도가 과도해지고, 결국 무한 경쟁으로 인해 국제표준이 힘을 잃었다.
넷스케이프 출신의 일부 개발자들이 별도로 모질라 재단을 설립, 2002년 Firefox를 출시했다.
Internet Explorer
스파이글래스의 Mosaic의 소스 코드를 활용해서 만들었다.
IE6 퇴출 운동...
- IE6는 보안에 취약했고, 최신 기술을 지원하지 않고, 웹 표준도 거의 따르지 않았다. 그래서 개발자들은 항상 이중 작업을 해야 했다.
- 출시 당시, 시장 점유율이 매우 높았기 때문에 잠잠했지만, 이후 오페라, 파이어폭스, 크롬 등, 웹 표준을 준수한 웹 브라우저들이 출시되면서 문제점이 드러나기 시작했다.
XHTML & HTML5의 등장
XHTML: Extensible Hypertext Markup Language
- XML의 응용이다.
- XHTML과 HTML은 분리된 표준이다.
- XHTML은 조금 더 엄격한 기준의 HTML이라고도 볼 수 있는데, 전통 컴퓨터를 벗어난 이동 기기에서 부정확한 HTML을 지원하는데 필요한 자원이 부족하기 때문에 엄격한 버전의 HTML의 필요성이 대두되었다.
- XHTML 1.0: HTML 4.01을 XML로 다시 규정한 것이다.
- XHTML 1.1: 모듈 기반의 XHTML이다.
- XHTML과 HTML을 적절히 합친 듯한 HTML5가 등장했다.
- XML에서 JSON으로 데이터 포멧의 주도권이 넘어가게 되었다.HTML5
- HTML 4.01, XHTML 1.0, DOM 레벨 2 HTML에 대한 차기 표준 제안이다.
- 비디오, 오디오 등의 부가기능과 최신 멀티미디어 콘텐츠를 액티브x 없이 브라우저에서 쉽게 볼 수 있게 하는 것을 목적으로 한다.IE의 작동 원리, 표준과 왜 달랐을까.
IE는 WWW의 표준 가이드에 따르지 않았다. 그래서 Netscape, Opera, 후에는 Firefox와 다르게 보여지기도 했다. 그래서 항상 이중 작업을 해야 하는 번거로움이 있었던데다 IE 6의 보안 이슈가 터지면서 문제는 절정에 이르렀다.
이렇게 안 좋은 IE가 왜 그렇게 많이 사용되었을까? 그것은 바로 Windows를 설치하면 자동으로 IE가 따라왔기 때문이다. 그래서 대부분의 사용자들은 다른 브라우저가 존재하는지조차 몰랐고 IE가 시장에서 우위를 점할 수 있었다.
브라우저의 기본 작동 원리
- 브라우저의 기본 구성 요소: 사용자 인터페이스 => 브라우저 엔진 => 렌더링 엔진 => 통신, 자바스크립트 해석기, UI 백앤드
- 렌더링 엔진 작 과정 크롬의 경우: DOM 트리 구축 위한 파 => 렌더 트리 구축 => 렌더 트리 배치 => 렌더 트리 그리기
Semantic 태그를 써야할까?
semantic 태그는 태그에 의미를 부여하는 것으로, 의미를 올바르게 부여해서 각각의 태그를 작성할 경우, 가독성에 좋다.
Semantic 태그를 사용하는 가장 주된 이유는 SEO, 검색 엔진 최적화를 위해서이다. 만약 Semantic한 문서를 잘 작성해두었다면 검색 엔진이 해당 HTML을 분석할 때 유의미할 수 있다.
하지만 의미론, 의미라는 것은 때로는 주관적이고, 모호한 것이다. 따라서 Semantic 태그를 사용하는 이유엔 모호한 부분이 존재한다.
