4: 웹 표준 모델 – HTML, CSS and JavaScript

  • 역자들 : 혜윰, 미인(Special), 봄눈, detective

소개

이 전 기사에서는 웹의 기본 빌딩 블록인 html, css, java script에 대해 간단히 알아봤다. 이제는 각각에 대해 좀 더 깊게-웹을 만들 때 각각이 어떤 역할을 하는지, 서로가 어떻게 소통을 하는지- 알아보도록 하겠다. 이번 기사의 내용은 아래와 같다:

  • 왜 분리되어 있는가?
  • 마크업, 모든 페이지의 기본
    1. XHTML은 무엇인가?
    2. 유효성 검사, 그게 뭔데?
  • CSS 약간의 스타일을 추가해보자
  • 자바 스크립트 – 웹페이지에 행동 더하기
  • 예는 다음 페이지를 참조
    1. index.html
    2. styles.css
  • 요약
  • 질문

왜 분리되어 있는가?

이 질문은 웹 표준에 관해 이야기 할 때 대게 가장 먼저 묻게 되는 질문이다. 당신은 HTML만을 이용해서도 내용, 스타일링, 레이아웃을 할 수 있다. 그런데 왜 XHTML/CSS를 알아야 하는 걸까? 레이아웃 등을 위한 테이블은 웹 디자인에 있어서 구시대에 사용되었던 방법이고 많은 사람들이 지금도 이와 같이하고 있는데 (할 필요가 없음에도 불구하고), 이것이 우리가 이 과정을 가장 처음에 배우게 되는 이유이다.
우리는 이번 수업에서 그 방법들을 배우지는 않을 것이다. 여기 CSS와 HTML이 구시대에 쓰이던 방법들 보다 많이 쓰이는 강력한 이유가 있다.

  • 코드의 효율성 : 당신의 파일이 클 수록 다운로드 하는데 시간이 오래 걸리고 사람들이 돈을 더 지불해야 한다(어떤 사람들은 다운로드를 할 때 메가바이트 당 돈을 지불한다) 그렇기 때문에 당신은 스타일과 레이아웃 정보들이 난립한 큰 페이지를 모든 html파일에 넣고 싶지는 않을 것이다. 훨씬 좋은 대체안은 html파일을 나누고 다듬고 스타일과 레이아웃 정보를 분리된 CSS파일에 딱 한번 포함시키는 것이다. 이 방법을 사용한 실례를 보고 싶다면 저자가 매우 유명한 웹사이트를 HTML/CSS로 다시 작성한 재작성 파일들을 모아놓은 A List Apart의 Slashdot을 확인해 보아라.
  • 유지의 편이성 : 이전에 말한 것을 따라서, 당신의 스타일과 레이아웃 정보를 한 곳에만 구체화 시키려 한다면, 그것은 당신이 당신의 사이트 외관을 바꾸고 싶을 때 한 곳만 갱신하면 된다는 걸 의미한다. 당신의 사이트에 모든 페이지의 정보를 갱신하는 걸 선호하는가? 그렇지 않을 것이다.
  • 접근성 : 시력이 안 좋은 웹 사용자들은 시각보다는 소리를 통해- 페이지를 읽어준다- 정보에 접근할 수 있는 “스크린 리더”라고 불리는 소프트웨어를 사용할 수 있다. 또한 움직이기 어려운 사람들을 위한 목소리 입력 소프트웨어는 의미적으로 구성된 웹 페이지의 이점을 가지고 있다. 스크린 리더가 헤딩을 찾을 때 그리고 연결하고 구성할 때 키보드 명령을 사용하는 것처럼, 목소리 입력 사용자들은 목소리 명령을 사용한다. 웹 문서들은 화면보다는 의미적으로 나뉘어 있어서 사용자들이 그 안에 정보를 찾기 쉽다. 즉, 더 빠르게 그 내용에 접근 할 수록 좋은 것이다. 스크린 리더는 이미지가 함께 있는 텍스트에는 접근할 수 없고 자바스크립트를 사용할 때 혼란이 오기도 한다. 당신의 중요한 컨텐트는 모두에게 접근 가능하도록 하는 것을 명심해라.
  • 장치 호환성 : 당신의 XHTML 페이지는 단순한 마크업이고 스타일 정보가 없기 때문에 대체 스타일 시트를 적용함으로써 광범위하게 다른 속성들(예를들어 스크린 사이즈)을 가지고 다른 장치로 재구성을 할 수 있다. CSS 또한 그 자체가 당신이 다른 표현 방법들을 위해 (예를 들어 스크린으로 보여주기, 프린트하기, 모바일 장치로 보이기 등)다른 스타일 시트들을 특수화시킬 수 있도록 하고 있다.
  • 웹 검색 엔진들 : 당신의 웹사이트들이 구글과 같은 검색 엔진에서 쉽게 찾아지기를 원할 것이다 검색 엔진은 당신의 페이지를 읽기 위해 “Crawler(검색 로봇)”라고 불리는 특성화된 소프트웨어를 사용한다. 만약 그 크롤러가 당신의 페이지에서 내용을 찾는데 어려움을 가지고 있거나 헤딩을 헤딩으로 정의해 놓지 않아 오역을 하게 된다면, 결과를 검색하는 것이 어려울 것이다.
  • 좋은 습관 : “내가 그렇다고 말했기 때문이다”라는 이유중 하나지만, 전문적인 웹 개발자와 디자이너들에게 항상 이야기 하고 있는 것이고, 그들은 당신에게 컨텐트, 스타일 그리고 행동을 분리하는 것이 어플리케이션을 개발 하는 게 가장 좋은 방법이라고 말해줄 것이다.

