디자인이 어디로 갔지?

'웹표준'에 해당되는 글 16건

  1. 2009/03/04 TagnBrace.com 차영신 계원디자인예술대학에서 웹표준, 웹접근성 강의를 시작했습니다 (8)
  2. 2009/01/22 TagnBrace.com 차영신 웹표준 강의내용 (23)
  3. 2008/12/29 TagnBrace.com 차영신 드림위버 CS3에서 웹 표준 문서 제작하기 [4] - 블록레벨 엘리먼트와 인라인 엘리먼트
  4. 2008/12/16 TagnBrace.com 차영신 오랜만에 가지는 여유로운 아침입니다
  5. 2008/10/07 TagnBrace.com 차영신 웹표준은 스펙을 준수하려는 마음에서 시작합니다
  6. 2008/06/27 TagnBrace.com 차영신 ADOBE MASTERS CLASS 2008에 다녀왔습니다
  7. 2008/06/18 TagnBrace.com 차영신 파이어폭스 2008년 6월 18일 파이어폭스3 공식발표
  8. 2008/06/04 TagnBrace.com 차영신 [웹표준] CSS작성과 유효성 검사 - 월간웹디자인5월호에 기고한글
  9. 2008/06/04 TagnBrace.com 차영신 [웹표준] 의미를 살린 마크업과 유효성 검사 - 월간웹디자인 2008년4월호 기고한글
  10. 2008/05/21 TagnBrace.com 차영신 어제는 웹퍼블리셔의 대부 현석님이 방문해 주셨습니다. (3)

계원디자인예술대학에서 웹표준, 웹접근성 강의를 시작했습니다

웹표준 2009/03/04 21:27 TagnBrace.com 차영신

이번 학기부터 '계원디자인예술대학'에서 웹표준, 웹접근성 강의를 하게 되었습니다. 1학년을 대상으로 과정명 '인터넷1' 입니다. 웹표준 방식으로 HTML, CSS 작성법을 가르칩니다. 특강으로는 다른 대학에서 진행한 적이 있다는 이야기를 들었는데요... 정규 수업시간에 실무자가 학생들을 가르치는 것은 처음이 아닐까 라는 생각이 드는데요... 이미 웹표준, 웹접근성 수업을 하고 있는 대학을 알고 계신 분이 이 글을 읽으신다면 알려주시면 감사하겠습니다.

제 수업방식은 테그닉만 나열하여 알려주는 것이 아니라, WHY? 로 시작하여서 개념을 이해하고, 필요성을 느끼고, 스스로 공부할 수 있도록 방식을 알려주는 식으로 진행합니다.

개념과 필요성을 제대로 이해하여야 올바른 기술의 적용이 가능하기 때문입니다.

이번 '계원디자인예술대학'에서의 웹표준, 웹접근성 강의를 시작으로, 다른 대학에도 자극이 되어 많은 대학에서 웹표준, 웹접근성을 함께 실천할 수 있었으면 합니다.

2009/03/04 21:27 2009/03/04 21:27
TAG , , ,
트랙백 2개, 댓글 8개가 달렸습니다.

웹표준 강의내용

강의내용 2009/01/22 02:30 TagnBrace.com 차영신

1일 - 백남중 팀장님 특강

2일 - 웹표준을 시작하면서 알아야할 기본적인 사항들

  1. 파이어폭스 한글 3.0.5 설치해주세요.
  2. 도구>부가기능 추가 : Web Developer, firebug
  3. 파이어폭스: 표준브라우저, css브라우저, Open 소스 파이어폭스를 기준으로 CSS의 값을 작성하고,비표준브라우저인 ie6, ie7의 값들(핵(hack), 필터(filter))을 별도로 작업한다.
  4. 표준에 맞춰서 작업한다.
    • 국내용: ie6, ie7, firefox3
    • 해외용 :ie5.5이하, ie6, ie7, firefox3 + opera,크롬, Mac Safari
  5. 국내의 웹접근성에 맞추어 작업한다.
    • 표준(standards, HTML 스펙을)을 올바르게 지키면 웹접근성 좋아진다.
    • KADO (iabf.or.kr)에서 만든 '웹접근성 지침'을 준수해서 만들어야 한다.웹접근성 마크를 받기 위해서는 개발전에 치밀한 설계가 있어야 하고, 개발 후에도 기간의 여유를 두고 정리를 해야 한다.
  6. W3C (www.w3.org/)
    • HTML4.01 (1999.12.24) / HTML5 (2010년)
    • HTML4.01의 엘리먼트(element, 요소)가 시맨틱(semantic,의미론적인)한 부분이 약하기 때문에, DATA(컨텐츠)의 시맨틱한 분류를 위해 만들고 있다.
    • 스펙이 변화하는 이유는 사용자의 환경이 변화고 요구가 다양해지기 때문이다.
    • HTML Validator (유효성 검사)
    • CSS2.1 / CSS3
  7. Publishing (출판) -HTML을 이용하여 정보를 시맨틱하게 구조화하는 작업. (웹에서 정보를 Structure하는 언어 HTML,XHTML,XML)
  8. 구글, 애플, MS, OPERA, firefox -zdnet.co.kr, 디지털타임즈, 디지털뉴스
  9. w3schools.com / trio.co.kr / kipa_2005_guide.pdf
  10. 나라디자인(nhn 정찬명), 현석닷컴(신현석 오페라), 봄눈의 웹 뒤에 숨은 웹
  11. 네이버 : 하드코딩하는사람들(하코사)
  12. 시맨틱웹: 우리나라 권위자 - 서울대 김홍기 교수님
  13. 국내 웹2.0서비스: 스프링노트, 미투데이, 위젯
  14. 웹2.0 서비스개발 /웹표준/ 웹접근성
  15. 웹표준 코딩 /div 코딩 ? / div - division - Grouping element
  16. 크로스브라우징/ 웹표준 / 웹접근성
  17. 장애인차별금지법 (2008년4월11 대통령령으로 공포 /2009년4월11 법의 규제를 받음)
  18. 주석처리를 잘 해주세요.

