ReSet ORIGINAL
[CSS] 웹표준코딩 기본팁 목록
  • 글쓴이 : IN-BEST 작성일 : 13-03-14 01:20 조회 : 5,522
\\ Source Explanation
웹표준코딩을 하는데 있어서 간략한 기본 팁정리
Source Code


01. 좌우여백 조절
: margin을 사용할 경우 IE6~IE7의 인식 방법이 다르므로 padding을 사용하고,
- 닷핵을 우회하는 방법을 사용하자.

02. 중앙정렬
: margin : 0 auto; (상하는 0px 좌우는 auto로 중앙정렬)

03. 공통 CSS
: body,div,ul,li,dl,dt,dd,ol,p,h1,h2,h3,h4,h5,h6,form {margin:0;padding:0;}
- 또는 * {margin:0;padding:0;} 으로 표현.
body {font:normal dotum,'돋움';}    
ul,ol,dl {list-style:none}      
img {border:0; vertical-align:top;}      
ul {list-style:none; padding:0; margin:0;}

: 위치를 조절할 경우 left-top 에서 시작해야 위치조절이 용이하며,
- vertical-aligin:top 기본적으로 수직정렬로 시작하자.
- img 부분에서는 border:0px; 또는 border-style:none 사용한다.

04. margin, padding 개념

: margin - 두 객체 사이의 간격을 의미 즉, 바깥쪽의 여백을 말함.
- padding - 한 객체내에서의 이미지, 텍스트, border 경계와의 여백을 의미 즉 컨텐츠 안쪽의 여백을 말함.

예를들어 padding 값을 상하좌우 10px 주고 width 와 height의 전체값을 구한다면,
계산법은 아래와 같이 하면된다.
⇒ 전체: width = 10px(padding의 오른쪽값) +  컨텐츠 width px + 10px(padding의 왼쪽값)
⇒ 전체: height = 10px(padding의 위의 값) +  컨텐츠 height px + 10px(padding의 아래값)

반대로 전체 width 값을 알고 padding 값과 border을 줄때는 반듯이 전체 width값에 padding값 border값을 포함한 width값을 써줘야 오류없이 원하는 디자인으로 구성할 수 있다...,
- 예를 들어 width가 500px하는 박스를 만들려고 한다.
그런데 박스 테두리를 즉, border:5px을 주고 안쪽 여백 좌우 paddong:0px 10px씩 주고자 한다면 전체 width값은 470px을 주어야  브라우저 영역에 보이는 화면에서는 500px로 표현된다.

* 계산법
⇒ 브라우저 영역의 화면에 보여주고 싶은 총 width값 500px 일때,
- border-left:5px - padding-left:10px - border-right:5px - padding-right:10px = 실 적어줘야 할 width:470px 

05. list 가로나열
:  li {display:inline}
- 태그 기본속성, display 속성을 잘 알아야 이용해서 자유롭게 디자인 할 수 있다.

06. 롤오버 이미지 만들기
: <-mg src="이미지주소" onmouseover="this.src='이미지주소'" onmouseout="this.src='이미지주소'" />

07. IE6 ~ IE7계열에서는 margin등 오차가 나오게 될 수 있다. 이럴 경우 닷핵을 이용한다.
:  닷핵은 카테고리 CSS에서 CSS핵에서 참고하시면 됩니다. 

08. 리스트 블릿 없애기
: ul {list-style: none; padding:0; margin:0;}

09. display 간략설명
: inline - margin, padding을 사용못한다. width, height 불가능. 가로배열 (span , img  주로이용)
- block - margin,padding을 사용가능. width,height 사용가능. 줄바꿈 (div, p , form 요소들이 있고 블록단위로 개행)

10. position : 요소의 위치를 설정 할때 사용
- absolute - position:absolute; top:10px; left:50px; (위에서 10px 왼쪽으로 50px 이동)
- relative - 어느지점을 기준으로 한 상대위치
- fixed - 고정위치 (어떤대상을 스크롤과 관계없이 고정시킬때 주로 이용)
- inherit - 상위설정에서 상속

11. background
: background:url(상대주소) - option
- no-repeat - 반복하지않음.
- repeat-x - x축으로 반복. 가로반복
- repeat-y - y축으로 반복. 세로반복

12. CSS 셀렉터 확인
:  p a .gClass - 태그안에서 gClass 클래스 이름이 붙은 모든링크
- a #bID .dClass - 아이디가 bID 이고 클래스가 dClass를 가지는 링크


· 출처 : 웹표준코딩
0.00 (0명)
평가해주세요. 비회원 가능!