1 2 3

Beautiful CSS

Featured Card · Web & UI ·

Basic Web template

웹 페이지 템플릿 : 기본

Visual Design and Art School Logo Academy of Art University Logo
Related :

교육 카드 개설 현황

Channels :
Units :
Draft :

사이드바 2

Meta Info:

  • 2014년 4월 1일
  • Hyunhwa Jeong
  • 3,488 Views
  • 5 Comments

Table of Contents

웹 페이지 템플릿 : 기본

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

이야기에 앞서

웹 페이지 템플릿은 HTML과 CSS 파일을 바탕으로 해서 하나의 완성적인 웹 사이트를 만들 수 있는 뼈대입니다. 이 템플릿은 사이드바 2개와 1개의 컨텐츠단을 총 다섯가지로 표현할 수 있는 CSS 프레임워크로 구성되어 있습니다. 아래 내용을 토대로 템플릿이 어떻게 구성되었는지 이해하고 사용하면 좋습니다.

기본형 웹 페이지 템플릿

미리보기 다운로드

웹 페이지 템플릿 설명

디렉토리 구조

웹 페이지 템플릿의 디렉토리 구조를 간단히 살펴보면 다음과 같습니다. js 폴더의 경우는 아직 생소할 수 있으나, 자바스크립트 관련 파일을 넣는 폴더 정도로만 이해하면 됩니다.

bfcss-framework/
├── img/
├── css/
│   └── normalize.css
├── js/
│   ├── vendor/
│   │   ├── equal.js
│   |   ├── html5.js
│   |   ├── jquery.js
│   |   ├── respond.js
│   ├── main.js
│   └── plugins.js
├── index-basic.html
├── style.css
├── apple-touch-icon-precomposed.png
└── favicon.ico
img 웹 페이지에 사용되는 이미지를 저장하는 폴더
css 부수적인 CSS 파일을 넣는 폴더
js 모든 자바스크립트 관련 파일을 넣는 폴더
js/vendor 자바스크립트 파일 중에서 개별적인 작동을 하는 스크립트만 넣는 폴더
index-basic.html 웹 페이지의 첫 화면용 HTML 파일
style.css 웹 페이지를 구성하는 CSS 파일

HTML 파일 설명

여기서는 index-basic.html 파일의 구성에 대해 살펴봅니다. 하나의 웹 사이트를 제작하는데 있어 거의 필수적이면서도 태그는 최소화했습니다. 아래 각 태그들이 어떤 용도로 사용되었는지 알아봅니다. 이 태그들은 용도만 알아두고 앞으로 새로운 사이트를 만들 때 그대로 붙여넣어 사용하면 됩니다.

META 태그

메타태그는 웹 브라우저에게 사이트의 제반 정보를 알려주는 용도로 사용되기 때문에 반드시 <head> 태그 안에 위치해야 합니다.

<meta charset=”utf-8″>는 HTML 문서에서 국가 언어로 UTF-8 포맷을 사용한다는 의미입니다. UTF-8 포맷으로 지정해 놓으면 한글은 물론 아랍어, 일본어, 한자와 같은 다양한 언어들을 웹 사이트에 모두 표시할 수 있습니다. 만일 EUC-KR과 같은 특정 국가 언어를 정의하게 되면 한국어 이외의 언어들은 모두 깨져서 표현됩니다.

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>는 인터넷 익스플로러가 호환성 보기 모드로 변경되지 않게 하는 동시에, 현재 설치된 인터넷 익스플로러의 버전으로 화면을 표시하게끔 해줍니다. 호환성 보기 모드가 작동되면 현재 설치된 인터넷 익스플로러의 버전이 10이라고 하더라도 버전 7로 화면을 표현하는데, 이러한 문제를 방지해 줍니다.

<meta name=”viewport” content=”width=1024″> 태그는 화면크기가 작은 기기 즉, 아이패드 같은 타블렛이나 스마트폰에서 화면을 표시할 때, 기기의 화면 크기를 1024px로 고정하고, 화면 안에 들어가는 모든 웹 사이트 요소를 그에 맞게 축소시킵니다. 이 개념을 이해하려면 화면 해상도에 관한 지식이 밑바탕에 있어야하지만, 여기서는 너비 980px짜리 웹 사이트가 화면 크기가 작은 기기에서 화면 양쪽에 여백없이 너무 딱 붙는 현상을 없애기 위해 추가했다는 정도로만 알고 넘어갑니다.


파비콘(Favicon) 링크

파비콘이란, 웹 브라우저 윈도우에 해당 웹 사이트의 아이콘을 표시해 주는 역할을 합니다. 또한, 즐겨찾기 했을 경우에도 아이콘을 표시해 줍니다. 만일 윈도우 창을 탭 형식으로 열어둔 경우에도 이 아이콘이 표시됩니다.
1319-1

