기본적으로 많이 사용되는 소스
#id {width:값; margin:0 auto}

position(relative)을 사용한 방법..
#id {position:absolute;top:0px;left:감싸고 있는 DIV의 50%값 px;}

left: 50% 해주시고 추가로 margin-left: DIV의길이의 (-)50%값 px 을 해주면 중앙 정렬이 됨.
"마진 오토"를 사용 하기윈해선 블럭 엘리멘트에 위드 값이 정해져 있어야 하며
DTD에 따라 안먹는 경우가 있음.



덧글 참조
원문보기

한글의 웹 글꼴 단위 및 크기 비교 : Comparing Korean Fonts sizes/units
a, img {border: none;}

/*게시판 본문*/
.ment {font: 9pt/14.5pt "굴림","돋움","돋움체","Dotum","verdana","arial"; color: #555555;}

.descript {width:100%; overflow:hidden;}
overflow : 설명

.hand {cursor:pointer;}
.bold {font-weight:bold;}

.text {font: 8pt "tahoma","돋움", "돋움체","Dotum","verdana","arial";}
.num {font:7pt "Tahoma","verdana","arial";}

근데 정작 찾던 position에 관한 내용은 빠자 있..;;;;;

원문 : http://blog.naver.com/beige9?Redirect=Log&logNo=30019116536

CSS스타일 속성모음

 

▶ 각 항목을 클릭하시면 새창으로 상세사용법을 보실수 있습니다.

 

 

배경값 설정 background B
배경 이미지의 스크롤 여부 설정 background-attachment
배경색 설정 background-color
배경 이미지 background-image
배경 위치 설정 background-position
배경 이미지의 반복 설정 background-repeat
박스 경계선의 속성 설정 border
박스 아래 경계선의 속성 설정 border-bottom
박스 아래 경계선의 두께 설정 border-bottom-width
박스 경계선의 색상 설정 border-color
박스 왼쪽 경계선의 속성 설정 border-left
박스 왼쪽 경계선의 두께 설정 border-left-width
박스 오른쪽 경계선의 속성 설정 border-right
박스 오른쪽 경계선의 두께 설정 border-right-width
경계선 스타일 지정 border-style
박스 위쪽 경계선의 속성 설정 border-top
박스 위쪽 경계선의 두께 설정 border-top-width
박스 경계선의 두께 설정 border-width
 
이미지나 테스트의 배치 지정 clear C
글자색의 설정 color
 
디스플레이 값의 변경 설정 display D
 
이미지나 택스트의 배치 지정 float F
글꼴 속성 설정 font
글꼴 종류 설정 font-family
글자 크기 설정 font-size
글자 모양 설정 font-style
글꼴의 전환 font-variant
글자 두께 지정 font-weight
 
Element(요소) 높이 설정 height H
 
글자간의 간격 조절 letter-spacing L
각 줄간격 설정 line-height
목록의 스타일 설정 list-style
목록의 이미지 설정 list-style-image
목록의 위치 형태 설정 list-style-position
목록의 형태 설정 list-style-type
 
모든 여백 설정 margin M
맨 아래쪽 여백 설정 margin-bottom
맨 왼쪽 여백 설정 margin-left
맨 오른쪽 여백 설정 margin-right
맨 위쪽 여백 설정 margin-top
 
박스내의 간격 설정 padding P
박스내의 아래쪽 간격 설정 padding-bottom
박스내의 왼쪽 간격 설정 padding-left
박스내의 오른쪽 간격 설정 padding-right
박스내의 위쪽 간격 설정 padding-top
 
수평 정열을 설정 text-align T
텍스트의 효과 조절 text-decoration
텍스트에서 첫번째 줄 들여쓰기 text-indent
문자열의 변환 text-transform
 
수직 정열을 설정 vertical-align V
 
띄어쓰기 부분의 처리 white-space W
Element(요소) 너비 설정 width
단어들 사이의 간격 조절 word-spacing


이런식으로 만들면 웹표준이나 웹 2.0에 가까워 질라나..?
근데 이걸 디자인으로 가독성 있께 코딩하는게.. 지금 실력으론 메롱 스럽..;;;

다음 홈피리뉴얼때 사용해봐야 겠..;;;

  • 갤러리
    • 운영자
    • 게스트
  • 자유게시판
  • 스크랩·스킬
  • 비밀노트
    • Script
      • html
      • css
      • Javascript
      • php
      • ajax
    • 디자인
      • 깔끔
      • 색상
      • 아이콘
      • 플래시
    • 프로그램/유틸리티
    • font
  • 방명록
  • 로그인
    • 아이디 :
    • 비밀번호 :
    • 회원가입



  <ul>
 <li>갤러리<ul>
  <li>운영자</li>
  <li>게스트</li>
 </ul>
 <li>자유게시판</li>
 <li>스크랩·스킬</li>
 <li>비밀노트<ul>
  <li>Script<ul>
   <li>html</li>
   <li>css</li>
   <li>Javascript</li>
   <li>php</li>
   <li>ajax</li>
  </ul>
  <li>디자인<ul>
   <li>깔끔</li>
   <li>색상</li>
   <li>아이콘</li>
   <li>플래시</li>
  </ul>
 </ul><ul>
   <li>프로그램/유틸리티</li>
   <li>font</li>
  </ul>
 <li>방명록</li>
 <li>로그인<ul>
  <li>아이디 : <input type="text" name="uid"></li>
  <li>비밀번호 : <input type="password" name="pass"></li>
  <li><input type="submit" value="로그인"></li>
  <li>회원가입</li>
 </ul>
  </ul>

+ Recent posts

티스토리툴바