알기 쉬운 과정으로 첫 웹사이트 디자인과 코딩하기

이 튜토리얼에서 우리는 단순한 과정으로 첫 번째 웹사이트를 디자인하고 코딩할 것입니다. 웹 표준을 준수하는 웹사이트를 제작할 도구를 제공하고 싶은 바람에서 초보자를 대상으로 하는 튜토리얼을 작성하게 되었습니다! 새로운 한 주입니다. 어쩌면 새로운 기술을 배울 시간이겠지요!

1단계 - 제작할 웹사이트

아래 보이는 간단한 웹사이트를 디자인하고 코딩할 것입니다. 눈부시게 예쁜 디자인...은 아닙니다. 하지만 표준에 맞는 코드 작성 방법을 가르치는 데 효과적입니다.

2단계 - 준비

준비 사항

저는 여러분이 과거에 웹사이트를 제작해 본 경험이 없거나 한두 번 해봤을 것으로 추측하고 이 튜토리얼을 작성했습니다. 그렇더라도 이 튜토리얼을 끝마치려면 다음과 같은 사항이 필요합니다.

• 포토샵이나 그와 유사한 이미지 편집기
• 코드 편집기 (나중에 상세히 나옵니다.)
• HTML의 작동 방식과 기초 문법 및 태그에 관한 기본적인 이해. 작업에 속도를 가하려면 w3 Schools에 있는 공식 리소스를 읽어보세요. 이 튜토리얼에서 요구하는 기초 지식을 배울 수 있습니다.
• css도 마찬가지입니다. 선택자의 동작 방식을 이해하고 기본 속성에 익숙해져야 합니다. 거듭 얘기하지만, w3 Schools는 가장 좋은 리소스입니다.
• 브라우저, 당연하지요. 저는 Firefox를 사용합니다. 여러분이 단계별로 보는 저의 스크린숏과 같은 사이트를 제작하기 원한다면, 저와 같은 브라우저를 사용하세요.

레이아웃

여기에서 우리는 간단한 웹사이트를 제작할 것입니다. 웹사이트에는 헤더(header), 콘텐츠, 사이드바, 푸터(footer)의 4가지 기본 구성 요소가 있으며, 레이아웃은 아래처럼 보입니다.

작업 과정을 간소화하고 아이디어를 정리할 목적으로 작업을 시작하기 전에 종이나 포토샵에 디자인의 레이아웃을 스케치해보는 것이 좋습니다.

3단계 - 시작하기

윤이 나는 새 포토샵 문서를 엽니다. 크기는 가로 1000px과 세로 1200px입니다. 나중에 언제든지 문서를 잘라 낼 수 있습니다. 저는 노트북에서 작업기 때문에 문서를 꽤 좁게 설정했습니다. 여러분이 더 넓은 공간에서 작업하고 싶다면 맘 편히 넓게 해서 작업하세요.

여기에서 화면 해상도와 최상의 웹사이트 너비에 대한 토론으로 빠지지 않겠습니다. 페이지의 콘텐츠 너비가 800px이라는 것만 알아두세요. 그 정도면 충분합니다. 자, 1000px인 문서에서 너비를 설정하기 위해서 가이드(guides)를 100px과 900px에 표시합니다. 디자인에 사이드바가 있는데, 저는 사이드바를 페이지 너비의 1/3로 정했습니다. 800의 2/3는 대략 530이니까 630px에 표시자 하나를 더 놓읍시다. 배경색은 #ebe8e8로 하겠습니다.

4단계 - 헤더

사각형 선택 도구를 선택하고 문서에서 크고 파란 사각형을 그리세요. 제가 그린 사각형은 높이가 대략 170px이고 색상은 #23b6eb입니다. 그다음에 얇고 어두운 회색 바를 페이지 맨 위에 그리세요. 저는 #5d5a5a를 사용했습니다.

5단계 - 하이라이트

이제 파란 헤더 영역에 하이라이트를 약간 넣겠습니다. 파란색 레이어 위로 클리핑 마스크를 생성합니다. 그런 다음에 크고 부드러운 (너비가 400px인) 브러쉬를 고르고, 파란 배경색보다 약간 더 밝은색을 선택합니다.

회색 바의 바로 아래, 문서의 중간 근처에서 브러쉬 끝을 살짝 클릭하세요. 엷게 퍼지는 상태를 유지하고, 하이라이트 색이 페이지 가장자리에 닿지 않게 합니다(나중에 명확해질 것입니다). 블랜딩 모드(blending mode)를 스크린(screen)으로 선택하세요.

6단계 - 내비게이션 바

이제 파란 사각형 밑에 다른 바를 추가하겠습니다. 회색으로 할 수 있지만, 그레디언트 오버레이를 넣겠습니다. 색상은 그다지 중요하지는 않아요.

레이어 스타일 패널에서 #e2e3e4부터 #bebdbd까지 그래디언트를 90도 각도로 넣습니다.

7단계 - 푸터

다음에 페이지 하단에 회색 사각형을 그립시다. 저는 페이지 맨 위에 있는 바의 회색보다 약간 더 어두운색을 골랐습니다. 

8단계 - 로고

배경

로고로 쓰일 사각형을 그리고, 마지막에 부착점(anchor point)를 추가하면서 그 부착점을 바깥 방향으로 드래그했습니다. 둥글게 처리된 부분을 직선으로 바꾸려면 꼭짓점에서 옵션을 클릭하세요.

다음에는 레이어 스타일에서 그래디언트 오버레이와 1px 획(stroke)을 추가합니다. 그래디언트 색상은 #aec457부터 #cdf399까지 입니다.

텍스트

텍스트는 크고 굵게 해주세요.

• 폰트: Myriad Pro
• 스타일: Bold
• 크기: 60px
• 색상: #36809a

깊이를 느끼기 위해 내부 그림자(inner shadow)를 넣습니다.

9단계 - 태그라인

그다음에 저는 간결한 태그라인을 넣었습니다.

• 폰트: Arial
• 스타일: Bold
• 크기: 30pt
• 색상: #e4dfdf

10단계 - 내비게이션

내비게이션 링크 텍스트는 크고 적당히 작성하고, 간격을 균등하게 나누고 가로로 정렬합니다.

• 폰트: Arial
• 스타일: Bold
• 크기: 30pt
• 색상: #676666

11단계 - 메인 콘텐츠

더미 콘텐츠를 붙여넣을 시간입니다. 저는 헤더(header) 태그를 사용했습니다. 그 태그는 h2이고 그보다 작은 헤더는 html ipsum에 링크를 걸 h3가 될 것입니다.

텍스트 박스를 페이지 너비의 첫 2/3 정도로 만드세요. 텍스트 스타일은 다음과 같습니다.

h2 헤더:

• 폰트: Arial
• 스타일: Bold
• 크기: 36pt
• 색상: #0e5d7a

h3 헤더:

• 폰트: Arial
• 스타일: Bold
• 크기: 24pt
• 색상: #444444

단락:

• 폰트: Arial
• 스타일: Normal
• 크기: 14pt
• 색상: #595858

"latest updates" 밑에 있는 날짜는 small 태그로 감싸지고, 폰트는 문단과 같지만 크기는 12pt입니다. 뉴스 아이템을 두 번 복사했습니다. 제가 게을러서요.

12단계 - 사이드바

링크

사이드바 영역 위에 사각형을 그리세요. 그 배경색은 #d4d6d3이고, 두께가 1px이고 색상이 #bebdbd인 획이 있습니다.

더 많은 더미 콘텐츠로 사이드바를 채웁니다. 제가 여기에서 사용한 무료 아이콘도 받으세요. 폰트 스타일은 다음과 같습니다.

h3 헤더:

• 폰트: Arial
• 스타일: Normal
• 크기: 24pt
• 색상: #044055

List 아이템:

• 폰트: Arial
• 스타일: Normal
• 크기: 18/14pt
• 색상: #373737

버튼

다음에는 "join our team" 버튼을 contributors 링크 아래에 놓겠습니다. 버튼은 로고와 같은 그래디언트에 두께가 1px이고 색상이 c7c7c7인 획을 적용한 사각형입니다. 텍스트 스타일은 다음과 같습니다.

• 폰트: Arial
• 스타일: Normal
• 크기: 24pt
• 색상: #434343

13단계 - 푸터

목업(mockup)을 완료하기 위해 저작권 텍스트 더미나 원하는 텍스트를 푸터에 넣습니다. 폰트 스타일은 다음과 같습니다.

• 폰트: Arial
• 스타일: Normal
• 크기: 14pt
• 색상: #e0e2e2

여기까지가 페이지 디자인이었습니다. 단순하죠. 그래도 오히려 단순하기 때문에 여러분이 나머지 작업 과정을 편하게 따라갈 것입니다.

포토샵 파일(PSD) 자르기

psd 파일을 완성했으므로 우리가 사용할 부분을 하나씩 잘라낼 시간입니다. 여기에서는 가능한 한 이미지 개수를 적게, 이미지 크기를 작게 사용할 생각입니다. 자, 헤더부터 시작해봅시다. 화면의 전체 너비와 상관없이 화면 전체에 꽉 차게 이미지를 늘리고 싶습니다. 그렇게 실행하기 위해 헤더에서 아주 작은 회색 픽셀을 잡고, 그것을 반복해서 화면을 채울 것입니다. 화면이 아무리 넓더라도 말이죠.

14단계 - 슬라이스 도구

아마 여러분은 지금껏 슬라이스 도구를 사용해 본 적이 없을 것입니다. 사용 방법은 매우 간단합니다. 그냥 파일을 웹용으로 내보낼 아주 작은 조각으로 자르세요.

헤더

자, 헤더에서 작은 조각으로 잘라봅시다. 사각형  마키(marquee) 도구처럼 슬라이스가 활성화되도록 그것을 클릭하고 드래그합니다. 하이라이트 영역이 들어가지 않게 조심스럽게 이미지 가장자리에서 조각을 취하세요.

이제 작고 가느다란 조각이 있으니 x축을 따라서 반복하면 됩니다. 그러나 하이라이트 영역은 반복되지 않으므로 통째로 잘라내야 합니다. 800px 너비로 표시한 두 개의 가이드 사이로 헤더 부분을 잘라 주세요.

푸터

위와 같은 과정으로 푸터에서 가늘고 긴 사각형 영역을 잡고 잘라냅니다. 

나머지 부분

"subscribe" 아이콘과 "join our team" 버튼 이미지가 더 있어야 합니다.

아이콘과 로고는 형태가 불규칙하기 때문에 배경이 투명한 .png 파일로 저장하겠습니다. 나중에 다시 돌아와서 개별적으로 작업할 것입니다.

자, 버튼을 자르는 데 헤더와 푸터와 같은 테크닉을 사용하면 됩니다. 하지만 이번에는 얇은 조각 하나만 필요합니다. 슬라이스 조각을 만들 때 반드시 1px 획이 포함되지 않도록 해주세요(그 획을 후에 추가할 예정입니다). 그러려면 이미지를 최대한 확대해서 봐야 할지도 모릅니다.

15단계 - 웹용으로 내보내기

이미지를 모두 잘랐으므로 이제는 최적화된 jpeg로 저장하고 유용한 폴더에 넣읍시다.

웹과 디바이스용 파일/저장 메뉴로 갑니다. 팝업 윈도우에서 shift 버튼을 누른 채 클릭해서 조각을 하나하나 선택합니다(한 번 더 말하지만, 화면을 확대하고 싶을 거예요). "preset" 드롭다운 메뉴에서 JPEG와 High를 선택하고 "convert to srgb"에서는 체크박스를 해제합니다. 그런 다음에 "save"를 누르세요.

팝업으로 뜬 윈도우에서 이미지 이름을 적고 저장할 폴더를 선택합니다. 우선 저는 데스크톱에 저장하겠습니다.

"image only"와 "default settings", 그리고 "selected slices only"로 설정되었는지 확인하세요.

다음에는 파일을 저장한 위치를 확인하세요. 이미지를 하나씩 보는 대신에 이미지가 전부 들어있는 "images"로 분류된 폴더를 찾으세요.  컴퓨터는 이미지마다 번호를 붙입니다. 아무런 쓸모가 없지만요. 저장한 이미지가 맞는지 확인하고, 이미지 이름을 적절하게 고쳐 주세요.

자, 귀찮은 아이콘과 로고로 돌아갑니다. 배경 레이어가 모두 투명한지 확인한 다음에 슬라이스 도구를 다시 꺼내 각각의 아이콘과 로고를 작은 사각형 모양으로 잘라냅니다.

바로 앞에서 jpeg 파일로 저장했던 것처럼 웹용으로 내보내는 과정을 똑같이 진행하겠습니다. 다만 이번에는 "preset" 드롭다운 메뉴에서 PNG-24를 선택하고 "transparency" 체크박스를 체크해 주세요. 저장된 파일 이름도 올바르게 고쳐주세요. 그러면 images 폴더가 아래와 같이 보입니다. 

잘했어요. 또 한 단계를 마쳤습니다. 우리는 psd 파일을 잘라냈고, 필요한 이미지를 모두 준비했습니다. 아직 포토샵을 닫지 마세요. 색상과 폰트와 크기 등을 포토샵에서 계속 작업해야 하니까요. 

3부 - HTML

16단계 - 시작하기

html을 작성할 시간입니다. 여러분에게는 코드 편집기가 우선 필요합니다. 코드 편집기는 흔히 개인의 취향에 따라 달리 사용됩니다.
하지만 저는 무료 편집기로 시작하라고 권해드립니다. 첫 번째 코드 편집기로서 mac과 PC용 Komodo edit를 추천합니다. 초보자와 숙련자에게 적합한 기능이 많이 있습니다. 
최고의 기능 중 하나는 문법 검사(syntax-checker)입니다. 워드 프로세서에 있는 맞춤법 검사와 같으며, 사소한 실수라도 발견해서 설명해 줍니다.
PC용으로는 더 많은 선택 사항이 있습니다. 저는 잘 알지 못합니다. 대신 앤드루 버제스(Andrew Burgess)의 글 22가지의 간결한 윈도우용 코드 편집기를 읽어보세요.

이 튜토리얼에서 Komodo edit을 사용하겠습니다. 하지만 모든 편집기에서의 원리는 동일합니다.

17단계 - 폴더 만들기

제일 중요한 것을 먼저 해야겠죠. 사이트와 관련 있는 모든 파일을 어디에 넣을지 정해야 합니다. 웹사이트 제작용으로 사용할 폴더를 생성하세요. 저는 폴더명을 "MySite"로 했습니다. 이 폴더에서 앞에서 자른 이미지를 넣을 다른 폴더를 만듭니다.
폴더명을 "images"로 하겠습니다. 이제 코드 편집기를 엽니다. 이 부분은 여러분이 사용하는 소프트웨어에 따라 약간 다를 수 있습니다.
여러분이 Komodo에서 튜토리얼을 따라 작업하면, "create new project" 메뉴를 선택하고 "MySite" 폴더에 .kpf 파일로 저장/이동하세요. 저장한 파일을 열면, Komodo의 가장자리에 있는 파일 브라우저에서 폴더 내용을 보여줍니다.
다음에 프로젝트 파일에서 오른쪽 클릭을 하고 "add"까지 스크롤 한 뒤 "new file"을 선택하세요. 팝업으로 뜨는 윈도우에서 "html(xhtml)"을 선택하고 파일 이름을 "index.html"로 적습니다.