<link rel="Shortcut Icon" href="favicon.ico"/>
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon.png">

첫번째 것은 PC용 파비콘을 설정하는 태그, 두번째 것은 아이폰이나 안드로이드용 휴대 기기에서 사용하는 태그입니다. PC용 파비콘 파일은 확장자가 .ico로 된 윈도우즈용 아이콘 파일로 저장해야합니다. 포토샵에서 너비와 높이가 32px인 아이콘을 만들고, www.convertico.com에서 해당 파일을 불러와 ico 파일로 변환하여 다운로드 받으면 됩니다.

ICO 파일을 포토샵에서 바로 만들 수 있으면 좋겠지만 별도의 플러그인을 다운받는 등 절차가 귀찮습니다. 위와같이 변환 사이트를 통해 만드는 것이 가장 편리합니다.

두번째 태그는 아이폰, 아이패드, 안드로이드와 같은 휴대용 기기에서 사용하는 아이콘으로서 파일 형식은 PNG를 사용하기 때문에 별도의 변환없이 포토샵에서 바로 만들어 사용할 수 있습니다. 너비와 높이가 135px인 이미지를 만들어 PNG-8 혹은 PNG-24 형식으로 저장하면 각종 휴대 기기에서 알맞은 사이즈로 표현해 줍니다.

이 아이콘 파일들의 파일명 즉 favicon.ico와 apple-touch-icon.png는 함부로 바꾸지 않는 것이 좋습니다. 똑같은 이름의 파일로 덮어쓰기해서 사용하세요.


스타일시트 링크

HTML 문서를 치장하는 스타일시트를 정의하는 방법은 여러가지가 있습니다.

<!doctype html>
<html>
<head>
<title>HTML 문서내에서 스타일시트 정의하기</title>
<style>
header { margin:0; }
</style>
</head>
<body>

</body>
</html>

위와같이 HTML 문서내의 <head> 태그안에 <style> 태그를 넣어 한 문서 내에서 정의하는 방식.


<!doctype html>
<html>
<head>
<title>HTML 문서에서 스타일시트 불러오기</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
 
</body>
</html>

style.css와 같이 CSS 코드만 별도의 파일로 분리하고 HTML 문서에서 CSS 파일을 링크로 불러오는 방식.


@import url('css/normalize.css');

