HTML 기본 예제 만들어보기

by 신큰특스 posted Apr 08, 2014
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

크게 작게 위로 아래로 댓글로 가기 인쇄

이제 본격적으로 HTML을 시작해보겠습니다!


눈으로만 보고 지나가지 마시고 HTML 태그 연습장(http://htmlfive.co.kr/html5/xe/page_JTDY39)이나 


이전에 설명해드렸던 문서 편집기로 파일을 만드는 방식으로 연습해보세요.




HTML 문서의 제목 요소 <h1> ~ <h6>


<h1>나는 제목이다.</h1>
<h2>나는 또 다른 제목이다.</h2>
<h3>나는 제 3의 제목이다.</h3>


나는 제목이다.

나는 또 다른 제목이다.

나는 제 3의 제목이다.


<h1>은 제목을 나타내는 HTML 요소입니다. 일단 일반적인 텍스트와 눈에 띄는 차이점은 글자의 크기가 달라진다는 점입니다.


위의 결과를 보시면 아시겠지만 h 뒤의 숫자가 작아질수록 글자의 크기가 작아집니다.


CSS를 이용해서 이와 동일한 효과를 낼 수 있겠지만 문서의 논리 구조를 유지하기 위해서 제목 요소의 사용을 권합니다~



HTML 문서의 단락 요소 <p>


<p>나는 단락이다.</p>
<p>나는 또 다른 단락이다.</p>

나는 단락이다.

나는 또 다른 단락이다.


단락은 쉽게 생각해서 줄바꾸기를 생각하시면 됩니다. 쉽죠?



HTML 문서의 링크 요소 <a>


<a href="http://www.htmlfive.co.kr">HTML5 오픈 커뮤니티</a>

HTML5 오픈 커뮤니티


링크 요소는 다른 웹사이트로 연결을 하거나 다른 웹문서 혹은 문서 내의 특정 위치로 연결할 수 있습니다.


위의 결과 화면의 HTML5 오픈 커뮤니티 위에 마우스 커서를 가져가보세요. 클릭도 된답니다.



HTML 문서의 이미지 요소 <img>


<img src="http://htmlfive.co.kr/html5/xe/layouts/sketchbook5/img/chrome.png" alt="chrome">

chrome


이미지 요소는 말 그대로 이미지를 표현합니다.


alt 속성은 해당 이미지에 대한 설명인데 이미지 로딩이 느려지면 해당 설명글이 보이며 시각 장애인을 위해서도 사용된답니다.



마무리


그럼 마무리 차원에서 여태까지 배운 것을 종합한 예제를 살펴봅시다~


<!DOCTYPE html>
<html>
    <head>
        <title>HTML5 오픈 커뮤니티</title>
    </head>
     
    <body>
        <h1>HTML5 오픈 커뮤니티</h1>
        <p>이 자료는 <a href="http://www.htmlfive.co.kr">HTML5 오픈 커뮤니티</a>에서 배포합니다.</p>
	<img src="http://htmlfive.co.kr/html5/xe/layouts/sketchbook5/img/chrome.png" alt="chrome">
    </body>
</html>

HTML5 오픈 커뮤니티

이 자료는 HTML5 오픈 커뮤니티에서 배포합니다.

chrome


특이점이라면 단락 <p>안에 링크 <a>가 포함되어 있지요?


이런 식으로 각 요소는 서로 포함 관계를 가질 수 있습니다.


예를 들자면 링크 <a> 안에 이미지 <img>를 넣는다면 이미지를 클릭하면 특정 웹페이지나 위치로 이동하는 링크를 만들 수 있겠죠?