Friday, May 6, 2011

stylin with CSS (스타일링 CSS)

멋도 모르고 jquery 부터 손대다가.. css를 혼자서 추측하고 있는 상황이 된지라.. 차근 차근 css부터 봐야 겠단 생각에 보기 시작한 책. 내용은 상당히 맘에 든다. 내게 딱 맞는 수준이랄까. 표준화라는 개념도 잘 나와있고 전체적으로 맘에 든다. 단 번역이 좀.. 그 사람 블로그 들어가니까 참으로 열정적이고 그렇긴 한데.. 솔직히 이렇게 말하고 싶진 않지만 번역은 별루인거 같다. 때때로 영어를 읽는건지 한글을 읽는건지.. 여튼.. 이 책 괜찮다. 나같이 아주 아주 대충 css를 알고 어떻게 해야 할지 우왕좌왕하는 사람에겐. 특히나 괜찮은 책.


아 글고 xhtml 태그 리스트 있는 사이트


아.. 이 책 번역 엉망이다. 너무 심한거 같네.. 읽으면 읽을 수록 구글 번역기 돌렸다는 생각이 드는데.. 


이 책을 보고 얻은 것중에 가장 중요한 것은 table 태그를 사용하지 말라는 것. 예전에 웹프로그램밍 했을때는 웹페이지의 구조를 table 태그를 이용해서 잡았는데 이 책에서는 절대 그렇게 하지 않기를 권장한다. html은 content를 나타내고, 즉 content에 적합한 태그를 골라서 html을 만들고 이를 구조화하는 것은 css로 한다. jquery를 봤을때 jquery로 블록의 위치를  컨트롤 하는걸 보고 놀랐는데 이게 css의 힘이였군.. 이거 보고 jquery 보면 깨닭는게 다르겠다 싶다.


기억해야 할것 몇가지만 적어본다.


-css 파일 최상단부에 * {margin:0; padding:0;}을 넣을 것.
-영문 폰트일때는 font size의 단위를 ems로 한다(한글일때는 px로 한다, 깨지기 때문에).
-font 속성 나열할때 fot-weight, font-style, font-variant는 순서 상관없이 처음에 그 담엔 font-size, font-family 순으로 나열한다.
-vertical margin collapsing, 세로 마진(vertical margin)이 겹치면 그 사이 간격이 두 세로 마진의 합이 되는 것이 아니라 둘중 큰 값이 된다.
-p {width:400px; padding:0 20px;} 이라고 했으면 이 p 블록은 폭이 440px(400 + 20*2)를 갖게 된다.
-padding 값이 변하게 되면 블록 요소들의 너비가 달라지는데 이를 방지 하기 위해서 블록 안에 블록을 설정한다. 그러니까 div 안에 또 다른 div를 설정한다.
-inline 태그는 block 태그를 감쌀수 없다. 허나 display 속성을 이용하면 가능.
-한 블록태그 안에 다른 블록태그가 있을때 바깥의 블록태그의 position 속성이 static으로 되어 있으면 안쪽의 블록 태그의 position속성이 absolute로 되어 있을때 안쪽 블록 태그의 기준점은 body이나, 바깥쪽 블록태그의 position 속성이 relative로 되어 있다면 기준점은 바깥쪽 블록 태그가 된다.
-가상 클래스인 hover는 IE6에서는 a 태그에서 밖에 안먹힌다. 웹에서 csshover.htc를 다운 받아서 body 태그에다가 body {behavior:url(csshover.htc);} 라고 넣는다. 그러면 IE6 에서 모든 태그에 hover가 먹힌다.
-별표 핵과 백슬러쉬 핵 : div * ul {... css 선언... } 은 ul이 div의 자식이 아니고 손자라면 선택되지 않는다. 이 * 와 IE6에서만 먹히는 html 요소를 이용해서 IE6에서만 읽히는 규칙을 만들 수 있다. * html div.id {..somthing css..} 이런식으로 하면 IE6에서만 이 태그 즉 id를 클래스로 갖는 div 태그에 css 적용을 시킬수 있다.
-html의 리스트 속성 (ul,ol,dl)로 menu를 만들 수 있는데 브라우져마다 list의 margin, padding이 다르기 때문에(특히 IE6) list를 div로 둘러싸고 그 div 안에 속성들 그러니까 div_something * {padding:0; margin:0;} 을 해준다.
-인라인 아이템과 블록 아이템은 서로 상호 작용하지 않는다. 뭔말인고 하니

라고 테그가 되어 있을때 css는 div{float:left;} a{padding:16px 6px;}라고 되어 있으면  a 태그에 padding을 했기 때문에 위 아래로 16px 앞뒤로 6px 만큼의 여유공간이 생기고 div의 float이 되어 있으므로 a 태그 크기만큼 맞춰질거라고 생각되는데 실은 그렇지 않다. 왜냐면 a 태그는 인라인 아이템이고 div는 블록아이템이라 서로 상호 작용을 하지 않아서, 그럼 어찌해야 하냐 css의 a 태그에다가 display:block; 을 넣어줘서 a 태그를 block 속성으로 변환

No comments:

Post a Comment