CSS Jump Start ·

HTML 웹 페이지 만들기

교육 카드 개설 현황

Channels :

Units :

Draft :

사이드바 1

사이드바 2

Meta Info:

2016년 8월 10일
Hyunhwa Jeong
8,570 Views
1 Comment

HTML 웹 페이지 만들기

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

이야기에 앞서

HTML을 사용해서 간단한 웹 페이지를 만드는 시간입니다. 여러분이 입문자라면 이 카드를 시작하기 전에 미리 웹 문서를 만드는 언어, HTML과 CSS 카드를 완전히 이해하는 것이 중요합니다. 지금까지는 HTML 문서가 어떻게 구성되는지 알아봤다면, 이제부터는 몇 가지 HTML 태그를 사용해서 정상적인 웹 페이지를 만들어 봅니다.

이 카드에서 사용할 HTML 태그에 대해 미리 정리된 카드가 있습니다. 자주 사용하는 HTML 태그 카드를 열어놓고 함께 학습하기 바랍니다.

이 카드를 통한 성취 목표

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

웹 페이지를 구성 할 디렉토리를 구성하고, 생성되는 파일들을 합리적으로 분류합니다.
HTML 문서에 CSS, Javascript 파일을 링크시켜, 시각적 표현과 기능성을 살립니다.
웹 페이지 작성을 위한 기본 템플릿으로 활용합니다.

작업용 디렉토리 만들기

웹 페이지는 HTML, CSS, Javascript, 이미지 등 많은 파일로 구성됩니다. 이런 여러 파일들을 하나의 디렉토리에 넣어 관리하게 되는데, 너무 세분화하지는 않더라도 적당히 디렉토리 구성을 해 놓으면 앞으로의 웹 사이트 개발에 좋은 습관을 만들어 줍니다.

startup이라는 이름의 디렉토리를 만들었습니다. 이 디렉토리 이름이 곧 웹사이트의 이름이 될 수도 있겠죠. 이 디렉토리 안에 css, js, img 디렉토리를 추가로 만듭니다. 웹 사이트를 제작하다보면 빈번하게 늘어나는 파일들을 저장 할 디렉토리입니다.

HTML 문서 작성하기

웹 사이트의 첫 대문이 될 페이지를 만듭니다. 파일명 index.html의 HTML 문서를 작성하게 되는데, 방문자가 웹 사이트 주소를 입력해서 접속할 때 처음 만나는 페이지입니다. HTML 문서를 작성하기 전에 유의해야 할 사항이 있습니다.

웹 디자인은 다양한 파일형태를 다룹니다. 그래서, .html처럼 파일 이름 뒤에 붙는 확장자 이름을 확인하는 것이 매우 중요한데, 윈도우즈 PC 운영체제의 경우 확장자 이름이 보이지 않게 설정되어 있습니다. 사용하고 있는 운영체제에서 파일의 확장자를 보이도록 검색을 통해 미리 해결해 놓으세요.
문서를 작성할 때는 반드시 전용 문서편집기를 사용하세요. 윈도우즈의 메모장이나 Mac OS의 텍스트 편집기는 사용하지 마세요. 우리는 UTF-8 방식의 텍스트 인코딩 방식을 사용해야 하고, 구문 채색이 반드시 필요합니다. 문서 편집기의 선택 카드를 참고해서 여러분께 알맞은 문서 편집기를 준비하세요.

문서 편집기가 준비되었다면, 아래처럼 웹 문서의 환경설정에 해당하는 태그를 작성해서, startup 디렉토리에 index.html로 저장합니다.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Making Start-Up Web Page</title>
    <meta name="description" content="Step by step study for making web page">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    테스트용 본문입니다
</body>
</html>

웹 문서를 구성하는 기본적인 골격입니다. 모든 웹 페이지는 이 상태에서 시작해서 부수적인 태그들에 의해 기능이 조금씩 확장됩니다. 웹 페이지를 작성할 때는 항상 이 상태에서 출발하는 것이 일반적입니다.

아래에서는 현재 사용된 태그에 대해 간단히 설명합니다. 웹 문서를 만드는 언어, HTML과 CSS에서 이미 설명한 태그는 생략합니다.

<meta http-equiv=”x-ua-compatible” content=”ie=edge”>

인터넷 익스플로러 웹 브라우저에서, 웹 문서를 항상 최신 표준모드로 랜더링하라는 강제성 태그입니다. 한마디로, 호환성 보기라는 기능을 사용하지 못하도록 막는 기능을합니다. 이 태그에 대한 더 자세한 정보를 원하시면 여기를 클릭해서 참고하세요.

