HTML 강좌 | 문법

Category

문법 1

가장 기본적인 문법은 다음과 같습니다.

<tagname>Contents</tagname>

예를 들어 인용문은 다음과 같이 만듭니다.

<blockquote>Lorem</blockquote>

blockquote를 태그 이름(Tag Name), <blockquote>를 시작 태그(Start Tag), </blockquote>를 끝 태그(End Tag), Lorem을 내용(Contents)이라고 합니다.

문법 2

태그는 속성(Attribute)을 가질 수 있습니다.

<tagname attribute="value">Contents</tagname>

예를 들어 인용문에 id 속성(Attribute)을 추가하고 값(Value)을 abc로 정하고 싶으면 다음과 같이 합니다.

<blockquote id="abc">
  Lorem ipsum dolor.
</blockquote>

속성값(Value)는 큰 따옴표로 감싸도 되고, 작은 따옴표로 감싸도 되고, 따옴표를 사용하지 않아도 됩니다. 단, 속성값에 공백이 있으면 큰 따옴표 또는 작은 따옴표로 감싸야 합니다. 예를 들어

<p style="color:green;">Lorem</p>
<p style="color: green;">Lorem</p>
<p style='color:green;'>Lorem</p>
<p style='color: green;'>Lorem</p>
<p style=color:green;>Lorem</p>

는 문단의 글자를 초록색으로 만들지만

<p style=color: green;>Lorem</p>

는 초록색이 되지 않습니다.

주석(Comment)

<!--와 -->로 둘러싸인 부분은 주석이 됩니다. 주석은 웹브라우저가 해석하지 않습니다.

<!-- Comment -->

줄바꿈이 있어도 주석으로 처리됩니다.

<!--
  Comment
  ...
  Comment
-->

주석 안에 주석을 넣으면 원치 않는 결과가 나올 수 있습니다. 예를 들어 다음의 경우 abc -->은 주석으로 처리되지 않습니다.

<!--
  <!--
    Comment
  -->
abc -->

주석은 웹브라우저가 해석하지 않지만, 소스 보기하면 누구나 볼 수 있다는 것에 주의해야합니다.

Created on 2016-11-21 15:59 | Updated on 2017-03-28 02:27

이 글을 공유하기

Kakao