CSS 실전 - Hyeonseok › soojung › contents › upload › kic-css... · 2010-10-14 · 구성...

CSS 실전 구축(주) 시도우신현석

Overall Process

Overall Process

내용 (Contents : Story Board or Design Source)

문서구조 (Structure : eXtensible HyperText Markup Language)

디자인 (Style : Cascade Style Sheet)

움직임 (Script : Document Object Model)

내용(Contents : Story Board or Design Source)

구성 요소의 확인

• 화면의 구성요소

• 전달하고자 하는 내용

• 컨텐츠 내용 전달과 직접적으로 관련이 없는 디자인 적인 요소는 배제

• 스토리보드, 디자인 소스로부터 구성요소를 파악하여 정리

구성 요소 모크업

• 내용 전달을 효과적으로 할 수 있게 컨텐츠를 선형화 함

• 컨텐츠의 목적별로 간략한 그루핑 (통상적으로 컨텐츠 구성 디자인 전략이 반영되어 있음)

• 텍스트로만 제작된 상태에서도 모든 컨텐츠를 인식 가능하게 제작

-- 사이트로고 --대통령 자문 빈부격차, 차별시정 위원회

-- 사이트메뉴 --HomeSite MapContact us

-- 상단메뉴 --위원회소개 위원장인사말 연혁 위원회 전문위원회 사무기구 위원회규정 약도 및 연락처주요활동 추진배경 정책비전 주요과제 사업계획알림마당 공지사항 최근뉴스 보도자료 주간사회동향참여마당 질문하기 제안코너 자유게시판자료실 국정과제관련자료 정책참고자료 사진자료 동영상자료 뉴스레터

-- 카피 --빈부격차 완화와 차별시정으로 모두가 웃을 수 있는 대한민국을 만듭니다._________________________________________________

위원회 소개

-- 좌측메뉴 --위원장 인사말연혁위원회 위원회 소개 위원명단 조직도전문위원회사무기구위원회규정약도 및 연락처_________________________________________________

-- 현재위치 --Home | 위원회소개 | 위원장인사말

-- 페이지 제목 --위원장 인사말

-- 페이지 컨텐츠 --(사진) 빈부격차 차별시정 위원회 위원장 이혜경

이웃을 배려하며 다 함께 잘 사는 따뜻한 사회를 열어가겠습니다.

지금 우리 사회가 직면한 가장 중요한 문제는 사회 양극화입니다. 우리 사회는 격동의 역사 속에서 성숙한 민주주의를 향해 전진해 왔지만, 외환위기 이후 신자유주의적 구조조정이 강화되면서 빈부격차와 사회 양극화가 심화되어 왔으며, 성/장애/학력 등에 의한 차별의 문제는 이를 더욱 심화시켜 왔습니다.빈부격차와 차별에 의해 우리 사회의 양극화가 지속된다면 사회통합을 약화시킴으로써 민주주의의 기반을 위협할 것입니다. 따라서 사회 양극화 문제는 21세기 세계화 시대를 살아가는 우리가 반드시 해결해야 할 과제입니다.그동안 참여정부는 동반성장과 참여복지를 국정철학으로 구현하고자 노력하였습니다. 특히 우리 빈부격차?차별시정위원회는 사회안전망 확충과 차별 시정으로 사회통합 기반을 구축하는데 주력해 왔습니다. 우리 사회의 통합을 가로막는 빈부격차와 차별이 사라지고, 우리 모두가 이웃을 배려하며 다함께 잘사는 따뜻한 사회를 만들어 가도록 더욱 노력하겠습니다.(서명 이미지) 빈부격차 차별시정 위원회 위원장 이혜경_________________________________________________

-- 배너링크 --청와대홈노무현대통령청와대통신청와대 TV국민참여마당열린마당Dynamic Korea_________________________________________________

-- 관련링크 --정책기획 위원회국가 균형발전 위원회정부혁신·지방분권 위원회동북아시대 위원회사람입국일자리 위원회교육혁신 위원회지속가능 발전 위원회농어업·농어촌 특별대책 위원회과학기술 중심 사회 추진 기획단문화 중심도시 조성 위원회사법제도 계혁 추진 위원회저출산고령사회 위원회국민경제자문회