다른 편집기를 사용하면 작업 과정은 비슷하겠지만, 핵심은 동일합니다. 즉, index.html 파일을 생성하고 이미지 폴더와 함께 "MySite" 폴더에 그 파일이 들어있어야 합니다.

18단계 - index.html 파일 만들기

처음에 해야 할 작업은 doc type과 문자 인코딩을 명시하고 <html> 태그를 생성하는 것입니다. 대다수 편집기가 여러분을 대신해 이 작업을 하며, 작업 된 코드는 다음과 같이 보입니다.

1

<?xml version="1.0" encoding="UTF-8"?>

2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

4

</html>

<html> 태그 사이에 "head" 섹션이 있어야 합니다. 그 섹션은 웹사이트 body에서 보이지 않는, 사이트에 관한 온갖 중요한 정보를 담고 있습니다.
이 시점에 우리가 담을 정보는 페이지 제목이며, 다음과 같습니다.

1

<head>

2

  <title>MySite</title>

3

</head>

논리적으로 head 아래에 body를 넣습니다. 이 또한 태그 안에 포함됩니다. 잘했습니다. 다음은 지금까지 작업한 코드입니다.

1

<?xml version="1.0" encoding="UTF-8"?>

2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

4

   <head>

5

      <title>MySite</title>

6

  </head>

7

  <body>

8

     <!-- content goes here -->

9

  </body>

10

</html>

이것은 페이지의 기본 설정입니다. 어쩌면 나중에 다시 사용할 용도로 이 코드를 어딘가에 저장해 놓고 싶을 거예요.
자, 앞에서 헤더, 콘텐츠, 사이드바, 푸터 섹션에 대해 말한 것을 기억하세요?
좋아요. 이제 섹션마다 <div> 사이에 놓고 적당한 id를 부여하겠습니다.

1

<body>

2

    <div id="header">

3

    </div><!--end header -->

4

5

    <div id="content">

6

    </div><!--end content-->

7

8

    <div id="sidebar">

9

    </div><!--end sidebar-->

10

11

    <div id="footer">

12

    </div><!--end footer-->

13

14

</body>

메모: 여러분이 코드 작성을 시작할 때 </div> 뒤에 주석을 작성하는 것은 정말 좋은 생각입니다. 그렇게 하면 div 계층 구조를 잘 파악할 수 있습니다.

이제 psd 파일을 봅시다. 앞에서 우리가 푸터와 헤더 조각을 양측으로 무한 반복해서 확장시켰던 방법을 기억하세요?
이 요소들을 확장시킬 방법이 필요합니다.
그와 동시에 메인 콘텐츠("content" "sidebar")가 화면 중심에서 특정한 너비 안에 들어있어야 하고요.

이렇게 하려면 확장되는 요소를 유지할 큰 div와 메인 콘텐츠를 담을 div가 있어야 합니다.
푸터에 있는 텍스트도 중앙에 있다는 사실을 알아 두세요. 그렇기에 푸터에서도 같은 작업 과정으로 진행해야 합니다. 
이를 위해 앞에서 작업했던 div를 다른 div로 감싸야 합니다. 우리에게 기본 섹션 2개와 메인 섹션, 푸터 섹션이 있습니다.
크고 너빗값이 없는 div 하나에 모든 섹션을 담을 것입니다.
그리고 너빗값이 정해지고 중앙에 위치하는 div가 각각의 섹션 콘텐츠를 둘러쌀 것입니다.

메인과 푸터 콘텐츠에는 하나의 규칙을 적용하고 싶기 때문에 id 대신 (혹은 id와 함께) class를 사용하겠습니다.
즉, 하나의 클래스로 모든 div를 정의하는 규칙을 만들겠다는 말이지요.

그래서 메인 콘텐츠를 id가 "main"인 div가 감싸게 하고, 푸터를 id가 "footer"인 div가 감싸게 할 것입니다. 구조를 시각화하는 것이 도움된다면, 아래 그림을 보세요.

마크업은 아래와 같습니다.

1

<body>

2

    <div id="main">

3

        <div id="header">

4

        </div><!--end header -->

5

6

        <div id="content">

7

        </div><!--end content-->

8

9

        <div id="sidebar">

10

        </div><!--end sidebar-->

11

12

    </div><!--end main--> 

13

14

    <div id="footer">

15

    </div><!--end footer-->

16

17

</body>

이제는 "container" class가 정의된 div로 섹션을 감싸줍니다.

1

2

<div id="main">

3

    <div class="container">

4

         <div id="header">

5

         </div><!--end header -->

6

7

         <div id="content">

8

         </div><!--end content-->

9

10

         <div id="sidebar">

11

         </div><!--end sidebar-->

12

13

    </div><!--end main container--> 

14

</div><!--end main-->

15

16

<div id="footer">

17

    <div class="container">

18

    </div><!--end footer container--> 

19

</div><!--end footer-->

둘러싸는 div가 쓸모없이 보인다는 것을 저도 알고 있습니다. 하지만 페이지에 스타일을 적용할 때는 중요해집니다.

19단계 - 콘텐츠 넣기

페이지 구조가 잡혔으니 페이지 위로부터 아래까지 콘텐츠를 넣겠습니다. 다음은 페이지를 구성할 html 요소의 밑그림입니다. 

헤더

제일 위에 헤더가 있고, 헤더 안에 로고, 태그라인, 내비게이션 메뉴의 메인 요소 3가지가 있습니다.
헤더에 사용할 div를 작성하고 간결하게 유지해보지요. 로고와 태그라인을 각각의 div에 넣습니다.

1

2

<div id="header">

3

	<div id="logo">

4

    	</div>

5

	<div id="tagline">

6

    	</div>

7

</div><!--end header -->

페이지에서 가장 중요한 헤딩이기 때문에 로고는 <h1> 태그 안에 넣습니다. 태그라인에는 선택 사항이 더 많습니다. 물론 사이트에서 얼마나 중요한지에 따라 다르겠지만요. 저는 이 경우에 <h3> 태그를 사용하겠습니다.

내비게이션의 경우, 그 모범 사례에서는 ul 태그 안에 메뉴 아이템을 배치하고, 앵커(anchor) 태그로 아이템을 둘러쌉니다.
작성된 코드가 아래 있습니다.

1

<div id="header">

2

    <div id="logo">

3

   	 <h1>Logo</h1>

4

    </div>

5

    <div id="tagline">

6

    	<h3>And a little tagline, too.</h3>

7

    </div>

8

    <ul id="menu">

9

    	<li><a href="#">Home</a></li>

10

        <li><a href="#">About</a></li>

11

        <li><a href="#">Portfolio</a></li>

12

        <li><a href="#">Contact</a></li>

13

    </ul>

14

</div><!--end header -->

