코딩이야기/HTML

HTML 강좌 2강 - HTML 태그 익히기#1

완소줄기 2016. 1. 5. 14:04

지난 강좌에서는 HTML 기본구조와 개념에 대해 알아보았다.

이번 강좌에서는 HTML에서 많이 사용하는 태그를 예제를 통해 만들어 보겠다.


그전에 HTML에서 사용하는 '주석'에 대해 알아보자.

'주석(Comment)'은 문서를 작성하면서 작성자의 의견이나 덧붙이고 싶은 설명 등을 쓰고자 할 때 사용하는 것이다.

그냥 문서에 쓰면 되지 않는건가?

맞다. 안된다.

그냥 쓰면 문서에 모두 반영되기 때문이다.

직접 테스트를 해볼까?





위와 같이 작성을 하고 실행을 하면..



 


위와 같은 웹페이지가 열린다.

붉은색 부분을 작성자가 남기고싶은 의견이라고 가정해 본다면, 주석처리를 하지 않았기 때문에 본문에 그대로 반영이 되는걸 볼 수 있다.


그렇다면 HTML에서 주석처리는 어떻게 하는걸까?

주석의 시작은 <!--

주석의 끝은 -->

<!-- 주석을 넣어요 -->

바로 이런 구조이다. 바로 테스트를 해보자.



 


위와같이 주석처리를 해주고 실행을 해보자.



 


보는바와 같이 주석처리를 한 부분은 웹페이지의 본문에 표시되지 않는다.


주석을 반드시 사용해야 하는 것은 아니다.

하지만 작성하는 문서에 주석을 다는 습관을 가지는걸 추천한다.

나중에 분석을 위해 작성했던 문서를  본인 혹은 타인이  볼 경우 작성자의 의도나 설명을 남긴 주석을 통해 문서를 쉽게 이해할 수 있기 때문이다.


이제 본격적으로 HTML 태그를 공부하고 연습해 보도록 하자.

*body태그

우리가 HTML 문서를 작성할 때 본문내용을 작성하는 부분인 body 태그에 대해 알아보자.

body 태그의 속성에는 bgcolor, leftmargin, topmargin 이 있다.




 


위와같이 body태그에 속성값을 주었다.






(1)bgcolor 는 본문의 백그라운드 RGB값을 지정해준다.

(2)leftmargin 은 본문의 왼쪽 여백의 픽셀값을 지정해준다.

(3)topmargin 은 본문의 위쪽 여백의 픽셀값을 지정해준다.

(RGB값은 색을 표시하는 값이다. 즉 색상표 라고 생각하면 된다. 검색을 하면 RGB 에서 표현하는 색상의 종류에 대해 자세히 알 수 있다.)


이번 강좌에 이어 다음 강좌에서 HTML의 여러 태그에 대해 알아보자.

(예제는 첨부파일에서 받을 수 있습니다.)