-- 주소 --110-787 서울시 종로구 도렴동 95-1 정부중앙청사 별관 604호. 전화번호 : 02) 733-8951 팩스 : 02)722-0297Email to : Webmaster

(버튼) 찾아오시는 길

-- 관련부처링크 --재경부교육인적자원부행자부보건복지부노동부여성가족부건설교통부기획예산처법제처통계청

상단 영역 좌측/컨텐츠 영역 하단 영역

문서구조(Structure : eXtensible HyperText Markup Language)

문서타입선언 선택

• 문서타입선언(Document Type Definition) 에 따라 문법 검사(validation)가 이루어짐

• HTML vs. XHTML

• Version

• Strict vs. Transitional(Frameset)

• IE6, IE7의 Standards, Compatibility mode

단위 파일 작성

• 컨텐츠 페이지의 기본 단위 파일 작성

• 공통 항목과 커스터마이징 항목을 구분하여 작성

• 개별 문서가 의미를 갖을 수 있게 구성

<?php include($_SERVER['DOCUMENT_ROOT']."/share/config.php"); ?><!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="ko"><head><meta http-equiv="Content-Type" content="text/html; charset=euc-kr" /><title>위원장 인사말 | 빈부격차 차별시정위원회</title><?php include($_SERVER['DOCUMENT_ROOT']."/share/layout_head.php"); ?><script type=”text/javascript”>// some code</script><style type=”text/css”>/* some style rules */</style></head><body class="intro"><?php include($_SERVER['DOCUMENT_ROOT']."/share/layout_top.php"); ?><div id="location"> <a href="main.asp">Home</a> | <a href="chp01.asp?ex=1">위원회소개</a> | <span class="current">위원장인사말</span></div><h1><img src="../img/01intro/intro_tit01.gif" alt="위원장 인사말" /></h1><div id="content-area"> </div><?php include($_SERVER['DOCUMENT_ROOT']."/share/layout_btm.php"); ?></body></html>

의미에 맞게 마크업

• 표제어 : <h1>~<h6>

• 문단 : <p>

• 리스트 : <ul>, <ol>, <li>, <dl>, <dt>, <dd>

• 표 : <table>, <thead>, <tbody>, <colgroup>, <col>, <tr>, <th>, <td>

• 사용자 입력 : <form>, <fieldset>, <legend>

구성요소별 마크업

• 사이트 로고 : <h1>

• 상단, 좌측 메뉴 : <ul>, <li>

• 페이지 제목 : <h1>

• 내용 : <h2>~<h6>, <p>, <ul>, <ol>, <dl>, <table>, <form> 등 외 대부분의 태그

• 주소 : <address>

h1

ul ul

h1

address

ul ul

p + img

구성요소의 그룹핑

• <div>, <span>을 이용하여 그룹핑

• id, class를 이용하여 의미 부여

• 컨텐츠의 논리적인 구성

• 불필요한 주석이 없어짐

#head

#sub#body

#foot

<div id="head"> <h1 id="logo"><a href="main.asp"><img src="../img/06com/pcsi_logo01.gif" alt="대통령 자문 빈부격차, 차별시정 위원회" /></a></h1> <div id="toplink"> <ul> <li style="display: none;" ><a href="#body">컨텐츠로 바로가기</a></li> <li><a href="/"><img src="/img/nav/top01.png" alt="Home" /></a></a></li>  </ul> </div> <div id="topnav"> <ul> <li class="menu-1"><a href="chp01.asp?ex=1"><img src="/img/06com/menu-1.png" alt="위원회소개" /></a> <ul> <li><a href="chp01.asp?ex=1"><img src="/img/06com/menu-1-1.png" alt="위원장인사말" /></a></li>  </ul> </li>  <ul> </div> <div id="visual"> <p><img src=”/img/nav/visual.jpg” alt=”빈부격차 완화와 차별시정으로 모두가 웃을 수 있는 대한민국을 만듭니다.” /></p> </div></div>

#head

<div id="sub"> <h1><img src="../img/01intro/left_tit.gif" alt="위원회 소개" /></h1>