메모: 앵커 태그의 "href" 속성값은 보통 링크가 걸리는 곳을 명시하지만, 이 경우에는 파운드 기호(#)를 넣는데 이는 "페이지 상단으로 가는 링크"라는 의미입니다.

메인 콘텐츠

메인 콘텐츠 영역을 보면, 4가지의 각기 다른 스타일이 있습니다. 상단에 큰 헤딩과 그보다 작은 헤딩,
뉴스 아이템의 제목에 사용할 그보다 더 작은 헤딩, 게다가 단락 몇 개와 작디작은 뉴스 항목에 있는 날짜가 있습니다.
우리는 이를 개별적으로 <h2>, <h3>, <h4>, <p>, <small>이라 부르지요. 이제 콘텐츠를 대충 붙여넣습니다. 이 작업은 재미없지만, 엄청 쉽습니다.

1

<div id="content">

2

        <h2>Lorem ipsum, Dolor sit</h2>

3

    	<h3>Nullam vulputate felis id odio interdum nec malesuada mi pretium. </h3>

4

    	<p>Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel. 

5

    		Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget venenatis nisl. 

6

    		Vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus. 

7

   	    	Curabitur et ultricies quam. Aenean pretium aliquet velit, gravida vulputate urna tempus vel.  </p>

8

    	<p>Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel. 

9

    		Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget venenatis nisl. 

10

   	    	Vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus. Curabitur et ultricies quam. Aenean pretium aliquet velit, 

11

		gravida vulputate urna tempus vel. Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. </p>

12

    <div id="news">

13

    	<h3>Latest Updates</h3>

14

    	<h4>Vestibulum id nulla eu sapien pellentesque</h4>

15

    	<small>June 1, 2009</small>

16

    	<p>Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arcu, 

17

        	facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sodales. 

18

   	    	Etiam laoreet ante in purus laoreet id malesuada dui pretium.<a href="#"> Read More</a></p>

19

   	<h4>Vestibulum id nulla eu sapien pellentesque</h4>

20

   	<small>June 1, 2009</small>

21

   	<p>Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arcu, 

22

   	   	facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sodales. 

23

      	Etiam laoreet ante in purus laoreet id malesuada dui pretium.<a href="#"> Read More</a></p>

24

    </div><!--end news-->

25

</div><!--end content-->

뉴스 아이템마다 마지막에 "Read More" 텍스트가 들어간 앵커 태그를 추가했습니다.

사이드바

이제 사이드바로 이동합니다. 사이드바에는 3가지 요소가 있으며, 요소마다 div로 감쌀 것입니다.
각각의 div에는 <h3> 헤더와 ul 태그가 들어 있으며, 목록 아이템마다 앵커 태그로 둘러쌀 것입니다.
계속해서 텍스트를 복사하고 붙여넣으세요. 그러면 다음과 같이 보입니다.

1

<div id="sidebar">

2

                <div id="subscribe">

3

                    <h3>Subscribe!</h3>

4

                    <ul>

5

                        <li><a href="#">Subscribe via RSS</a></li>

6

                        <li><a href="#">Get Email Updates</a></li>

7

                        <li><a href="#">Follow us on Twitter</a></li>

8

                    </ul>

9

                </div>

10

                <div id="popular">

11

                    <h3>Popular Items</h3>

12

                    <ul>

13

                        <li><a href="#">Lorem ipsum dolor site amet</a></li>

14

                        <li><a href="#">Ulvinar tincidunt, Mauris id</a></li>

15

                        <li><a href="#">Lorem ipsum dolor site amet</a></li>

16

                        <li><a href="#">Proin tempor erat sit tene</a></li>

17

                    </ul>

18

                </div>

19

                <div id="contributors">

20

                    <h3>Contributors</h3>

21

                    <ul>

22

                        <li><a href="#">John Smith, freelance writer</a></li>

23

                        <li><a href="#">Jack McCoy, designer</a></li>

24

                        <li><a href="#">Lenny Briscoe, editor</a></li>

25

                        <li><a href="#">John Smith, martketing</a></li>

26

                    </ul>

27

                    <a href="#">Join Our Team</a> 

28

                </div>

29

            </div><!--end sidebar-->

푸터

브라우저에서 확인하기 전에 푸터 내용도 추가합니다. 잠깐이면 작업이 끝납니다.
텍스트에 사용하려는 기호는 html에서 특수한 코드로 되어 있다는 사실을 알아두세요. 예를 들어, 저작권 기호는 ©처럼 코딩합니다. 

1

<div id="footer">

2

        <div class="container">

3

            <p>Copyright © 2009  MySite <br />

4

            All Rights Reserved</p>

5

        </div><!--end footer container--> 

6

    </div><!--end footer-->

마크업 작업도 마쳤습니다. 브라우저에서 한번 봅시다.

꽤 괜찮아 보이지 않아요?  글쎄요. 아직은 아니죠. 그래도 필요한 정보는 모두 들어있고 스타일을 적용할 준비도 마쳤습니다.

4부 - CSS

20단계 - CSS 넣기

바로 여기에서 마술이 벌어집니다.
웹사이트 폴더에 새 파일을 만드세요. 파일명을 "style.css"입니다.
이제는 브라우저에게 이 css 파일이 index.html 파일에 종속되었다고 얘기해야 합니다. 얘기할 방법으로 우리는 "link href" 태그를 이용해 링크를 걸 것입니다. 아래 코드 한 줄을 <head> 섹션의 title 아래 넣어줍니다.

1

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

이제 html 파일에서 css 파일로 접근할 수 있습니다. 그렇게 되면 css에서 어떤 코드를 변경하든지 html 파일에 영향이 미치게 됩니다.

21단계 - 기본 정리

웹사이트에는 금세 고칠 수 있는 한두 가지 보기에 안 좋은 것이 있습니다. 기본 폰트를 바꾸고 싶고, 콘텐츠의 너비를 800px로 하고 중앙에 오게 하고 싶으며, 요소 사이에 있는 여백을 없애고 싶죠.

페이지의 body 안에 있는 전체 텍스트를 위한 폰트를 고르겠습니다. 구체적으로 폰트를 명시하지 않으면 다음과 같이 표시됩니다.

1

body { font-family: Arial, Helvetica, sans-serif; }

다음으로 "container" class가 있는 div의 너비와 마진을 정합시다.

1

.container {

2

    width: 800px;

3

    margin: 0 auto; 

4

}

margin: 0 auto 속성은 약칭이며, 이는 top에 여백이 없고 수평선 상에서 자동으로 가운데에 위치한다는 의미입니다. 
브라우저에서 한번 봅시다.

훨씬 보기가 좋네요. 다음 단계에서 더 안 좋게 보이더라도 저와 함께 해주세요.

CSS 초기화

모든 브라우저는 요소별로 padding과 margin의 기본값을 사용합니다. 스타일이 적용되지 않은 페이지는 괜찮게 보이지만, 우리 스타일에는 방해가 될 뿐이지요.

지저분하게 만드는 이 margin들을 모두 제거하기 위해 매우 간결한 css reset을 사용하겠습니다. 이는 우리가 사용할 요소들에 적용될 기본 padding과 margin 값을 제거하는 규칙입니다. 아래 내용을 css 파일의 상단에 넣으세요.

1

'

2

body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }

이제 화면을 봅시다.

22단계 - 헤더

초기화하고 나서 모든 요소가 서로 밀착되었으니 이제 우리가 제어하면 됩니다! 우리 스타일을 전반적으로 다시 추가하겠습니다.
까다로운 부분을 먼저 제거해 봅시다. 헤더에 있는 배경 이미지 설정 부분입니다.

헤더에서 가져온 반복될 조각으로 시작할게요. 반복되는 이미지는 너빗값이 없는 "main" div 안에 있게 할 것입니다. 우리는 이미지가 있는 위치와 더불어 배경 이미지로 설정하기 위해 브라우저에게 무엇을 할지(repeat, no-repeat)를 알려주어야 합니다. 고로 "background" 속성을 사용하고, 이미지 위치 혹은 이 경우에 'url':로 명시합니다. 이미지는 images 폴더에 있으므로 다음과 같이 그 위치를 명시해 주세요.

1

2

url (images/header_slice.jpg)

그러고 나서 이미지를 x축으로 반복하겠다고 명시하세요.

1

#main {

2

    background: url(images/header_slice.jpg) repeat-x; 

3

}

화면에서 확인해 보지요.

