float와 position: static, relative, absolute, z-index 비교

웹접근성과 웹표준 2013. 7. 27. 17:17

예제1) <div> 내부 <img>에 직접 float:left 지정

CSS 적용전)

<p>집에서나 회사에서도 쉽게 접근하여 학습할 수 있도록 각 교육 과정을 온라인으로 학습할 수 있도록 서비스 중에 있습니다.</p>

</div>

※ div로 묶은 블록 내부에 사진 1장과 제목, 글 내용이 있는 구성. img 태그에 float 속성을 지정 후 left로 지정하면 사진이 div로 묶인 블록 왼쪽에 밀착하게 된다.

CSS 적용후)

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

<head>

<title> new document </title>

body, p, img {

padding: 0;

margin: 0;

}

body {

font-size: 16px;

}

div.f1 {

width:300px;

margin: 20px;

border: 1px solid black;

}

img{float:left;}

p{background-color:yellow;margin: 5px 0;}

</style>

</head>

<body>

<p>집에서나 회사에서도 쉽게 접근하여 학습할 수 있도록 각 교육 과정을 온라인으로 학습할 수 있도록 서비스 중에 있습니다.</p>

</div>

</body>

</html>

예제2) position 비교 예제

CSS 적용전)

콘테이너 1

</p>

콘테이너 2

</p>

콘테이너 3

</p>

</div>

※ 전체를 감싸는 div에 relative를 적용 후 내부 컨테이너에 absolute로 위치를 제어한다.

- relative로 감싼 내부의 absolute는 top:0; left:0일 때 relative 안쪽의 0, 0 위치부터 배치된다.

- relative 내부에서 absolute의 자유로운 배치가 가능하다.

<div>에는 position:relative,

1번째 <p>에는 position:absolute; top:0;left:100px; z-index:1;

2번째 <p>에는 position:absolute; top:10px;left:120px;

3번째 <p>에는 position:static; 를 넣고 비교.

CSS 적용후)

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

<head>

<title> new document </title>

p, div {

padding: 0;

margin: 0;

}

p {

height:100px;

width:100px;

}

div.wrap {

border: 1px solid black;

padding: 10px;

position:relative;

}

.red {

background-color: red;

border: 1px solid red;

position:absolute;top:0;left:100px;z-index:1;

}

.yellow {

background-color: yellow;

border: 1px solid yellow;

position:absolute;top:10px;left:120px;

}

.blue {

background-color: blue;

border: 1px solid blue:

position:static;

}

</style>

</head>

<body>

콘테이너 1

</p>

콘테이너 2

</p>

콘테이너 3

</p>

</div>

</body>

</html>

<div>에는 position:relative; padding:10px;으로 기준점이 된다. 이 기준점을 바탕으로 이후의 포지션이 정해진다.

1번째 <p>에는 position:absolute; top:0;left:100px; z-index:1;

- 일단 z-index값이 1이므로 가장 위에 올라가게 된다.

- 독립적으로 통제되는 absolute에 top이 0이라 위에 밀착, left 100px이므로 왼쪽 끝에서 100px 띈 지점에 위치.

2번째 <p>에는 position:absolute; top:10px;left:120px;

- 독립적으로 통제되는 absolute에 top이 10이라 위에서 10 띈 지점. left 120px이라 왼쪽 끝에서 120px 띈 지점에 위치. z-index 값이 1번째 빨간색 <p>보다 낮기 때문에 그 뒤에 가려진다.

3번째 <p>에는 position:static; 를 넣고 비교.

- static이므로 기본 설정값대로 왼쪽에 배치된다.

예제3) 웹사이트를 만드는 기본 형식 연습

- 배경과 별개로 사이트를 중앙에 표시하기 위해 <div id="wrap">에 margin:0 auto;을 지정하여 사이트 전체를 감싸 화면 전체에서 중앙에 위치하게 조절한다.

- 컨텐츠는 <div id="content">로 지정하고, 그 내부에 <div id="maincontent">와 <div id="subcontent">로 구분한다.

- <p id="footer">로 푸터영역을 지정하여 완성한다.

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

<head>

body, h1, h2, h3, h4, ul, li, p, div {

padding: 0;

margin: 0;

}

body { font-size : 12px;

background-color : #d9d9d9 ;

margin : 0 ;

}

h1 { font-size : 1.5em ;

background-color : #a0a0a0;

color : white ;

padding : 20px ;

}

h2 {font-size : 1.3em ; }

h3 { font-size : 1.1em ; }