<meta name=”description” content=”…”>

웹 페이지가 어떤 내용을 담고 있는지를 설명하는 문장을 content 속성에 정의합니다. 여기에 선언된 단어나 문장은 구글 같은 검색엔진의 키워드로 사용됩니다.

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

이 태그는 HTML5 표준이 아닙니다. 표준 속성인 @viewport의 지원 확대 추이에 따라 추후 사용을 중지해야 할 수 있습니다.

viewport 속성은, 여러분이 만든 웹 페이지가 데스크탑 컴퓨터의 웹 브라우저 뿐만 아니라, 스마트폰이나 테블릿 피씨등 다양한 기기에서 알맞은 크기로 표현되도록 합니다. 기본적으로 예제에 작성 된 상태로만 써도 문제 없습니다.

HTML 문서는 이 정도로 하고, index.html 파일을 startup 디렉토리에 저장합니다.

CSS 문서 작성하기

스타일시트 만들기

이번에는 HTML 파일을 시각적으로 표현하고 디자인 할 CSS 문서를 작성합니다. 문서 편집기에서 아래의 코드만 적어서 css 디렉토리에 style.css로 저장합니다. 앞으로 추가되는 CSS 파일 역시 모두 css 디렉토리에 넣으면 됩니다.

body { margin: 0px }

HTML 문서와 연결하기

작성된 스타일시트를 HTML 문서에 링크시킬 차례입니다. index.html 파일을 열고, header 태그 사이에 링크 태그를 추가하고 저장하세요. 아래 예문에서 7번줄에 해당합니다.

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Making Start-Up Web Page</title>
    <meta name="description" content="Step by step study for making web page">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/style.css">
</head>

예문) 스타일시트 링크 태그

웹 브라우저에서 확인하기

HTML 문서에 스타일시트가 제대로 연결되었는지 확인합니다. 웹 브라우저의 메뉴바에서 파일(File) 메뉴를 보면, 외부 파일을 열 수 있는 항목이 있습니다. 브라우저마다 메뉴명이 조금씩 다르겠지만 보편적으로 열기 혹은 파일 열기 등입니다. 이 메뉴를 이용해 index.html 파일을 열어주세요.

앞으로 HTML 파일이나 스타일시트, 혹은 자바스크립트 파일등에 수정이 이루어질 때 마다 웹 브라우저를 통해 확인하게 됩니다.

위 예문의 이미지에서는, 텍스트와 웹 브라우저의 가장자리가 거의 완전히 붙어있는 점에 주목하세요. 스타일시트에서 body 태그의 외부 여백에 해당하는 margin 속성을 0으로 선언했기 때문입니다. 만일 margin: 0을 지우면 어떻게 될까요? 아래에서 계속 이어서 설명합니다.

웹 브라우저 갱신하기

style.css에서 body 태그에 선언된 body { margin: 0 } 스타일을 지우고 문서를 저장합니다. 스타일이 선언 되었을 때와 그렇지 않을 때의 차이를 보기 위해서 입니다. 그리고 웹 브라우저에서 페이지를 새로 고침하면, 변경된 내용을 볼 수 있습니다. 웹 브라우저에서 페이지를 새로 고침하려면, 단축키 Control + R (Mac OS는 Command + R)을 사용하세요.

body 태그의 스타일이 없어지면, 텍스트가 브라우저의 가장자리로부터 약간 떨어집니다. 원래 body 태그는 약 8px 가량의 외부 여백을 가지고 있는데, 이것을 스타일시트에서 body { margin: 0 } 선언을 통해 여백을 없앴던 것 입니다.

앞으로 모든 웹 작업은 지금까지의 순서대로 반복해서 진행하면 됩니다.

HTML 문서에서 태그를 사용하여 마크업하고 저장합니다
CSS 문서에서 해당 태그를 예쁘게 꾸며주고 저장합니다
웹 브라우저에서 페이지 새로고침을 통해 변경된 사항을 확인합니다

CSS 초기화 하기

이제 우리는 body 태그가 약 8px의 외부 여백을 기본 스타일 값으로 가지고 있다는 것을 알았습니다. 많은 HTML 태그가 이렇게 기본 스타일 값을 가지고 있는데, 문제는, 웹 브라우저마다 이 수치가 조금씩 다를 수 있다는 점입니다. 구글 크롬에서는 여백이 8px, 애플 사파리에서는 10px 이런 식으로 말이죠.