멋지지 않나요? 브라우저를 넓혀보세요. 배경 이미지가 나오고 또 나오고... 그런데 파란 바에 하이라이트가 아직 없죠. 헤더에서 800px을 잘라냈는데 그 부분을 "container" div 안에 넣으면 됩니다. 문제가 있네요. div 2개(main div와 footer div)가 있어서 id가 "main"인 div 안에 "container" class가 있는 div라고 확실하게 명시해야 합니다.
앞에서 한 것과 같은 방식으로 이미지를 설정해 주세요. 다만, 이번에는 "no-repeat"으로 적어야 합니다.

1

#main .container {

2

    background: url(images/header.jpg) no-repeat; 

3

}

화면을 한번 보세요.

훌륭해요! 하이라이트가 원하는 위치에 있네요. 반복되는 배경과 자연스럽게 어울립니다.

23단계 - 로고 이미지 대체하기

로고가 참 복잡합니다. 그렇죠? 이미지 배경과 내부 그림자가 적용된 html이 아닌 폰트를 사용하겠습니다. css에서는 작업하지 못합니다. 그래서 텍스트를 이미지로 대체해야 합니다.
"<h1> 줄에 이미지를 넣으면 안 되나요?"
여러분은 그렇게 질문하겠지요. 인터넷에서 <h1> 헤더는 기본적으로 페이지 '제목'이며, 중요하고 강력한 로봇(구글)들이 검색어를 찾을 때 이 속성을 스캔합니다. 사이트에 <h1> 헤더가 없으면 엉뚱한 단어(kalamazoo)로 부르게 될 수 있어요. 그 단어에 대한 검색 결과에서 나타나지 않을 것입니다.
이보다 더 좋고 다양한 방법이 있습니다. (여기를 보세요. 특히 8단계의 방법을요) 그렇지만 우리가 적용하는 방법은 현재 상황에서 가장 단순하면서 적절합니다.

자, 이 문제를 해결하기 위해서는 마크업에서 <h1> 헤더를 유지하면서 동시에 우리가 원하는 이미지를 사용하도록 "image replacement"라고 부르는 조금 우회적인 방법을 쓰겠습니다. 우선, #logo div에 배경으로 이미지를 넣습니다.

1

#logo {

2

    background: url(images/logo.png) no-repeat;

3

}

브라우저에서 보면 로고가 절반으로 잘려져 있는 것이 보입니다. 로고 영역을 분명하지 않아서 그런 것입니다. 이미지 크기를 명시해서 이 문제를 해결할 수 있습니다.

1

#logo {

2

    background: url(images/logo.png) no-repeat;

3

    height: 84px;

4

    width: 235px; 

5

}

한결 낫네요. <h1> 텍스트가 여전히 보이지만, 이것도 고칠 수 있어요! 해야 할 작업은 text-indent 값을, 터무니없지만, -9999px처럼 페이지를 벗어나게 설정해서 검색 엔진 로봇만 빼고 아무도 텍스트를 보지 못하게 하는 것입니다. 

1

#logo h1 {

2

    text-indent: -9999px; 

3

}

한번 확인해보죠. 로고 이미지가 <h1> 텍스트가 있던 자리에 행복하게 놓여 있군요. 모든 게 맨 위로부터 답답하게 뭉쳐 있어서 여전히 좋지 않게 보여요. 페이지에서 아이템을 원래 위치에서 이동시킬 때 padding과 margin 속성값을 사용해 줍니다.  두 가지 속성을 사용해서 어떤 변화가 생기는지 알아볼게요.

우선 h1 태그 위에 margin을 넣겠습니다. 포토샵의 눈금자(ruler)를 이용해 차이가 얼마나 나는지 알아볼 수 있습니다.

1

#logo h1 {

2

    text-indent: -9999px;

3

    margin-top: 40px; 

4

}

이런! 로고를 옮기려고 했는데, 페이지 전체가 옮겨졌군요! 대신 padding 값을 조정해 봅시다.

1

#logo h1 {

2

    text-indent: -9999px;

3

    padding-top: 40px; 

4

}

자, 화면에서 확인해 보세요. 이 빌어먹을 것이 다시 원위치로 돌아갔어요! 왜냐하면, margin 속성은 전체 요소를 이동시키지만, padding은 배경을 남겨둔 채 요소에 있는 콘텐츠만 이동시키거든요. 그러니까 만약에 화면 너비가 19999px이라고 가정해 보면, 화면 밖으로 추방된 <h1> 헤더가 40px 아래로 한 것을 보게 될 것입니다. 하지만 그건 우리가 하려는 게 아닙니다.

그러므로 로고의 배경 이미지를 움직이게 하기 위해서는 그것을 감싸는 div를 이동해야 합니다. 로고 전체의 div는 헤더 div의 "콘텐츠(content)"이기 때문이지요. 적용해 봅시다.

1

#logo h1 {

2

    text-indent: -9999px;

3

}

4

5

#header {

6

    padding-top: 40px; 

7

}

확연히 달라졌어요! 인제야 psd에 있는 로고의 위치와 똑같이 보입니다. 저 태그라인을 고치지 않는 한...말이죠.

24단계 - 태그라인에 float 적용하기

이번에는 태그라인을 로고 옆으로 옮기는 방법을 찾아 봐야 합니다.  문제는 html 요소들은 본질적으로 페이지 위에서 아래로 쌓이는 식의 수직 정렬이 된다는 것입니다.
이를 해결하기 위한 옵션이 한두 개 있으나 저는 float를 사용할 거예요. 조금 까다롭지만 일단 익숙해지면 정말 유용합니다.

그럼 float란 무엇일까요? 글쎄요. 쉽지 않네요. 기본적으로 요소에 'float'를 넣으면, 그 요소는 페이지나 어떤 요소의 측면에 붙습니다. 페이지의 일반 "흐름"에서 벗어나게도 하지요. 이해가 안 가세요? 제가 보여드릴게요.

1

#logo {

2

    background: url(images/logo.png) no-repeat;

3

    height: 84px;

4

    width: 235px;

5

    float: left; 

6

}

자, 보시다시피 태그라인이 로고의 측면에 붙었습니다. 그런데 내비게이션이 같이 딸려갔네요.
저는 이렇게 생각합니다. (div나 h1 헤더 혹은 이미지 같은) 요소가 아무리 작아도 크고 긴 가로형 바와 같이 요소의 모든 측면에 시각적으로 공간을 차지한다고요.

모든 요소가 빈 공간을 그대로 놔둔 채 바로 아래에 놓이는 이유이지요. 요소에 float를 적용할 때는 측면의 불필요한 공간을 날려버리면서 영역을 한정시켜 다른 요소들이 그 측면에 오게 합니다.
여러분은 float가 어떻게 동작하는지 이해했습니다. 그럼 현재 상황을 어떻게 고칠 수 있을까요? 우선은 페이지 "흐름" 밖에 놓이도록 태그라인에 float를 적용해서 분리시켜야 합니다. 

1

#tagline {

2

    float: left; 

3

}

브라우저에서 재빨리 확인하세요. 화면을 보니 더 좋게 보이지 않군요. 이제는 메뉴 항목이 태그라인 주변을 감싸고 있네요! 요소에 float를 적용한 다음에 화면의 흐름을 다시 복원하는 게 여기에서 필요합니다. 그것을 하는 방식은 한두 가지가 있지만, 가장 간단한 방법을 사용하겠습니다. index.html 파일로 가서 float를 적용한 div 아래 새로운 div를 추가하세요. 이 div에 class나 id를 넣지 않고 스타일(그렇죠. 인라인 스타일이지만 아주 아주 짧습니다)로 clear 속성을 줄 것입니다.

1

<div id="header">

2

    <div id="logo">

3

    	<h1>Logo</h1>

4

    </div>

