CSS position 정리

2016.06.10 10:35 개발/html

css 공부할때 어려운 position 정리한 파일입니다.


제가 공부할때 만든 파일로 간단하게 position 별로 정리를 해봤습니다.


아래는 샘플로 만든 파일 입니다.

position_sample.html


아래는 위 파일의 소스코드 입니다.

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			body {
				padding: 0;
				//margin: 0;
			}
		
			#box1{
				width: 350px;
				height: 350px;
				background-color: red;
				color: #ffffff;
			}
			
			#box1-1{
				width: 250px;
				height: 200px;
				background-color: silver;
				color: #000000;
				
				position: relative;
				top: 0;
				left: 100px;
			}
			
			#box2{
				width: 200px;
				height: 200px;
				background-color: green;
				color: #ffffff;
				
				position: relative;
				top: 0px;
				left: 150px;
			}
			
			#box3{
				width: 200px;
				height: 200px;
				background-color: yellow;
				color: #0A3A61;
				
				position: absolute;
				top: 0;
				left: 650px;
			}
			
			#box4{
				width: 200px;
				height: 200px;
				background-color: brown;
				color: #ffffff;
				
				position: fixed;
				top: 50px;
				left: 400px;
			}
		</style>
	</head>
	
	<body>
			<div id="box1">
				<div id="box1-1">
					box1-1 - relative(box1 inner)<br />
					width: 250px;<br />
					height: 200px;<br />
					background-color: silver;<br />
					color: #000000;<br />
					<br />
					position: relative;<br />
					top: 0;<br />
					left: 100px;
				</div>
				
				box1 - static(default)<br />
				width: 350px;<br />
				height: 350px;<br />
				background-color: red;<br />
				color: #ffffff;
			</div>
			
			<div id="box2">
				box2 - relative<br />
				width: 200px;<br />
				height: 200px;<br />
				background-color: green;<br />
				color: #ffffff;<br />
				<br />
				position: relative;<br />
				top: 0px;<br />
				left: 150px;<br />
			</div>
			
			<div id="box3">
				box3 - absolute<br />
				width: 200px;<br />
				height: 200px;<br />
				background-color: yellow;<br />
				color: #0A3A61;<br />
				<br />
				position: absolute;<br />
				top: 0;<br />
				left: 650px;<br />
			</div>
			
			<div id="box4">
				box4 - fixed<br />
				width: 200px;<br />
				height: 200px;<br />
				background-color: brown;<br />
				<br />
				color: #ffffff;<br />
				position: fixed;<br />
				top: 50px;<br />
				left: 400px;
			</div>
			
			<br /><br />
			<hr />
			<pre>
				position: static은  초기값으로 위치를 지정하지 않을 때와 같습니다

				보통 static은 사용할 일이 없지만, 앞에 설정된 position을 무시할 때 사용되기도 합니다.

				top, bottom, left, right 속성값이 적용되지 않습니다.
				
				<hr />
				
				position: relative은  위치 계산을 할 때 static의 원래 위치부터 계산합니다.
				
				위(top), 아래(bottom), 좌(left), 우(right)의 위치를 같이 설정할 수도 있습니다.
				
				<hr />
				
				position: absolute은 relative와 달리 문서의 원래 위치와 상관없이 위치를 지정할 수 있습니다.

				하지만  가장 가까운 상위 요소를 기준으로(단, static은 제외) 위치가 결정됩니다.

				상위 요소가 없으면 위치는 html를 기준으로 설정됩니다.

				relative와 마찬가지로 위(top), 아래(bottom), 좌(left), 우(right)의 위치를 같이 설정할 수 있습니다
				
				<hr />
				
				position: fixed 브라우저 화면의 상대 위치입니다.

				따라서 화면이 바뀌더라도 고정된 위치를 설정할 수 있습니다.(상위 요소에 영향을 받지 않음)

				마찬가지로 위(top), 아래(bottom), 좌(left), 우(right)의 위치도 같이 설정할 수 있습니다.
				
				IE7, IE8은 position: fixed 값이 적용되지 않으므로  문서 타입을 규정해주어야 합니다.
			</pre>
			
			<hr />
			
			<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
			<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	</body>
</html>


저작자 표시 비영리 변경 금지
신고

'개발 > html' 카테고리의 다른 글

CSS position 정리  (3) 2016.06.10
블로그 윤하 카운터 소스  (0) 2016.06.07

, ,

Trackbacks 0 / Comments 3

  • Favicon of http://newday21.tistory.com BlogIcon 새 날 2016.06.20 14:20 신고

    헐.. 하얀 건 글씨요 검은 건 종이라... 너무 어렵네요 ㅠㅠ 그나 저나 이 스킨 왠지 깔끔한 게 마음에 드는군요. 손을 많이 보신 결과물인가요? 아니면 원작과 큰 차이가 없나요? 아울러 로딩 속도는 어떻든가요?

    • Favicon of http://luckydos.com BlogIcon 럭키도스™ 2016.06.20 14:31 신고

      속도는 조금 느립니다. 이것저것 스크립트가 많이 들어가 있어서요.

      스킨은 https://www.cmsfactory.net/ 여기에서 가져온 JB All In One Ver 0.4 버전을 제가 수정해서 사용중입니다. 기본틀은 그대로고,,. 제 블로그에 맞게 수정을 했습니다.

  • Favicon of http://datafile.tistory.com BlogIcon 신기한별 2016.06.23 21:06 신고

    옛날에 프로그래밍 공부했을때가 생각나네요..
    지금은 다 까먹었지만... ㅎㅎ

Younha Count

윤하 일본데뷔 일째(년)
2004년 09월 01일
(첫 싱글 유비키리 발매일 기준)
윤하 한국데뷔 일째(년)
2006년 12월 17일
(SBS인기가요 첫방송기준)
윤하 별밤 DJ기간 일(년)
2011년 05월 09일
~
2014년 11월 02일
윤하 별밤 스폐셜 DJ기간
2016년 06월 06일
~
2016년 06월 12일

럭키도스™ 블로그 by 럭키도스™

Search

Calendar

«   2016/06   »
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30    

Archive

Statistics

Statistics Graph
  • Total : 7,540
  • Today : 7
  • Yesterday : 84
Copyright © 럭키도스™ All Rights Reserved | JB All In One Version 0.4 Designed by CMSFactory.NET

위로

아래로