드림코딩 by 엘리_프론트엔드 개발자 되기 입문편_HTML
프론트엔드 개발자 되기 입문편_HTML
HTML(Hypertext Markup Language)
HTML은 웹을 이루는 가장 기본적인 빌딩 블럭이다. 이 언어는 web content의 의미와 구조를 정의한다.
예를 들어 레고로 치면 가장 밑바닥에 있는 블럭이다.
HTML은 웹컨텐츠의 구조와 의미를 결정한다.
Hypertext란? web page들의 연결을 의미한다.
Links는 web의 기본적인 면이다.
HTML 과 같이 쓰이는 CSS와 JS는 부가적인 언어일 뿐 HTML 없이는 웹사이트를 만들 수 없는 것이다.
웹 브라우저에 보여지도록 디자인된 문서를 의미한다.
이 언어는 표준화된 Markup 언어를 사용하고 있다.
Markup language 언어란 ?
일반적인 텍스트와 문법적으로 구분하기 위해서 문서에 annotating 되어 있는것을 의미한다.
(annotating 의 의미는 특별한 의미를 부여하거나 기능을 주입)
우리가 일반적으로 작성하는 프리스타일의 문서와는 다르게 구조적으로 작성되어 있는것이 확인된다.
즉 Markup language는 마구잡이로 작성된 text가 아니라 어느정도 태그들을 이용해서 구조적으로 작성된것을 의미한다.
<> 로 시작해서 </> 로 끝나는것을 tag라고 부른다.
HTML elements 는 tag로 다른 text와 구분하는데 tag는 elements를 <>로 둘러싸야 있다.
태그가 시작되고 /를 통해서 끝나는것을 확인 할 수 있다.
태그안에는 content가 존재한다.
content를 태그를 통해서 annotating 해주는 것이다.
HTML의 구조
HTML 파일안에 들어가야 되는 가장 기본적인 tag들이다.
<!DOCTYPE> : 'Document type's HTML 이다.' 라는 정의이다.
<html> </html> : html tag는 html 파일에 제일 상위 tag이고, <head>와 <body> tag로 나뉘어있다.
<head> </head> :
- head tag에는 사용자에게 보여지는 UI 적인 요소가 전혀없고, 구글에서 검색해서 나오는 title 이나 부가설명, 북마크 추가할 때 나오는 제목이나 아이콘들 이런것들이 정의되어 있다.
- CSS 파일이 있다면 CSS를 연결하는 것도 head part 에서 진행된다.
- 사용자에게 보여지는 정보가 없고 meta date만 있다고 생각하면 된다.
- 웹 페이지에 표시되는 meta 정보가 들어간다.
- The <head> HTML element contains machine-readable information
(metadata) about the document, like its title, scripts, and style sheets.
<meta charset="UTF-8">
- charset(character set)
- UTF(Unicode Transformation Format)
- 이 페이지에서 쓰여지는 글자의 포멧은 UTF-8을 사용한다는 의미
- UTF-8은 현존하는 모든 사용하는 언어를 지원하기 때문에 기본으로 사용한다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- viewport에 관해 정의
- content는 device's screen width 를 다 사용한다고 정의한것
<title> </title> : 브라우저 검색시 또는 북마크 추가할때 보여지는 title이다.
<body> </body> : 사용자에게 보여지는 가장 중요한 최상위의 container 이다. 이 안에 작성한 것들이 user한테 보여진다.
HTML에서 정의된 tag들을 이용하면 브라우저 상에서 자동으로 디자인 되어 있는데 이는 tag에 annotating 되어 있기 때문이다. 즉 body 안에 text로 적었을 뿐인데 브라우저상 에서는 기본적으로 이쁘게 꾸며져서 user에게 보여지게 된다.
HTML은 브라우저에서 실행 가능한 가장 기본적인 파일이며, Markup language로 구조적으로 tag들을 이용해서 보여지며
<html> tag 안에는 <head>, <body> tag가 있는데
<head> 는 상세설명이 들어가고, <body> 는 user에게 보여지는 tag들로 이루어져 있다.
그렇다면 어떻게 user한테는 디자인이 되어서 보여질까?
HTML을 이야기할때 빼놓을 수 없는게 W3C(World Wide Web Consortium)이다.
W3C는 웹의 표준화를 추진하는 곳이다.
이 곳에서 HTML5를 정의하는 게 있다면 모든 브라우저들이 표준에 맞게 브라우저를 구현해야 한다.
그래서 우리가 HTML에 정의된 tag를 사용해서 웹페이지를 만들면 이 모든 브라우저 상에서 잘 표현될꺼 라는것을 믿고 사용하는 것이다.
간혹 특정 브라우저에서 지원되지 않는 tag들이 있다.
HTML 표준화로 지정된 tag들을 사용하면 브라우저들이 알아서 보여진다는 것을 알겠는데
그렇다면 지원 가능한 정의된 tag들은 어디서 확인 가능할까?
→ mdn.html 에서 HTML elements reference 를 검색해서 확인한다.
각 elements tag들의 호환가능성을 확인한다.
즉 모든 브라우저에 다 지원되는지 확인하고 사용한다.
if mdn에 없는 의미없는 tag를 사용하게 된다면 어떻게 될까?
브라우저가 정상적으로 content를 보여준다.
이것은 바로 브라우저는 어느정도의 error가 발생하면 그 error를 대충 짐작하고 회복해서 user가 HTML file을 보는데 문제가 없도록 도와준다.
if 내가 유효한 tag 사용여부를 알고 싶다면 https://validator.w3.org/ 에서 확인가능 하다.
document and website structure
해당 이미지에는 header, sidebar, main content, footer 로 나눠져 있는것이 확인가능하다.
이렇게 웹사이트를 만들때,
어느정도 구조를 생각해서 body안에 모든 내용을 넣는것이 아니라 header는 header데로, footer는 footer데로, main part는 main데로 이렇게 어떻게 구역을 나눌 수 있을지에 대해 생각해본다.
HTML은 다수의 block level elements 가 website의 areas를 정의한다.
웹 사이트는 작은 박스박스들로 구성되어 있다.
웹 사이트를 바라볼때 작은 단위로 나눌 수 있어야 나중에 CSS로 꾸밀때 조금더 구조적이게 스타일링이 가능하다.
물건을 하나하나 박스에 넣으면 박스가 낭비되듯이 하나하나 tag들을 박스에 넣으면 브라우저 성능이 나빠진다.
따라서 너무 세세하게 박스를 나눌 필요는 없다.