개발자 노트

CSS 적용시 중요 부분 정리

*** 기본적으로 잡아놓아야할 스타일  ***

body{
margin:0; 
padding:0; 
text-align:center; 
font-size: 11px;
font-family: 굴림, gulim, 돋움, dotum, Vertical, Arial; color:#888888;  
line-height:18px;
background:url('/image/common/index_bg.gif') repeat-x left top;
 }

풀이 : body는 여백값없고 가운데정렬에 폰트속성은 저렇고 글높이값은 18px이고 배경이미지가 깔려있다는..
       *요즘 폰트 사이즈는 em으로 많이 설정하기도 합니다.

p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button { margin:0; padding:0; }
풀이 : 위는 쓸데없는 여백을 없애라

img,fieldset { border:0;  }
풀이 : 이미지,필드셋에 보더값을 없애라.이미지링크에 걸리는 파란테두리같은거 없애주는 속성..

ol,ul,li { list-style:none; }
풀이 : ol,ul,li등은 기본적인 리스트 스타일이 있으므로 위와같이 설정하여 리스트속성을 무효화할수 있다.(점.숫자.순번등..)

a:link  { color:#888888; text-decoration:none; }
a:visited { color:#888888; text-decoration:none; }
a:active { color:#888888; text-decoration:none; }
a:hover  { color:#EB7731; text-decoration:underline; }
풀이 : 링크가 걸린 텍스트의 기본컬러는 #888이며 마우스오버시 컬러가 #EB7731로 변하며 밑줄이 생긴다.

.input { height:14px; font-size:11px;color:#666666; background:#F6F6F6; 
border:1px solid #D7D7D7; padding:3px 0 0 5px; margin-top:0; }
.select { font-size:11px;color:#666666; background:#F6F6F6; border:1px solid #D7D7D7; padding: 0; margin:0; }
풀이 : 인풋,셀렉트 스타일은 취향데로.. 설정해서 필요에따라 적용

*** 레이아웃 ***

사이트 가운데 정렬하기 : 보통 boby값에 text-align: center; 값을 
                                         boby 아래 가장 큰 레이아웃 값이 index라면 #index { margin : 0 auto;  float : left; }

                                         margin : 0 auto; 풀이 :  이렇게 설정한경우 이 속성을 가진 레이어는 정가운데 값을 가지게 됩니다.

                                         이렇게 주면 가운데 정렬이면서 좌측에서 흐르는 레이아웃이 설정된다.

박스옆에 다른 박스를 흐르게 할때는 float : left; 값이 아주 유용하고 자주 쓰게 된다.
float : left; 풀이 : 부모레이어에서 정한 공간내에서 하위 박스들은 옆으로 나열되거라.

*** 여백 또는 위치 정할때 ***

position : relative;  흐르는위치(상위값에 따라 이어서 표현된다)
position :absolute; 절대위치(top right등의 속성으로 위치정한다)

margin : - 모든 방향의 여백을 지정
margin-top :
margin-bottom : 
margin-left :
margin-right :

padding : - 박스내의 간격을 지정
padding-top : 
padding-bottom : 
padding-left :
padding-right :

margin과 padding둘다 여백을 지정하지만 마진값의 경우 브러우저별로
그 값이 일정치않은 오류가 많이 생겨 보통 여백을 설정할때는 padding값으로 정하는게 옳다.

각방향마다 간격 넓이가 다를 경우  아래같은형식으로 작성한다.
예) padding: 10px 20px 30px 40px;
풀이 : 위로10px 우측20px 아래30px 좌측40px의 간격이 생긴다.

여백값을 정할때는 브라우저별로 호환이 안되는경우가 자주 발생하니 꼭 크로싱브라우징한다.

*** 게시판등 테이블을 사용할때 ***

게시판등. 테이블을 사용할시 기본을 제외한 스타일 즉 보더값 또는 라인값,컬러등은 꼭 스타일로 정한다.
이유는 ie에서는 그 값이 1px로 일정하게 보이나 이외 브라우저에서는 그 이상으로 두껍게
보이거나 공간이 너무 떨어지는 경우가 많이 발생한다. 이전 테이블 작업한 본문들을
다른 브라우저에서 확인해보면 쉽게 알수있다.
앞으로 계속 수정되어야 할 이유는 스마트폰의 웹브라우저가 ie가 아니기 때문^^

예) border-bottom: 1px solid #dcdcdc;
풀이 : 이줄의 밑에 1px짜리 #dcdcdc컬러의 직선밑줄을 적용한다.

*** 배경이미지 ***

이미지배경적용   background: url('../1.gif');
컬러배경적용      background-color: #CCCCCC;

이때 뒤에 반복여부를 정하는 속성을 사용할수있다.

repeat
 background image 는 수직, 수평적으로 반복되어 질것이다. 이것은 default이다. 
 
repeat-x
 background image 오직 수평적으로 반복되어 질것이다. 
 
repeat-y
 background image 오직 수직적으로 반복되어 질것이다.
 
no-repeat
 background-image 반복되지 않을 것이다. 
 

예) background:url('../1.gif') repeat-x left top;
풀이 : 배경이미지가 좌측 최상위에서부터 수평적으로 반복된다

예) background:url('../1.gif') no-repeat 10px 5px;
풀이 : 배경이미지가 좌측 10px지점 탑에서5px 아래지점에서 시작되며 반복되지 않는다.

 
또 큰레이어안에 배경이미지를 깔아놓고 그 하위부분에 같은 배경이미지를 위치만 달리하여 적용할수 있다.
이미지 한장으로 여러박스 배경이미지를 다르게 표현할수 있는 방법이다.

예)
.a .i{background:#f6f4f5 url(../1.gif)}
.a .a1 .i{background-position:0 0}
.a .a2 .i{background-position:142px 0 }
.a. a3 .i{background-position: 0 -49px}
.a .a4 .i{background-position: 142px -49px}
.a .a5 .i{background-position:0 -97px }
.a .a6 .i{background-position:142px -97px}

*** 이외 css 속성 간략설명  : 초록색은 사용방법을위해 임의대로 넣은값 ***

display : 화면에 어떻게 보여지게 될것인가를 결정
예) 보통 div는 block값을 가지고 span은 inliner값을 가진다.
.a {display:block;}                      줄바꿈된다
.a {display:inline;}                      줄바꿈안된다.상하 마진,패팅값 width, height 이 무시된다.
.a {display:none;}                       화면에 표출되지않는다.

width: 100px;                               엘리먼트의 넓이값 100px
height: 100px;                             엘리먼트의 높이값 100px

clear:both;                                    flat설정을 초기화한다. 의도하지 않게 옆으로 계속 흐를때 써주면 떨어져서 좋다ㅋ

font-family: 돋움;                        사용될폰트종류 돋움체
font-size: 11px;                          폰트사이즈 11px
font-style: italic;                         폰트모양이 이탤릭체(기울임)
font-variant: small-caps;         글꼴전환효과로 작은대문자 글꼴이나온다
font-weight: bold;                       폰트두께를 볼드체(두껍게)로. 100,200,300..등의 숫자로 표현가능
color : #ddd;                                폰트컬러는 #ddd컬러당
line-height: 20px;                       한줄한줄의 높이간격은 20px의 간격을 갖는다.
letter-spacing: 2px;                   글자간의 간격은 2px
text-decoration:overline;          글자위에밑줄
text-decoration:line-through;  글자중간에 밑줄
text-decoration:underline;        글자아래에 밑줄
text-decoration:none;                밑줄효과없음