HTML기초와 공부방법
HTML은 여러 가지 태그들을 가지고 일련의 법칙으로 나열된 문서이다.
위 사진은 JSbin이라고 하는 사이트로 별도의 개발환경을 구성하지 않아도 HTML, CSS, JavaScript를 연습할 수 있는 유용한 웹사이트이다. JSbin : https://jsbin.com/vugepotote/edit?html, output (개인적으로 태그들을 확인하고 연습하기 유용하였다.)
HTML의 구조를 보면 <태그명> 내용 </태그명>으로 이루어져 있다.
최 상단 <! DOCTYPE html>이라고 선언되어있고 아래로 내용이 이어진다.
<html>이라는 태그 안에 <head>와 <body>로 나누어진다.
<head>는 언어, 타이틀 등 사용자에게 보이지 않는 메타데이터들이 작성된다.
<body>는 실제 사용자에게 보이는 내용을 담고 있다. 위 사진에 작성된 태그를 보면 태그 종류에 따라 우측에 출력되는 게 전부 다른 것을 볼 수 있다. 이러한 여러 특성을 가진 태그들을 적절히 사용하고 배치하여 하나의 웹페이지를 만드는 것이다.
그럼 수많은 태그들은 다 어디서 볼 수 있을까??라고 하면 나는 mozilla에서 만든 MDN사이트(https://developer.mozilla.org/ko/docs/Web/HTML)를 추천한다.
해당 사이트에 접속하면 여러 가지 태그들의 속성과 사용 예제, 또한 브라우저 호환성까지 확인할 수 있다.
공부를 할 때 해당 사이트에 들어가서 어떤 태그들이 있는지 읽어보기만 해 보자 다음에 태그를 작성할 때 필요한 태그를 사전처럼 찾아보기가 더욱 수월할 것이다.
모든 웹사이트를 보면 작은 네모상자로 구성되어있다. 우리가 키워야 할 능력은 웹사이트를 바라보았을 때 네모상자 단위로 구분 지을 수 있어야 한다. 아래 사진을 보자
실제와는 당연 차이가 있겠지만 웹사이트를 바라볼때 저렇게 네모들로 쪼개어서 생각하는 것이 좋다.
그럼 어떤 기준으로 짜르는가?? 라고 물어보면 나는 의미가 있는 최소한의 구성이라고 대답할 것이다.
저기 네모들이 하나의 태그들이라고 생각을 하면 된다. 태그들은 세분화될수록 좋지만 그 최소한의 태그들이 각자 가지고 있는 의미가 있어야 한다.