HTML 기초 다지기
기본 문법과 속성, 태그 정리
* 본 포스팅은 이전 글에서 이어집니다.
본격적인 HTML공부도 역시 생활코딩의 강좌를 공부한 내용을 바탕으로 했다. 실습 전에 간단히 HTML의 기본 문법과 속성, 태그 등을 정리했다.
HTML 기본 문법
HTML이란?
HyperText Markup Language의 약자이다.
Hypertext라는 것은 문서와 문서가 연결되어 있다는 뜻이며, 웹의 창시자인 팀 버너스리가 만든 것이다.
링크는 html의 본질이며, html은 웹의 중심, 웹의 본질이다. 그만큼 링크가 매우 중요한 것이다.
Markup Language라는 것은 사람도 웹도 알아들을 수 있는 언어를 뜻한다.
출처 : 생활코딩, 웹에플리케이션 만들기 - HTML 기본문법Markup이라는 것을 이해하기 위해서는 Tag를 이해해야 한다. 일상 생활에서 태그는 옷에 붙어 정보를 안내하는 기능을 하는데, html에서도 정확히 같은 의미다. <strong> </strong> 이 태그, 생활코딩이 컨텐츠를 의미한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
안녕하세요. <strong>생활코딩</strong>입니다.
</body>
</html>
혹시 맥, 크롬 유저인데 위와같이 한글이 안나오고 오류가 난다면 이 링크를 참고할 것.
HTML 속성이란?
링크를 걸 때 사용하는 태그는 'a'다. a가 바로 링크를 나타내는 태그라 불린다.
<a>생활코딩</a> : 이 경우 생활코딩은 링크가 걸려있음을 나타내지만, 어디로 링크를 나타내는 지는 알 수 없다.
<a href="http://opentutorials.org/course/1">생활코딩</a> : 이 경우에 이제 생활코딩이 어디로 링크가 걸려있는지 알 수 있다.
이 때, href 는 속성을 뜻하고 http://opentutorials.org/course/1 은 속성 값을 의미한다.
출처 : 생활코딩, 웹에플리케이션 만들기 - HTML 기본문법속성과 속성을 구분해 주는 것이 공백이다. 여기서 target이 새창에서 열거나 현재 창에서 열거나를 정해주는 속성이며, 속성값에서 _blank란 새로운 창에서 링크를 연다는 뜻, _self는 현재 창에서 링크를 연다는 뜻이다.
이를 적용해보면, 생활코딩을 클릭했을 때 위와 같이(우) 새창에서 링크를 건 사이트가 나타난다.
HTML 정리
출처 : 생활코딩, 웹에플리케이션 만들기 - HTML 정리HTML을 처음 만든 사람은 팀 버너스리다. 하지만 HTML의 중요성이 매우 커지면서, 개인에 의해서만 관리되는 것은 한계에 도달했기 때문에 더욱 체계적으로 발전시키기 위한 기구가 출범했다. 그 기구가 바로 w3c 이다. HTML의 여러가지 태그 중 어떤 태그는 필요하지 않다는 이유로 퇴출되기도 하고, 어떠한 태그는 시대에 요구에 의해 새롭게 추가되기도 한다. 그러한 것들을 관장하는 곳이 바로 w3c라는 국제기구이며, 이 기구의 의장이 바로 팀버너스리다. 하지만, 이제는 개인적인 작업이 아니기 때문에 여러 주체들이 첨예하게 대립하고 웹을 각 자신들에게 유리한 형태로 발전시키기위해 끊임없이 대립하고 경쟁한다. 그러한 경쟁을하는 집단을 w3c에서는 '멤버'라 지칭하는데, 이에 구글, 삼성, 마이크로소프트, 애플 등이 있는 것이다.
출처 : 생활코딩, 웹에플리케이션 만들기 - HTML 정리이에 <!DOCTYPE html>이 의미하는 것은, 이 html의 문서가 어떤 표준 안에 의해서 작성된 것인지를 웹브라우저가 이해할 수 있도록 이 코드를 작성한 사람이 기술해놓는 것이다. 사실 이것은 html 외에 있는 태그로, 없어도 되는 내용이지만, DOCTYPE을 명확히 작성해두는 것이 상호 이해를 돕기위해서는 필요한 것이다.
출처 : 생활코딩, 웹에플리케이션 만들기 - HTML 정리이에 다양한 DOCTYPE이 존재하고, 그에 맞는 것을 작성하여 어떠한 표준 안으로 코드가 작성되었는지를 표기할 수 있다.
이런 DOCTYPE은 즉, 세월의 요구에 따라 끊임없이 변화, 개선, 발전되고 있다는 것을 의미하기도 한다.
HTML 여러 태그들을 빽빽하게 외워둘 필요는 없다. 모르는 것을 찾아가며 하나씩 익혀가고 어떤 태그만 있는지 알아가면서 필요할 때 검색하면 된다.
중요 : HTML의 본질은 '정보'라는 측면에 있다.
어떠한 정보를 사람도, 컴퓨터도 이해할 수 있게 태그라는 것을 이용해서 규정하고 정의하는 것이 HTML의 궁극적인 목표라고 볼 수 있다. 이런 HTML의 목표에 전념하기 위해, 시각적이고 디자인을 하기위해서는 CSS라는 별도의 언어를 통해 분가시키는 조치를 w3c에서 취한 것이다.