<ul id="subnav"> <li><a href="?ex=1"><img src="../img/01intro/left_menu01_off.gif" name="menu011" alt="위원장 인사말" /></a></li> <li><a href="?ex=2"><img src="../img/01intro/left_menu02_off.gif" name="menu021" alt="연혁" /></a></li> <li><a href="?ex=3_1"><img src="../img/01intro/left_menu03_off.gif" name="menu031" alt="위원회" /></a> <ul> <li><a href="?ex=3_1"><img src="../img/01intro/left_menu03_1off.gif" name="menu03_11" alt="위원회 소개" /></a></li> <li><a href="?ex=3_2"><img src="../img/01intro/left_menu03_2off.gif" name="menu03_21" alt="위원명단" /></a></li> <li><a href="?ex=3_3"><img src="../img/01intro/left_menu03_3off.gif" name="menu03_31" alt="조직도" /></a></li> </ul> </li> <li><a href="?ex=4"><img src="../img/01intro/left_menu04_off.gif" name="menu041" alt="전문위원회" /></a></li> <li><a href="?ex=5"><img src="../img/01intro/left_menu05_off.gif" name="menu051" alt="사무기구" /></a></li> <li><a href="?ex=6"><img src="../img/01intro/left_menu06_off.gif" name="menu061" alt="위원회규정" /></a></li>  </ul></div>

#sub

<div id="body"> <div id="location"> <a href="main.asp">Home</a> | <a href="chp01.asp?ex=1">위원회소개</a> | <span class="current">위원장인사말</span> </div> <h1><img src="../img/01intro/intro_tit01.gif" alt="위원장 인사말" /></h1> <div id="content-area"> <p style="margin: 0 0 -180px 0;"><img src="../img/01intro/sub01_img01.jpg" alt="빈부격차·차별시정 위원회 위원장 이혜경" /></p> <p style="margin: 0 0 0 154px;"><img src="../img/01intro/sub01_img02.gif" alt="이웃을 배려하며 다 함께 잘 사는 따뜻한 사회를 열어가겠습니다" /></p> <p style="margin: 20px 0 0 154px;"><img src="../img/01intro/sub01_img03.gif" alt="지금 우리 사회가 직면한 가장 중요한 문제는 사회 양극화입니다. 우리 사회는 격동의 역사 속에서 성숙한 민주주의를 향해 전진해 왔지만, 외환위기 이후 신자유주의적 구조조정이 강화되면서 빈부격차와 사회 양극화가 심화되어 왔으며, 성·장애·학력 등에 의한 차별의 문제는 이를 더욱 심화시켜 왔습니다." /></p> <p style="margin: 20px 0 0 154px;"><img src="../img/01intro/sub01_img04.gif" alt="빈부격차와 차별에 의해 우리 사회의 양극화가 지속된다면 사회통합을 약화시킴으로써 민주주의의 기반을 위협할 것입니다. 따라서 사회 양극화 문제는 21세기 세계화 시대를 살아가는 우리가 반드시 해결해야 할 과제입니다." /></p>  <p style="margin: 57px 0 0 364px;"><img src="../img/01intro/sub01_img07.gif" alt="빈부격차·차별시정 위원회 위원장 이혜경" /></p> </div></div>

#body

<div id="foot"> <ul class="related"> <li><a href="http://www.pcpp.go.kr" target="_blank">정책기획 위원회</a></li> <li><a href="http://www.balance.go.kr" target="_blank">국가 균형발전 위원회</a></li> </ul> <address> <img src="/img/06com/bottom_banner1.gif" usemap="#Map4" alt="110-787 서울시 종로구 도렴동 95-1 정부중앙청사 별관 604호. 전화번호 : 02) 733-8951 팩스 : 02)722-0297" /><br /> <map id="Map4" name="Map4"> <area shape="rect" coords="299,3,427,27" href="mailto:[email protected]" alt="Email to : Webmaster" /> </map> </address> <div class="contact"> <a href="http://www.pcsi.go.kr/publish/chp01.asp?ex=7" target="_self"><img src="/img/06com/0711_2.gif" alt="찾아오시는 길" /></a> </div> <div class="link"> <select> <option value="">--관련부처--</option> <option value="http://www.mofe.go.kr">재경부</option> </select> </div></div>