마크업, 모든 페이지의 기본

HTML 그리고 XHTML은 속성들(Attributes)로 이루어진 마크업 언어이다. 이 요소들은 문서에서 여러가지 다른 형태들을 구분하기 위해 사용되고, 각각의 내용의 히트가 웹 브라우저에 나타날 수 있도록 한다.

당신이 기대한대로, 요소들은 실질적인 컨텐트 타입을 정의하는 반면에 속성들은 각 요소들을 알아내는 ID 혹은 링크를 위한 위치 와 같은 그 요소들의 여분의 정보를 정의한다. 당신은 마크업이 가능한 의미적이야 한다는걸 명심해야 하는데, 그것은 가능한 정확한 컨텐트의 기능들을 설명해야 한다. 그림1은 전형적인 HTML 요소의 구조를 보여준다.

XHTML은 무엇인가?

XHTML의 “x”는 “확대가능한”것을 의미한다. 가장 흔한 질문은 “내가 HTML혹은 XHTML을 사용해야 합니까? 그리고 다른점은 뭡니까”이다. 그들은 굉장히 비슷하다; 가장 큰 차이점은 아래 구조와 같다. 다음 표를 보자.

HTML XHTML
요소들과 애트리뷰트들이 격에 민감하지 않다. <h1>과 <H1>은 같다. 요소들와 속성들이 대/소문자 구분(case sensitive)에 민감하다. 모두 소문자를 사용한다.
특정한 요소들은 닫기 태그를 필요로 하지 않는 반면에 다른 것들은(빈 요소들이라고 불리는) 닫기 태그를 금지한다. 모든 요소들은 명백하게 닫혀야 한다. 컨텐트가 없는 요소들은 시작 태그에 슬래쉬(/)를 사용하여 닫혀야 한다. 만약 당신이 당신의 XHTML을 text/html으로 제공한다면 당신은 가장 짧은 문법(Syntax)을 사용해야 하고 슬래쉬 앞에 스페이스를 위치해야 한다. 비어 있다로 정의된 모든 요소들에 분리된 시작태그와 닫기 태그를 가진 긴 형태를 사용해야 한다.
어떤 속성 값들은 따옴표를 사용하지 않아도 된다. 모든 속성 값들은 따옴표 안에 와야한다.
축약형(Shorthand)은 특정한 속성에 사용된다. 모든 속성은 완전한 형태(속성명=’속성값’)로 작성되어야 한다. (예 <option selected=”selected”>).
서버들은 HTML을 text/html의 미디어 타입으로 전달해야 한다. XHTML은 application/xhtml+xml 미디어 타입을 사용해야하지만 application/xml, text/xml or text/html를 사용할 수도 있다. 만약 text/html이 사용된다면 HTML 호환 지침서들이 따라와야 하는데 왜냐하면 브라우저들은 그것을 HTML로 취급할것이기 떄문이다. (그리고 언어의 차이점을 설명하기 위해 에러 회복(error recovery)을 사용할 것이다)

