CSS Jump Start ·

웹 문서를 만드는 언어, HTML과 CSS

교육 카드 개설 현황

Channels :

Units :

Draft :

사이드바 1

사이드바 2

Meta Info:

2013년 12월 23일
Hyunhwa Jeong
2,573 Views
1 Comment

웹 문서를 만드는 언어, HTML과 CSS

이 게시물은 2016년 8월 8일 수정판입니다.

이야기에 앞서

이 글에서는 HTML과 CSS라는 마크업 언어를 통해 하나의 완성된 웹 문서를 만드는데 목적이 있습니다. 이 두 언어는 여러분이 가끔 들어 본 Visual C++이니 뭐니 하는 고급 컴퓨터 언어보다 훨씬 쉽습니다. 마크업 언어에는 연산을 다루는 부분이 없는 만큼 진입 장벽이 낮으면서도, 쉽고 빠르게 훌륭한 결과물을 만들어 냅니다.

사람마다 다르겠지만 HTML과 CSS는 준비된 자료만 확실하다면 하루만에도 개념을 확립하고 실제로 웹 문서를 작성하거나 다른 사람이 만든 웹 문서를 수정할 수 있습니다. 이후부터는 인터넷 검색으로 각종 태그나 속성을 참고서 보듯 찾아 실력을 더욱 향상시킬 수도 있습니다. 시작이 반입니다. HTML과 CSS는 더욱 그렇습니다.

이 카드를 통한 성취 목표

이 문서를 통해 여러분께 기대하는 성취 목표는 다음과 같습니다.

웹 문서를 작성하기 위한 문서편집기를 준비합니다.
테스트용 웹 브라우저를 준비합니다.
HTML문서와 CSS 문서 하나씩을 각각 작성하여, 웹 브라우저에서 정상적으로 보여지는지 확인합니다.
HTML과 CSS 마크업 언어에서 사용하는 구문의 형태를 이해합니다. 예를들어, HTML에서는 꺽쇠 기호를 주로 사용하고, CSS에서는 중괄호와 세미콜론 등을 사용한다는 따위.

각 언어에 대한 조금 더 상세한 사용 방법은 다른 카드를 통해서 알아봅니다. 여기서는 준비와 이해만으로 충분합니다.

HTML과 CSS에 대한 간단한 이해

HTML – Hypertext Markup Language

우리가 흔히 부르는 웹사이트는 본래 웹 문서로 불립니다. 연구와 학술적인 자료를 공유하기 위해 처음 사용된 인터넷의 배경에 맞춰, 모든 인터넷 자료들은 문서(Document) 형태로 제공되었습니다. 자료를 문서형태로 만들기 위한 명령어가 바로 HTML 언어입니다.

워드 프로그램에서는 우리가 문서를 작성할 때, 컴퓨터가 명령어를 숨기기 때문에 인식하지 못했을 뿐, 모든 컴퓨터 문서에는 자료를 서식화 하는 명령어가 붙어 있습니다. 우리는 지금 이런 문서 서식 명령어를 배우려는 것입니다.

예제 이미지처럼, 제목에는 <h1>, 단락에는 <p>라는 명령어가 실제로 우리 눈에 보이지는 않지만, 이 문장들의 역할을 명확히 나눠주고 있습니다. 여기서 <h1>이나 <p>가 HTML 언어입니다. 인터넷 초창기 시절에는 이 정도로 충분했습니다. 학술자료 교환에 디자인이란 거추장스러운 것일 뿐이었죠.

시간이 흘러, 인터넷이 대중에 보편화 되면서, 개인과 회사들은 학술적인 목적 이외에도 상업적인 목표를 달성하기 위해 기존의 HTML에 디자인을 더하고자 했습니다. 결국 구조를 담당하는 HTML 언어에 표현을 담당하는 CSS 언어가 추가로 발전하게 됩니다.

이로써 문서는 HTML과 CSS라는, 구조와 표현이 분리된 하나의 문서 작성 언어로 발전하게 되었습니다.

CSS – Cascading Style Sheet

CSS는 HTML 요소를 시각적으로 꾸며주는 역할을 합니다. 초창기에는 HTML 언어 자체에 어느정도 시각화가 가능한 부분이 있었으나, 더 합리적인 방향으로 분리 발전되었습니다.