3일 - 시맨틱 마크업

문서의 루트 요소 앞에는 공백 없이 DOCTYPE 선언이 있어야 한다.( Doctype 선언(declaration)이 첫줄에 되어야 한다.)

  • 모든 XHTML 페이지에서는 페이지의 문서 유형이 무엇인지, 그 페이지가 어느 표준을 따르는지에 대해 정의하는 몇 줄로 시작한다. 이러한 문서 유형 정의, 줄여서 DOCTYPE 은 파일의 그러한 유형에 대한 정의를 담고 있는 인터넷상의 파일들까지 웹브라우저에서 가리키기도 한다. DOCTYPE 은 웹브라우저가 css를 어떻게 표현할 것인지에 있어서 핵심 역할을 한다.
  • - 도큐먼트(웹문서)를 브라우저가 해석하는 기준을 제시한다. 현재 문서의 문법을 지켜서 렌더링하도록 하는 역할을 한다.
  • - strict DTD(Document Type Definition): 엄격한/ HTML 문법을 규격에 맞게 엄격하게 지켜서 작성한 문서임을 브라우저에게 선언해 준다.
  • < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/strict.dtd"> font, center같은 외형 장식용 태그, 새창을 열리게 하는 target 프로퍼티 같은 많은 프로퍼티들을 사용할 수 없다.
  • < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> 요즘 가장 널리 사용되는 HTML과 XHTML버전은 HTML 4.01 Transitional 과 XHTML 1.0 Transitional이다. 이 버전에서는 아직까지도 font와 같은 표현용 태그를 사용할 수 있으며, 그로 인해 구 버전의 HTML에서 보다 엄격한 형식을 갖춘 HTML과 XHTML 신버전으로 옮겨올 수 있는 여유 전환기간이 생긴다. 비표준 태그를 사용해야할 필요가 있으므로 현재 상태에서 가장 최상의 브라우저 호환성을 제공해 주는 문서 형식은 XHTML 1.0 Transitional을 사용하는 것이다.
  • 다음줄에 언어를 식별하는 코드를 추가한다. < html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
  • < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/frameset.dtd"> 웹페이지에 프레임을 사용하는 경우

웹에서 구조(structure) 를 만드는 언어는 HTML 4.01, XHTML1.0, XML1.0 3개가 있다. 올바르게 문법에 맞추어 작성하면, 표준을 지키는 것이다.

xml 문법의 특징

  • 모든 요소는 완벽하게 중첩되어야 한다.
  • 소문자로 작성, end 태그가 반드시 있어야 한다.
  • attribute value은 반드시 " "안에 적어준다.
  • 상단에 lang을 반드시 써준다.
  • 반드시 태그가 closing 되어야 한다.

왜 XHTML(eXtensible HyperText Markup Language)인가?

“XHTML은 인터넷을 한단계 진화시키는 데 필요한 요소 중 하나입니다. 지금 XHTML을 이용하기 시작한다면 컨텐트 개발자는 하위 및 상위 호환성에 대해서 걱정할 필요 없이 XML의 세계로 들어가 그 장점을 누릴 수 있게 됩니다.”

상위 호환성(future compatibility)은 XHTML을 선택해야 하는 중요한 기준이 됩니다. 지금 XHTML을 사용해 웹 페이지를 만들어 두면, 이 웹페이지는 미래 어떤 웹 브라우저나 장치에서도 읽을 수 있을 것입니다. XHTML의 세계에서는 마크업의 유효성 검증을 위해 좀 더 엄격한 규칙을 지켜야 합니다.

모든 태그와 속성은 반드시 소문자로 작성해야 하고, 속성값은 큰 따옴표 안에 써야만 합니다. 또 모든 태그를 올바로 닫아줘야 합니다. 이러한 규칙들은 모두 XML의 속성을 따라가는 것입니다.