이제, 우리는 HTML 혹은 XHTML을 쓸것인지에 대해 그렇게 걱정할 필요가 없다는 걸 알았다. 이번에 배운 정보를 가지고 HTML Doctype (article 14) 을 사용하면 크게 잘못되지는 않을 것이다.

유효성 검사, 그게 뭔데?

HTML 과 XHTML이 표준이기 때문에 W3C는 당신을 위해 당신의 페이지를 자동적으로 확인하고 닫기태그가 빠졌다거나 따옴표를 빼먹는 것 과 같은 당신의 코드가 가질 수 있는 모든 에러를 집어낼 수 있는 굉장한 도구를 발명했다. Markup Validator는 http://validator.w3.org/에서 사용 가능하다. 그것은 당신이 HTML을 사용하는지 XHTML을 사용하는지 자동적으로 감지하고 어떤 Doctype을 사용하는지 확인한다. 만약 당신의 CSS를 확인하고 싶다면 http://jigsaw.w3.org/css-validator/에서 Validatior를 사용할 수 있다.

Validator에 대해 더 많은 정보를 보고싶다면 Article 24를 보고 Doctype에 대해 더 알고 싶다면 Article 14를 보아라.

CSS – 약간의 스타일을 추가해보자

Cascading Style Sheets(단계적으로 적용하는 스타일 문서)는 문서의 포맷(양식)과 레이아웃을 조정한다. 색깔, 배경화면, 폰트의 크기와 스타일, 심지어 다른 곳에 있는 웹 문서의 레이아웃까지 바꾸고 추가할 수 있다. CSS를 사용해서 스타일을 적용하는 세 가지 주된 방식이 있다. 엘리먼트 다시 정의하기, ID와 class 속성에 스타일 적용하기가 그것이다. 각각을 잠깐 살펴보자.

1. 엘리먼트(요소) 다시 정의하기. 엘리먼트의 스타일 규칙을 다시 정의해서 (X)HTML 엘리먼트를 나타내는 방식을 바꾼다. 모든 문단의 줄 간격을 두 배로, 색깔은 녹색으로 하려면, css에서 문단 선언에 다음 규칙을 추가한다.

p {
  line-height: 2;
  color: green;
}

이제 <p></p> 태그로 둘러싼 내용은 줄 높이가 두 배로, 색깔은 녹색을 띤다.

2. ID 정의하기. 해당 페이지에서 유일하게 식별되는 id 속성을 엘리먼트에 부여할 수 있다. 각 ID는 한 페이지에 한 번만 쓸 수 있다. 예를 들면 id=”navigation_menu”다 . ID는 페이지 상에서 문서 포맷을 구성하는 더 나은 제어 방식을 제공한다. 예를 들면, 어떤 문단 하나만 줄 간격을 두 배로 늘리고, 색깔을 녹색으로 강조하고 싶다면, 거기에 ID를 넣어라.

<p id="highlight">Paragraph content</p>

그리고 나서 아래와 같이 CSS 규칙을 적용시킨다.

#highlight {
	line-height: 2;
	color: green;
}

이 코드는 페이지에서 ‘highlight’라는 ID 속성을 가진 문단에만 이 CSS 규칙을 적용한다. ‘#’ 기호는 ID를 나타내는 CSS 관례다.