#wrap { background-color : white ;

width : 600px ;

margin : 0 auto ;

}

#footer {

background-color : #a0a0a0;

color : white ;

font-size : 0.9em ;

text-align : center ;

padding : 5px 0 ;

}

ul {

background-color : #f0f0f0 ;

list-style-type : none ;

margin : 0px;

padding : 20px 10px ;

width : 100px ;

}

#content {

width : 470px;

}

#subcontent {

background-color : #cafaaf ;

width : 100px;

padding : 20px 10px;

}

#maincontent {

width : 340px;

padding-top: 20px;

}

</style>

</head>

<body>

<ul>

</ul>

<p>- 엘리자베스 퀴블러로스 데이비드 케슬러</p>

<p>배움을 얻는다는 것은 인생을 사는것을 의미한다.

갑자기 더 행복해지거나 강해지는 것이 아니라,

세상을 더 이해하고 자기 자신과 더 평화로워지는 것을

의미한다. 아무도 당신이 배워야 할 것이 무엇인지

알려 줄 수 있는 사람은 없다.

그것을 발견하는 것은 당신만의 여행이다.</p>

<p>사람과의 관계에서 때론 텅빈 공간이 되라.

다른 사람이 지나다니게 하라. 자신안에서

세계의 영혼을 발견하고 인간 안에서 신의 정신을 보라.

그것이 진정한 관계이다

삶은 거울과 같다. 삶에 미소지으라.

그러면 삶이 당신에게 미소지을 테니까..</p>

<p>죽음에 도달하는 순간 모두 제로가 된다. 삶의 끝에서 아무도

당신에게 당신이 얼마나 많은 학위를

가졌으며 얼마나 큰 집을 가지고 있는지, 얼마나 좋은 고급차를

굴리고 있는지 묻지 않는다.

중요한 것은 당신이 누구인가 하는 것이다. 이것이 죽어가는

사람들이 당신에게 가르치는 것이다.</p>

<p>용서의 첫 단계는 상대방을 다시 인간으로 바라보는 것이다. 그

들은 실수투성이고 부서지기 쉽고 외롭고

궁핍하고 정서적으로 불안전 하다. 다시 말해, 그들은 우리 자

신과 똑 같다. 그들 역시 오르막길과 내리막길로

가득한 인생 길을 걷고 있는 영혼들이다.</p>

<p>상실은 무엇이 소중한지 보여주며 사랑은 우리의 진정한 모습

을 가르쳐 준다. 관계는 자신을 일깨워 주고 성장의 기회를 가

져다 준다. 두려움 , 분노, 죄책감조차도 훌륭한 교사 이다.

삶의 가장 어두운 시간에도우리는 성장하고 있다

삶은 그 특별한 매력을 나타내기 위해 굴곡이 있는 것이다.</p>

</div>

<p>죽는다는게 자신의 바로 뒤 혹은 눈앞에 올수 있다는걸 간과하고 사는 사람이 참많아. 주말에 쉬지 않고 회사에 나가 일을 한다던지, 늦게 까지 일에 빠져서 뒤뚱거리는 모습을 보면 아무말 안하고 넘어 갈수도 있지만 꼭 한마디씩 던지게 되더라고, "행복해?" 그럼 이렇게 대답을 하지 "아니" 그럼 왜 그렇게 살아? .. 먹고 살려고! "그렇게 해서 먹고 살면 행복해?" "살기는 해야 잖아?" 푸헐~ 솔직해져야지, 그렇게 안해도 먹고는 살수 있어! 문제는 그런게 아닌것 같아! 용기가 없는 거지, 행복을 찾아 떠날수 있는 용기가.. 나도 마찬가지지만..</p>

<p>내가 생각하는 인생의 목표는 행복이야. 행복하게 살자고.. 누구보다가 아닌 내가 원하는 만큼 꽃이 피면 꽃을 보고 즐거워할수 있는 시간과 마음을 그런 행복 말이지</p>

</div>

핸폰 : 010-0101-0202</p>

</div>

</body>

</html>

저작자표시

'웹접근성과 웹표준' 카테고리의 다른 글

모바일 뷰포트(viewport) (0)	2013.08.11
타이포그래피 프로퍼티 (0)	2013.08.10
문서 레이아웃: float, position: static, relative, absolute, z-index (0)	2013.07.25
다양한 선택자: CSS 리셋,Display:inline-block, :before, :after 등 (0)	2013.07.24
사이트 제작시 웹 접근성 고려 사항 (0)	2013.07.23