그래서 웹 브라우저마다 서로 다르게 처리하는 부분을 일관성 있게 초기화 할 수 있도록 미리 작성해 놓은 CSS 파일을 링크시켜서 사용하곤 하는데, Normalize.css가 그런 초기화 파일 중 하나입니다. 이런 파일을 링크시켜서 사용하면, 여러분이 일일이 조금씩 다 다른 기본 값을 선언해야 하는 수고를 덜 수 있습니다.

Normalize.css 사이트에서 다운로드 받은 normalize.css 파일을 startup > css 디렉토리에 저장하고, index.html에서 링크시켜 줍니다.

해당 사이트에서 다운로드 버튼을 클릭하면 CSS 파일 자체에 접근해서 소스코드가 그대로 보여지므로, 다운로드 버튼을 마우스 우측 버튼으로 클릭해서 다른 이름으로 저장을 통해 다운로드 받으세요.

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Making Start-Up Web Page</title>
    <meta name="description" content="Step by step study for making web page">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/normalize.css">
</head>

스크립트 파일 작성하기

HTML과 CSS는 조건문, 연산, 함수, 변수 등을 정의하고 수행하는 기능이 없기 때문에 프로그래밍 언어의 범주에 속하지 않습니다. HTML에서는 문서의 구조를 잡고, CSS는 시각적 표현을 담당합니다. 여기에 특수한 액션이나 기능이 작동하도록 프로그래밍된 파일이 뒷받침 해 준다면, 비로소 하나의 온전한 웹 페이지가 됩니다.

물론 스크립트가 반드시 필요하지는 않습니다. 특별히 프로그램이 작동하지 않아도 멋진 디자인이나 양질의 컨텐츠로 충분히 훌륭한 웹 페이지를 만들 수 있지만, 전문 개발자가 아니더라도 편리한 기능을 수행할 수 있는 방법이 있기에 우리는 그것을 사용하려고 합니다.

자바스크립트 프레임워크 받기

개인적으로는 jQuery나 SCSS 같은 “프레임워크” 사용을 추천하지 않습니다. 프레임워크를 통해 지속적으로 문법적 편의를 제공받다보면, 본연의 문법을 잊게되고, 문제해결 능력도 떨어지게 됩니다. 다만, 아래에 서술하는 내용은 이제 막 웹을 공부하는 분들의 효과적인 학습과, 프레임워크가 어떤 것인지 체험할 수 있도록 하기 위함입니다.

웹 페이지에서 다룰 수 있는 유용한 프로그래밍 언어 중에 하나가 자바스크립트(Javascript)인데, 프로그래밍 언어가 그렇듯이 간단한 작동 하나 구현하는데에도 매우 많은 양의 코드를 작성해야 합니다. 그래서, 유용하거나 자주 사용하는 기능을 더 짧고 효율적으로 작성할 수 있도록 정리된 파일을 새로 만들어서 배포하곤 하는데, 이런 것들을 통털어 자바스크립트 프레임워크(Javascript Framework) 혹은 자바스크립트 라이브러리라고 부릅니다.

자바스크립트 프레임워크는 종류가 다양합니다. jQuery, Angular JS, Prototype 따위가 그러합니다. 여기서 가장 보편적으로 사용되고 있는 jQuery를 다운받아 링크시켜 봅니다.

먼저 jQuery 라이브러리 파일을 다운로드 받습니다. 해당 페이지에서 Download the compressed, production jQuery 3.1.0과 같이 적힌 링크를 클릭하면 됩니다. 3.1.0은 버전을 뜻하며, 업데이트 될 때마다 변경됩니다.
다운받은 jquery-3.1.0.min.js 파일을 startup > css 디렉토리에 저장합니다.
index.html 파일에서 스크립트 파일을 링크합니다.

<body>
    테스트용 본문입니다
    
    <script src="js/jquery-3.1.0.min.js"></script>
</body>

스크립트 파일을 스타일시트 처럼 head 태그에 포함시키지 않고, body 태그의 맨 마지막에 넣은 점을 주목하세요. 물론 head 태그에 넣어도 됩니다. 다만, HTML 문서의 내용과 스크립트 파일 중, 어떤 것을 먼저 로딩할 지 순서의 차이가 있습니다. 지금은 위 예문대로 따라합니다.

스크립트 파일을 HTML 문서의 어느 곳에 위치시키느냐에 따른 차이를 더 알고 싶다면 Clearboth의 자바스크립트 시작하기 부분을 참조하세요.

jQuery 스크립트 실행파일 작성하기

