막막한 공부의 첫 시작이다.
HTML이 뭐임?! 이라고 질문을 받았을때 아무 대답을 하지 못했던 상태보다는 나아지길 바래보면서 내 입맛대로 적어볼거다.
HTML(HyperText Markup Language)의 공식 개념은 '웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용함'.이라고 한다
(여기서 hypertext는 뭐냐. 웹 페이지를 다른 페이지로 연결하는 링크를 말한다. 링크는 웹의 근본적인 속성이다.)
HTML은 웹 브라우저에 표시되는 글과 이미지 등의 다양한 콘텐츠를 표시하기 위해서 "MAKR UP(어떠한 표시)"이라는 것을 사용한다.
*mark up language는 태그를 이용하여 문서나 데이터의 구조를 명시하는 언어를 지칭함.
MARK UP은 다양한 요소를 사용하는데 그 요소에는
<title>, <section>,<p>, <head>, <body>, <header>,
<main>, <footer>, <embed>, <nav>, <article>, <aside>등이 있다.
위에 말한 것과 같이 HTML은 요소로 구성되어있다.
그 요소들을 분석해보면
이런식이다.
HTML은 기본적으로 뭔가를 감싸고 있는 구조로 이루어져 있기 때문에 시작태그(여는 태그)와 종료태그(닫는 태그)로 로 구성된다.
ex)
<p>My cat is very grumpy</p>한 줄이 독립적인 구문이 되기를 원한다면,paragraph 태그인 p태그로 둘러싸서 그것이 하나의 문단임을 명시해준다.
요소를 구성하고 있는 태그는 그들의 속성(Attribute)을 가질 수 있는데 다음과 같이 사용한다.
ex)
<p class="value">cat is very grumpy</p>위의 ex) 두개를 비교해보자.
일반적인 p태그는 단순히 구문을 나타내주는 태그이다.
그치만 p 태그 내부의 속성이 추가된다면, 그는 실제 겉으로 표시가 되지는 않지만 추가적인 정보를 담을 수 있는 것이다.
위 예시를 계속 이용하자면 p태그의 attribute인 class는 class attribute를 이용해 요소를 특정하고, 다른 정보를 설정할 때 구분지어줄 수 있는 식별자를 지정할 수 있는 것이다.
또 요소는 하나만 들어갈 수 있지 않고 중첩(nesting)이 가능하다. cat is very grumpy 라고 표시되길 원한다면
<p>cai is <strong>very</strong> grumpy</P>이런식으로도 작성이 된다.
닫는 태그가 없는 요소들도 존재한다.
ex)
<br/>,<img>,<meta>,<link>,<hr>등이 있다. 이를 self-closing이라고도 한다.
자 여기까지 봤으면 이제 HTML 문서를 해부해보자.
<!DOCTYPE html>
<html lang="ko-kr">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
</head>
<body>
<header>
<p><strong></strong></p>
</header>
<main>
<div>
<p></p>
</div>
<form>
<div>
<label></label>
<input
id=
type=
accep=
placeholder=
maxlength=
minlength=
required
name=
autocomplete=
autofocus
/>
</div>
<div>
<label></label>
<input/>
<div>
<button></button>
<button></button>
<button></button>
</div>
</form>
</main>
<footer>
<div>
<p></p>
<a></a>
</div>
<p>
<b><br /></b>
</p>
</footer>
</body>
</html><doctype html> : 없어서는 안되는 필수 서문이다. 이 파일은 HTML 이라는 것을 설명해준다. 직관적이다.
<html> : HTML이라는 태그. 무언가를 감싸고 있는 형태이다. lang attribute는 언어라는 것을 의미.
<head> : 우리가 볼 수 있는 화면, 시각적인 것에 해당하지 않는 것이 head에 담김. 페이지 설명, 콘텐츠를 꾸미기 위한 CSS, 문자 집합 선언 등이 포함됨.
<meta charset="utf-8"> : 사용 할 수 있는 문자 집합의 설정. 어떠한 문자 컨텐츠도 다룰 수 있음. 이 문자 설정을 하지 않을 이유가 없음.
<meta name="viewport" content="width=device-width"> : 뷰포트 요소 설정. 뷰포트의 너비에서 페이지가 렌더링 하도록 하며, 모바일 브라우저가 뷰포트보다 넓은 페이지를 렌더링 한 후 축소하는 것을 방지함.
<title></title> : 페이지의 제목을 설정함. 브라우저의 탭에 나타나는 제목을 설정해 줄 수 있다. 북마크나 즐겨찾기에서 페이지를 설정할 때 사용될 수 있다.
<body> : 보여지는 화면에 해당되는 것들을 표시한다. 텍스트. 이미지, 게임, 등 무엇이든 될 수 있다.
구성은 이걸 참고하면 편하다.
뭔가 많아 보이지만 기본 구성 태그와 시멘틱 태그를 알고가면 훨씬 편하다.
왜 시멘틱 태그가 필요하냐고? 우리는 정확한 요소를 사용하고 있는지, 컨텐츠의 의미를 파악할 수 있는지 확실히 하고 이해해야 한다. 이 맥락에서 기능과 메뉴들을 구분하기 위해 사용한다는 것이다.
sementic tag
<nav>, <section>, <article>, <aside>, <header>, <main>, <footer>
정도가 있다.
다양한 태그를 더 알고싶으면 공식문서인 MDN을 참고하도록 하자.
https://developer.mozilla.org/ko/docs/Web/HTML/Attributes
HTML은 오류를 보여주지 않고 웹브라우저가 임의로 결과를 보여준다.
'웬만한 오류는 알아서 처리해준다.' 라는게 좋을 때도 있지만 예상치 못한, 의도하지 않는 화면이 될 수도 있기 때문에 마크업을 방지하는 검사를 진행하기도 한다.