#foot

플래시 삽입

• <object> element를 이용해서 삽입

• <object>는 하위의 element를 대체 컨텐츠로 인식함

• type과 data로 외부 플러그인을 삽입

• 브라우저간에 작동 방식이 상이함

Macromedia 방법

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="550" height="400" id="flash_movie" align="middle"> <param name="allowScriptAccess" value="sameDomain"> <param name="movie" value="flash_movie.swf"> <param name="quality" value="high"> <param name="bgcolor" value="#ffffff"> <embed src="flash_movie.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="Untitled-1" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></object>

표준 <object> 방법

<object type="application/x-shockwave-flash" data="images/banner.swf" width="140" height="40"></object>

<object type="application/x-shockwave-flash" data="images/banner.swf" width="140" height="40"> <param name="movie" value="images/banner.swf" /></object>

Hixie 방법

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="550" height="400" id="flash_movie" align="middle"> <param name="movie" value="flash_movie.swf">   <object type="application/x-shockwave-flash" data="flash_movie.swf" width="550" height="400"> <p><img src="flash_movie.png" alt="" /></p> </object> </object>

http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0

디자인(Style : Cascade Style Sheet)

CSS 셀렉터 사용

• 셀렉터를 효과적으로 사용하여 CSS를 구조적이고 관리하기 쉽게 선언

• CSS 속성의 cascade와 inheritance를 고려하여 셀렉터를 정의

• priority와 descendant selector를 이용하여 class 명이 같아도 서로 충돌이 없도록 사용

id, descendant selector

#head

#sub #body

#foot

#head {}#head h1#logo {}#head #toplink {}#head #toplink img {}#topnav {}#topnav ul {}#topnav ul li {}#topnav ul li img {}#head #visual {}#sub {}#sub h1 {}#sub h1 img {}ul#subnav, ul#subnav ul {}ul#subnav li {}ul#subnav li img {}

#body {}#body h1 {}#location {}#location span {}#content-area {}#site-banner {}#site-banner ul {}#site-banner li {}#foot {}#foot ul.related {}#foot ul.related li {}#foot ul.related a {}#foot address {}#foot div.contact {}#foot div.link {}#foot div.link select {}

@import와 CSS 파일

• 한페이지에 여러개의 CSS <link>를 이용하지 않고 @import를 이용해서 CSS를 구조적으로 관리

• CSS파일을 모듈별로 제작/관리 함

• 필요한 모듈만 선택적으로 이용

base.css

layout.css popup.css

board.css form.css template.css

section1.css section2.css section3.css

import.css

pcsi.css@import url(layout.css);@import url(board.css);@import url(section.css);

layout.css board.css section.css

position vs. float

• position 레이아웃을 사용할 경우, 위치의 조정과 사용이 편리하지만 normal flow 컨텐츠가 아니기 때문에 block들 끼리 겹칠 수 있음

• float 레이아웃을 사용할 경우, 컨텐츠의 길이를 자유롭게 정할 수 있고 브라우저 호환성이 좋지만 코드의 위치에 제약을 받음

#head { width: 960px; height: 188px;}#sub { position: absolute; top: 188px; left: 0; width: 237px;}#body { width: 723px; /* min-height: 627px; */ padding-left: 237px; padding-bottom: 30px; background: url(/img/06com/sub_bodytable_img.gif) no-repeat 955px 0 #fff;}#foot { background:url(/img/06com/bottom.gif) no-repeat #00395B; width: 960px; height: 129px;}

브라우저 기본 스타일

• 대부분의 브라우저는 기본 스타일을 가지고 있음

• 기본 스타일을 파악하고 CSS 제작시 반영 하여야 함

• 기본 여백을 갖고 있는 엘리먼트 : <h1>~<h6>, <p>, <form>, <ol>, <ul>, <dl>, <dd>, <blockquote> 등

#sub h1 { margin: 0;}#sub h1 img { vertical-align: top;}ul#subnav, ul#subnav ul { margin: 0; padding: 0; list-style: none;}ul#subnav li img { vertical-align: top;}

h1

ul#subnav

ul

