아 글고 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