보통 학원에서 교육을 받을 때, 이론보다는 실무에 중점을 두어 배우게된다.
하물며 면접 준비도 실무에 많이 쓰이는 태그와 사용법만 준비하고 갔지 딱히 이론 공부는 한 적이 없었다.
물론 내가 따로 찾아보고 공부하려고 하지도 않았었다.. 준비가 많이 미흡했다는것을 느끼는 자리였고 면접관님께서
유익한 정보를 많이 알려주셨던 자리이기도하다.
면접자리에서 받은 질문을 받고 나는 당황했었다.
1. HTML 구조에 대해 알려달라
-> 실제 답변 : 어.. DOM..구조로 이루어졌다고 알 수 있습니다
-> 정의 : DOM의 구조는 트리구조로, body가 가장 상위에 있고, 아래에 여러 구성요소가 부모-자식 관계를 가지고 있다.
2. CSS의 뜻이 뭔지 알고있느냐
-> 실제 답변 : 스타일 시트..라고 알고 있습니다.
-> 정의 : 캐스케이딩 스타일시트(Cascading Stylesheet)의 줄임말이며, 캐스케이딩(Cascading)이란 '폭포같은, 계속되는, 연속적인'이라는 의미를 가진 단어인데, 이는 곧 '위에서부터 아래로 내려가며 이어진다'는 의미이기도 하다.
3. 지금 보이는 이 화면이(포트폴리오) 어디서 구현되고 있는지 알고있느냐
-> 실제 답변 : git에서 올린거라 git에 데이터를 배포하고 서버에 저장되어 보여지는 걸로 알고있다.
-> 실제 면접관님 답변 : 브라우저에서 구현되는 것이다. [개발자도구-네트워크]를 확인해보면 내가 써놓은 구조와 파일을 전부 볼 수 있다. 이 네트워크를 통해 ~~~~~~~ 브라우저에서 눈으로 볼 수 있게되는거다 라고 말씀해주셨는데 (미리 써놓을걸 ㅠㅠ) 기억이 잘 나지않는다...
이 기본적인 지식도 모른채 면접을 보고 다녔다니.. 꽤나 본인한테 충격이였다.
따라서 HTML의 역사와 기본적인 지식을 공부하여 써내려가보려한다.
1. HTML이란?
HTML이란, Hyper Text Markup Language의 약자로 그대로 읽어보면 하이퍼 텍스트를 마크업 하는것으로 정의내릴 수 있다. 하이퍼텍스트는 웹사이트에서 링크를 클릭하여 사이트를 이동하고 마크업은 태그를 사용하여 문서에서 태그를 표시하는 것을 말한다.
ex) <p> </p> , <h1> </h1> 등
즉, HTML을 한마디로 정의내리자면 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 태그를 활용한 언어이다.
현재는 웹표준을 권고하는 W3C에서 표준을 권고하고 있다.
웹 표준을 재단으로 1994년 10월에 HTML을 개발한 팀 버너스 리를 중심으로 설립되었으며,
W3C의 설립취지는 웹의 지속적인 성장과 WWW를 발전 시키는 것으로 웹 표준을 지정하기는 하지만 강제성은 X
웹 표준 검사와 웹 접근성 검사는 https://validator.w3.org/ 에서 가능하다.
포트폴리오 URL을 넣어주면 에러 문구가 뜬다. (현재 내 포트폴리오인데 검사하지않고 만들었더니 많은 오류가 떴다...얼른 고쳐야지...)
2. HTML의 역사
HTML 1.0 (1991)
-처음 출시된 마크업 언어이며 초기에는 20개의 태그만 지원했고 단순 텍스트 언어여서 크게 인지도 있는 언어는 아니였다.
HTML 2.0 (1995.11)
-기존에 있던 1.0에서 몇 가지의 기능을 더 추가하여, 현재 우리가 알고있는 HTML의 기능이 이 때 정의되었다. 하지만
Netscape와 Internet Explorer에서 이 표준을 따르지 않아 호환성이 좋지않았다. 이를 개선하기 위해 다음 버전이 개발되었다.
HTML 3.2(1997.1)
Dave Raggett를 중심으로 만들었고, 여러 종류의 확장 수학 수식을 완전히 제외시켰다. <b>, <font>, <span> 태그도 추가가 되었는데 추가된 기능으로 인해 오류 문제가 발생했었다.
HTML 4.01(1999.12)
-완성도가 제일 높았던 HTML버전이다. 가장 안정된 표준으로 긴 시간동안 사용되었다. 이 버전에서는 CSS로 디자인 요소를 구분하게 되었고, HTML은 뼈대 즉, 전반적인 구조만을 명시하는 것을 원칙으로 하게된다.
HTML 5(2014.10)
-스마트폰의 출현과 웹의 확장으로 인해 기존의 HTML4버전에서는 한계가 이따라, 5버전이 출시되었다. 기존에는 없었던 비디오, 오디오 등의 미디어 태그가 생겨 기존에는 자바스크립트로만 해결할 수 있었던 멀티미디어의 기능들을 HTML만으로 표현할 수 있게 되었다.
현재, 전 세계 기업에서 모바일 앱, 소프트웨어 및 웹사이트에서 HTML이 사용되고있고, 그 중 91.3%가 HTML5버전이 사용되고 있다.
3. HTML5의 특징
html5가 가지고 있는 특징은 여러 개가 있다.
- 하위 호환성: HTML5는 기존의 모든 문서를 랩핑한다.
- 간단한 문법: 시멘틱 마크업을 위한 의미적 요소가 강화되었고 생산성이 향상된 코딩을 지원하며, 문서의 크기가 작아진다.
- TEXT/HTML: MIME 타입을 사용하면서 SVG, MathML을 인라인으로 활용할 수 있게되었다.
- 새로운 웹 폼 속성들을 이용하여 폼의 검증, 디자인이 간소화 되었다.
- 플러그인 없이도 비디오와 비디오를 비롯하여 멀티미디어 재생이 가능하다.
HTML5의 기본 구조 - HTML 5버전 이전에는 모든 HTML 요소와 속성들을 포함했지만, 현재는 아주 간소화되었다.
현재 HTML5버전
<!DOCTYPE html>
HTML4.01버전
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
여기서 독타입의 정의는 브라우저를 위해서가 아닌, 유효성 검증을 위해 정의된 것이다.
독타입이 선언되어있다면 표준모드로 작동하고, 독타입으로 선언하지 않는다면 비표준모드로 작동하게 된다.
HTML의 휴먼 랭귀지
-W3C 규격에 따르면 lang 속성은 요소의 콘텐츠와 텍스트를 포함하고 있는 속성에 대해 기본 언어를 지정한다. 영어로 페이지를 구성하는 것이 아니라면 정확하게 언어 코드를 지정해야한다.
<html lang="ko">
HTML 문자 인코딩
마크업 문서의 문자 인코딩을 명시할 때 사용된다.
<meta charset="UTF-8">UTF-8이란? 문자를 표현할 수 있는 유니코드이며 국제적인 코드 규약이다.
웹 페이지에서 사용되는 문자셋은 크게 EUC-KR과 UTF-8로 나눠볼 수 있다.
- EUC-KR : 2350개의 한글문자, 한국에서 통용되는 한자, 영문을 표현할 수 있다. 문서를 작성할 때 한정된 범위내의 문자만을 사용하고 한글 한 자를 2Byte로 처리합니다.
- UTF-8 : 유니코드이며, 전 세계의 모든 문자를 표현할 수 있는 인코딩이다. 한글을 접해보지 않은 전세계 외국에서도 우리가 작성한 한글을 문제 없이 표현이 가능하다. 하지만 EUC와는 다르게 한글 한 자를 3Byte로 처리하므로 문서가 다소 커질 수 있지만, 공백이나 영문은 1Byte로 처리해준다.
구조를 종합하면 아래와 같다.
<!DOYTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">>
<title>웹 페이지 제목</title>
<link rel="stylesheet" href="경로">
<script src="경로"></script>
</head>
<body>
<h1>공지사항</h1>
</body>
</html>
'HTML > html' 카테고리의 다른 글
| [HTML] HTML5에서 지원중단(사라진) 태그 요소 (2) | 2023.11.26 |
|---|