'css 퍼블리싱 정리'에 해당되는 글 2건

브라우져 마다 기본 설정이 조금씩 달라서 예를 들면 h1 태그의 경우 브라우져마다 다른 크기와 마진으로 출력한다. 

이럴 경우 h1{ 자기 고유의 마진과 크기 스타일 지정 ; } 이렇게 지정해서 쓰면 모든 브라우져에서 동일하게 

h1 스타일을 먹일 수 있다. 이것을 스타일 시트 표준화 또는 스타일시트 초기화 또는 요새 reset.css 라고한다.

이 reset.css 파일은 html의 맨 앞에서 로딩되어야 한다. 

작성 예시 )

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,

blockquote,th,td{margin:0; padding:0; }

table { border-collapse:collapse; border-spacing:0;}

fieldset,img{ border:0; }

address , caption , cite, code, dfn, em, strong, th, var

{font-style:normal; font-weight:normal;}

ol,ul { margin:1em 0; margin-left:40px; padding-left:0;}

ul{list-style-type:disc;}

ol{list-style-type:decimal;}

caption,th{text-align:left;}

h1,h2,h3,h4,h5,h6 {font-size:100%;}

/*블록요소*/

html, div, map, dt, from { display:block;}

body { display:block; margin:8px; font-family:serif;font-size:medium;}

p , dl {display:block; margin-top:1em; margin-bottom:1em;}

dd{display:block; margin-left:40px;}

address{display:block ; font-style:italic;}

blockquote{display:block; margin:1em 40px;}

h1{ display:block; font-size:2em; font-weight:bold; margin :0.67em 0 ;}

h2{ display:block; font-size:1.5em; font-weight:bold ; margin:0.83em 0 ; }

h3{ display:block; font-size:1.125em ; font-weight:bold; margin:1em 0 ; }

h4{ display:block; font-size:1em; font-weight:bold; margin:1.33em 0;}

h5{display:block; font-size:0.75em; font-weight:bold; margin:1.67em 0;}

h6{ display:block; font-size:0.5625em; font-weight:bold ; margin:2.33em 0 ;}

pre{display;block ; font-family:monospace; white-space:pre; margin:1em 0;}

hr{display:block; height:2px; border:1px ; margin:0.5em auto 0.5em auto;}

/*테이블요소*/

table { border-spacing:2px ; border-collapse:separate; margin-top:0; margin-bottom:0; text-indent:0;}

caption{text-align:center;}

td{padding:1px;}

th{font-weight:bold; padding:1px;}

tbody, thead, tfoot { vertical-align:middle;}

/*인라인요소*/

strong { font-weight:bold;}

cite, em, var, dfn { font-style:italic;}   

code, kbd, samp { font-family: monospace;}

ins{text-decoration:line-through;}

sub{ vertical-align:-0.25em; font-size:smaller ; line-height:normal;}

sup{vertical-align: 0.5em ; font-size:smaller ; line-height:normal;}

abbr[title] , {border-bottom:dotted 1px;}

/*리스트 요소*/

ul { list-style-type:disc ; margin:1em 0; margin-left:40px;padding-left:0;}

ol { list-style-type:decimal; margin:1em 0; margin-left:40px; padding-left:0;}

/*안에 들어있는 리스트의 상단과 하단의 마진을 없애는 처리*/

ul ul ,ul ol,ul dl,ol ul , ol ol, ol dl, dl ul, dl ol, dl dl {margin-top:0 ;margin-bottom:0;}

최신 유행 reset.css 을 한번에 모아둔 곳:

http://cssreset.com/

<div id="container">

    <div class="box">머시기거시기거시기머시기</div>

</div>

위의 내용을 두고

box 를 position:relative 로 두면 container 내부에 영역을 차지하고 box div 사이즈가 커지면

container 요소의 사이즈도 커진다. 하지만 box 요소의 top 값을 조정해 이동시켜도 container 의 사이즈가 커지지는 않는다.

top,bottom,left, right 의 값은 먹힌다.

같은 부모 내부의 relative , static 요소간에는 질서가 유지된다.

(만약 같은 부모이고 자신의 앞부분에 static 이나 relative 요소를 추가하고 top 값을 지정하면

자신의 형제요소인 그 요소를 기준으로 top 이 계산되어진다. 부모의 top 을 기준으로한 top 이 아니라 말이다.)

그림으로 자세히 설명하자면

[[왼쪽소스]]

<div id="container">
    <div class="box">머시기거시기거시기머시기</div>
</div>

[[오른쪽소스]]

<div id="container">
    <div>앞</div>
    <div class="box">머시기거시기거시기머시기</div>
</div>

box 를 기본값인 position:static 으로 두면 container 내부에 영역을 차지하고 box div 사이즈가 커지면
container 요소의 사이즈도 커진다. 

또 top,left,bottom,right 값은 먹지 않는다.

그리고 한 라인을 다 차지한다. 

width, height 값은 적용된다. 

box를 position:absolute; 으로 두면 container 내부에 영역을 차지하지 않고 absolute 흐름으로 편입된다. 

부모가 position:absolute 요소 외에 자식이없다면 부모요소의 높이는 0이된다. 

position:fixed 의 경우 absolute 와 같지만 차이점은

브라우져 스크롤을 올리고 내려도 브라우져 client화면의 left,top 을 기준으로 그자리에 고정된다.