#sub h1 { margin: 0;}#sub h1 img { vertical-align: top;}ul#subnav, ul#subnav ul { margin: 0; padding: 0; list-style: none;}ul#subnav li img { vertical-align: top;}

여백을 이용한 위치

• 엘리먼트의 위치를 제어하는 데에는 레이아웃과 마찬가지로 position, float를 사용할 수 있음

• 특별한 경우 negative margin으로 위치를 제어할 수 있음

• 편리하게 사용할 수 있지만 가변 크기에 대한 대비가 안되기 때문에 주의

p

p

p

p

p

p

p

p

p

p

p

mar

gin-

left

: 154

px;

p

p p

p

p

p mar

gin-

bott

om: -

180p

x;

p

배경이미지의 사용

• CSS2에서는 하나의 엘리먼트에 하나의 background-image만 사용할 수 있음

• 가로나 세로가 고정되어 있는 경우 사용해야 하는 배경 이미지의 갯수가 줄기 때문에 엘리먼트의 갯수도 줄어듬

• 추가적으로 div와 같은 엘리먼트를 추가해야 하는 경우도 있음

<div id="foot-wrapper"> <div id="foot">  </div></div>

#foot-wrapper { background: #00395B;}#foot { background:url(/img/06com/bottom.gif) no-repeat #00395B; width: 960px; height: 129px;}

CSS Hack

• CSS Hack은 반드시 필요한 경우가 아니면 사용하지 않는 것이 좋음

• 브라우저에 의존하지 않으면서 CSS를 적용하는 것이 좋음

• 브라우저에서 지원하는 기능을 사용ex) IE conditional comment

Conditional CommentCSS Hack



html * {}

html>#head {}

div.ie { padding: 0 25px; width: 100px; voice-family: \”}\”; voice-family: inherit; width: 150px;}

움직임(Script : Document Object Model)

Unobtrusive Javascript

• 동작과 구조를 완전히 분리하여 적용

• 문서 구조의 완결성, 독립성이 높아짐

• 이벤트 핸들러 등이 XHTML 코드 상에 존재하지 않음

• DOM으로 엘리먼트를 참조하여 이벤트를 적용

<div id="topnav"> <ul> <li class="menu-1"><a href="chp01.asp?ex=1"><img src="/img/06com/menu-1.png" alt="위원회소개" /></a> <ul> <li><a href="chp01.asp?ex=1"><img src="/img/06com/menu-1-1.png" alt="위원장인사말" /></a></li>  </ul> </li>  <ul></div><script type=”text/javascript”>initNav(document.getElementById("topnav").getElementsByTagName("ul").item(0));</script>

function initNav(menu){ // 생략 menu.childNodes.item(i).getElementsByTagName("img").item(0).onmouseover = function() { if (menu.current != this) { this.submenu.style.zIndex = 5; setTop(this.submenu, 0.4, -20, 33); setOpacity(this.submenu, 0.3, 0, 1); menu.current = this; } // 생략 } // 생략}

크로스 브라우징 전략

• 원활한 크로스 브라우징을 위해서 초기 개발은 웹표준 준수 브라우저를 이용

• 표준을 준수 했을 경우 크로스 브라우징에 들어가는 비용은 굉장히 작음

• IE6를 기준으로 CSS나 Javascript 개발을 할 경우 호환성 문제 발생 할 수 있음

• Mozilla Firefox, Apple Safari, Opera

검토(Test : Validation Check)

W3C Markup Validation

http://validator.w3.org



W3C CSS Validation

http://jigsaw.w3.org/css-validator



Semantic Markup

http://www.w3.org/2003/12/semantic-extractor.html



Accessibility

• 접근성에 대한 관심이 높아짐

• 표준의 적용으로 접근성은 확보 되지만 더 고려해야 할 사항이 있음

• KWCAG (Korea Web Contents Accessibility Guideline) 1.0

• 텍스트 기반, 장치 독립적 인터페이스

CSS 실전 - Hyeonseok › soojung › contents › upload › kic-css... · 2010-10-14 · 구성...

Documents

Transcript of CSS 실전 - Hyeonseok › soojung › contents › upload › kic-css... · 2010-10-14 · 구성...