2011/02/17 - [Developer/웹개발 기초] - 개발자를 위한 웹 표준 CSS의 이해 1(CSS BoxModel, Position, float, clear, z-index)

 

CSS 작성 방법, 우선 순위, Selector

이번 시간에는 CSS의 작성 방법과 우선순위, 그리고 Element를 Select하는 방법에 대해서 알아보도록 하겠습니다.

 

1. 작성 방법

작성 방법의 종류는 아래와 같습니다.

  1. Inline
    Element에 직접 작성
  2. Style Tag
    Style Tag에 직접 작성
  3. Link Tag
    외부 CSS를 Link Tag를 이용하여 연결

 

다음은 작성 Sample 입니다.

1. Inline

<html>
	<body>
		<div style="border:1px solid #666666; color:red; font-size:18px;">
			Inline Style
		</div>
	</body>
</html>

 

2. Style Tag

<html>
	<head>
		<style type="text/css">
			div {
				border:1px solid #666666;
				color:red;
				font-size:18px;
			}
		</style>
	</head>

	<body>
		<div>
			Style Tag
		</div>
	</body>
</html>

 

3. Link Tag

stylesheet.css

div {
	border:1px solid #666666;
	color:red;
	font-size:18px;
}

<html>
	<head>
		<link rel="stylesheet" type="text/css" charset="utf-8" href="stylesheet.css"/>
	</head>

	<body>
		<div>
			Style Tag
		</div>
	</body>
</html>

 

위와 같이 작성됩니다.

 

외부 CSS 작성 시 외부 파일에서 다른 추가 외부 파일 입력의 경우는 아래와 같습니다.

stylesheet.css

@import "base.css";

div {
	border:1px solid #666666;
	color:red;
	font-size:18px;
}

base.css

@charset "utf-8";

div{
	padding-top:10px;
	padding-left:10px;
	padding-right:10px;
}

@import라는 명령어로 외부 파일을 불러 올 수 있으며, 경로 부분에는 URL(“css.css”) 로 작성도 가능합니다.

그리고 외부 base.css 에서 @charset 이라는 명령어를 볼 수 있는데 해당 CSS의 인코딩 방식을 정의할 수 있습니다.

 

HTML에서의 Charset에 관한 내용은 여기를 선택하여 이동하십시오.

CSS에서의 Charset에 관한 자세한 내용은 아래를 참고 하십시오.

 

Declaring character encodings in CSS

CSS style sheet representation

 

2. 우선 순위

CSS의 우선 순위라 함은 CSS가 각 Eelement에 적용되는 우선 순위를 뜻하는 것입니다.

 

여기에서 먼저 알아야 할 것이 Eelement를 무엇으로 어떻게 잡을 수 있느냐? 라는 물음이 생기는데요.

Element를 선택하는 방법은 아래와 같습니다.

 

<div id="divContents" class="divContents">
	Contents
</div>

 

  1. Inline
    <div style=”padding:0px;”

  2. * (모든 Element 선택자)
    * { padding:0px; }
  3. Element Name(Tag Name)
    div { padding:0px; }
  4. Class Name
    .divContents { padding:0px; }
  5. ID
    #divContents { padding:0px; }

 

위에 열거된 선택자를 통하여 Element를 선택할 때 우선 순위가 적용됩니다.

아래와 같은 경우에 우선 순위는 Inline 입니다.

<html>
	<head>
		<style type="text/css">
			* {
				color:blue;
			}

			div {
				color:yellow:
			}

			.divContents {
				color:silver:
			}

			#divContents {
				color:white:
			}
		</style>
	</head>

	<body>
		<div id="divContents" class="divContents" style="color:red;">
			Contents
		</div>
	</body>
</html>

 

위와 같이 선택자가 모두 적용되어 있는 상황에서의 우선 순위표는 아래와 같습니다.