5

    <div id="tagline">

6

    	<h3>And a little tagline, too.</h3>

7

    </div>

8

9

<div style="clear:both"></div>

html 파일을 저장하고 브라우저에서 결과를 확인해 보세요. 로고 아래에 메뉴가 있고 동시에 태그라인이 로고 옆에 있습니다. 이제 해야 할 작업은 태그라인을 잘 꾸미고 위치해야 할 곳에 있게 하는 것입니다. 포토샵에서 폰트 스타일을 복사하는 것부터 시작하세요.

1

#tagline h3 {font-size: 30px; color: #e4dfdf; }

그러고 나서 위와 왼쪽에 padding을 약간 주세요.

1

#tagline {

2

    float: left;

3

    padding-top: 20px;

4

    padding-left: 20px; 

5

}

화면으로 봅시다. 이제는 진전이 보이네요!

25단계 - 내비게이션 바

이제는 내비게이션 메뉴를 일직선으로 만들어야 합니다. 그래도 중요한 것을 먼저 해야 하니까 폰트에 스타일을 적용하겠습니다. 폰트에 맞춰서 메뉴 사이에 간격을 둘 수 있습니다. 앵커 태그 목록의 폰트에 스타일을 적용할 때는 목록 항목을 참조할 뿐만 아니라 그 안에 앵커 태그를 넣도록 명시해야 합니다. 특정 ul 태그를 명시해서 다른 태그들과는 별도로 동작하게 할 것입니다. 밑줄과 글머리 기호(bullet point)도 없애야 하고요.

1

ul#menu {

2

    list-style: none; 

3

}

4

5

ul#menu li a {

6

    font-size: 30px;

7

    color: #676666;

8

    text-decoration: none; 

9

}

아주 좋아요. 이제는 모든 링크를 한 줄로 나란히 정렬하는 방법을 찾도록 할게요. 어떻게? float로요! 메뉴 목록의 항목 전체에 float left를 설정하겠습니다. 그러면 각각의 항목이 서로 옆으로 붙습니다.

1

ul#menu li {

2

    float: left; 

3

}

브라우저에서 보면, 이전에 float를 적용했던 항목에서 생겼던 문제와 같은 문제가 있다는 것을 알게 됩니다. 즉, 다른 요소들이 항목 주위로 겹쳐지게 되는 것이죠. 이전과 같이 ul 다음에 초기 상태로 만드는 div를 삽입하면 됩니다.

1

<ul id="menu">

2

	<li><a href="#">Home</a></li>

3

	<li><a href="#">About</a></li>

4

	<li><a href="#">Portfolio</a></li>

5

	<li><a href="#">Contact</a></li>

6

</ul>

7

<div style="clear:both"></div>

8

</div><!--end header -->

전체 메뉴 항목이 한 줄로 나열되어야 하고, 항목 간에 간격을 두며, 메뉴를 약간 아래로 이동해야 합니다. 자, 먼저 로고 아래에서 메뉴 텍스트 위까지의 거리를 재어 보니 약 55px이 나왔습니다.
첫 번째 항목이 가이드의 약 30px 왼쪽에 있으니 메뉴 항목의 왼쪽 padding 값을 30px으로 정합니다.

1

ul#menu {

2

    list-style: none;

3

    padding-top: 55px; 

4

}

5

6

ul#menu li {

7

    float: left;

8

    padding-left: 30px; 

9

}

여전히 항목마다 간격을 더 두어야 합니다. psd에서 간격을 재보니 대략 105px이네요. 하지만 항목 사이에 padding 30px이 있으니 항목별로 오른쪽에 padding 값 75px을 적용하면 됩니다.

1

ul#menu li {

2

    float: left;

3

    padding-left: 30px;

4

    padding-right: 75px; 

5

}

작품에 존경심이 드네요.

완벽해요! 메뉴가 psd랑 똑같네요. 콘텐츠로 갑시다!

26단계 - 콘텐츠

상단

여기에서 먼저 할 작업은 폰트를 설정하는 것입니다. 그렇게 함으로써 작업할 공간을 알 수 있습니다. 그냥 포토샵에서 폰트 정보를 확인하세요.

1

#content h2 {

2

    font-size: 36px;

3

    color: #015878; 

4

}

5

6

#content h3 {

7

    font-size: 24px;

8

    color: #444444;

9

}

10

11

#content h4 {

12

    font-size: 18px;

13

    color: #373737;

14

    font-weight: normal; 

15

}

16

17

#content p {

18

    font-size: 14px;

19

    color: #595858; 

20

}

21

22

#content small {

23

    font-size: 12px;

24

    color: #373737; 

25

}

26

27

#content a {

28

    color: #0f6c8d;

29

    font-weight: bold;

30

    text-decoration: none; 

31

}

폰트를 적용하면 화면이 아래처럼 보입니다.

이쯤 돼서 콘텐츠 영역에 배경색이 설정되지 않았다는 사실을 알아챘겠군요. 그게 왜냐하면.... 생각나지 않네요. 여러분, 일단 계속 진행해볼까요?

1

body {

2

    font-family: Arial, Helvetica, sans-serif;

3

    background: #ebe8e8; 

4

}

좋습니다. 이제 메뉴마다 간격을 넓히기 위해 padding을 넣겠습니다.
먼저, 내비게이션 메뉴 아래부터 h2헤딩까지 거리가 약 25px입니다.

1

#content h2 {

2

    font-size: 36px;

3

    color: #015878;

4

    padding-top: 25px; 

5

}

그다음, h2 헤딩 아래부터 h3 헤딩 위까지의 거리 또한 25px이네요. 기본적으로 같은 코드를 다시 사용하세요.

1

#content h3 {

2

    font-size: 24px;

3

    color: #444444;

4

    padding-top: 20px; 

5

}

h3 헤딩 아래부터 첫 번째 단락 위까지 거리가 대략 45px입니다. 하지만 padding-top을 40px로 잡으면 문단 사이 간격도 40px로 될 것입니다. 단락 간격이 20px일 뿐이라서 padding을 위와 아래로 분리해야 합니다. h3 헤딩 아래 padding 20px을 주고 단락 위에 padding 20px을 추가합니다.

1

#content h3 {

2

    font-size: 24px;

3

    color: #444444;

4

    padding-top: 20px;

5

    padding-bottom: 20px; 

6

}

7

8

#content p {

9

    font-size: 14px;

10

    color: #595858;

11

    padding-top: 20px; 

12

}

결과를 확인해 보지요.

뉴스 섹션

뉴스 섹션에서는 간격이 약간 다릅니다. 무엇보다 페이지에서 약간 아래로 내려주어야 합니다. 그리고 h3 헤딩 아래에도 padding이 많이 들어 있어서 조금 없애겠습니다.
단락 위 padding오 줄여야 하고, 뉴스 항목 사이에는 padding을 넣어야 합니다.

1

#news {

2

    padding-top: 10px; 

3

}

4

5

#news h3 {

6

    padding-bottom: 10px; 

7

}

8

9

#news p {

10

    padding-top: 10px;

11

    padding-bottom: 14px; 

12

}

화면에서 아래와 같이 보입니다.

이제는 사이드바를 가장자리로 이동하는 작업이 필요하네요. 메인 콘텐츠가 완성되었습니다.

27단계 - 사이드바에 float 적용하기

맨먼저, 콘텐츠 섹션에 너빗값을 정해주어야 합니다.

1

#content {

2

    width: 510px; 

3

}

사이드바를 옆으로 빼기 위해 float을 다시 사용하겠습니다. 콘텐츠 영역과 사이드바 모두에 float left를 적용합니다.

1

#content {

2

    width: 510px;

3

    float: left; 

4

}

5

6

#sidebar {

7

    float: left; 