body { margin:0; }
a { color: #8e939b; }

CSS 파일 안에서 또 다른 CSS 파일을 불러오는 방식


<header id="site-header" style="margin-bottom: 0">
    헤더입니다
</header>

마지막으로, HTML 문서의 각 태그에 별도로 style="margin:0"과 같은 형식으로 직접 정의하는 방식. 총 4가지로 분류됩니다. 이렇게 여러가지 방식이 존재하는 이유는, 각 방법마다 나름의 장점과 단점이 있기 때문에, 여러 상황에 맞춰 적절한 최선의 방법을 사용하기 위해서 입니다.

우리가 현재 사용하는 방식은 두번째로 알아본바와 같이 HTML 문서에서 별도의 CSS 파일을 링크로 불러오는 방식입니다.


자바스크립트 파일 링크

HTML 문서는 프로그래밍 언어가 아니기 때문에 특수한 동작을 하는 매커니즘이 없습니다. 그래서 자바스크립트라는 프로그램을 링크해서 그러한 동작들이 가능하게 합니다. 자바스크립트 역시 스타일시트 파일을 링크하는 것과 마찬가리로, 이미 특정 폴더에 저장된 파일의 경로를 적어 링크시킵니다.

<!--[if lt IE 9]>
<script src="js/vendor/html5.js"></script>
<script src="js/vendor/respond.js"></script>
<![endif]-->

다른 것은 보지 말고 일단 2번과 3번줄에 위치한 <script> 태그만 눈여겨 봅시다. 이 태그가 자바스크립트를 링크시키는 태그입니다. src="js/vendor/html5.js"와 같이 쌍따옴표 안쪽에 링크시킬 스크립트의 경로를 적어주면 됩니다.

html5.js는, HTML5를 지원하지 않는 옛날 브라우저, 즉 인터넷 익스플로러 6이나 7버전과 같은 구 버전 브라우저가 HTML5의 태그들을 인식할 수 있도록 해주는 자바스크립트 파일입니다.

respond.js는, CSS3 혹은 구 버전 브라우저가 인식하지 못하는 일부 CSS 속성을 사용할 수 있게 해줍니다. 따라서 이 2개의 파일은 기본적으로 항상 링크를 시키고 웹 사이트를 제작한다고 보면 됩니다. <script> 태그는 지금까지 보아온 태그처럼 홀태그가 아니라, </script> 처럼 슬래쉬 문자가 필요한 쌍태그입니다.


조건부 주석

조건부 주석이란, 특별한 조건 하에서만 코드가 작동하도록 해주는 기능을 합니다. 우리는 위에서 2개의 자바스크립트를 살펴봤고, 이 스크립트들은 구 버전 브라우저, 즉 인터넷 익스플로러 6과 7에서만 필요할 뿐, 최신 웹 브라우저들은 이 기능이 자체적으로 구현되기 때문에 굳이 스크립트 파일을 불러올 필요가 없습니다. 그래서 조건부 주석을 사용하여 구 버전 웹 브라우저에서만 작동하도록 했습니다.

<!--[if lt IE 9]>
<script src="js/vendor/html5.js"></script>
<script src="js/vendor/respond.js"></script>
<![endif]-->

위 코드에서 조건부 주석은 1번과 4번줄에 해당합니다. 1번 줄에서 조건을 제시하고, 4번에서 마무리하는 형식입니다. 조건부 주석은 코드가 조금 난해하게 생겼기 때문에, 원리만 이해하고 그냥 복사해서 붙여쓰면 됩니다.

if lt IE 9이란, 인터넷 익스플로러 9보다 낮은 버전인 6, 7, 8 버전일 경우, 조건부 주석이 품고 있는 스크립트 코드를 실행하라는 의미입니다. 그 외에 웹 브라우저에서는 스크립트를 실행하지 않으므로서 불필요한 파일을 로딩해서 웹 사이트 용량이 커지는 것을 방지할 수 있습니다. 조건부 주석은 여러가지 조건을 사용할 수 있지만, 실제로 사용되는 것은 제한적이어서 이 정도만 알고 있으면 됩니다.


구 버전 브라우저 대응용 경고문 표시

앞서 살펴본 조건부 주석을 사용한다면, 구 버전 웹 브라우저를 사용하고 있는 방문객에게 최신의 웹 브라우저를 사용해 달라는 메시지를 보여줄수도 있을겁니다. 
<!--[if lt IE 8]>
<p class="alert-ie tac">현재 웹브라우저에서는 사이트가 정상적으로 표시되지 않을 수 있습니다. <strong><a href="http://browsehappy.com/" target="_blank">여기를 클릭</a></strong>하여 더 좋은 웹 브라우저들을 알아보시겠습니까?</p>
<![endif]-->

위 코드에서는 조건부 주석으로 if lt IE 8을 사용했으므로, 인터넷 익스플로러 버전 8보다 낮은 6과 7 버전에서는 <p class="alert-ie tac">에 해당하는 내용을 화면에 보여줍니다.


중요성이 떨어지는 자바스크립트의 링크

우리는 이전에 자바스크립트를 링크시는데 있어 <script> 태그를 <head> 태그 안쪽에 위치시켰습니다. 그 이유로는, html5.js나 respond.js는 구 버전 웹 브라우저와의 호환성을 담당하는 중요한 스크립트이기 때문에 <head> 태그 안쪽에 넣어 웹 브라우저가 HTML 문서를 로딩할 때 가장 먼저 해석하도록 하기 위함입니다.

하지만 모든 자바스크립트를 <head> 태그에 넣는 것은 바람직하지 않습니다. 만일 웹 사이트를 이용하는데에 있어 스크립트가 제대로 작동하지 못하는 상황이 발생할 경우(스크립트 파일에 오류가 있거나 혹은 네트워크 상태가 불량하여 제대로 컴퓨터에 다운로드 되지 못하는 경우), <head> 태그 안쪽에 위치한 스크립트는 정상적으로 작동이 가능한 상태가 될 때 까지 이후의 컨텐츠들을 화면에 표시하지 못하고 기다리는 문제가 발생하기도 합니다.

그래서, 중요성이 크지 않은 기능성 스크립트들은 HTML 문서의 가장 마지막에 삽입하여, 해당 스크립트가 제대로 작동하지 못할 경우에도 다른 컨텐츠들을 화면에 표시하는 것에는 문제가 없도록 하는 것이 바람직합니다. 그러한 예로 삽입한 2개의 자바스크립트 파일은 아래와 같습니다.

<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/equal.js"></script>

jquery.js 파일은, 자바스크립트로 만들어진 프로그램을 작동하게 해주는 일종의 OS라고 생각하면 됩니다. 많은 프로그램 개발자들이 jQuery(제이쿼리)라는 자바스크립트 프레임워크를 사용해서 프로그램을 만드는데, 그런 프로그램들은 반드시 기본적으로 jquery.js 파일이 먼저 로딩되어야만 작동합니다. 쉽게말해서, jquery는 포토샵, 프로그래머들이 만든 다양한 기능의 프로그램들은 포토샵의 필터라고 생각하면 됩니다.

equal.js는 앞서 말한 다양한 프로그래머들이 만든 기능성 프로그램중 하나이며, 이 프로그램 파일은 jquery.js가 로딩되어 있어야만 작동합니다. 이 프로그램은 s1, s2, site-content 단을 모두 동일한 높이로 맞춰주는 기능을 합니다. 3개의 단 중 1개라도 높이가 길어지면 나머지 단도 모두 같은 높이로 맞춰집니다.

지금 살펴본 2개의 자바스크립트 파일은 기능이 작동하지 않더라도 웹 사이트 자체가 깨지거나 작동불능 상태를 유발할 정도의 문제를 가지지 않는 단순 기능성 프로그램이기 때문에 <head> 태그에 넣지 않고 HTML 문서의 가장 마지막에 위치시켰습니다.


자바스크립트의 개인화

프로그래머들은 자신이 만든 프로그램 파일이 사용자 손에 의해 수정되는 것을 좋아하지 않습니다. 원본 소스 파일을 수정하는 것은 사용자에게도 불편한 일입니다. 일단, 이해를 돕기위해 앞서 살펴본 equal.js 파일을 건드리지 않고 개인의 취향에 맞게 바꿔보도록 합시다.

equal.js는 웹 문서가 로딩되는 순간 자동으로 각 단의 높이를 동일하게 맞춥니다. 하지만 너무 빠른 속도로 맞추려다보니 간혹 제대로 맞춰지지 않는 경우도 발생합니다. 그래서 저는 equal.js의 효과가 HTML 문서 로딩 후 약 0.3초 후에 작동하도록 바꾸고 싶었습니다. 이 경우, equal.js 파일을 열어서 해당 소스 코드 부분을 수정해도 되겠지만, 원본 소스코드는 그대로 유지하면서, 수정하고자 하는 기능만 바꿀 수도 있습니다.

<script type="text/javascript">
jQuery(function($) {
    // 여기에 수정할 스크립트 부분을 입력합니다.
});
</script>

자바스크립트를 조절하기 위한 기본적인 틀입니다. 이 상태에서 // 여기에 수정할 스크립트 부분을 입력합니다. 부분에 개인화를 위한 스크립트 코드를 넣습니다. 이곳에 들어가는 스크립트 코드는 프로그래머가 알려주는 코드를 넣게됩니다. 대부분의 프로그램 개발자들은 이처럼 수정이 가능한 코드를 함께 제공하여, 사용자가 원하는 코드를 넣어 필요한 부분을 수정할 수 있게끔 해줍니다.

<script type="text/javascript">
jQuery(function($) {
    
    // 단 높이 동기화
	$(function(){ 
		setTimeout(function() {
			$('.equal').equalHeights(true);
		}, 300);
	});
    
});
</script>

결과적으로, 5번 줄부터 9번 줄까지가 프로그래머가 배포하는 수정 코드를 넣은 부분입니다. 이 코드를 넣으면 equal.js 파일이 약 0.3초 후에 작동합니다. 이 개인화 코드가 정상적으로 작동하려면, 당연히 equal.js가 미리 HTML 문서에 링크되어 있어야 합니다.


마치며

지금까지 기본적인 웹 템플릿의 구성요소를 살펴보았는데, 가장 난해한 부분이 아마 자바스크립트와 이를 개인화 하는 부분일 것입니다. 하지만 이 부분을 완전히 이해하려는 노력은 필요없습니다. 머리속으로 어느정도 개념만 이해하고 있다면, 실제로 여러분이 필요로하는 기능의 프로그램을 넣으려고 할 때 비로소 완전히 이해가 될것입니다.

Subscribe
Notify of
guest
5 Comments
Inline Feedbacks
View all comments
beautifulcss

IE 10 이상부터는 하위 버전 조건부 주석을 지원하지 않습니다. 이유는, 버전 11정도 되면 모던 브라우저로 인식되기 때문에 굳이 브라우저를 변경해야 한다는 경고가 필요 없기 때문입니다. 자바스크립트를 통해 강제로 경고를 띄울 순 있지만, 본연의 의미로 보자면 굳이 그럴 필요는 없습니다.

Reply
방울

구 버전 브라우저 대응용 경고문 표시 소스에서

IE 8 을 IE 11로 바꿔서 테스트 해봤는대요. (제가 11 사용해서)

안되는대요…. 왜 그런건지 알수 있을까요?

Reply
Minsu Kong

감사합니다!^^bbbb

Reply
unpacker

좋은 내용 감사 드립니다.

Reply
neokey

감사합니다.

Reply