3. class 정의하기. 클래스는 각 페이지에서 하나 이상 쓸 수 있다는 점을 제외하고는 ID하고 같다. 줄 간격을 두 배로 하는 예제를 쫓아서, 페이지 상의 처음 두 문단에 줄 간격을 두 배로 하고 색깔 강조를 주려면, 거기에 클래스를 추가한다.

<p class="highlight">Paragraph content</p>
<p class="highlight">The content of the second paragraph</p>

그리고 나서 다음과 같은 CSS 규칙을 적용한다.

.highlight {
	line-height: 2;
	color: green;
}

이번의 ‘highlight’는 ID가 아닌 클래스다. 앞의 점(.)은 클래스를 나타내는 CSS 관례다.

아래의 예제는 어떻게 CSS로 HTML의 스타일을 조절하는지 더 많은 아이디어를 알려준다. 곧 발표할 22번째 글에서 더 자세한 방식으로 CSS를 살펴 본다.

자바스크립트 – 웹페이지에 행동 더하기

마지막으로, 자바스크립트는 당신이 웹 페이지에 행동을 더할 때 쓰는 스크립트 언어이다. 그것은 당신이 바른 포맷에 있는지 아닌지를 구별해주고 드래그 앤 드랍(drag and drop) 기능을 제공하고 스타일을 바꿔주고 메뉴, 핸들 버튼 기능 등 수많은 것들을 활성화 시킨다. 대부분의 현대 자바스크립트는 목표 html 요소를 찾음으로써 작용하고, css처럼 그것에 뭔가를 하지만 기능하는 방법은 다르다.

자바스크립트는 html과 css보다는 좀 더 복잡하고 광범위한 주제이므로, 여기서는 간단하게 하고 혼란함을 피하도록 하겠다. 아래의 예에서는 논의 하지 않겠다. 사실 당신은 나중에 자바스크립트를 보게될것이고 지금은 보지 않을것이다.

연습

아직 여기서 다루지 않은 세세한 것들이 있지만 이 웹 디자인 코스에서 모든 것을 해 볼 것이다. 당신들에게 이 글의 나머지 부분에서 무엇을 다루게 될지 맛 보게 해주기 위해 실제 웹 페이지를 보여주겠다.
아래에서 내가 보여주는 예는 참조 페이지인데 말, 심리에세이,미국에서의 인터넷 사용 현황 등의 마지막에 언급되는 참조들로 사용할 수 있다. 당신이 학업적인 작문을 하는 사람이라고 생각하고 이 예는 APA포맷팅을 보여준다. 내려받기.

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>References</title>
  <style type="text/css">
    @import url("styles.css");
  </style>
</head>

<body>
  <div id="bggraphic"></div>
  <div id="header">
    <h1>References</h1>
  </div>
  <div id="references">
    <cite class="article">Adams, J. R. (2008). The Benefits of Valid Markup: A Post-Modernistic Approach to Developing Web Sites. <em>The Journal of Awesome Web Standards, 15:7,</em> 57-62.</cite>
    <cite class="book">Baker, S. (2006). <em>Validate Your Pages.... Or Else!.</em> Detroit, MI: Are you out of your mind publishers.</cite>
    <cite class="article">Lane, J. C. (2007). Dude, HTML 4, that's like so 2000. <em>The Journal that Publishes Genius, 1:2, </em> 12-34.</cite>
    <cite class="website">Smith, J. Q. (2005). <em>Web Standards and You.</em> Retrieved May 3, 2007 from Web standards and you.</cite>
  </div>
  <div id="footer">
    <p>The content of this page is copyright © 2007 <a href="mailto:jonathanlane@gmail.com">J. Lane</a></p>
  </div>
</body>
</html>

이 다음 글들에서도 많은 예가 나오기 때문에 이 파일을 자세하기 분석하지는 않는다. 그래도 몇 가지 주목해야 할 점은 아래와 같다.