8

}

브라우저에서 화면을 보면, 푸터 텍스트가 사이드바에 측면에 붙은 것을 알게 됩니다. 이제는 이런 문제를 어떻게 대처할지 알고 있습니다. 마크업에서 div 태그와 clear 속성을 추가해 주세요.

1

<div id="contributors">

2

	<h3>Contributors</h3>

3

	<ul>

4

		<li><a href="#">John Smith, freelance writer</a></li>

5

		<li><a href="#">Jack McCoy, designer</a></li>

6

		<li><a href="#">Lenny Briscoe, editor</a></li>

7

		<li><a href="#">John Smith, martketing</a></li>

8

	</ul>

9

	<a href="#">Join Our Team</a> 

10

</div>

11

</div><!--end sidebar-->

12

<div style="clear:both"></div>

13

14

</div><!--end main container--> 

15

16

</div><!--end main-->

좋아요. 다음 단계는 psd에서 사이드바에 적용된 폰트 스타일을 복사하는 것입니다.

1

#sidebar h3 {

2

    font-size: 24px;

3

    color: #044055;

4

    font-weight: normal;

5

}

6

7

#sidebar ul li a {

8

    font-size: 14px;

9

    color: #393838; 

10

}

ul에서 링크가 걸린 폰트에 스타일을 적용하려면 메뉴 아이템 자체보다는 앵커 태그를 참조해야 한다는 것을 기억하세요.
자, psd 파일을 다시 한번 훑어보면 "subscribe" 위젯에서 메뉴 아이템 텍스트가 사이드바에 있는 나머지 텍스트보다 약간 더 크다는 것을 알았을 것입니다. 이렇게 변경하려면 특정 ul을 대상으로 하고 나서 마크업에서 ul에 id를 subscribe로 부여해야 합니다.

1

<ul id="subscribe">

2

	<li><a href="#">Subscribe via RSS</a></li>

3

	<li><a href="#">Get Email Updates</a></li>

4

	<li><a href="#">Follow us on Twitter</a></li>

5

</ul>

그런 다음에 css에서 작성하면 됩니다.

1

ul#subscribe li a {

2

    font-size: 18px; 

3

}

이제는 사이드바에 스타일을 적용합시다. padding, margin, background, border를 적어 주세요. 먼저 글머리 기호를 제거합시다.

1

#sidebar ul {

2

    list-style: none; 

3

}

좋아요. 여전히 잘못된 위치에 있으므로 사이드바 위와 왼쪽에 margin을 추가해서 수정해 봅시다. psd에서 수치를 쟀을 때는 사이드바의 border가 시작하는 지점까지 재어야 합니다.

1

#sidebar {

2

    float: left;

3

    margin-left: 55px;

4

    margin-top: 35px;

5

}

이제는 배경입니다. margin-top 속성 아래에 background와 border 속성을 추가합니다.

1

background: #d4d6d3;

2

border: 1px solid #BEBDBD;

다음에는 사방에 padding 15px을 넣습니다.

1

padding: 15px;

그리고 나서 메뉴에 간격을 두기 위해 텍스트 스타일에 padding을 추가하세요.

1

#sidebar h3 {

2

    font-size: 24px;

3

    color: #044055;

4

    font-weight: normal;

5

    padding-bottom: 20px;

6

    padding-left: 15px;

7

}

8

9

#sidebar ul {

10

    list-style: none;

11

    padding-bottom: 25px;

12

}

13

14

#sidebar ul li a {

15

    font-size: 14px;

16

    color: #393838; 

17

}

18

19

ul#subscribe li {

20

    padding-bottom: 5px; 

21

}

22

23

ul#subscribe li a {

24

    font-size: 18px; 

25

}

사이드바가 거의 완벽하게 보입니다. subscribe 섹션에 아이콘을 넣고 "join us" 앵커 태그에 스타일을 적용해줘야겠네요.

자, 아이콘을 적용해 봅시다. ul에 이미지를 넣는 게 쉽게 보이지는 않을 듯 합니다. 한 단계씩 진행해보면 수긍이 될 것입니다. 그런데 약간 지루할 거에요.
시작하기에 앞서 아이콘이 위치할 공간을 만들어야 합니다. 아이콘은 배경 이미지로 설정할 것입니다. 그래서 목록 아이템을 약간 움직이는 데 padding 속성을 사용하면 이미지는 영향받지 않습니다. 아이콘의 너비는 약 26px이므로 그 정도의 padding 값을 항목의 왼쪽에 적용하겠습니다.

1

ul#subscribe li {

2

    padding-bottom: 5px;

3

    padding-left: 30px; 

4

}

이제는 각각의 아이템을 대상으로 하는 방법이 필요합니다. 마크업에서 아이템별로 id를 추가해 주세요.

1

<ul id="subscribe">

2

	<li id="rss"><a href="#">Subscribe via RSS</a></li>

3

	<li id="email"><a href="#">Get Email Updates</a></li>

4

	<li id="twitter"><a href="#">Follow us on Twitter</a></li>

5

</ul>

이제 메뉴 아이템마다 배경 이미지를 넣습니다.

1

li#rss {

2

    background: url(images/rss_icon.png) no-repeat; 

3

}

4

5

li#email {

6

    background: url(images/email_icon.png) no-repeat; 

7

}

8

9

li#twitter {

10

    background: url(images/twitter_icon.png) no-repeat; 

11

}

이 순간에 어쩌면 18px은 여기에서 링크용으로 약간 큰 것 같다는 생각이 들었습니다. 그래서 변화를 덜 줄 16px로 줄였습니다. 이렇게 하면 사이드바를 늘릴 필요 없이 왼쪽에 아주 적은 padding을 넣을 수 있습니다.

1

ul#subscribe li {

2

    padding-bottom: 5px;

3

    padding-left: 35px; 

4

}

소박한 사이드바가 거의 완성되었어요! 이제 버튼에 스타일을 적용하죠.

버튼을 대상으로 해야 하니까 마크업에 class를 추가합시다. (저는 이번에 id 대신에 class를 사용했어요. 실전에서 흔히 그렇게 하죠. 가령 나중에 더 많은 버튼을 추가할지도 모르니까요.)

1

<a href="#" class="button">Join Our Team</a>

텍스트 스타일을 변경하고 반복되는 배경 이미지 조각을 넣어줍시다.

1

a.button {

2

    color: #393838;

3

    text-decoration: none;

4

    background: url(images/button_slice.jpg) repeat-x; 

5

}

보시다시피 배경 이미지가 저기 있습니다. 텍스트 바로 뒤에만 보이므로 커지도록 공간을 주겠습니다. 먼저, 사이드바의 중심으로 위치하도록 margin을 줍시다.

1

  margin-left: 30px;

가장자리마다 padding을 주어서 버튼이 커지게 합니다.

1

 padding: 13px 23px;

위의 코드는 padding 속성을 속성으로 작성하는 방식입니다. 이 방식은 공간을 아껴주기 때문에 전반적으로 수용되며 권장되기까지 합니다. 이 경우에 위와 아래에는 padding을 13px로 주고, 왼쪽과 오른쪽에는 padding을 23px로 준다고 명시하고 있습니다.

버튼이 꽤 괜찮아 보이네요. 그런데, 이런! 오른쪽을 23px 이동했네요. 이를 보완하기 위해 margin 값을 조금 줄입시다.

1

margin-left: 14px;

이제는 사이드바 전체의 div에 padding을 넣어서 하단에 여백을 약간 줍시다. 

1

#sidebar {

2

    float: left;

3

    margin-left: 55px;

4

    margin-top: 35px;

5

    background: #d4d6d3;

6

    border: 1px solid #BEBDBD;

7

    padding: 15px 15px 30px 15px;  