jQuery 라이브러리 파일이 링크됐다면, 이제 이 라이브러리에서 어떤 기능을 호출해서 사용할 지 결정하는 실행파일 스크립트가 있어야 합니다. 어떤 경우는 HTML 문서에서 곧바로 프로그램을 실행시키기도 하지만, 스크립트를 용이하게 관리하기 위해 실행 구문만 따로 모아서 HTML 문서에 링크시키는 것이 보편적입니다. 이 설명이 조금 난해하다면 단순히 따라하기만 해도 충분합니다.

문서편집기에서 새로운 문서를 만들고, 아래처럼 작성합니다.
```
jQuery(function($) {

    // jQuery 스크립트 정상 실행 테스트
    console.log("jQuery Ready!")

});
```
모든 jQuery 실행 스크립트는 1번과 6번 라인 사이에 작성하면 됩니다. 3번 라인과 같이 //로 시작되는 줄은 주석문입니다. 실행되는 구문이 아니라 작성자가 참고하기 위해 주석을 적을 때 사용합니다.

console.log("jQuery Ready!")는, jQuery 프레임워크가 제대로 링크되서 작동하는지 확인하기 위해 작성한 테스트용 구문입니다. jQuery가 문제없이 작동한다면 웹 브라우저의 콘솔 창에 jQuery Ready!를 출력하게 되는데, 콘솔 창을 여는 단축키는 구글 크롬 기준으로 Control + Alt + J 입니다. (Mac OS는 Command + Option + J).
작성 한 문서를 startup > js 디렉토리에 plugins.js라는 이름으로 저장합니다.
index.html 파일에서 스크립트 파일을 링크합니다.
```
<body>
    테스트용 본문입니다
    
    <script src="js/jquery-3.1.0.min.js"></script>
    <script src="js/plugins.js"></script>
</body>
```
plugins.js 파일을 jquery 라이브러리 파일보다 아래에 위치시킨 것에 주목하세요. 라이브러리 파일이 먼저 웹 브라우저에 로드 되어야 스크립트가 실행될 수 있으므로, 실행 파일이 라이브러리 파일보다 아래에 위치한 것입니다. 앞으로 추가되는 모든 자바스크립트 실행 파일들은 라이브러리 파일보다 아래에 위치해야 한다는 것만 유의하세요.
웹 브라우저에서 페이지를 새로고침 한 후, 콘솔창을 열어 jQuery Ready!가 출력 됐는지 확인합니다.

마치며

이제, 온전한 하나의 웹 페이지를 작성하는데 필요한 기본적인 조건들이 모두 갖춰졌습니다. 새로운 웹 페이지 혹은 웹 사이트를 제작할 때 항상 반복하게 될 작업입니다. 웹 브라우저 탭에 아이콘을 표시하는 파비콘이나 기타 잡다한 것들은 지금 중요한 부분이 아닙니다. 나중에 차근차근 늘려나가도 됩니다.

도움이 될 만한 링크

이 문서에서 설명은 했지만 깊이 있게 다루지 않은 일부 내용들에 대해 좀 더 자세한 내용을 다루는 링크를 엄선했습니다. 필자가 직접 끝까지 읽어보고 다른 기사들과 비교까지 마친 좋은 문서들이니, 깊이 있는 학습을 원하는 분들은 참고하기 바랍니다.

HTML5 Boilerplate : 웹 사이트를 제작하기 위한 기본적인 작업을 미리 설정해 둔 템플릿 파일입니다. 이 문서에서 했던 작업들을 좀 더 심도있게 구성한 파일이라고 볼 수 있습니다. 다만, 오로지 편의를 위해서 입문자가 이런 파일들을 사용하는 것은 추천하지 않습니다. 남들이 다 해준 것을 쓰기 보다는, 직접 이해해서 만들어 쓰는 것이 개인 발전에 도움이 됩니다.
지구별 안내서의 meta viewport 사용법 : 웹 브라우저에서 viewport를 처리하는 방법을 자세히 서술하고 있습니다.

1 Comment

Inline Feedbacks

View all comments

j1hwan

5 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 웹 페이지 만들기

이야기에 앞서

이 카드를 통한 성취 목표

작업용 디렉토리 만들기

HTML 문서 작성하기

CSS 문서 작성하기

스타일시트 만들기

HTML 문서와 연결하기

웹 브라우저에서 확인하기

웹 브라우저 갱신하기

CSS 초기화 하기

스크립트 파일 작성하기

자바스크립트 프레임워크 받기

jQuery 스크립트 실행파일 작성하기

마치며

도움이 될 만한 링크