🚫 저는 구글링을 통해 공부를 하며 여기저기서 정리한 지식을 바탕으로 블로그에 정리를 합니다. 출처에 대한 링크는 최대한 달려고 노력하지만 간혹 빠진부분이 있다면 양해 부탁 드립니다!
1. HTML 역사
2. HTML의 구조
3. 태그의 확장
✅ 1. HTML의 역사
HTML에 대해서 공부하려고 여기 저기 둘러봤더니 HTML의 역사부터 적어놓은 곳이 대부분이었다. 왜 HTML의 역사를 알아야 할까? 역사를 알면 HTML의 과거, 탄생의 배경을 알 수 있기 때문이다. 왜 HTML이 필요했고 어떤 과정을 거쳐 지금의 HTML이 탄생했는지 달달 외우진 못하더라도 아는것과 모르는 것은 큰 차이가 있다고 생각한다.
여러 변화를 거쳐 현재의 모습이 된 이유를 알면 왜 코드가 그렇게 짜여졌고 어떻게 작성해야 하는지를 알 수 있기 때문이다.
클릭 한번이면 역사에 대해 쫙 나오기 때문에 구체적인 히스토리를 제외한 중요하다고 생각하는 부분만 작성하기로 했다.
-
1960년도 인터넷이 처음 세상에 나왔고 사용 용도는 군용 네트워크였다.
-
그 뒤로 수년간 인터넷은 일부 연구소와 군용으로 사용되었고 일반인과는 거리가 먼 기술이었다.
-
1990년도(1989년~이라 1990년도라도 표기)스위스 입자 물리연구소에서 연구원들이 문서를 이용하고 공유하기 위한 체계를 제작
-
이 연구소팀은 1990년 말 이 체계를 HTML이라 명시하고 브라우저와 서버 소프트웨어를 제작
-
이 팀이 제작한 표준은 주목을 받게 되었고 대중(투자자들과 소프트웨어 개발사들)에게 알려지게 되었다.
-
후에 W3C(월드 와이드 웹 컨소시엄)에서 정한 표준이 발전하여 오늘날 HTML5가 탄생한다.
이정도로 정리할 수 있을것 같다.
여기서 주목해야 할 점은 왜 이 팀의 기술이 세계적으로 주목을 받았냐는 것이다. 지금도 그렇지만 초기HTML은 20개의 태그로 이루어진 아주 단순한 디자인으로 웹 브라우저에 원하는 내용을 표기하기에 아주 손쉽게 제작되었고 태그라는 방법을 통해 이루어진 HTML은 아주 단순하고 짧은 요소들만으로 웹 페이지를 표현하기에 최적화된 방법이었다.
즉, 태그라는 방법은 코드를 웹페이지로 나타내는데 최적화된(적어도 아직까지는) 방법이고 이 방법을 기반으로 보완을 거쳐온 언어가(규약이) 현재의 HTML5이다.
🖐 이미 알겠지만 HTML은 Hyper Text Markup Language의 약자로 웹페이지를 위한 마크업 언어이다.
✅ 2. HTML의 구조
HTML은 매우 쉽다. 문법을 모두 보는데 10분도 걸리지 않는다. 또한 마크다운과도 매우 유사하기 때문에 HTML을 몰라도 github에서 마크다운을 작성해본 사람이라면 금방 익힐 수 있을 것이라 생각한다.(물론 기본적인 응용정도)
HTML이 중요한 또다른 이유는 PUBLIC DOMAIN이기 때문이다. 저작권이 존재하지 않기 때문에 이렇게 발전해올 수 있었다.
HTML tag
tag는 이름을 <>로 감싸서 표현한다. 보통 start tag와 end tag가 쌍으로 존재하며 end tag는 이름앞에 /를 덫붙여 구분한다.
<img> <br> <hr> 등과 같이 종료 태그 없이 시작 태그만을 가지는 태그를
빈 태그(empty tag)라고 합니다.종류
100개가 넘는 모든 태그를 정리할 수가 없기도 하며 검색만 하면 바로 나오기 때문에 모두 머리속에 넣고 있을 필요는 없다. 기본적인 몇가지만 정리해보자.
- 진하게 표시하는법
<strong> </strong>
- 밑줄
<u></u>
- 제목
<h1></h1> <h2></h2>...
- 줄바꿈
<br> : 단순 줄바꿈 <p></p> : 문단 구분
- 이미지
<img src="파일경로">
- 목차(list)
<li></li>- list의 경우 list끼리의 구분을 위해서 ui tag를 부모 태그로 가지며, 이때 ui와 oi태그 모두 부모 태그로 사용 가능한데 차이는 oi : ordered list / ui : unordered list의 약자이다. (앞에 넘버가 붙고 안붙고의 차이)
이외에도 다양한 태그가 존재하며 태그를 외우는것이 부담스럽다면 list처럼 태그가 무엇의 약자인지를 찾아보면 굉장히 머리속에 잘 들어온다.
HTML 요소 구조(element)
HTML의 요소(element)는 여러 속성(attribute)을 가지며 이는 해당 요소에 추가적인 정보를 제공한다. 이러한 element역시 시작 태그로 시작해서 종료 태그로 끝나게 된다.
주의할 점은 다음과 같다.
-
속성은 HTML 요소 중에서도 언제나 시작 태그 내에서만 정의되며 속성 이름과 속성value로 표현된다.
-
속성은 언제나 소문자로 작성한다.(HTML5표준에서 속성이름에 대소문자는 구분되지 않는다.)
-
속성값은 항상 따옴표를 사용해주자.(따옴표 사용을 강제하지는 않지만 이는 오류를 발생시킬 수 있다.) (큰따옴표, 작은따옴표상관없지만 보통 큰 따옴표가 사용된다.)
<img>태그의 alt 속성은 이미지를 불러올 수 없는 상황에서 이미지 대신 보이는 문자열을 설정할 수 있다.
여기까지 왔으면 html의 속성, 부모 태그에 대한 개념이 머리속에 간단하게 정리가 되었다. 조금만 더 개념을 확장시켜보자. 이제 웹 페이지의 부분부분 요소를 태그를 통해 만들 수 있게 되었으니 큰 틀에 대해서 알아야 한다.
✅ 3. 태그의 확장
지금까지 배운 내용만을 활용해도 간단한 웹사이트를 제작하는데는 무리가 없다. 하지만 검색엔진에 노출되기 위해서는 title을 정의해서 웹사이트의 제목을 만들고 텍스트가 깨지지 않기위해 utf-8 형식으로 설정하기,
<head>
</head>
<body>
</body>도 나누어 주어야 한다.
여기부터는 글로 정리하기보다는 예시를 보며 분석해보는게 도움이 되기 때문에 다음 글에서 태그 분석하기로 기초편의 내용을 다뤄보려고 한다.