<p><font face="Arial">Hello!</p>
<p><font face="Arial">Hello!</p>
<p><font face="Arial">Hello!</p>
<p><font face="Arial">Hello!</p>

위처럼 HTML 태그 자체에 서체를 지정하다보면, 서체를 한번 바꾸기 위해 4개의 모든 문단을 바꿔주어야 했습니다. 하지만 CSS로 서체와 같은 표현 부분을 분리해주면, 단 한 줄의 수정으로 모든 서체를 일괄적으로 변경시킬 수 있습니다.

p { font-family: Arial }

HTML과 CSS에 대해서는 일단 여기까지 이해하고, 밑에서 다시 설명합니다.

웹 문서 작성의 첫 걸음. 문서 편집기의 선택

HTML과 CSS의 개념에 대해 약간 이해했다면, 이 언어들을 제대로 쓰기 위해 준비해야 할 것들이 있습니다. 글을 쓰고 그 글을 저장시킬 수 있는 워드 따위 말입니다. 물론 메모장이나 워드패드도 여기에 속합니다. 다만, HTML 파일은 여러 나라의 언어를 표현할 수 있는 유니코드 포맷으로 저장해야 하기 때문에, 이 저장기능이 있는 문서 편집기를 써야합니다. 메모장이나 노트패드는 이런 기능이 없습니다.

구문 채색도 아주 중요한 부분입니다. 많은 양의 태그를 사용하게 되면 HTML 문서는 판독성이 매우 떨어집니다. 문서의 흐름을 직관적으로 표현해 주기 위해서는 각 태그의 의미를 상기시켜 줄 구문 채색(Syntax Highlight)이 꼭 필요하고, 이 기능은 전문적인 문서 편집기에서 제공합니다.

쓸만한 문서 편집기를 살펴보시겠어요?

Read

테스트용 웹 브라우저의 선택

사람들은 자기 취향에 맞는 다양한 웹 브라우저를 선택해서 웹 사이트를 열람합니다. 여러분이 열심히 만든 웹 사이트를 커피숍의 PC에서 열어봤더니 의도치 않게 잘못 표현되는 경우도 있을 수 있습니다. 그래서 사람들이 주로 사용하는 몇 가지 대표적인 웹 브라우저에서 사이트를 테스트 해 볼 필요가 있습니다. 아래 링크에서 테스트용 웹 브라우저의 선택과 특성에 대해 별도로 안내하고 있으니 미리 살펴보시기 바랍니다.

웹 브라우저에 대해 자세히 알아보시겠습니까?

Read

HTML 문서 만들기

HTML(Hyper Text Markup Language) 파일의 확장자는 htm과 html입니다. 문서 편집기를 열어서 빈 문서를 저장해도 좋습니다. 보기 편한 곳에 index.html과 같이 저장하면, 웹 브라우저에서 이 파일을 HTML 문서로 인식하여, 문서에서 사용 된 태그를 제대로 표현하기 시작합니다.

htm과 html 확장자는 같은 기능을 합니다. htm 확장자는 예전 DOS나 Linux 시절, 파일명과 확장자명의 길이가 제한되어 있을 때 조금이라도 확장자명을 줄이기 위해 사용했으나 현재는 HTML 문서임을 더욱 직관적으로 보여주는 html 확장자가 주로 사용됩니다. index.txt와 같이 HTML 확장자를 사용하지 않을 경우에는, 문서에서 사용하는 태그, 예를들어, 리스트를 표현하는 <ul> 태그를 리스트로 표현하지 못하고 일반 글자로 표현합니다.

저장 된 HTML 파일은 웹 브라우저에서 열어보면서 테스트 할 수 있습니다.

인터넷 익스플로러는 컴퓨터에 저장된 HTML 문서를 열어 볼 때, 자바스크립트 처리를 위해 Actice X를 요청하는 경우가 있어 테스트 용도로 부적합합니다.

다음으로 할 일은, 여러분이 작성하는 문서가 HTML이라는 것을 웹 브라우저에게 인식시키는 것입니다. HTML 문서임을 정의하는 몇 가지 조건들이 있으며, 이것들을 지켜주어야만 웹 브라우저가 문서를 정확히 표현합니다. 파일명을 htm이나 html로 지정하는 것은 위에서 설명하였습니다.

