47256 Members __ Online

정렬
HOME스터디[s]웹표준

CSS 적용시 중요 부분 정리

posted by 지니얌
date : , update :
hit : 38451, scrab : 5 , recommended : 0

예전에 웹표준코딩 공부하면서 정리해놨던 건데요.. 기초라서ㅋㅋ 처음 공부하시는 분들에게 도움되시길 ~ ㅎㅎ

 

 

 

 

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

 

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;  margin:0; padding:0;}
풀이 : 적용된 리스트스타일을 없앤다.(점,숫자,알파벳등등의..) 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;                밑줄효과없음









댓글 37 | 엮인글 0

홈페이지 레이아웃 용어 정리
웹표준화 가이드 사이트 - 네이버





%3Cul+class%3D%22Klocation%22%3E%3Cli+class%3D%22first%22%3E%3Ca+href%3D%22..%2Fhompy%2F%22%3EHOME%3C%2Fa%3E%3C%2Fli%3E%3Cli%3E%3Ca+href%3D%22..%2Fhompy%2Fstudy.php%22%3E%EC%8A%A4%ED%84%B0%EB%94%94%5Bs%5D%3C%2Fa%3E%3C%2Fli%3E%3Cli%3E%3Ca+href%3D%22..%2Fhompy%2Fstudy.php%3Fmid%3D69%22%3E%EC%9B%B9%ED%91%9C%EC%A4%80%3C%2Fa%3E%3C%2Fli%3E%3C%2Ful%3E