|
HTML 은 마크업 언어라는 것. CSS는 디자인 을 적용할 수 있는 수단이라는 것. |
프로그래밍 교육에 대한 관심이 높아 지면서 HTML 단어 자체에 대한 친숙도가 요즘은 높겠지만, 정작 HTML은 프로그래밍 언어가 아니라, 파일을 열어보면 text만 잔뜩있을 뿐이다.
패턴이 있을텐데 <>요런 태그로 정리가 되어 있다.
그렇다. HTML은 긴 text를 <head></head>, <title></title>과 같은 태그들로 웹이 읽어서 표시할 수 있게끔 마크업해주는 언어일 뿐이다.
1. 태그?
<!DOCTYPE html>
<html>
<head>
<title>타이틀입니다</title>
</head>
<body>
<h1>큰 제목</h1>
<h2>작은 제목</h2>
</body>
</html>
처음 html 공부하는 학생에게 가장 기초적으로 주어지는 예시 코드다.
- 태그는 열고 닫아야한다. <head>가 있으면 </head>도 있어야 한다는 뜻이다.
- 그런데 상단의 첫번째 태그는 닫히지 않았다. 저 태그를 self-contained 태그라고 한다. 스스로 열고 닫고를 다하는 태그다. 그자체로 정보가 되는 태그라서 열고 닫아 그 사이에 또 다른 정보를 넣지 않는다.
- <head>와 </head>사이에 들어 있는 text는 브라우저에게 전달하는 정보이다. 유저들이 보는 컨텐츠 내용에 포함이 안된다는 뜻이기도 하다.
- 그럼 컨텐츠는 어디에 작성? <body></body>사이에 작성하면 된다.
2. id? class?
<html>
<body>
<div>
<header id="header1" class="default"></header>
</div>
<div>
<header id="header2" class="default"></header>
</div>
</body>
</html>
예를 들어 body 안에 두개 이상의 같은 tag가 사용되는 상황을 가정한다.(코드는 예시용으로 많은 필요한 다른 태그들은 뺐다.)
만약 js 에서 각각의 header에 다른 액션을 구현한다고 하면, 동일한 tag인 두개의 컨트롤을 구별할 수 있어야 한다.
그래서 붙여준 것이 id 다.
id는 주민번호 처럼 페이지에서 그 컨트롤을 구분할 수 있는 유일 값이 여야 한다.
class는 css 에서 작성한 디자인을 여러 컨트롤에 동일하게 적용할 수 있게 하는 tag로 하나의 class를 여러군데 지정가능하다.
3. css 파일 연결?
물론 html 파일 내부에 <style>을 적용할 수도 있지만 여러 페이지에 동일한 style을 적용하려고 할 때 동일 <style> 코드를 각 html 에 c+v 해두어야 하는 문제가 발생한다. 작성 할 때 한번만 하는거라면, 뭐 그 노동을 감수 할 수도 있겠지만.. 유지보수 측면으로 보면 inline 스타일 코드는 쓰지 않는 것이 맞다.
<head>
<link href="styles.css" rel="stylesheet">
</head>
css 파일을 작성 해, 파일 이름을 link로 html 파일의 head 부분에 추가해 주기만 하면 inline으로 일일이 작성하지 않고도 디자인을 적용할 수 있다.