*				{}  	/* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
 li				{}  	/* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
 li:first-line	{}  	/* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul li			{}  	/* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul ol+li		{}  	/* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
 h1 + *[rel=up]	{}  	/* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
 ul ol li.red	{}  	/* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
 li.red.level	{}  	/* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
 #x34y			{}  	/* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
 style=""				/* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

 

위와 같이 값이 가장 높은 것이 우선 순위가 높습니다.

Inline이 가장 최 우선이며, 그 다음은 아이디, 그리고는 Selector의 합계로 구분되게 됩니다.

위에서 보시는 Elements Selector에 대한 내용은 아래에서 참고 하시기 바라며, 위 내용은 여기를 선택하여 이동하시면 좀더 자세한 내용을 확인 할 수 있습니다.

 

3. Elements Selector

Elements를 선택하는 방법은 CSS를 지원하는 Browser의 영향을 받습니다.

지금 현재 CSS 3.0에 대한 표준이 준비 중이며, CSS 2.1이 최신입니다.

CSS 2.1에 대한 모든 내용은 W3C에서 작성한 내용을 여기로 선택하여 이동하여 확인하시기 바랍니다.

 

위에서 말씀 드린 바와 같이 Selector의 종류는 아래와 같습니다.

 

  • Universal selector
    공통 선택자 (*)
  • Type selectors
    Tag 이름 선택자 (div)
  • Descendant selectors
    바로 하위가 아니라 포함되어 있는 하위 선택자 (div span)
     
  • Child selectors
    바로 하위 선택자 (div > span)
  • Attribute selectors
    Attribute 선택자는 IE 7 이하의 버전에서 선택이 되지 않아 거의 사용하는 편이 아닙니다.
     
    • Class selectors
      클래스명 선택자 (.className)
  • ID selectors
    Element ID 선택자 (#id)
     
  • Pseudo-elements and pseudo-classes
    가상 Elements 와 가상 classes (:after, :link)

 

selector의 Pattern은 아래와 같으며, 선택하시면 해당 페이지가 오픈 됩니다.

 

각각의 Selector 들은 앞에서도 말씀 드린 바와 같이 모든 Browser에서 지원되는 것이 아니니 아래 표를 참고 하시기 바라며, 선택하시면 해당 페이지가 오픈 됩니다.

 

Browser 별 CSS 지원 여부는 아래를 참고 하여 주십시오.

Browser CSS Support

Browser CSS Pattern Support

 

이상입니다.

 

감사합니다.



  1. Favicon of http://codeflow.co.kr/ BlogIcon codeflow 2013.08.19 18:38

    CSS 우선순위에 관해 쉽게 정리된 글이네요 잘 읽었어요 감사합니다 ㅎ.ㅎ
    보답이라 하긴 뭣하지만 CSS 우선순위 관련 글 소개해드릴게요 ;)


    http://codeflow.co.kr/question/587/css-우선순위에-대한-정리/

 

CSS에서 boxmodel, position, float 대하여 알아보도록 하겠습니다.

 

IE 8을 사용하면서 가장 저의 마음에 들었던 부분이 있습니다.

바로 개발자 도구입니다.

 

이전에는 IE 6, 7 사용 시 IEDeveloperToolbar라는 툴을 설치하여 사용하였는데. 그때도 “이거 괜찮다” 라는 생각을 많이 했었습니다.

IE 8의 개발자 도구는 그야 말로 획기적인 툴이라고 말씀 드리고 싶습니다. *_*

 

갑자기 이야기가 삼천포에 갔네요.. *_*;;

 

본론으로 들어가서.

1. Box Model

 

CSS 중 가장 많이 사용하는 Attibute가 바로 border, padding, margin이 아닐까 합니다.

Layout 이나 Box Model 작성 시 필수로 사용하게 되는 속성들입니다.

 

http://trio.co.kr/webrefer/css2/box.html

 

 

우측 하단에 보이는 레이아웃이라는 녀석에 대해서 중점적으로 설명할까 합니다.

 

그림 1-1

 

Offset은 오늘은 그냥 넘어 가도록 하겠습니다.

현재 Contents를 선택한 상태이며, 적용된 CSS는 다음과 같습니다.

 

.divContent{
	border:solid 1px red;
	padding:2px;
	margin:2px;
}

.divContent1{
	border:solid 1px red;
}

 

HTML

<body>
	<div class="divContent">
		Contents</div>
	<div class="divContent1">
		Contents1</div>
</body>

 

padding:2px의 경우 혹시 모르시는 분들을 위해..

 

  • padding:2px; 상하좌우 선택자
  • padding:2px 2px; 상하/좌우 선택자
  • padding:2px 2px 2px; 상/좌우/하 선택자
  • padding:2px 2px 2px 2px; 상/우/하/좌 선택자(시계방향)

 

그림 1-1에서 984X25의 값은 일단 width/height이며, border + padding + conents 입니다.

 

좀더 정확히 table의 값을 300px로 설정하겠습니다.

.divContent2{
	border:solid 1px red;
	width:300px;
	padding:2px;
	margin:2px;
}

 

그림 1-2

 

table의 width를 300px로 설정하였으나, 찍어 보면 306으로 나옵니다.

이는 좌우 border + 좌우 padding 값을 더하면 306이라는 값이 나오게 됩니다.

 

width나 height값 역시 동일합니다.

 

html에서 하나의 element는 각각의 margin, border, padding을 가지며, border, padding 그리고 설정한 width값의 합으로 element의 width, height를 만들게 됩니다.

 

2. Position

Position은 박스의 위치를 계산하는데, 어떤 위치를 맞추는 지를 결정하게 된다.

 

position의 속성 값으로는 아래와 같은 값을 가집니다.

  1. static (기본 값) : block element, inline element의 특성을 따르며, (top, left) 속성은 적용되지 않는다.
  2. relative (상대) : block element, inline element의 특성을 따르며, 하위 element는 relative 속성이 선언된 부모 element를 하나의 윈도우로 인식한다.
  3. absolute (절대) : element를 공중에 붕 띄우는 역할을 한다. 즉 top, left, right, bottom의 속성으로 원하는 위치에 놓이며 element의 흐름을 타지 않는다.
  4. fixed (고정) : relative의 영향을 안받으며, 현재 보여지는 위치에서 스크롤로 동작을 하여도 고정위치에 놓이게 된다.
  5. inherit : 부모의 설정 값을 상속받는다.

 

http://trio.co.kr/webrefer/css2/visuren.html#propdef-position

 

먼저 position을 설정하지 않은 상태입니다.

즉 position:static 인 상황입니다.

 

<style type="text/css">
	* { margin: 0; padding: 0; }
	#zero {
	    background-color: #f00;
	    width: 50px;
	    height: 50px;
	}
	#one {
	    background-color: #555;
	    width: 150px;
	    height: 150px;
	}
	#two {
	    background-color: #ff0;
	    width: 50px;
	    height: 50px;
	}
	#three {
	    background-color: #0f0;
	    width: 50px;
	    height: 50px;
	}
	#four {
	    background-color: #00f;
	    width: 50px;
	    height: 50px;
	}
	#five {
	    background-color: #f0f;
	    width: 50px;
	    height: 50px;
	}
</style>

 

<body>
	<div id=zero>000</div>
	<div id=one>
		<div id=two>222</div>
		<div id=three>333</div>
		<div id=four>444</div></div>
	<div id=five>555</div>
</body>

 

 

block-level element 다운 모습입니다. *_*;;

 

relative, absolute로 설정해 보도록 하겠습니다.

<style type="text/css">
	* { margin: 0; padding: 0; }
	#zero {
		background-color: #f00;
		width: 50px;
		height: 50px;
		position: relative;
	}
	#one {
		background-color: #555;
		width: 150px;
		height: 150px;
	}
	#two {
		background-color: #ff0;
		width: 50px;
		height: 50px;
		position: absolute;
		top: 10px;
		left: 50px;
	}
	#three {
		background-color: #0f0;
		width: 50px;
		height: 50px;
	}
	#four {
		background-color: #00f;
		width: 50px;
		height: 50px;
	}
	#five {
		background-color: #f0f;
		width: 50px;
		height: 50px;
	}
</style>

 

 

000 에 relative를 설정하였으며, 222번에는 absolute를 설정하였습니다.

relative에 변화를 위하여 left:100px;을 설정하였으며, absolute에는 변화를 확인하기 위해 left:50px; top:10px;를 설정하였습니다.

 

absolute를 설정하게 되면 div가 중첩되는 것을 확인 할 수 있는데요.

relative의 경우에는 중첩되지 않습니다.

relative의 좀 더 자세한 내용을 알아보기 위해 아래와 같이 다시 설정을 바꿔 보도록 하겠습니다.

 

<style type="text/css">
	* { margin: 0; padding: 0; }
	#zero {
		background-color: #f00;
		width: 50px;
		height: 50px;
		position: relative;
		left:100px;
	}
	#one {
		background-color: #555;
		width: 150px;
		height: 150px;
		position: relative;
		left:100px;
	}
	#two {
		background-color: #ff0;
		width: 50px;
		height: 50px;
		position: absolute;
		top: 10px;
		left: 50px;
	}
	#three {
		background-color: #0f0;
		width: 50px;
		height: 50px;
	}
	#four {
		background-color: #00f;
		width: 50px;
		height: 50px;
	}
	#five {
		background-color: #f0f;
		width: 50px;
		height: 50px;
	}
</style>

 

 

111번에 relative, left 값을 설정하였습니다.

전에는 222번이 111번과 중첩되었으나, 지금은 111번에 포함되어 있는 것을 확인 할 수 있습니다.

 

즉 relative로 설정하게 되면, 자신 만의 영역을 갖게 됩니다.

relative가 하나의 윈도우가 되어 윈도우 안에서 left, top, right, bottom 값을 갖게 됩니다.

 

div을 직접 변경하며 실습해 보실 것을 권합니다.

 

absolute를 설정하게 되면 공중에 띄운다고 생각하시고, relative를 설정하게 되면 자신만의 영역을 선언한다라고 생각하시면 될 것 같습니다.

 

3. float

float은 박스가 왼쪽 혹은 오른쪽으로 유동하여야 하는가 또는 유동 하지 않는가를 결정하며, absolut의 영향을 받지 않는다.

float의 속성으로는 아래의 값을 갖습니다.

 

  1. left : 왼쪽으로 유동되는 박스를 생성한다.
  2. right : 오른쪽으로 유동되는 박스를 생성한다.
  3. none : 박스는 유동하지 않는다.
  4. inherit : 부모 element의 float 값을 상속받는다.

 

http://trio.co.kr/webrefer/css2/visuren.html#propdef-float

 

바로 실습으로 들어갑니다.

 

다시 2.Position의 처음 html, css 상태로 돌아갑니다.

 

이 상태에서 222, 333, 444번에 float:left을 설정하도록 하겠습니다.

 

 

위와 같이 나란히 정렬 되는 것을 확인 할 수 있습니다.

 

여기서 444번을 밑으로 내리고자 할 경우..

float:left 속성을 제거 하는 것으로는 222번 밑으로 내릴 수 없습니다.

 

 

444번의 float:left를 제거하게 되면. 깨집니다.

내리는 방법은 clear 라는 Attribute로 해결 할 수 있습니다.

 

	#four {
		background-color: #00f;
		width: 50px;
		height: 50px;
		clear:both;
	}

 

 

clear라는 attribute의 역할은 float을 제거하는 역할을 하게 됩니다.

그리고 웹 표준 권고안에 있었던 내용으로 기억하고 있는데.

float attribute가 선언된 다음에는 반듯이 clear attribute를 사용하여 제거하는 것을 권장한다고 했던 것 같습니다.

정확한 내용이 아니네요 이 부분은..

 

4. z-index

z-index 란 position:absulte attribute가 선언 되어있는 element의 쌓여 있는 순서를 정하는 것입니다.

1번 div가 2번 div로 올라오게 만들 경우에는

1번 div를 2번 div보다 나중에 선언하면 됩니다.

 

그런 경우가 아니라면 z-index를 이용하여 나중에 선언된 element의 z-index 값 보다 큰 값을 설정하여 화면에 표시 할 수 있습니다.

 

 

마지막 소스를 보시면 금방 확인 가능하리라 생각됩니다.

<style type="text/css">
	* { margin: 0; padding: 0; }
	#zero {
		background-color: #f00;
		width: 50px;
		height: 50px;
	}
	#one {
		background-color: #555;
		width: 150px;
		height: 150px;
		position:relative;
	}
	#two {
		background-color: #ff0;
		width: 50px;
		height: 50px;
		float:left;
	}
	#two1 {
		background-color: #ff0;
		width: 50px;
		height: 50px;
		position:absolute;
		top:10px;
		left:10px;
	}
	#two2 {
		background-color: #ff0;
		width: 50px;
		height: 50px;
		position:absolute;
		top:20px;
		left:20px;
	}
	#two3 {
		background-color: #ff0;
		width: 50px;
		height: 50px;
		position:absolute;
		top:30px;
		left:30px;
	}
	#three {
		background-color: #0f0;
		width: 50px;
		height: 50px;
		float:right;
		z-index:13;
	}
	#three1 {
		background-color: #0f0;
		width: 50px;
		height: 50px;
		position:absolute;
		top:10px;
		right:10px;
		z-index:12;
	}
	#three2 {
		background-color: #0f0;
		width: 50px;
		height: 50px;
		position:absolute;
		top:20px;
		right:20px;
		z-index:11;
	}
	#three3 {
		background-color: #0f0;
		width: 50px;
		height: 50px;
		position:absolute;
		top:30px;
		right:30px;
		z-index:10;
	}
	#four {
		background-color: #00f;
		width: 50px;
		height: 50px;
		clear:both;
	}
	#five {
		background-color: #f0f;
		width: 50px;
		height: 50px;
	}
</style>

 

<body>
	<div id=zero>000</div>
	<div id=one>
		<div id=two>222</div>
		<div id=two1>2221</div>
		<div id=two2>2222</div>
		<div id=two3>2223</div>
		<div id=three>333</div>
		<div id=three1>3331</div>
		<div id=three2>3332</div>
		<div id=three3>3333</div>
		<div id=four>444</div></div>
	<div id=five>555</div>
</body>

 

이상 오늘은 여기까지 하도록 하겠습니다.

 

box model, position, float 등은 꼭 숙지하셔야 되는 내용입니다.

글 재주가 없어서..

파악하는데 시간이 좀 걸릴 수도 있을 것 같습니다.

 

그래도. 중요한 내용이니 검색 등을 이용하시여.. 꼭 숙지 하시길 바랍니다.

 

참고 사이트

http://www.w3.org/TR/CSS2/

http://trio.co.kr/webrefer/css2/cover.html



2011/03/09 - [Developer/웹개발 기초] - 개발자를 위한 웹 표준 CSS의 이해 2(작성 방법, 우선순위, Selector)

 

 

감사합니다.

  1. Favicon of http://shinlucky.tistory.com BlogIcon Shinlucky 2011.03.22 16:31

    음 좋은 글 잘 읽었습니다. ;)

 

2011/02/15 - [웹개발 기초] - 개발자를 위한 웹 표준 HTML의 이해 2(Block elements, Inline elements)

2011/02/16 - [웹개발 기초] - 개발자를 위한 웹 표준 HTML의 이해 3(Web Content Accessibility Guidelines 1.0)


이번 시간에는 HTML이라기 보다는 웹 컨텐츠에 대한 사용자의 접근성을 향상하기 위한 W3C의 지침의 내용을 한번 살펴 볼까 합니다.

 

  1. 일반적인 경우
  2. 이미지와 이미지맵을 사용한 경우
  3. 표를 사용한 경우
  4. 프레임을 사용한 경우
  5. 애플릿과 스크립트를 사용한 경우
  6. 멀티미디어를 사용한 경우
  7. 다른 모든 조치가 불가능한 경우

 

위와 같은 분류의 내용으로 중요도를 3단계로 나누어 설명되어 있습니다.

 

저는 중요도 1에 해당하는 내용만 설명 드리고자 합니다.

 

  • 중요도 1 : Web Contents 개발자가 Contents 제작 시 반듯이 따라야 할 체크 포인트입니다.
  • 중요도 2 : Web Contents 개발자가 Contents 제작 시 되도록 지켜야 할 체크 포인트입니다.
  • 중요도 3 : Web Contents 개발자가 Contents 제작 시 지키는 것이 좋습니다. 그렇지 않은 경우 일부 사용자들이 정보에 접근하는 것에 다소 어려움을 격을 수 있습니다.

 

  1. 일반적인 경우
    1. 텍스트가 아닌 Contents에 대해서는 대체 텍스트를 제공해야 됩니다.
      <img src="http://static.naver.com/www/u/2010/0611/nmms_215646753.gif" alt="네이버" />
    2. 색깔과 함께 전달되는 모든 정보는 색깔이 없더라도 맥락이나 다른 element와의 구분이 되어야 합니다.
      몸이 다소 불편하신 분들을 위한 것으로 판단됩니다.
    3. 문서의 텍스트나 대체 텍스트의 언어가 바뀌면 반듯이 명시를 해주어야 합니다.
      <p>국기에 대한 경례 <br />
      <span style="color:red;" lang="en" title="국기에 대한 경례">Salute!</span>
      </p> <p> 바로 <br /> <span style="color:red;" lang="en" title="바로">Ease.</span></p>
    4. 스타일 시트가 깨지더라도 해당 문서를 읽을 수 있도록 해야 됩니다.
    5. 동적인 Conents가 변하면 대체물(equivalents)도 변해야 합니다.
      http://www.w3.org/TR/WCAG10-HTML-TECHS/#applet-text-equivalent
    6. 웹 표시 장치가 사용자들에게 박임을 조절할 수 있게 하기 전까지는 화면에 깜박임을 넣지 않는다.
    7. Site Contents에 적합한 가장 명확하고 간결한 언어를 사용하라.

  2. 이미지와 이미지 맵을 사용한 경우
    1. 서버측 이미지 맵을 사용할 때에는 그림의 각 활성화 영역마다 중복적인 텍스트 링크를 제공해준다.
    2. 기하학적인 도형으로 정의가 안 되는 영역이 있는 경우를 제외하고는 서버측 이미지 맵 대신에 반드시 클라이언트측 이미지 맵을 사용한다.

  3. 표를 사용한 경우
    1. 데이터가 들어있는 표에는 제목열과 제목행(통칭하여 header)을 명시한다.
      http://www.w3.org/TR/WCAG10-HTML-TECHS/#identifying-table-rows-columns
    2. 두 개 이상의 논리적인 제목행이나 제목열을 갖는 데이터가 들어있는 표에서는 데이터 칸끼리 또는 제목 칸끼리 관련 짓는 마크업을 사용한다.
      http://www.w3.org/TR/WCAG10-HTML-TECHS/#identifying-table-rows-columns

  4. 프레임을 사용한 경우
    1. 프레임을 구분하고 프레임간의 탐색을 위해 모든 프레임에 이름을 붙여야 한다
      <frameset cols="10%, 90%" title="Our library of electronic documents">  
          <frame src="nav.html" title="Navigation bar">  
          <frame src="doc.html" title="Documents">
          <noframes>
             <a href="lib.html" title="Library link">   
                   Select to go to the electronic library</A>  
          </noframes>
      </frameset>
      
      
  5. 애플릿과 스크립트를 사용한 경우
    1. 스크립트나 애플릿, 또는 다른 프로그램 객체를 사용하지 않거나 지원하지 않는 경우에도 페이지의 내용을 이해할 수 있어야 한다. 그것이 불가능하다면, 대안적으로 접근 가능한 페이지에 그것들을 대체할만한 정보를 제공하라.

  6. 멀티미디어를 사용한 경우
    1. 시각적인 트랙에 대응하는 텍스트를 자동으로 읽어주는 웹 표시 장치가 널리 보급되기 전에는, 멀티미디어 프리젠테이션을 할 때에 시각적인 트랙의 중요한 정보에 대해서는 음성 설명을 제공해주도록 한다.
    2. 시간을 기반으로 한 멀티미디어 프리젠테이션(예를 들면 동영상이나 애니메이션)과 그에 상응하는 대체물(예를 들면 시각적인 트랙에 대한 캡션(텍스트 자막)이나 음성 설명)은 동기시켜야 한다.

  7. 다른 모든 조치가 불가능한 경우
    1. 약 모든 노력을 해보았어도, 접근성이 높은 페이지를 만들 수 없다면, W3C의 기술을 사용하고, 접근 가능하며, 원래의 페이지와 동일한(equivalent) 정보(또는 기능)를 담고 있으며, 원래 페이지만큼 자주 업데이트되는 별도의 대안적인 페이지를 제공하라.

 

여기까지 입니다.

 

위의 나열된 모든 항목은 필수입니다.

 

하지만.. 지키기가 쉽지 않습니다.

개발 시간도 두 배 이상으로 소비 될 뿐만 아니라..

 

하지만 표준 권고안에 어떤 내용이 있는지 한번쯤을 읽어 보시라고 작성하였습니다.

 

참고 하시기 바랍니다.

 

 

어떤 것이듯. 무엇이든. 아는 것이 힘입니다.

 

참고 사이트 : Checklist of Checkpoints for Web Content Accessibility Guidelines 1.0

감사합니다.


2011/02/15 - [Developer/웹개발 기초] - 개발자를 위한 웹 표준 HTML의 이해 1(DTD[Document Type Definition]) 


이번 시간에는 HTML Tag 중

Block-Level Element(이하 block), Inline-Level Element(이하 inline)

에 대해서 알아보도록 하겠습니다.

 

단순히 태그는 어떤 것이고.. 어떤 건 어떻게 쓰는 것이다 라는 것은 아래 링크를 참고 하여 주십시오.

http://www.w3schools.com/tags/ref_byfunc.asp

 

block는 말 그대로 하나의 틀이 될 수 있는 Tag를 말합니다.

inline는 block안에 포함되어 Data, Object를 포함 할 수 있으며, block을 포함 할 수 없는 Tag입니다.

 

1. block의 경우 width, height를 포함 할 수 있으나, inline의 경우 포함 할 수 없습니다.

 

<div style="background-color:#999999; width:100px; height:100px;">
	block</div>
<span style="background-color:#555; width:100px; height:100px;">
	inline</span>

 

 

2. inline의 경우 block안에서 1byte문자열이 아닌 경우에는 영역을 벗어나지 않고 줄 바꿈이 됩니다.

 

<div style="border:solid 1px red; width:100px; height:100px;">
	<span>가나다라마 바사아자차카 타파하</span></div>

 

3. block의 경우에는 한 라인에 하나씩 표시되고, inline의 경우에는 block의 범위 안에서 표시 될 수 있는 만큼 표시됩니다.

 

<div style="border:solid 1px red;">div1</div>
<div style="border:solid 1px red;">div2</div>
<br />
<div style="border:solid 1px red;">
	<span>span1</span>
	<span>span2</span>
	<span>span3</span>
	<span>span4</span></div>

 

 

여기까지가 block과 inline의 가장 큰 차이점입니다.

아래는 block-level elements, inline-level elements tag입니다.

 

block-level elements

  • p
  • h1~h6
  • ul
  • ol
  • pre
  • dl
  • div
  • noscript
  • blockquote
  • form
  • hr
  • table
  • fieldset
  • address

inline-level elements

  • samp
  • kbd
  • var
  • cite
  • abbr
  • acronym
  • a
  • img
  • object
  • br
  • script
  • map
  • q
  • sub
  • sup
  • span
  • bdo
  • input
  • select
  • textarea
  • label
  • button

 


2011/02/16 - [Developer/웹개발 기초] - 개발자를 위한 웹 표준 HTML의 이해 3(Web Content Accessibility Guidelines 1.0)


감사합니다.

 

웹 개발자를 위한 웹 표준 코딩을 위한 HTML의 이해 그 첫 번째 시간입니다.

오늘은 HTML에서 가장 최 상위에 선언되는 DTD에 대해서 알아보도록 하겠습니다.

 

DTD 사용 이유!

DTD는 브라우저의 렌더링 모드를 지정하고 유효성 검증기의 기준이 되므로 HTML 문서의 상단에 선언되어야 합니다.

DTD가 선언 되어 있지 않는 경우에는 브라우저 별로 Tag의 해석 방식이 다른 Quirks mode로 렌더링 되어 브라우저 별로 각각 다른 화면이 나타날 수 있습니다.

Wiki ko 참고 : http://ko.wikipedia.org/wiki/HTML#.EB.AC.B8.EC.84.9C_.ED.98.95.EC.8B.9D_.EC.84.A0.EC.96.B8

 

DTD의 종류로는 HTML 4.01, XHTML 1.0, XHTML 1.1, XHTML Basic 1.1, HTML 5 등등 이 있습니다.

좀 더 자세한 내용은 아래 링크를 참고하여 주십시오.

 

http://www.w3.org/QA/2002/04/valid-dtd-list.html


HTML 4.01

  • Strict
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">
  • Transitional
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • Frameset
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

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


위에서 말씀 드린 바와 같이 DTD의 선언에 따라서 Browser의 Rendering Mode가 결정되기 때문에 각각의 DTD마다 작성된 Page가 동일하게 보이지 않을 수 있습니다.

 

DTD에 따른 브라우저 별 렌더링 모드는 다음 URL에서 확인 할 수 있습니다.

http://en.wikipedia.org/wiki/Quirks_mode#Comparison_of_document_types


각각의 DTD에도 Strict Mode, Transitional Mode, Frameset Mode가 있으며 해당 모드에 대한 자세한 내용은 다음 URL에서 확인 할 수 있습니다.


http://www.cadvance.org/?leftmenu=doc/include/total_menu.asp&mainpage=doc/xhtml/intro/xhtml_dtd.asp

 

여기까지가 개발자가 기본적으로 알아야 될.

DTD에 대한 내용입니다.


첨언 하자면.. 개발자가 사용하기 좋은 DTD는 XHTML 1.0입니다.

엄격하고 호환성이 좋은 이유 때문입니다.

 

제가 참고한 사이트 들입니다.

http://naradesign.net/wp/

http://www.cadvance.org/

 

가장 큰 도움 : http://www.w3.org/



2011/02/15 - [웹개발 기초] - 개발자를 위한 웹 표준 HTML의 이해 2(Block elements, Inline elements)

2011/02/16 - [웹개발 기초] - 개발자를 위한 웹 표준 HTML의 이해 3(Web Content Accessibility Guidelines 1.0)



감사합니다.


+ Recent posts