구글 블로그(Blogger)에서 게시물을 작성하고 페이지와 테마 수정을 위해 필요한 HTML 기본지식
기본형
<name>Contents</name>
-
<name>을 시작 태그,</name>을 종료 태그 라고 합니다. - 시작 태그와 종료 태그를 합쳐 태그(tag)라고 합니다.
- Contents는 내용입니다.
- 위 모든 걸 요소(element)라고 합니다.
예를 들어 <p>Lorem</p>는 p 요소라 하고 시작 태그는
<p>, 종료 태그는 </p>, 내용은
Lorem입니다.
태그
HTML 소스 코드에서 < 와 >로 묶인 부분이 태그입니다. 예를 들어 이미지를
삽입 할 때는 'image'의 약자인 'img'를 < 와 > 사이에 표시해
<img>
라는 태그를 사용하고, 텍스트 문단을 삽입 할 때는 'paragraph'의 약자인 'p'를
< 와 > 사이에 표시해
<p>
라는 태그를 사용합니다.
어느 부분에 어떤 태그를 사용해야 할지는 이미 정해져 있으니 태그를 하나하나씩 배워 나가는 것이 HTML 공부하는 방법입니다.
태그는 소문자로 씁니다.
보통 HTML 태그는 대소문자를 구별하지 않지만 HTML 표준에서는 태그와 태그 안에 사용하는 모든 속성들은 소문자를 사용할 것을 권하고 있습니다.
<!-- 맞는 예 -->
<img src='image.png'>
<!-- 틀린 예 -->
<IMG src='image.png'>
시작 태그와 종료 태그를 정확히 입력합니다.
대부분의 태그는 시작 태그와 종료 태그가 하나의 짝으로 이루어지고 웹
브라우저에서도 시작 태그에서 종료 태그까지를 태그의 적용 범위로 인식합니다.
<img>
태그나
<br>
태그처럼 종료 태그가 없는 경우도 있지만 대부분의 경우에서 반드시 종료 태그를
삽입해야합니다.
<!-- 맞는 예 -->
<h1>알이's 토텔레's..</h1>
<p>인간은 사회적 동물이다.</p>
<!-- 틀린 예 -->
<h1>알이's 토텔레's..
<p>인간은 사회적 동물이다.</p>
적당히 띄어씁니다.
HTML에서 여러번 띄어쓰기나 줄바꿈을 하더라도 한 칸의 공백으로 인식합니다. 따라서 HTML 소스 코드를 작성 할 때 태그의 포함 관계에 따라 단계적으로 띄어 쓰면 눈으로 쉽게 확인 할 수 있어 웹 페이지의 구조를 확인하기에 편리합니다.
<!-- 띄어 썼을 때 -->
<ul>
<li>메뉴01</li>
<li>메뉴02</li>
<li>메뉴03</li>
</ul>
<!-- 띄어 쓰지 않았을 때 -->
<ul>
<li>메뉴01</li>
<li>메뉴02</li>
<li>메뉴03</li>
</ul>
속성
태그는 속성(attribute)과 함께 사용할 수 있습니다.
<name attribute="value">Contents</name>
예를 들어 <div>에 id 속성(attribute)을 추가하고 값(value)을
abc로 정하고 싶으면 다음과 같이 합니다.
<div id="abc">
...
</div>
속성값은 큰 따옴표와 작은 따옴표로 감싸는 것이 좋습니다.
따옴표를
사용하지 않아도 되지만 속성값에 공백이 있으면 큰 따옴표 또는 작은 따옴표로
감싸야 합니다.
예를 들어 다음의 경우 마지막 부분은 빨간색이 되지 않습니다.
style 속성의
값을 color:로 해석하기 때문입니다.
<p style="color:red;">Lorem</p>
<p style="color: red;">Lorem</p>
<p style='color:red;'>Lorem</p>
<p style='color: red;'>Lorem</p>
<p style=color: red;>Lorem</p>
로딩 중... 잠시만 기다려주세요!
주석
주석(comment)이란 나중에 자신이 작성한 HTML 소스 코드를 보거나 다른 사람이 HTML 소스를 열어 보더라도 페이지의 내용을 쉽게 이해 할 수 있도록 설명하는 글 입니다.
<!--와 -->로 둘러싸인 부분은 주석이 됩니다.
<!-- Comment -->
줄바꿈이 있어도 주석으로 처리됩니다.
<!--
Comment
...
Comment
-->
주석 안에 주석을 넣으면 원치 않는 결과가 나올 수 있습니다.
예를 들어 다음의 경우
<!--
<!--
Comment
-->
abc -->
마지막 줄의 abc -->은 주석으로 처리되지 않고, 웹 브라우저에
출력됩니다.
CSS 에서의 주석은 HTML과 달리 /* 와 */ 사이에 내용을 입력합니다.