디자인이 어디로 갔지?

'CSS'에 해당되는 글 5건

  1. 2010/06/23 차영신 웹 표준 웹 접근성 교육과정 안내 (2010.7.10~ 2010.7.25) (1)
  2. 2008/12/29 차영신 드림위버 CS3에서 웹 표준 문서 제작하기 [4] - 블록레벨 엘리먼트와 인라인 엘리먼트
  3. 2008/06/27 차영신 ADOBE MASTERS CLASS 2008에 다녀왔습니다
  4. 2008/06/04 차영신 [웹표준] CSS작성과 유효성 검사 - 월간웹디자인5월호에 기고한글
  5. 2008/02/28 차영신 [웹표준] 웹표준과 웹접근성의 이해 - 월간웹디자인 2008년3월호 기고한글

웹 표준 웹 접근성 교육과정 안내 (2010.7.10~ 2010.7.25)

분류없음 2010/06/23 09:20 차영신

교육 대상

웹 디자이너, 웹 퍼블리셔, UI개발자.

교육 장소

서울대입구역 5번 출구 나와서 직진 40미터 지점 '신원메트로빌 208호' 태그앤브레이스 교육장

수강신청

모집인원 : 25명(선착순)

수강료 : 38만원

입급계좌: 신한은행 100-024-447712   예금주:차영신(태그앤브레이스)

문의:iam@tagnbrace.com / 011-9707-6699

교육신청방법: 입금한 뒤 이메일로 입금자명, 핸드폰번호 보내주시면 확인하고 이메일로 답변드리겠습니다.

강사 소개

정찬명

- NHN 오픈UI기술팀 선임UI개발자, 한국정보화진흥원 웹 접근성 자문위원
- 강의이력: 행정안전부, 한국정보화진흥원, 한국생산성본부, 한국마이크로소프트, 전주정보영상진흥원, 비즈델리 외 다수
- 저서: 드림위버 8 기본 & 활용 & 웹 표준 가이드북







김태곤

- NHN 오픈UI기술팀 선임UI개발자
- 강의이력 : 숭실대학교, 단국대학교, 전주정보영상진흥원 등
- 주요 프로젝트 : XpressEngine, 네이버 지도, 네이버 블로그, Smart Editor, Jindo JavaScript Framework








강의 일정


회차 날짜 시간 커리큘럼 강사
1 7/10(토) 10:00~16:00(5h) - 웹 접근성 품질마크 인증심사 기준 및 평가 방법(이론)
- K-WAH 웹 접근성 평가 도구 소개(실습) 		정찬명
2 7/11(일)
 10:00~16:00(5h)
 - 의미있는 XHTML 마크업(실습)
- CSS 기초(실습)
- CSS 레이아웃 제작(실습) 		정찬명
3 7/17(토)
 10:00~16:00(5h)
 - Image Replacement, Image Sprite(실습)
- 텍스트 버튼 만들기(실습)
- 글로벌 네비게이션 제작(실습) 		정찬명
4 7/18(일)
 10:00~16:00(5h)
 - 크로스 브라우징(실습)
- CSS3 활용(실습)
- 겸손한 자바스크립트 개념(이론) 		정찬명
5 7/24(토) 10:00~16:00(5h)
 - 자바스크립트 기초(이론,실습)
- 자바스크립트 프레임웍 소개(이론)
- jQuery를 사용한 크로스브라우징 자바스크립트(실습) 		김태곤
6 7/25(일) 10:00~16:00(5h)
 - 접근성을 고려한 자바스크립트 작성방법(이론)
- 탭 패널(실습)
- 아코디언 메뉴(실습)
- jQuery 플러그인 소개(실습) 		김태곤


  • 본 강의는 수강생에 따라 커리큘럼이 일부 변경되거나 사정으로 인하여 폐강될 수 있습니다.
  • 본 강의내용은 태그앤브레이스 및 강사와의 협의 없이 무단으로 사용될 수 없습니다.
  • 무단 사용시 저작권 침해로 인해 처벌 받을 수 있음을 알려드립니다.