어떤 경우에는 index.php와 같은 다른 확장자를 보게 될 수도 있습니다. 이것은 다른 프로그램 언어에서 내부 루틴을 통해 HTML 언어를 처리하는 것으로서, 그 자체로는 HTML 문서가 아니지만, HTML 문서와 같은 역할을 수행할 수 있습니다.

이제는 HTML 문서 내부에서 좀 더 세부적인 부분을 통해 HTML 문서의 정체성을 만들어 주어야 합니다. 먼저, 여러분의 문서 편집기에서 다음과 같은 기본 구조를 작성해 보세요.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>문서 제목</title>
    </head>
    <body>
    HTML 문서입니다.
    </body>
</html>

<html>처럼 좌, 우 꺽쇠가 달린 것을 태그(Tag)라고 부르는 인식표입니다. 이 태그는 문장이나 다른 태그를 포함해야 하는 경우가 있으므로 대부분 한 쌍으로 이루어져 있지만, 독립적으로 홀로 표현하는 태그도 있습니다. 이 부분은 태그 작성 부분에서 살펴보겠습니다.

예문을 보면 띄어쓰기가 눈에 들어옵니다. HTML 문서는 알쏭달쏭한 태그들의 집합이기 때문에, 작성자가 문서를 제대로 판독하기 위한 여러 방법들이 복합적으로 사용됩니다. 띄어쓰기도 그 중 하나입니다. 띄어쓰기를 하지 않아도 브라우저는 제대로 인식하지만, 이것은 기계가 아닌 사람을 위한 것입니다. 이 부분도 태그 작성 부분에서 다시 살펴보고 지금은 넘어갑니다.

HTML 문서의 종류 알려주기

파일명으로 문서가 HTML 파일임을 알려줬다면, 문서 안에서는 HTML 언어의 버전을 알려주어야 합니다. 지금까지 HTML 마크업 언어도 많은 발전을 해왔습니다. 가장 최근에 사용되고 있는 HTML 버전 5를 인식시키려면 예문의 가장 첫 줄에 위치한

<!DOCTYPE html>를 선언해 주면 됩니다.

예전에는 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 처럼 엄청 복잡했답니다.

HTML 문서의 시작과 끝 알려주기

<!DOCTYPE html>
<html>

</html>

HTML 문서가 시작 됨을 알려주는 <html> 태그를 적어주고, 끝을 알리는 </html>로 마무리합니다. 위에서 언급했듯이 많은 태그들이 이렇게 쌍으로 되어있고, 한 쌍의 끝을 알리는 태그 이름에는 슬래쉬 문자(/)가 붙습니다. 이제부터 브라우저는 <html> 태그 내부에 기재되는 모든 내용을 W3C에서 재정한 HTML5 버전의 문법으로 해석합니다.

HTML 문서의 제반 정보 알려주기

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>문서 제목</title>
    </head>
</html>

참 알려줘야 할 것도 많군요. HTML 문서는 <head> 태그에 있는 몇 가지 유용한 정보들을 받아 처리합니다. 가장 대표적인 것으로는 브라우저 창에 문서의 제목을 출력해주는 <title> 태그 같은 것들이 그것입니다. <title> 태그를 사용하면 웹 브라우저 창 혹은 탭으로 열은 창에 문서의 제목을 표시해 줍니다.

<meta charset="UTF-8">은, 브라우저에게 이 문서가 특정 국가 언어에 한정되지 않고, 모든 언어를 표현한다는 정보를 알려줍니다. 만일 <meta charset="EUC-KR">과 같이 한국어 전용의 문자셋을 선언하면, 다른 언어의 컴퓨터 운영체제를 사용하는 외국인에게는 문서의 내용들이 알수 없는 특수문자로 표현됩니다. 이 태그는 메타 태그라 부르며, 쌍으로 사용되지 않고 홀로 사용됩니다.

쌍으로 된 태그와 홀로 된 태그는 어떻게 구분하면 좋을까요?

쌍으로 된 태그들은 반드시 태그 안쪽에 다른 내용이나 태그들을 품는 속성들을 가지고 있습니다. 다른 요소들을 품지 않고 선언만 하는 태그들은 홀로 사용됩니다. 예를들어, 한 줄을 띄우는 <br />과 같은 태그들은 다른 요소를 품을 필요가 없으므로 홀로 사용됩니다. 홀로 사용되는 태그들은, 태그 이름의 앞이 아니라 뒤에 슬래쉬를 적어주는 경우가 있는데, 이것은 XHTML과 같은 HTML 버전에서 사용했던 규칙입니다. HTML5에 들어서는 홀로 사용되는 태그에 슬래쉬 사용을 자유롭게 풀어 놓았습니다. 붙여도 되고 안붙여도 됩니다.