상위 호환성과 더불어 엄격한 규칙을 통해 유효성이 검증된 XHTML을 이용하게 되면 디자이너와 개발자는 (특히 같은 마크업을 여러 작업자가 동시에 작업하는 경우) 좀 더 쉽게 코드의 오류를 발견할 수 있습니다. 또 표준을 지원하는 웹 브라우저에서 의도한 바대로 결과를 좀 더 잘 표시하게 될 것입니다.

XHTML 1.0 = HTML4.01 스펙 + XML1.0 문법

XHTML도 xml의 문법적 특성을 지켜서 작성해야 한다.

start tag(시작태그): < h1>

closing tag(닫기태그): < /h1>

empty tag (빈태그, 단독태그) : hr, br, link, meta, img, input

semantic markup(시맨틱 마크업): 의미를 살린 마크업.

시맨틱 마크업은 브라우저에 렌더링 되는 것을 위해 하는 것이 아니라, 브라우저와 같은 기계가 의미를 알 수 있도록 전달하는 것이 목적이다. - h1 to h6 (제목1에서 제목6) : 제일 중요한 제목은 h1, 서브 제목일 수록 h2, h3 ~ 한 도큐먼트 내에 h1 다음으로 중요한 제목은 h2로 마크업해야 한다. 보여지는 글자 크기는 신경쓰지 말고 기계가 제목의 중요도를 판단할 수 있도록 마크업해야 한다.

-현재 대부분 회사로고의 이미지를 마크업한다.

-p(Paragraphs) : 문단

-img(image) : 이미지

-br(line breaks): 줄바꿈

-의미를 살린(semantic) , 구조화된 마크업(structured markup) 이 두 용어는 서로 바꿔가며 사용될 수 있습니다. 이 말은 문서 모양을 만들기 위한 명령으로서가 아니라 문서의 의미를 내포하기 위한 태그를 사용하는 것을 말합니다.

텍스트에 관련된 엘리먼트: p, em, strong, (쓰지말아야할 엘리먼트: i, b)

< b>모양만 bold 적용 < /b> --> < strong>기계가 강조라고 인식하고 bold 적용 < /strong>

< i>모양만 기울어진 텍스트 < /i> --> < em>기계가 강조라고 인식하고 기울어진 텍스트 < /em>

4일 리스트(list, 목록) 엘리먼트

ul(순서가 없는 리스트), li ol(순서가 있는 리스트), li dl(정의리스트) , dt, dd bullet <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk </dt> <dd>- white cold drink</dd> </dl> Grouping elements: the DIV and SPAN elements -블록레벨 엘리먼트:div, p, h1 to h6, ul,li, ol,dl, dt, dd, table,form -인라인 엘리먼트:span, img, a, em, strong css box model http://www.w3.org/TR/CSS21/box.html 속기형(shorthand) 프로퍼티(property): padding * (애스터리스크 , 전체 선택자, universal selector) *{margin:0;padding:0;} - div 엘리먼트의 width값은 부모엘리먼트(여기서는 body)의 width값의 상대적인 100%값 을 가진다. - 100% height의 개념은 없다. - pc웹용 : 표준 사이트를 제작할 때는 꼭 1024*768 모니터 해상도에 들어가게 디자인해주세요.

5일 collapsing margin, selectors, float property

collapsing margin (마진통합) 현상

  • 인접한 블록레벨 엘리먼트의 margin-bottom과 margin-top 간의 일어나는 현상.
    • 큰 값 쪽으로 접혀들어간다.
    • 값이 동일한 경우 : bottom쪽의 값에 접혀들어가서 통합된다.
    • p 엘리먼트 간의 간격을 유지하는 원리를 생각하면 좀 더 쉽게 이해할 수 있다.
  • 부모 자식관계의 엘리먼트의 경우에도 collapsing margin이 발생한다. 1. 마진통합현상에서 벗어나려면: border, padding 값을 적용하거나, 부모엘리먼트에 컨텐츠를 넣으면 된다.
  • 자식이 인라인엘리먼트인 경우 : collapsing margin 은 일어나지 않는다. 이유: css boxmodel의 padding-top, padding-bottom, margin-top, margin-bottom 값이 구현되지 않기 때문에
  • -collapsing margin(마진통합) -블록레벨 엘리먼트에 생성된다.
  • -margin-bottom과 margin-top 사이에서 일어나는 현상.
  • -더 큰 마진값쪽으로 접혀들어가서 결국 큰쪽의 마진값이 적용된다.
  • -같은 값을 가지고 collapsing되면 위의 마크업된 엘리먼트의 margin-bottom쪽으로 접혀들어간다.
  • -컨텐츠가 들어있지 않은 엘리먼트의 margin-top과 margin-bottom 은 margin-top쪽으로 collapsing된다.
  • -블록레벨 엘리먼트의 부모자식 관계에서도 더 큰 마진값쪽으로 접혀 들어간다.( 부모자식의 margin-top 끼리의 collapsing)
  • -마진통합현상에서 벗어나려면:부모엘리먼트에 border, padding 값을 적용하거나, 컨텐츠를 넣으면 된다.