첫번째 줄은 DTD(디-티·디;문서 타입 선언)라고 부르는 것이다. 이 페이지를 XHTML 1.0 Trasitional 형식으로 선언했다. Doctype는 마크업이 준수해야 할 규칙을 명확히 선언하고, 그 유효성을 검증한다. Doctype에 대해 더 잘 알고 싶다면 14편 글 를 봐라.
다섯째 줄부터 일곱째 줄은 페이지–이 파일에 포함된 스타일은 페이지 내의 여러 엘리먼트에 적용된다–에 css 파일을 적용했다. 다음 섹션에서 볼 것은 웹 페이지 포맷을 다루는 CSS 파일이다.

나는 다른 타입의 레퍼런스에 각각 다른 클래스를 부여했다. 이것은 각 레퍼런스 타입에 다른 스타일을 적용하려는 것이다. 예를들어, 이 예제에서는 리스트를 쉽게 살펴볼 수 있게 각 레퍼런스의 오른쪽에 다른 색깔을 집어넣었다.
이제 이 HTML에 스타일을 주는 CSS를 보자.

styles.css

body {
  background: #fff url('images/gradbg.jpg') top left repeat-x;
  color: #000;
  margin: 0;
  padding:0;
  border: 0;
  font-family: Verdana, Arial, sans-serif; font-size: 1em;
}

div {
  width: 800px;
  margin: 0 auto;
}

#bggraphic {
  background: url('images/pen.png') top left no-repeat;
  height: 278px;
  width: 362px;
  position: absolute;
  left: 50%;
  z-index: 100;
}

h1 {
  text-align: center;
  text-transform: uppercase;
  font-size: 1.5em;
  margin-bottom: 30px;
  background: url('images/headbg.png') top left repeat;
  padding: 10px 0;
}

#references cite {
  margin: 1em 0 0 3em;
  text-indent: -3em;
  display: block;
  font-style: normal;
  padding-right: 3px;
}

.website {
  border-right: 5px solid blue;
}

.book {
  border-right: 5px solid red;
}

.article {
  border-right: 5px solid green;
}

#footer {
  font-size: 0.5em;
  border-top: 1px solid #000;
  margin-top: 20px;
}

#footer a {
  color: #000;
  text-decoration: none;
}

#footer a:hover{
  text-decoration: underline;
}

CSS를 가지고 할 수 있는 또 다른 것을 보여주기 위해 깔끔한 배경효과를 더함으로써 이 웹 페이지의 스타일을 확장시켜 봤다.

첫번째 줄은 텍스트와 배경 색, 텍스트 보더(경계:border)의 폭과 같은, 문서에 기본값을 설정하였다. 어떤 사람들은 이렇게 기본값을 설정하지 않으며, 대부분의 현대적 브라우저는 그 자신의 기본값을 적용하고 있지만, 이것은 좋은 생각이다. 왜냐하면 다른 브라우저가 어떻게 당신의 웹 사이트를 나타내는가에 대하여 더 잘 제어할 수 있기 때문이다.

다음 줄에는 800px 너비로 페이지를 설정하였다. (비록 브라우저의 창에 의지해서 확대/축소의 비율을 조절할 수 있지만. 여기서 사용한 테두리 세팅은 페이지 내용을 창의 한 가운데에 나타낸다.)

다음으로 이 페이지에 사용된 배경 이미지에 주목하자.(이것은 background 속성을 이용해서 적용했다:url 선언들.) 나는 이 웹 페이지에 세 가지 다른 배경 엘리먼트를 설정했다. 첫 번째는 페이지의 위에서부터 멋진 파란 페이딩의 기울기 타일을 사용하였다. 두번째로는, 펜 그래픽을 위해 반투명 png를 사용하여 그 위에 텍스트와의 대조를 제공하고 기울기를 골라내었다. (반 투명 PNG이미지는 Explorer6 와 그 이하 버전에서와 다르게 최근 브라우저에서는 작동한다. 이것에 대한 IE6의 해결 방법은 Dean Edward’s IE-fixing JavaScript를 보면 되는데 IE6의 CSS 지원 내용도 볼 수 있다) 마지막으로 나는 다른 반 투명 PNG를 페이지 머리 배경에 사용하였다. 머리부분에 대조가 첨가되고 깔끔한 효과를 주었다.