위의 두 가지 태그는 반드시 <head> 태그 안에 있어야만 해석되고 표현됩니다. <head> 태그의 용도를 쉽게 생각하면, 웹 문서를 보여주기 전에 브라우저가 미리 준비해야 할 것들을 알려주는 것입니다.

문서의 내용 작성하기

실제로 방문자들이 보게 될 내용들은 <body> 태그 안에 들어갑니다.

기본 태그들의 띄어쓰기 무시하기

기본적으로 태그의 띄어쓰기에 대해서는 정해진 규칙이 없습니다. 컴퓨터는 태그를 붙여쓰든 띄어쓰든 똑같이 해석하지만, 사람은 어느 정도 띄어쓰기가 되어야 글을 작성하는 데 있어 판독의 문제가 없습니다. 보통, 태그 안에 또 다른 태그를 쓰는 경우 4칸(네 번의 Space바 사용) 정도 오른쪽으로 밀어 넣어줍니다.

<body>
    <p>이 문단 태그는 오른쪽으로 4칸 띄어 썼습니다. </p>
<body>

그런데 이미 <html>이나 <body> 태그 때문에 실제로 내용이 들어갈 부분은 최소 12칸이나 떨어진 상태에서 작성해야 하기 때문에 불편함이 있습니다. 그래서 기본 태그들은 띄어쓰기를 무시하고, <body> 태그 안쪽에 작성되는 내용부터 띄어쓰기를 하는 것이 편리합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서 제목</title>
</head>
<body>
    <p>HTML 문서입니다.</p>
</body>
</html>

이제 이 문서는 가장 기본적인 형태의 HTML 문서가 되었습니다.

여기서 사용된 <p>는, 단락용 태그입니다. 하나의 문단을 만들 때 사용합니다.

CSS 문서 만들기

CSS(Cascading Style Sheet) 파일의 확장자는 css입니다. 문서 편집기를 열어서 빈 문서를 저장해도 좋습니다. 이전에 만든 HTML 파일인 index.html 파일과 같은 위치, 혹은 같은 폴더 내에 style.css라는 이름으로 저장합니다.

mycss.css 같은 이름도 상관없습니다. 확장자명만 .css면 됩니다. 저장하는 위치도 어떤 곳이든 상관없지만, HTML 파일에서 CSS 파일을 호출할 때 경로명이 복잡해지지 않으려면 서로 같은 위치, 혹은 가까운 위치에 있는 것이 좋습니다.

저장된 스타일시트 문서는 HTML 파일 안에서 다음과 같이 호출합니다. 기본적으로 <head> 태그 안에, <title> 태그의 아래쪽으로 위치합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서 제목</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
    <p>HTML 문서입니다.</p>
</body>
</html>

HTML에서 스타일시트를 참조하는 방법은 몇 가지가 있습니다. 여기서는 가장 일반적인 방법인 Link 방식만 설명합니다.

<link rel="stylesheet" href="style.css">에서 CSS 파일의 경로를 나타내는 부분이 href="style.css" 부분입니다. 위치의 기준은 HTML 파일이며, 만일 style.css 파일이 css라는 폴더 안에 위치했다면 경로는 href="css/style.css"와 같이 됩니다.

만일, style.css 파일이 HTML 파일보다 한 단계 위의 디렉토리에 위치해 있다면 href="../style.css"와 같이 됩니다. 두 단계 위의 디렉토리에 위치해 있다면 href="../../style.css"와 같이 표기합니다.

쉽게 생각해서, HTML 파일의 위치를 기준으로, CSS 파일이 하위 디렉토리에 위치하면 디렉토리 이름을 나열하면 되고, 상위에 위치하면 ../를 사용해서 올라가면 됩니다.

웹에서 경로는 CSS 파일뿐만 아니라 이미지나 혹은 다른 외부 자원을 참조할 때 모두 똑같은 방식으로 사용합니다. 경로를 표기하는 방법은 몇가지가 있으며, 시간이 허락한다면 검색 엔진에서 절대경로와 상대경로라는 검색어로 자료를 찾아 읽어보시기 바랍니다.