selectors(선택자)

  • ID selectors(id선택자) :css 선언부:#(파운드) 적용: id=""
  • Class selectors(클래스 선택자) : css 선언부:. 적용: class=""
  • Universal selector : *(asterisk)
  • Type selectors (태그선택자):body, p
  • Descendant selectors(하위선택자) : h1 em { color: blue }
  • Child selectors (자식선택자): body > P { line-height: 1.3 }
  • Adjacent sibling selectors(인접선택자): h1 + h2 { margin-top: -5mm }
  • Grouping : h1, h2, h3 { font-family: sans-serif }

css 작성순서

  1. 웹을 만들때 항상 적용하게 되는 속성과 값을 미리 정의한다.(초기화한다.)
  2. /* Layout */
  3. body안에 마크업된 순서대로 차근차근 작성한다.HTML마크업은 중요한 컨텐츠가 먼저 마크업되어야 한다.

float property - 엘리먼트가 가질 수 있는 속성 :

  • float property 의 값은 left, right, none
  • floating 된 엘리먼트의 영역에는 주변을 둘러싸는 컨텐츠가 침범하지 못하고, 주변을 감싸게 된다.
  • floating 되었다는 것은 normal flow한 흐름에서 벗어나고, static한 위치에서 벗어난 것을 의미한다. 그래서 다른 엘리먼트들은 floating된 엘리먼트가 없다고 생각하고, 우리 샘플처럼 div2가 div1의 자리를 차지하게 된다.

float property

  • - values:left, right
  • div1에 float:left 를 적용했더니
  • -div2가 안보였고, div2 안에 있던 텍스트가 div3의 텍스트와 겹쳐져 보인다.
  • -float:left 적용된 div1 엘리먼트는 원래의 위치(static)에서 벗어나 왼쪽방향으로 floating 된다. 그렇게 되면 그 다음에 마크업된 엘리먼트(div2)는 div1이 없다고 생각하여, 자신이 div1의 위치를 차지하게 된다. div2 뒤에 마크업된 div3도 따라서 div2가 위치한 바로 다음에 다시 위치하게 된다.
  • -float 적용된 엘리먼트는 자신이 위치할 공간이 부족하면 아래쪽으로 밀리게 된다.

웹표준과 웹접근성이 무엇이라고 생각되시나요?

답글로 표현봅시다!

2009/01/22 02:30 2009/01/22 02:30
TAG ,
받은 트랙백이 없고, 댓글 23개가 달렸습니다.

드림위버 CS3에서 웹 표준 문서 제작하기 [4] - 블록레벨 엘리먼트와 인라인 엘리먼트

웹표준 2008/12/29 15:17 TagnBrace.com 차영신

드림위버 CS3에서 웹 표준 문서 제작하기 [4] - 블록레벨 엘리먼트와 인라인 엘리먼트

