HTML은 웹페이지의 구조를 다루는 문법이다. 그리고 CSS는 HTML의 각 요소에 스타일 속성을 지정한다. 예를 들어, 문장을 쓰고 그 문장의 글씨 크기를 15px로 맞추고 싶다면 전자는 HTML, 후자는 CSS가 담당하게 된다. SASS는 작업시 효율적으로 CSS를 작성하기 위해 고안된 문법이라 할 수 있다.


1. HTML (HyperText Markup Language)

: 마크업을 이용해 월드와이드웹(www)의 페이지를 서로 오갈 수 있는 웹문서를 만드는 언어.

  • 마크업 언어 : 태그 등을 이용하여 문서나 데이터 구조를 명기하는 언어
  • 하이퍼텍스트 : 링크를 이용해 웹페이지를 서로 연결하는 것.


2. 웹 표준(W3C, World Wide Web Consortium) Standards

: 월드와이드웹 컨소시엄의 약자. 웹표준과 가이드라인 개발을 목적으로 설립하였다. 즉, World Wide Web을 서술하고 정의하는 공식 표준 및 규격이라고 이해하면 된다.

서로 다른 브라우저 및 환경에서도 같은 결과를 보여줄 수 있도록 웹사이트를 만들 때 지켜야 하는 규격을 정해놓은 것이 바로 웹 표준이다. 웹표준이 등장하기 전까지는 브라우저별로 웹페이지를 제작해야만 했었다. 이러한 웹표준에 맞는 HTML과 CSS를 지켜주어야 어떠한 브라우저에서도 동일한 화면이 출력된다.

만약 본인의 웹서비스가 웹표준을 얼마나 지키고 있는지 알고싶다면 아래 웹표준 지원에 대한 브라우저 점수를 확인하는 사이트 방문해보면 된다.

HTML5 Test


html의 기본 구조

<!DOCTYPE html>를 반드시 선언하여 html5의 규약을 따르고 있음을 명시해준다. 해당 선언이 생략될 경우에는 테이블에 속성을 따로 지정해주어도 user agent stylesheet라는 브라우저 자체의 문법이 적용될 수 있으니 주의하여야 한다.

  • html5를 사용하겠다는 선언과 태그로 구성되어 있다.
<!DOCTYPE html> <!--DOCTYPE: 문서유형을 지정 / html: HTML5형식의미-->
<html> <!--HTML문서의 시작과 끝-->
  <head>
    <title>Document</title> <!--브라우저의 제목표시줄에 출력-->
  </head>
  <body>
    <!--문서의 본문-->
  </body>
</html> <!--태그-->


(1) 주석 Comment

주석은 화면에는 표시되지 않으며, 소스에서만 확인할 수 있다. 개발기간이 길고 소스가 많을 수록 작업 내용을 주석으로 정리해야 디버깅할 때 효율적이다.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
</head>
<body>
  <!--이 사이에 넣는 내용은 주석-->
</body>
</html>


(2) 태그의 요소(Element)와 속성(Attribute)

href : Hyper Reference(참조)
src : Source(출처)
태그는 가급적 소문자로 쓴다.

<!-- 값을 주는 내용이 없을 경우 스스로 닫는 태그를 쓴다. -->
<!-- <요소 속성 = "값"> -->

<!-- 절대경로 - http:// 나 https:// 로 시작하는 전체 주소 -->
<img src="http://www.google.com/images/abc.png">

<!-- 상대경로 - 해당 HTML파일을 기준으로 이미지 파일의 위치를 나타내는 방식 -->
<img src="images/abc.png">


<!-- <요소 속성 = "값">내용</요소>
: 값을 주는 내용이 있을 경우 <열리는태그>와 </닫히는태그>를 쓴다. -->
<a href="http://www.naver.com">네이버 바로가기</a>


(3) head 태그

: 문서의 메타데이터 집합
웹페이지에 직접적으로 보이지 않는 정보를 브라우저에게 제공
<head>
  <!-- 웹페이지의 인코딩 방식 정의 -->
  <meta charset="utf-8">

  <!-- IE에서 렌더링 방식을 최신으로 설정 -->
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <!-- css파일을 연결하는 메타태그 -->
  <link rel="stylesheet" href="style.css">

  <!-- javascript파일을 연결하는 메타태그 -->
  <script src="script.js" charset="utf-8"></script>

  <!-- 문서의 제목 -->
  <title>Document</title>
</head>

이외에도 다양한 meta태그가 존재한다. 페이스북에 링크했을 때 제목/설명/커버이미지를 보여주는 meta태그나 검색엔진에서 주로 사용할 내용, 모바일 확대/축소여부 등 설정값을 지정할 수 있다. CSS나 JS파일의 링크도 head요소 내부에 link, style, script 요소로 나타낸다.


(4) body 태그

: 브라우저에 표시될 내용, 사용자에게 보여진다.

<body>
  <!-- 제목태그 --> <h1>html 문법</h1>
  <!-- 문단태그 --> <p>html을 배웁니다.</p>
  <!-- 인용태그 --> <blockq>처음으로 작성한 HTML문서입니다.</blockq>
</body>


요소(element)의 형태 - 블록과 인라인

(1) 블록 요소

줄바꿈이 일어나는 형태.

블록 요소는 기본적으로 width가 전체 너비의 값을 가진다. 해당 요소에 배경색(background color)를 지정하면 실제로 들어있는 글자 내용과는 별개로 전체 너비 영역만큼을 차지한다는 것을 알 수 있다.

<h1>블록 요소</h1>
<p>p요소는 블록형태입니다.</p>
<div>div요소도 블록형태입니다.</div>


(2)인라인 요소

줄바꿈이 일어나지 않는 형태.

줄바꿈 없이 기본적으로는 자신의 내용만큼의 가로 너비를 가진다. 블록 요소는 인라인 요소를 포함할 수 있지만, 인라인 요소는 블록요소를 포함할 수 없다.

<strong>strong요소</strong>
<a href="">a요소</a>
<span>span요소</span>


(3) 레이아웃 요소

div와 span요소는 오직 block과 inline방식의 레이아웃을 구현하는 데에 사용한다.

<div>
  <p>블록요소 내부에 <span>인라인요소를 사용합니다.</span></p>
</div>

Julia Hwang

디발자를 꿈꾸는 웹개발자의 블로그입니다.