이 예는 그림2와 같다.  그림2

요약

XHTML, CSS, 자바스크립트에 대해 더 이상 미스테리한 것은 없다. 그것은 웹의 진화물이다. 만약 당신이 HTML를 약간 배웠다면 배우지 않은 것은 없다. 당신이 알고있는 모든것이 타당하고 어떤 것들은 다른 방식으로 다루어야 한다(그리고 당신의 마크업에는 더욱 주의를 기울여야 한다.)

작업이 잘 되는 것으로부터의 만족감에서 벗어나서, 웹 표준 개발은 타당하다(이해가능하다~) 표준 개발에 대한 반대의견은 그것이 시간낭비일 뿐만 아니라, 브라우저들을 넘나들며 레이아웃을 만드는 것은 고통스럽다는 사실이다. 반대 의견은 미래 브라우저 버전에서 비 표준 기반 레이아웃 작업에는 적용할 수 있다. 당신의 마크업이 Opera 12, Firefox 5, Explorer 10 에 적용될 수 있다고 어떻게 확신할 수 있는가? 약간의 규칙을 따르지 않는다면 불가능하다.

연습 문제

  • 클래스와 아이디의 차이점은 무엇인가?
  • XHTML, CSS, 그리고 자바스크립트는 웹사이트에서 각각 어떤 일을 하는가?
  • 주어진 예제에서 index.html 파일을 가지고 css만을 사용하여 포맷을 바꾸어라.(notepad 또는 Text Wrangelr를 사용하기를 권장한다.) HTML은 바꾸지 말아라.
  • 다른 레퍼런스 타입의 아이콘을 추가하라 (뉴스기사, 책 그리고 웹 자원). 이 목적을 위해 당신만의 아이콘을 만들고 CSS만을 이용해서 그것이 다른 레퍼런스를 따라 나타나도록 해라.
  • 페이지의 아래 부분에 있는 저작권 정보를 숨겨라.
  • 책 제목을 바꾸어 구별이 되게 하라.
  • 이 예제가 휴대폰 브라우저에서도 잘 작동하게 하려면 CSS에 어떤 것들을 할 수 있는가?

저자 소개

Jonathan Lane은 산업 인터렉티브의 대통령이다. Mayne Island에 있는 웹 개발/웹 어플리케이션 개발 회사에 있다. 그는 수년동안 Lethbridge 대학의 커리큘럼 재개발 센터에서 웹 프로젝트 코디네이터 작업을 하면서 일을 시작했다.

그는 Flyingtrol 블로그를 가지고 있고, 현재 Basecamp 프로젝트 메니지먼트 어플리케이션을 위한 이메일 인터페이스 개발을 하고 있다.

이 글과 비슷한 종류의 글은 '클리어보스' 카테고리에서 더 찾아볼 수 있습니다. 또한, , , 태그로도 검색해 보실 수 있습니다. 북마크를 하시려면 퍼머 링크로 기억해 주세요.
이 글을 다 읽어주셨다면, 댓글을 남겨주세요. 좋았다라는 격려도 좋고, 잘못된 부분을 지적해 주시는 것도 좋습니다. 마음에 드셨다면 아래 Like 버튼을 눌러서 페이스북과 트위터로 소개해 주시면 더욱 좋겠습니다.
  • Kwlsy666

    4번째 강좌가 깨지내요.

  • 혹시 화면이 나타나지 않았거나, 내용이 나오다가 끊어진 현상을 보신건가요?
    오늘 오전에 불현듯 그런 현상이 나타나서 확인중입니다. 일단, 현재는 복구가 된 것으로 보이는데.
    혹시 다른 오류라면 좀 더 자세히 알려주시겠어요?

  • Kwlsy666

    복구가 되엇내요. 감사합니다.좋은 자료 잘 보고 있습니다.

  • 손님

    잘봤습니다.