이번 호는 [http://www.w3.org/TR/html401/struct/global.html]을 살펴보면서 BODY 엘리먼트 안에 바로 작성하는 Block-level Elements(블록 레벨 요소)와 Block-level Elements(블록 레벨 요소) 안에 포함되어 사용되는 Inline Elements(인라인 요소)에 대하여 알아보고 올바른 마크업을 하는 방법에 대해서 배워보기로 하자.

차영신 사진
글. 차영신.
웹표준 제작자.
Tag & Brace 대표.
아카데미정글 웹표준 강의.
www.tagnbrace.com/blog

  • 드림위버 CS3에서 웹 표준 문서를 제작하기 [1] - 웹표준과 웹접근성의 이해와 테스트 방법
  • 드림위버 CS3에서 웹 표준 문서를 제작하기 [2] - 의미를 살린 마크업과 유효성 검사
  • 드림위버 CS3에서 웹 표준 문서를 제작하기 [3] - CSS의 작성과 유효성 검사
  • 드림위버 CS3에서 웹 표준 문서를 제작하기 [4] - 블록레벨 엘리먼트와 인라인레벨 엘리먼트
  • 드림위버 CS3에서 웹 표준 문서를 제작하기 [5] - DIV 엘리먼트와 레이아웃 만들기
  • 드림위버 CS3에서 웹 표준 문서를 제작하기 [6] - UL, OL, DL 엘리먼트 사용하기

BODY 엘리먼트 안에 마크업하는 엘리먼트들은 블록 레벨 엘리먼트와 인라인 엘리먼트의 두 종류에 속한다. 기존의 테이블 레이아웃 방식에서는 엘리먼트의 이러한 특성을 알 필요가 없었지만, 의미를 살린 마크업을 하게 되면 엘리먼트의 구조적, 디스플레이적 특징을 이해해야 올바른 마크업이 가능하다.

브라우저에 엘리먼트가 디스플레이 될 때 블록처럼 층으로 쌓이게 되면 블록 레벨 엘리먼트이고, 마크업한 엘리먼트가 브라우저에 디스플레이 될 때 가로로 일렬로 늘어서게 되면 인라인 엘리먼트라고 생각하면 구분하기가 쉽다. 이것은 물론 브라우저에 보이는 것만을 가지고 구분하는 것이고 엘리먼트를 그렇게 만든 이유를 이해해야만 올바른 마크업을 할 수 있다.

HTML 도큐먼트의 전체적인 구조를 설명하는 http://www.w3.org/TR/html401/struct/global.html 화면

[그림1. 7 HTML 도큐먼트의 전체적인 구조를 설명하는 http://www.w3.org/TR/html401/struct/global.html 화면]

그림1의 도큐먼트에서 5.The document body 아래 3.Block-level and inline elements를 클릭하면 [http://www.w3.org/TR/html401/struct/global.html#h-7.5.3]에서 [7.5.3 Block-level and inline elements] 내용을 확인할 수 있다.

01. Block-level Elements(블록 레벨 요소)

블록 레벨 요소는 ‘덩어리’라는 의미의 Block(블록)을 만드는 레벨 요소로 H1~H6, P, ,DIV, FORM, UL, LI, ADDRESS, BLOCKQUOTE, FIELDSET, TABLE, HR 등의 엘리먼트가 있다. 물론 더 많은 엘리먼트가 여기에 속하지만 아래에 소개하는 방법으로 여러분 스스로 쉽게 판단할 수 있다. 일반적으로 블록 레벨 엘리먼트는 인라인 엘리먼트들과 다른 블록 레벨 엘리먼트를 포함 할 수 있다. 그러나 인라인 엘리먼트는 일반적으로 텍스트와 다른 인라인 엘리먼트들만 포함할 수 있다. 이 구조적 차이는 블록 엘리먼트가 인라인 엘리먼트 보다 더 큰 구조를 만들어 사용할 수 있도록 하고 있다.

처음 사용해 보는 엘리먼트라도 브라우저에 디스플레이해 보고 블록 레벨 엘리먼트인지 인라인 엘리먼트인지 판단하여 사용하면 된다. 인용문일 때 사용하는 BLOCKQUOTE 엘리먼트가 어디에 속하는지 궁금하다면, 다음의 소스와 같이 작성하여 브라우저에서 층으로 쌓이게 되면 블록 레벨 엘리먼트라고 판단하면 된다.

<body> <blockquote>인용문입니다1</blockquote> <blockquote>인용문입니다2</blockquote> </body>

blockquote 엘리먼트 적용화면

[그림2. blockquote 엘리먼트 적용화면]

02. Inline Elements (인라인 요소)

인라인 요소와 텍스트는 반드시 블록 레벨 요소에 포함시켜 나타내어야 유효성 테스트에 통과할 수 있다. Inline Elements는 a, img, em, strong 등이 해당되며, ‘텍스트 레벨 요소’라고 불리기도 한다. 대부분의 인라인 요소가 인라인 요소와 텍스트 포함이 가능하지만 블록 레벨 엘리먼트 포함은 불가능하다.

텍스트를 강조할 때 사용하는 EM 엘리먼트를 BODY 엘리먼트 바로 아래에 마크업한 예이다. 이것은 인라인 엘리먼트를 블록 레벨 엘리먼트 안에 사용할 수 있다는 규격을 지키지 않았기 때문에 유효성 검사를 하게 되면 ‘오류’가 있다고 나타난다. 잘못된 예:

<body> <em>텍스트를 강조합니다.</em> </body>

em 엘리먼트 Validation Output:Error 화면

[그림3. em 엘리먼트 Validation Output:Error 화면]

문단을 표현하는 블록 레벨 엘리먼트인 P 엘리먼트 안에 포함시켜 유효성 검사를 하게 되면 유효성 검사 통과가 된다.

올바른 예:

<body> <p> <em>텍스트를 강조합니다.</em> </p> </body>

em 엘리먼트 Validation Output: Passed 화면

[그림4. em 엘리먼트 Validation Output: Passed 화면]

의미를 살린 마크업을 올바르게 하기 위해서는 각 엘리먼트의 기능과 블록 레벨 엘리먼트와 인라인 엘리먼트의 특성에 맞게 사용해야 한다.

03. Grouping Elements: DIV, SPAN 엘리먼트

BODY 엘리먼트 안에 사용하는 엘리먼트 중 엘리먼트나 텍스트 데이터를 그룹으로 묶을 수 있는 기능을 가진 것은 DIV, SPAN 엘리먼트 두 가지가 있다. DIV 엘리먼트는 블록 레벨 엘리먼트로 다른 블록 레벨 엘리먼트(DIV, P, FORM, TABLE 등)들과 인라인 엘리먼트(A, SPAN, IMG, EM, STRONG, 등)을 포함할 수 있다. SPAN 엘리먼트는 텍스트 데이터의 중간에 외형적인 변화가 필요할 경우 사용하게 된다. 이러한 특성을 적용하여 마크업을 하게 되면 결국은 의미를 살려 마크업한 엘리먼트들을 그룹핑하여 영역을 나누는 역할을 DIV 엘리먼트가 수행하게 된다. DIV, SPAN 엘리먼트에 ID, Class Attribute(애트리뷰트)를 추가하여 원하는 구조를 완성하게 된다.

블록 레벨 엘리먼트라고 모두 다른 블록 레벨 엘리먼트를 포함할 수 있는 것은 아니다. ‘문단 내에서 제목으로 강조하고 싶은 텍스트에 H1 엘리먼트를 사용하겠다는 생각’으로 아래와 같이 마크업을 하였다면, 브라우저에 디스플레이는 생각한 대로 되었지만 유효성 검사를 해 보면 잘 못 마크업한 것을 알 수 있다.

모든 블록 레벨 엘리먼트가 다른 블록 레벨 엘리먼트를 포함할 수 있는 것이 아니기에, 이런 경우 구조적인 영역구분이 필요한 경우 P 엘리먼트 대신 DIV 엘리먼트를 사용하는 것이 올바른 방법이며, 예와 같이 제목만을 마크업하면 되는 경우 DIV 엘리먼트로 감싸지 않고 BODY 엘리먼트 바로 아래에 H1 엘리먼트만을 마크업해도 된다.

잘못된 예:

<body> <p> <h1>p엘리먼트 안의 h1 엘리먼트</h1> </p> </body>

사용자 삽입 이미지

[그림5. 브라우저에 디스플레이된 화면]

사용자 삽입 이미지

[그림6. 잘못된 예의 유효성 테스트 결과 화면]

Table 레이아웃에 익숙한 제작자가 의미를 살린 마크업을 시도하는 경우 많이 발생되는 문제가 테이블의 중첩되는 구조를 그대로 옮겨 놓는 듯한 구조를 만드는 것이다. 브라우저에 디스플레이도 원하는 대로 되고, 유효성 검사도 통과하지만 잘못한 마크업이다. 디자인을 위해 필요한 경우나 영역의 구분을 위해 필요한 경우가 아니라면 DIV 엘리먼트로 무의미하게 감쌀 필요는 없다.

잘못된 예:

<div> <div> <h1>과도한 div 안의 h1 엘리먼트</h1> </div> </div>

04. CSS의 Display Property(속성)의 값 inline, block

[http://www.w3.org/TR/CSS21/]의 [Full Table of Contents]에 있는 [9.2.4 The 'display' property]을 클릭하면, Display 속성의 값들을 설명하는 페이지로 연결된다. 값들 중에서 inline, block 값은 기본적인 엘리먼트의 디스플레이 속성을 변경할 수 있게 한다.

사용자 삽입 이미지

[그림7. http://www.w3.org/TR/CSS21/ CSS2.1 명세서 화면]

아래는 인라인 엘리먼트인 A 엘리먼트를 CSS로 display:block 화하여 블록엘리먼트의 속성을 가지게 하였다. 브라우저에서 보게 되면 블록 엘리먼트처럼 층으로 쌓이게 되고, 블록 엘리먼트의 Box Model(박스모델)이 그대로 적용된다. A 엘리먼트를 display:block 하는 방법은 메뉴바를 구현할 때 많이 사용되고 있다.

인라인 엘리먼트의 속성을 block화한 예:

<style type="text/css"> a{display:block;} </style> </head> <body> <p> <a href="#">a엘리먼트는 인라인 엘리먼트이다.</a> <a href="#">a엘리먼트는 인라인 엘리먼트이다.</a> </p> </body>

사용자 삽입 이미지

[그림8. 인라인 엘리먼트의 속성을 block화한 화면]

아래는 블록 레벨 엘리먼트인 ul, li 엘리먼트를 이용하여 가로 메뉴바를 구현할 때 사용하는 방법 중의 한 가지로, li 엘리먼트를 display:inline화 하는 경우를 살펴보자. 아래의 소스만을 가지고 완벽하게 메뉴바를 구현할 수 있는 것은 아니며, 여기서는 중간 과정 중의 하나로 display:inline 인 적용되는 것을 보여주기 위한 예이다.

블록 레벨 엘리먼트의 속성을 inline화 한 예:

<style type="text/css"> li{display:inline;} </style> </head> <body> <ul> <li>메뉴1<li> <li>메뉴2</li> </ul> </body>

사용자 삽입 이미지

[그림9. display:inline 적용 전 화면]

사용자 삽입 이미지

[그림10. display:inline 적용 후 화면]

지금까지 블록 레벨 엘리먼트와 인라인 엘리먼트의 특징을 살펴보았다. 여기에 추가할 부분은 HTML 엘리먼트들이 가지는 Box model에 관한 것이다. Box model의 속성 값은 블록 레벨 엘리먼트와 인라인 엘리먼트에 다르게 적용되며, 부모, 자식, 인접한 엘리먼트의 관계, 위치에 따라서 적용한 Box model의 값이 다르게 디스플레이 된다.

05. CSS box model(박스모델)

모든 엘리먼트에는 사각형 박스가 생성된다. 이 박스는 CSS로 제어할 수 있다. CSS box model(박스모델)은 [http://www.w3.org/TR/CSS2/box.html]에서 내용을 확인할 수 있다.

사용자 삽입 이미지

[그림11. http://www.w3.org/TR/CSS2/box.html 에 있는 박스모델 화면]

아래 소스에 적용하면서 그림을 이해해 보자.

박스모델을 이해하기 위한 예:

<body> <div> 박스안의 텍스트 </div> </body>

엘리먼트 안에 텍스트를 작성한 뒤 디스플레이 해 보면 일반적으로 볼 수 있는 화면이다. 하지만 css를 적용해 보면 이 텍스트들은 여러 프로퍼티들도 구성된 박스 안에 들어 있다는 것을 알게 된다. 그림11에서 가운데 'content' 부분이 div 엘리먼트 안에 작성한 ‘박스안의 텍스트’가 있는 영역이다. 물론 ‘content' 부분에 이미지가 들어갈 수 도 있다.

사용자 삽입 이미지

[그림12. div 엘리먼트가 만든 박스 안에 들어있는 텍스트의 디스플레이 화면]

1.Padding (패딩) content(내용)와 Border(테두리) 사이의 공간이다. 그림11과 같이 TP (padding-top), RP (padding-right), BP (padding-bottom), LP(padding-left)의 Property(속성)가 있다.

Padding property 적용 예:

<style type="text/css"> div {padding-top:20px;padding-right:20px; padding-bottom:20px;padding-left:20px; } </style> </head> <body> <div>박스안의 텍스트</div> </body>

텍스트 주변에 공간이 생긴 것을 확인 할 수 있다. 위의 CSS 선언부분을 간단하게 작성할 수 있다. 간략한 표기 속성인 padding 속성을 사용하고 값은 top, right, bottom, left 순으로 스페이스로 구분하여 작성할 수 있으며, 값이 동일할 경우 div {padding:20px; }으로 작성할 수 있다.

<style type="text/css"> div {padding:20px 20px 20px 20px; } </style>

사용자 삽입 이미지

[그림13. Padding property 적용 화면]

2.Border (테두리) Padding 둘레에 만들어지는 테두리이다. 그림11과 같이 TB(border-top), RB(border-right), BB (border-bottom), LB(border-left)의 Property(속성)가 있다.

Border property 적용 예:

<style type="text/css"> div{padding:20px;border:4px solid red; } </style> </head> <body> <div>박스안의 텍스트</div> </body>

Padding의 둘레의 top, right, bottom, left 방향에 4px 두께의 실선 빨간색 테두리가 만들어졌다. 위의 표기법은 가장 간략하게 표현된 방식이며, 원하는 방향의 테두리만 줄 수도 있으며 테두리선의 두께, 모양도 변경할 수 있고, 원하는 색상을 설정할 수 도 있다.

사용자 삽입 이미지

[그림14. Border property 적용 화면]

Border-top 속성을 재설정한 예:

<style type="text/css"> div{padding:20px;border:4px solid red;border-top:10px dashed green;} </style>

div 엘리먼트에 background-color 속성을 적용하게 되면 그림15에서 테두리의 바깥 경계까지 배경색상이 적용되기 때문에 선의 끊어진 부분에 배경색상이 채워져 있는 것을 볼 수 있다.

[그림15. border-top 속성을 재설정한 화면]

3.Margin (마진) Border 둘레에 만들어지는 투명한 공간이다. 그림11과 같이 TM(margin-top), RM(margin-right), BM(margin-bottom), LM(margin-left)의 Property(속성)가 있다.

Margin 속성을 적용한 예:

<style type="text/css"> div{padding:20px; border:4px solid red; border-top:10px dashed green; margin:30px;} </style>

Border 둘레의 top, right, bottom, left 방향에 투명한 공간이 생기는 것을 확인할 수 있다. DIV 엘리먼트의 width 값을 지정하지 않았기 때문에, width 기본값인 브라우저의 100%에서 30px씩 네 방향으로 margin 값이 적용되어, 결과적으로는 width 값이 줄어들게 된다.

사용자 삽입 이미지

[그림16. border-top 속성을 재설정한 화면]

Div 엘리먼트에 width값을 적용한 경우 마진이 적용되는 예:

<style type="text/css"> div{padding:20px; border:4px solid red; border-top:10px dashed green; margin:30px; width:150px;} </style>

사용자 삽입 이미지

[그림17. div엘리먼트에 width:150px을 적용한 화면]

06. 마치며

드림위버 CS3에서 웹표준 문서를 제작하기위해서의 네 번째인 이번 호에서는 블록레벨 엘리먼트와 인라인 엘리먼트를 살펴보았다. HTML 엘리먼트는 각각의 기능을 가지면서도 블록레벨 엘리먼트와 인라인 엘리먼트의 특징도 가지고 있으며, 이러한 특징을 CSS를 통해서 제어할 수 있음을 알 수 있었다. 물론 더 많은 내용들이 있지만 기본적인 특징들을 잘 관찰하고 이해한 뒤 다른 특징들을 살펴보는 것이 올바른 웹표준 문서를 구현하기 위해 도움이 될 것이다.

2008/12/29 15:17 2008/12/29 15:17
TAG , , , , , ,
트랙백은 하나, 댓글이 없습니다.

오랜만에 가지는 여유로운 아침입니다

블로그일기 2008/12/16 08:40 TagnBrace.com 차영신

지난 2달반 동안 진행된 2개의 웹표준 프로젝트가 마무리되어서, 오늘 아침 오랜만에 여유롭게 아침을 시작합니다.

좋네요 ~~ ^^

이제 웹표준 스펙과 웹접근성에 대한 연구를 다시 시작합니다.

2008/12/16 08:40 2008/12/16 08:40
TAG , ,
트랙백 2개, 댓글이 없습니다.

웹표준은 스펙을 준수하려는 마음에서 시작합니다

웹접근성 2008/10/07 15:28 TagnBrace.com 차영신

안녕하세요~~ 블로그에 두 달만에 글을 쓰게 되네요..그 동안 이 곳에 글을 쓰지는 못했지만 우리나라의 웹표준화를 위해 나름 의미있는 일들을 많이 저질러 놓느라 바쁘게 보냈습니다. 개인적으로는 올해 계획한 의미있는 일 중의 하나인 웹표준 책을 만들기위해 남은 2개월에 집중하려고 합니다 .

여러분은 웹표준을 무엇이라 생각하세요?

제가 생각하는 웹표준을 간단하게 적어볼려고 합니다.

웹표준 강의와 지금 진행하고 있는 2개의 웹표준 프로젝트에서 현업들과 클라이언트를 접하면서, 웹표준과 웹접근성을 실천하기 위한 이론과 현실 속에서 많은 갈등과 안타까움을 느끼게 됩니다.

웹표준은 W3C에 설명되어 있는 웹을 만들기 위한 언어인 HTML의 스펙을 올바르게 준수하려는 마음가짐에서 부터 시작합니다. 결코 어렵지도 않고 특별하지도 않습니다.

웹표준을 지킨다는 것은 내가 익숙해져 있는 방식이 틀렸다면 그것을 고치려는 마음을 가지고 노력하는 것입니다. 단순히 보여진다고 잘못된 문법으로 만들어진 것을 내버려두는 것이 아니라, 왜 올바른 문법을 사용하여야 하는지 알려고 하고 고쳐나가는 것입니다.

정말 쉽지요. ^^

2008/10/07 15:28 2008/10/07 15:28
TAG
받은 트랙백이 없고, 댓글이 없습니다.

ADOBE MASTERS CLASS 2008에 다녀왔습니다

블로그일기 2008/06/27 12:51 TagnBrace.com 차영신

2008년 6월 25일 수요일 ADOBE MASTERS CLASS 2008에 다녀왔습니다.

오후에는 Greg Rewis(그렉 루이스)씨의 WEB TRACK의 강연을 들었습니다.

오늘 화면 캡쳐를 위해 http://creativefreedom.co.kr/mc2008/index.html를 가서 보니, 그 날 본 강연자의 얼굴과 사진이 달라서 살짝 웃음이 나오네요.. 오른쪽에 계신분이 Greg Rewis(그렉 루이스)씨 입니다. 실제로는 애플의 스티브잡스 같은 분위기와 연령대이신듯 했습니다. 제 경우와 비슷해서 .....ㅋㅋ

Greg Rewis(그렉 루이스)씨는 독일에서 1995년 GOLIVE라는 회사를 만들어서 3년뒤 ADOBE에 회사를 팔고 Macromedia에 들어가서 Dreamweaver3, 4, 5를 만든 훌륭하신 분이시더군요. 그런데, ADOBE와 Macromedia가 합병이 되었으니 다시 ADOBE에서 일을 하고 계시구요. HTML 에디터 부분에서는 신적인 존재이신 분 답게 오전, 오후 강연을 아주 진지하고 자세히 열정적으로 진행하셨습니다. 물론 테이블을 이용하지 않고 레이아웃을 잡으면서, CSS를 적용하는 웹표준 제작방식으로 말이지요.

오후의 Break Time에는 사인을 받으려고 줄서있는 광경을 연출하기도 했습니다. 사인도 좋지만 강연자가 잠깐 쉴 수 있도록 배려했으면 하는 아쉬움이 있었습니다. 저도 Dreamweaver CS3의 Validation에 대해 궁금한 것이 있어서 질문하고 싶은 것이 있었는데, e-mail을 보내거나 FAQ를 보고 해결하기로 하고 결정했습니다.

이 번 강연으로 많은 분들이 드림위버를 제대로 이해하고 사용하게 되는 계기가 되지 않을까 생각이 들었습니다.

어도비 마스터즈 클래스 2008

2008/06/27 12:51 2008/06/27 12:51
TAG , , , ,
트랙백 361개, 댓글이 없습니다.

파이어폭스 2008년 6월 18일 파이어폭스3 공식발표

브라우저 2008/06/18 14:55 TagnBrace.com 차영신

파이어폭스 2008년 6월 18일 파이어폭스3 공식발표되었습니다.

백문이 불여일견이라고 했습니다.

한 번 사용해 보세요.

mozilla 사이트로 가서 다운받기

파이어폭스3 다운로드

2008/06/18 14:55 2008/06/18 14:55
TAG , ,
트랙백 330개, 댓글이 없습니다.