웹표준코딩 Tip 웹표준 XHTML/CSS/jQuery

<!-- 이것은 블로깅이 아님 1~100번까지 팁을 만들어 보자 엄청 도움이 될듯하다. -->

1) 좌우여백을 조절할 경우 ? 
  
   margin 사용 하면  IE6~IE7인식 방법이 다르므로  padding 사용하자
   닷핵을 우회하는 방법을 사용하자. (되도록)
2) 중앙정렬 할려면 ?

   margin : 0 auto; (상하는 0px 꽉차고  좌우는 auto로 적용 --> 중앙정렬 된다고 그냥알자.!.)

3) 공통css 부분 ? 
 body,div,ul,li,dl,dt,dd,ol,p,h1,h2,h3,h4,h5,h6,form {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:none 이렇게 하면 테두리가 제거 된다  예) img { border: 0; }


4) margin, padding? 개념

margin : 두 객체 사이의 간격을 의미

padding:  한 객체내에서의 이미지, 텍스트 border 경계와의 
               여백을 의미한다

만약) padding: 좌우 10px 이라고 한다면

전체 width : 10px + 컨텐츠 px + 10px 이 전체 width 이다 .







만약 border 3px 라면 ? 이것도 계산해야 된다.

※ margin + border + padding
   + width +
   margin + border + padding

    브라우저 영역에 보이는 화면 ( 하지만 전체 영역을 계산할 일은 생각보다 별로 없다.
    첫 레이아웃만 잘 정한다면 말이지..)

   ※ margin 이 서로 다른 엘리먼트에 의해 예) margin-bottom : 20px; margin-top : 40px 이라고 한다면

      우리가 예상한 margin 합은 60px 아니라 큰수에 법칙을 따른다. 40px 로 승자법칙으로 상황종료 된다.



5) list 가로나열 ?

 li {display:inline}
 
※ 태그 기본속성이 아는 것이 매우 중요한데 예) div block , li block , span inline 이라는것을 알어야

    display 속성을 이용해서 자유롭게 디자인 할 수있다.



6)  롤오버 이미지 만들기 ?

 <img src="imgs/ub_menu_navi_01.jpg"
       onmouseover="this.src='imgs/ub_menu_navi_on_01.jpg'"  
             onmouseout="this.src='imgs/ub_menu_navi_01.jpg'"  />

7) 보통 IE 계열에서 6,7 은 form margin 다르게 나오므로 각별히 주의하고

  이럴경우 닷핵을 사용한다.  (닷핵을 참조)

8) 리스트 블릿 없애려면 ?

ul {list-style: none ;padding:0; margin:0 }

9) div 박스를디자인 할경우 검정과 흰색으로 색을 입혀 디자인 하는것이  용이하다 
     나중에 다 제거 해야 겠지만 서두..

10) display ?  http://tokyonavi.egloos.com/632130  (참조)
    가로배열 할 경우 : inline  margin, padding을 사용못한다. width, height 불가
    블록설정 : 줄바꿈 , block 으로 사용하면 margin,padding을 사용가능 , width,height 사용가능 
    
    block{ div, p , form } 요소들이 있고 블록단위로 개행이 된다. 
   inline : span , img  주로이용된다.

11) position  ? 
 
    요소의 위치를 설정 할때 사용  [absolute, relative, fixed, static, inherit]
   
    -absolute : 
     예) position: absolute; top:30px; left:40px; (0,0)에서 위에서 30px 이동하고 왼쪽으로 40px 이동된다.

    - relative : 어느지점을 기준으로 한 상대위치 
    - fixed  :  고정위치 (어떤대상을 스크롤과 관계없이 고정시킬때 주로 이용) 
                   
 
12)  배경이미지 ?

 background:url(상대주소) - option [no-repeat,repeat-x,repeat-y] 

 -no-repeat :  배경늘림방지 ,반복되지 않게
 - repeat-x :  가로 반복 
 - repeat-y :  세로반복  

  ※ 참고로 <img> 태그로 써야할지 background 태그로 사용해야 할지 애매할때가 매우많다
      누가 명괘하게 알려주었으면 좋겠닷.
 
13) css 셀렉터 확인하기 ?

 -p a.specislClass : <p> 태그안에서 specislClass 클래스 이름이 붙은 모든링크

- a#specislID.specislClass :  아이디가 specialID 이고 specialClass를 클래스로 가지는 링크


덧글

  • 꼼쥐 2011/06/15 14:58 # 삭제 답글

    콘텐츠중에 데이터에서 불러와뿌려지는 이미지는 <img>태그처리하시고,
    그외 버튼,배경,이미지들은 background 처리 하시면됩니다.
  • 덕순강아지 2011/06/16 10:02 #

    아...한수배웠습니다..감사.
댓글 입력 영역


ad_sidebar2_20100626

통계 위젯 (화이트)

38
38
684818