CSS 구문 작성하기

CSS는 HTML과 다른 방식으로 구문을 만듭니다. 아래의 구문이 처음부터 잘 이해가 가지 않더라도 그냥 읽어 놓으면 됩니다. 나중에 몇 가지 예문을 만들다 보면 자연스럽게 익숙해집니다.

예문에서 p는 선택자(Selector)입니다. CSS에서 꾸며 줄 대상이 됩니다. 여기서는 태그 이름이 선택자가 됩니다.
선택자 다음에는 속성이나 값들이 오게 되는데, 반드시 중괄호 { }로 감싸주어야 합니다.
중괄호 안에는 선택자를 꾸며 줄 속성(Property)과 값(value)을 적습니다. 속성과 값은 콜론 :으로 연결시켜 줍니다.
2개 이상의 속성을 사용할 때는, 값 뒤에 세미콜론 ;을 붙여줍니다.

띄어쓰기와 줄 넘기기

CSS에서 띄어쓰기와 줄 넘기기는 문서에 어떤 영향도 주지 않습니다. 판독성을 높이기 위해 사용하며, 공백이 1byte의 데이터를 차지하긴 하지만 이 용량 때문에 띄어쓰기를 하지 않는 것은 정신건강에 매우 해롭습니다. 한 줄에 사용하는 띄어쓰기는 다음의 예를 참고하세요.

p { color: green; font-size: 12px }

다음은, 여러 속성을 줄을 넘겨서 정의할 경우입니다. CSS 코드가 많아지면 스크롤 압박이 있긴 하지만, 원하는 구문을 찾을 때는 문서 편집기의 찾기 기능을 사용하고, 될 수 있으면 한 줄에 정의하는 것 보다 여러 줄에 개행하여 적는 습관이 여러모로 도움이 됩니다.

p {
    color: green;
    font-size: 12px;
    text-align: center
}

위 예문에서 각 속성은 왼쪽으로부터 4칸씩 띄어썼습니다. CSS 속성이 1개일 때는 한 줄에, 2개 이상일 때는 개행하여 적는 방법이 가장 효과적입니다.
맨 마지막 속성은 세미콜론을 생략해도 좋습니다.

마치며

이렇게 작성한 스타일시트 문서를 저장하고, 웹 브라우저에서 index.html 파일을 열어보면, <p> 태그가 사용된 문장의 색상이 초록색으로 나타납니다.

이후부터는 <body> 안에 여러 다른 태그를 사용해서 문서를 작성하고, 스타일시트에서 태그를 꾸미게 됩니다. 이 글은 HTML과 CSS 문서 만들기에 목적을 두었기 때문에 여기까지 서술하고, 다른 게시물에서 태그를 비롯한 여러 이야기를 풀어나갈까 합니다.

1 Comment

Inline Feedbacks

View all comments

sophieKim

8 years ago

쉽고 재밌게 설명해 주셔서 정말 감사합니다

© 2016 BEAUTIFULCSS, THE HAMMER COMPANY RELATED LOGOS ARE TRADEMARKS OR REGISTERED TRADEMARKS OF THE HAMMER COMPANY IN THE REPUBLIC OF KOREA. AND/OR OTHER COUNTRIES. ALL OTHER TRADEMARKS OR TRADE NAMES ARE THE PROPERTY OF THEIR RESPECTIVE OWNERS. ALL RIGHTS RESERVED.

Beautiful CSS

교육 카드 개설 현황

사이드바 1

사이드바 2

Meta Info:

Table of Contents

웹 문서를 만드는 언어, HTML과 CSS

이야기에 앞서

이 카드를 통한 성취 목표

HTML과 CSS에 대한 간단한 이해

HTML – Hypertext Markup Language

CSS – Cascading Style Sheet

웹 문서 작성의 첫 걸음. 문서 편집기의 선택

테스트용 웹 브라우저의 선택

HTML 문서 만들기

HTML 문서의 종류 알려주기

HTML 문서의 시작과 끝 알려주기

HTML 문서의 제반 정보 알려주기

문서의 내용 작성하기

기본 태그들의 띄어쓰기 무시하기

CSS 문서 만들기

CSS 구문 작성하기

띄어쓰기와 줄 넘기기

마치며