본문으로 바로가기



웹디자인을 처음 배우시는 분, 잘 오셨습니다! 지금부터 HTML/CSS/JavaScript/jQuery 등을 이용해 웹디자인 강좌를 진행할 나노 (yoonano) 입니다.


시작부터 HTML 을 작성하는 방법에 대해 알아보는 것보다는 HTML 에 대해 기본적인 지식이 있는 것이 좋을 것 같습니다. 그래서 이번 시간에는 HTML 에 대해 알아보도록 하겠습니다.


HTML 이란?


HTML 은 HyperText Markup Language 의 약자로 여러분이 지금 보시는 제 블로그의 강좌 글부터, 세상에 있는 모든 웹사이트 (홈페이지) 의 기초적인 뼈대는 HTML 을 이용해 작성 되었습니다.


많은 분들이 착각하고 계신 것 중 하나가 "HTML 을 통해 웹 디자인을 한다?" 라는 부분인데요. 쉽게 건축에 비교해 설명해 드리자면 건물의 뼈대, 철근이죠. 그 철근이 HTML 이고, 철근을 감싸는 콘크리트와 건물 안에 있는 벽지, 조명 그리고 가구 등은 CSS 가 되겠습니다. JavaScript (jQuery) 는 건물에 들어갔을 때 고급스러운 느낌을 주는 향수라고 할까요. 그렇게 생각하시면 상당히 쉽습니다. 


그러면 다시 HTML 은 웹에서 기본적인 뼈대가 되고요, 색상, 배경 색상, 글자 크기, 글자의 폭 (자간) 등을 설정해 주는 것이 CSS 입니다. 그리고 CSS3 와 JavaScript 는 사소한 효과나 움직임을 다루게 됩니다. 어떠신가요? 이제 HTML, CSS 그렇게 들어보기만 한 것들의 개념이 잡히시나요?


HTML 은 어떻게 생겼을까요? HTML 에 대해 간단히 설명해 드리자면 아래와 같습니다. <!-- 와 --> 안에 담긴 내용은 실제 코드로 작동하지 않는 설명으로 알고 계시는 것이 좋겠습니다. ▼


1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<!-- 위의 코드는 이 문서가 HTML5 라는 것을 정의하는 코드입니다. -->
<html>
    <head>
        <!-- 이 곳에는 사이트의 설정 등의 코드가 담기는 부분 입니다. -->
    </head>
    <body>
        <!-- 이 곳에는 사이트에서 실제로 눈에 보이는 요소가 작성되는 부분 입니다. -->
    </body>
</html>
cs


<, > 안에 들어가는 것은 태그라고 부릅니다. 태그를 시작할 때는 <태그> 와 같이 시작하고, 태그가 끝나는 부분은 </태그> 로 태그 이름 앞에 / (슬래시) 를 붙이면 됩니다. 사실 HTML 에서는 태그의 사용 용도만 알면 된답니다.



다음 시간부터 HTML 에서 각 태그의 사용 용도, 역할에 대해 알아보도록 하겠습니다.



댓글을 달아 주세요