2010/06/23 09:20 2010/06/23 09:20
TAG , , , , , , , , , ,
받은 트랙백이 없고, 댓글 하나가 달렸습니다.

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

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

드림위버 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 , , , , , ,
트랙백은 하나, 댓글이 없습니다.

ADOBE MASTERS CLASS 2008에 다녀왔습니다

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

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 , , , ,
트랙백 363개, 댓글이 없습니다.

[웹표준] CSS작성과 유효성 검사 - 월간웹디자인5월호에 기고한글

웹표준 2008/06/04 16:53 차영신

드림위버 CS3에서 웹 표준 문서 제작하기 [3] - CSS작성과 유효성 검사

이번 호는 의미를 살려 마크업한 [http://ko.www.mozilla.com/ko/firefox/about] 의 HTML 엘리먼트에 CSS(Cascading Style Sheet)을 적용하여 파이어폭스, IE6, IE7에도 동일하게 디스플레이 되도록 적용시키고 CSS Validator를 테스트 하는 방법에 대해서 배워보기로 하자. CSS 적용의 기준은 W3C의 권고안을 많이 반영하여 만든 파이어폭스 브라우저를 기준으로 작업하고 IE6, IE7, 오페라, 사파리 등과 같은 브라우저에서 다르게 디스플레이되는 부분은 별도의 CSS 핵(Hack)을 작성하여 주는 방식으로 진행한다.

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

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

기존의 테이블로 레이아웃을 만들던 방식에서는 link스타일, body 엘리먼트 정도를 CSS로 제어하였지만, 웹 표준 방식에서는 웹 문서의 모든 디자인적 용도(엘리먼트의 배열, 텍스트 색상, 크기 등, 디자인을 위한 배경이미지 위치, 네비게이션 구현 등)를 위한 작업은 CSS를 이용하여 작업하게 된다. 앞의 호에서 의미를 살린 마크업으로 [http://ko.www.mozilla.com/ko/firefox/about/] 와 같이 HTML을 작성한 것을 CSS를 이용하여 디자인을 입혀보기로 하자. 작성하지 않은 분은 파이어폭스 브라우저에서 [보기>소스]하여 나온 소스를 [전체선택]하여 드림위버에서 Script와 CSS를 제거하고 사용해도 된다.

CSS1은 1996년에 소개되었는데, 현재 사용하고 있는 CSS의 기본구조, Selector(선택자), Property(프로퍼티)등 대부분을 갖추고 있었으며, 1997년에 만들어진 CSS2은 CSS1을 대부분 사용하면서 Media Types을 추가하여 브라우저, 음성장치, 프린터, 점자장치, 핸드장치(handheld device) 등 각기 다른 장치들에 맞도록 CSS를 적용할 수 있도록 하였으며, 컨텐츠의 위치지정, 다운로드할 수 있는 글꼴, 테이블 레이아웃, 국제화 지원 기능, 자동 카운터와 번호 붙이기, 사용자 인터페이스와 관계된 일부 Property(속성)을 지원하게 된다. 현재 표준으로 인정된 CSS2.1은 2와는 많은 차이는 없다. 현재 CSS3이 만들어지고 있는 중이며, 여러 개의 Background 이미지를 사용하고 위치도 조절할 수 있으며, background-size, border-style, border-image, border-radius, box-shadow Property(속성)등이 추가된다고 한다. 현재 웹표준 사이트를 제작한다면 많은 브라우저들이 지원하는 CSS2.1을 기준으로 작업하고 유효성 검사를 하게 된다. [ http://www.w3.org/TR/CSS21/ ]에서 CSS2.1에 관한 정보를 제공하고 있다.

사용자 삽입 이미지

[그림1. http://www.w3.org/TR/CSS21/ 화면]

현재 논의되고 있는 CSS3에 관한 정보는 아래의 주소에 링크되어 있는 정보를 잘 살펴보기 바란다.

사용자 삽입 이미지

[그림2. http://www.w3.org/Style/CSS/current-work 화면]

02. CSS를 웹문서에 적용하는 방법

CSS를 웹문서에 적용하는 방법에 따른 분류이다.

1.External Style Sheet (외부 스타일시트)

외부 스타일시트를 적용하는 방식에는 두 가지가 있다. 위의 방식은 일반적으로 많이 사용하는 방식으로 브라우저의 버전에 관계없이 CSS를 적용시킬 수 있다. XHTML로 웹문서를 작성하는 경우 단독 엘리먼트이지만 끝에 / 를 넣어 닫아준다.

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

@import 방식은 CSS 파일이 다른 CSS 파일을 불러올 수 있도록 한다. 복잡한 구조의 사이트인 경우 웹문서에 적용되는 최종 style.css가 각각인 base.css, layout.css를 불러와 포함할 수 있다. 이렇게 다른 CSS를 포함하는 style.css는 위의 link 방식으로 웹문서에 적용할 수도 있고, 아래와 같이 @import 방식으로 적용될 수도 있다.

style.css가 CSS를 포함하는 방법

@import url(base.css);
@import url(layout.css);

@import로 웹문서에 적용되는 경우 낮은 브라우저에서는 인식하지 못하는 경우가 있기 때문에 최신 버전의 브라우저에 적용시킬 CSS를 별도로 불러오는 경우 사용하기도 한다.

<head>
<style type="text/css">
@import url(style.css);
</style>
</head>

‘정보통신 접근성 향상 표준화 포럼’ 사이트인 [http://iabf.or.kr/]가 케이스이다.

사용자 삽입 이미지

[그림3. http://iabf.or.kr/ 화면]

2. Internal Style Sheet (내부 스타일시트)

웹 문서 내부에 CSS를 작성하여 사용한다.

<head>
<style type="text/css">
h1 { margin: 0; }
</style>
</head>

3. Inline Styles (필요할 때마다 엘리먼트에 적용하는 스타일)

<p style="color: gray; margin-top: 10px"> 이것은 웹표준 방식에서는 권장하지 않는다. 수정, 관리가 어렵고, 컨텐츠와 디자인의 분리를 위해서도 좋은 방법이 아니다. </p>

03. Selector(선택자)

CSS를 작성하는 방법은 먼저 Selector(선택자)를 작성하고 {(시작 중괄호)로 시작하여, }(닫기 중괄호)로 선언 구간을 만든다. 선언 구간 안에 Property(프로퍼티) 선언, :(콜론), Value(값), ;(세미콜론) 순으로 작성한다. :(콜론)은 Property(프로퍼티)와 Value(값)을 구분하기 위한 것이고 ;(세미콜론)은 마침표의 역할을 한다. ;(세미콜론) 뒤에 다시 Property(프로퍼티)를 추가하고 동일한 방식으로 계속 작성해 나간다.

h1 { font-size: 12px;}

많은 선택자가 있지만 기본적으로 많이 사용하는 선택자를 중심으로 알아보자. 파이어폭스에 [Web Developer]를 플러그인 하고 [http://ko.www.mozilla.com/ko/firefox/about/]사이트의 CSS에서 사용된 선택자를 확인해 보자.

사용자 삽입 이미지

[그림4. 파이어폭스에서 [Web Developer>View CSS]를 선택하는 화면]

1.Type selectors (태그 선택자)

아래에서 body, form, img 가 태그 선택자이다. 주로 기본적으로 엘리먼트에 적용할 CSS를 작성할 때 사용하는 방식이다. 다음, 네이버 같은 사이트의 CSS를 보면 처음부분에 엘리먼트에 대한 Property를 쭉 정의해 놓았다. 웹 문서 마크업에서 사용하는 엘리먼트는 많지 않고 디스플레이 되어야 하는 상태가 예측되기 때문에 기본적인 CSS 적용이 가능하며, 이렇게 해 두는 것이 효율적이다.

사용자 삽입 이미지

[그림5. 태그 선택자 화면]

2.Class selectors (클래스 선택자)

클래스 선택자는 앞에 .을 붙이고 영문으로 시작하도록 작성하면 된다. 아래에서 .product-firefox 와 .product-thunderbird 이 클래스 선택자이다. 원하는 엘리먼트를 정밀하게 제어할 수 있으며, .product-firefox 은 마크업 된 서로 다른 엘리먼트에 여러 번 적용해서 사용할 수도 있다. 아래와 같이 엘리먼트에 class="" 를 쓰고 적용한다. 이때 .은 빼주어야 한다.

사용자 삽입 이미지

[그림6. 클래스 선택자 화면]

<body> <div class="product-firefox">클래스선택자를 엘리먼트에 적용하는 방법 </div> </body>

3.ID selectors (아이디 선택자)

아이디 선택자는 앞에 #을 붙이고 영문으로 시작하는 네임을 준다. 아이디 선택자는 같은 페이지 내에 한 번만 적용하는 것이 원칙이다. 같은 ID를 한 번 이상 사용하여도 작동은 하지만 HTML Validator를 통과하지 못한다. 주로 레이아웃 구조를 위해 사용되거나 웹브라우저에서 아이디 선택자가 클래스 선택자 보다 우선권이 주어지는 것을 이용하여, 스타일의 충돌을 피하기 위해서도 사용한다.

사용자 삽입 이미지

[그림7. 아이디 선택자 화면]

4.Descendant selectors (하위 선택자)

#header 아이디 밑의 자식으로 있는 h1 엘리먼트의 스타일을 적용하고 싶다면 그림과 같이 작성한다. 부모와 부모에 포함된 자식의 관계는 스페이스로 구분한다.

사용자 삽입 이미지

[그림8. 하위 선택자 화면]

#header의 자식인 h1 엘리먼트의 자식인 img 엘리먼트를 선택하여 CSS를 적용하였다.

사용자 삽입 이미지

[그림9. 하위 선택자 화면]

하위 선택자를 이해하기 위해서는 HTML의 가계도를 이해하는 것이 필요하다.

5. Grouping (그룹 선택자)

동일한 값을 사용하는 엘리먼트나 ID, Class 선택자를 그룹으로 묶어서 다음과 같이 적용할 수 있다. 선택자의 구분은 ,(콤마)로 한다.

h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }

위의 CSS를 그룹핑하면 다음과 같다.

h1, h2, h3 { font-family: sans-serif }

사용자 삽입 이미지

[그림10. 엘리먼트만을 그룹핑한 화면]

사용자 삽입 이미지

[그림11. 각각의 ID선택자 밑의 자식엘리먼트의 값을 지정하기위해 그룹핑한 화면]

6. Universal selector (전체 선택자)

*(애스터리스크)는 웹 문서에 있는 모든 엘리먼트를 선택하기 위해 간략히 표현하고 싶을 때 사용할 수 있다. 아래와 같이 작성하면 혅재 웹 문서에 있는 모든 엘리먼트의 글자크기를 12픽셀로 지정할 수 있다.

* {font-size:12px;}

전체 선택자는 하위 선택자의 역할로도 사용된다. 다음과 같이 작성하면 #content 밑의 모든 엘리먼트의 배경색상은 흰색으로 설정된다.

#content * {background: #fff;}

7. 그 밖의 선택자들

  • Child selectors (자식 선택자)
  • Adjacent sibling selectors (인접한 형제 선택자)
  • Attribute selectors (애트리뷰트 선택자)
  • Pseudo-classes (가상 클래스)
    • :first-child
    • The link pseudo-classes: :link and :visited
    • The dynamic pseudo-classes: :hover, :active, and :focus
    • The language pseudo-class: :lang
  • Pseudo-elements (가상 엘리먼트)
    • The :first-line pseudo-element
    • The :first-letter pseudo-element
    • The :before and :after pseudo-elements

04. CSS 작성하기

CSS는 마크업된 엘리먼트를 원하는 형태로 브라우저에서 보여지도록 하는 용도로 사용하기 때문에 먼저 작성된 엘리먼트의 구조를 파악하는 것이 중요하다. 그림은 드림위버의 디자인뷰에서 보여지는 화면위에 구조를 위해 사용된 DIV 엘리먼트의 ID, Class 명을 표기한 것인데, 여기서는 Class 선택자만 사용되어 있다.

사용자 삽입 이미지

[그림12. http://ko.www.mozilla.com/ko/firefox/about/의 구조]

1. 원하는 대로 구조가 잡히는지 확인하면서 작업하는 것이 중요하다. 구조는 블록레벨 엘리먼트를 그룹핑하는 div 엘리먼트를 사용하게 되기 때문에, 필자의 경우 처음 구조를 확인하면서 마크업을 하는 경우 다음과 같이 작성하여 div 엘리먼트의 테두리를 1픽셀 빨강색으로 설정하여 확인한다. 작업이 어느 정도 마무리 되면 삭제하고 부분적으로 엘리먼트에 배경색상을 넣어 넓이와 높이를 확인하면서 작업하는 것이 편리하다.

사용자 삽입 이미지

[그림13. div에 테두리 적용한 파이어폭스 브라우저 화면]

2. 웹문서에 사용된 기본적인 엘리먼트에 대한 스타일 정의가 먼저 되어야한다. 현재의 웹문서에는 사용되지 않은 엘리먼트이지만 CSS는 공통으로 사용되는 경우가 많기 때문에 엘리먼트의 그룹핑 선택자가 작성되고 동일한 값을 주는 경우가 일반적이다. 소스에 작성된 규칙은 ‘Nice to Opera’ 규칙이라고도 하는데, IE5만 닫힌 중괄호를 인식하여 스타일 선언이 끝난 것으로 생각하게 한다. 나머지 모든 웹브라우저는 앞서 지정된 x-small 값을 small로 덮어써 다시 적용하게 된다. 그 결과 글씨 크기가 모두 일관된 배율이 유지되게 할 수 있다.

voice-family: inherit;
font-size: small; /*일반 웹브라우저에 적용된다*/ }

body, td, th, input { /* redundant rules for bad browsers */
font-family: verdana, sans-serif;
font-size: x-small;
voice-family: "\"}\"";
voice-family: inherit;
font-size: small; }

사용자 삽입 이미지

[그림14. body 엘리먼트에 글자크기를 적용한 파이어폭스 브라우저 화면]

3. :link와 :visited와 :hover :visited: 는 가상클래스 선택자이며, 작성 순서를 지켜야 원하는 결과를 얻을 수 있다.

/* Navigation */
:link { color: #039; }
:visited { color: #636; }
:link:hover, :visited:hover { color: #333; }

사용자 삽입 이미지

[그림15. link 스타일을적용한 파이어폭스 브라우저 화면]

05. CSS Validator

[http://jigsaw.w3.org/css-validator/ ]에서 CSS 유효성 검사를 할 수 있다. 서버상에 CSS가 없기 때문에 [By direct Input ] 안에 직접 작성한 CSS를 입력하여 테스트 해 볼 수 있다.

사용자 삽입 이미지

[그림16. http://jigsaw.w3.org/css-validator/#validate_by_input 화면]

사용자 삽입 이미지

[그림17. http://jigsaw.w3.org/css-validator/validator 화면]

2008/06/04 16:53 2008/06/04 16:53
TAG , , ,
트랙백 354개, 댓글이 없습니다.