8

}

여기에도 단축 속성을 한번 더 사용했어요. 숫자는 top, left, bottom, right 순으로 쓰여 있습니다. 아래만 제외하고 모든 측면이 15px이라는 의미입니다. 아래는 30px이 되어야 합니다.

마지막으로 버튼 class에 border 1px을 추가해 주세요.

1

 border: 1px solid #c7c7c7;

사이드바 한 개가 완성되었습니다!

28단계 - 푸터

마지막이나 중요한, 간단하면서 작은 푸터입니다. 헤더에서와 같은 방식으로 푸터를 설정하겠습니다.
반복될 이미지 조각을 너빗값이 없는 div 안에 적용하고 나서 너빗값이 고정되고 중앙 정렬된 div 안에 콘텐츠를 넣을 것입니다.
여기가 .container div가 쓸모 있는 곳입니다. 이번에는 800px 너비나 margin:auto를 명시하지 않아도 됩니다. 이미 그렇게 명시되어 있으니까요.
이미지 조각을 반복하는 작업부터 시작합시다.

1

#footer {

2

    background: url(images/footer_slice.jpg) repeat-x; 

3

}

시작이긴 하나 정말 초라하죠. padding을 넣고 텍스트 색상을 흰색으로 해봅시다.

1

#footer {

2

    background: url(images/footer_slice.jpg) repeat-x;

3

    padding-top: 20px;

4

    padding-bottom:60px;

5

    margin-top: 40px;

6

    color: #fff; 

7

}

이게 전부예요.

29단계 - 미세한 변화

브라우저에서는 포토샵에서 디자인한 것과 약간 다르게 보여서 수정을 약간 하겠습니다.  메인 콘텐츠와 사이드바에 padding을 조금 더 넣고 싶은 것처럼 말이죠. 메뉴 아래 padding을 넣겠습니다.

1

ul#menu {padding-bottom: 50px}

더불어 메뉴를 왼쪽으로 정렬하기로 했으니까 padding-left를 삭제하겠습니다. 메뉴 항목들이 서로 더 가까워졌네요. padding을 오른쪽에 75px 그리고 왼쪽에 30px을 주어서 전체가 105px이 되었기 때문입니다. 왼쪽 padding을 삭제했으니, 삭제된 공간을 오른쪽에서 메꿔 주어야 합니다.

1

ul#menu li {

2

    float: left;

3

    padding-right: 105px;

4

    width: 95px; 

5

}

마지막 장면입니다.

그래서 다음은... 잠깐? 뭐라고요? 다 했다고요?
다 했어요!

이제는 걱정거리인 유효성 검사를 챙겨야 합니다.

30단계 - 유효성 검사

유효성 검사는 웹사이트 디자인에서 매우 중요한 단계입니다. 저는 이 글에서 그 이유를 장황하게 설명하지 않을 거예요. 왜냐하면, 이 글에서 저를 위해 설명해주니까요. 이 글에서 저는 검사 과정을 하나씩 짚어보겠습니다.

HTML 유효성 검사

w3.org Validation Service로 가서 validate by file upload를 선택하고, 여러분의 index.html을 선택한 다음 "check"를 클릭하세요.
다음은... 진실이 드러나는 순간이죠.

빨간색 (빨간색은 좋지 않아요!)

상심하지 마세요. 나쁜 것이 아닙니다. 무엇을 틀리게 했는지 봅시다.
에러가 하나만 있는 것 같네요.

동일한 id 태그를 두 번 사용한 것을 에러로 잡았네요. 그렇게 하면 중대한 혼란이 발생할 수 있습니다. "subscribe"를 id로 한 ul에 대해 스타일을 많이 정의했기 때문에 div 이름을 다른 것으로 바꾸겠습니다. "feeds"라고 합시다.
이제 #subscribe에 스타일을 정의하지 않았다는 것을 검사해야 합니다. 정의된 것이 없네요!
혹시 모르니까 페이지를 새로 고침해서 의도치 않은 변화가 있었는지 확인하겠습니다.
괜찮네요! 이제 유효성 검사를 다시 한번 돌려봅시다.

성공입니다! 이제 유효성 있는 XHTML 페이지가 되었습니다. 유효성 통과를 자랑하고 싶으면 아이콘을 내려받으세요.

메모: 에러를 단 하나만 발견해서 기분 좋게 놀랐네요. 그렇게 운이 좋은 경우가 아니라면, w3 schools에서 권장하는 내용을 읽어나 글렌 스탠스베리(Glen Stansberry)의 글을 확인해 보세요.

끝난 듯하네요! 아, 그렇게 쉬우면 좋은 텐데요. CSS에 대한 유효성 검사를 해야 해요!

CSS 유효성 검사

The w3 CSS Validator로 가서 html에서 했던 과정을 똑같이 진행합니다. 이번에는 style.css 파일을 선택하세요. 검사가 진행 중입니다...

유효하네요!

그런데 경고가 한두 개 있습니다. 결점 없는 완벽한 상태에 있으려면, 반드시 그 경고에 주목해야 합니다.

몇 가지 미미한 문제일 뿐이군요. float가 적용된 모든 항목에 너비를 명시했어야 했네요. 다시 말하지만, 이 권장 사항을 따라도 되고 안 따라도 됩니다. 다만 건설적인 비판에 경청하는 자세는 좋습니다.
정리: 태그라인과 메뉴 목록과 사이드바 모두에 너빗값을 주어야 합니다. 페이지 디자인을 바꾸지 않고도 이 작업을 하고 싶네요.
태그라인을 먼저 하겠습니다. 태그라인은 대강 추측할 수 있습니다. 너비가 대략 400px 되겠군요.

1

#tagline {

2

    float: left;

3

    padding-top: 20px;

4

    padding-left: 20px;

5

    width: 400px; 

6

}

새로 고침: 그대로입니다. 훌륭해요. 다음은 메뉴 목록입니다. 조금 까다로와요. 페이지 너비는 800px이니까 그것이 메뉴 항목 전체를 통틀어 최대 너비가 됩니다. 항목 4개로 나누고 각각의 너비를 200px로 정하면, 항목이 수직으로 나열됩니다. 왜냐하면, 항목마다 왼쪽에 30px, 오른쪽에 75px의 padding을 넣었으니까요. 200에서 105를 빼면, 95px의 너비가 남습니다.

1

ul#menu li {

2

    float: left;

3

    padding-left: 30px;

4

    padding-right: 75px;

5

    width: 95px; 

6

}

사이드바에도 똑같이 적용: 콘텐츠 영역의 너비를 살펴봅시다. 510px이네요. 800px 페이지에서 290px이 남습니다. 여기에서 왼쪽과 오른쪽에 적용된 padding을 제외해야 하죠. 290-30=260.  다음에 왼쪽 margin을 빼면, 205px이 남습니다. 마지막 이슈 하나: border 1px이 있네요. 2px을 한 번 더 빼주고 나서 사이드바의 너비를 203px로 설정합니다. 화면에서 다시 확인하니 달라진 게 없네요.

훌륭하죠. 다시 검사해보면, 에러가 없고 심지어 경고도 없네요!
w3c 표준에 관한 한 우리가 작업한 웹페이지는 완벽합니다.

마무리

이리하여 매우 단순하며 코드가 잘 짜인 웹사이트 하나를 완성했습니다. 저는 여러분이 이 튜토리얼을 통해서 디자인을 적용하는 데 유용한 기술을 알게 되었고, 언제든지 사이트를 코딩할 준비가 되었기를 바랍니다.

• 일상에서 웹 개발 튜토리얼과 기사를 더 많이 접하고 싶으면 저희 Twitter를 팔로우하거나 Nettuts+ RSS Feed를 구독하세요.