2008년 06월 17일
css 에 대해 알고 싶은 두세가지 것들
XHTML 내부의 외부파일 참조형식
<link type="text/css" rel="stylesheet" href="lounge.css" />
w3c css validator
http://jigsaw.w3.org/css-validator/
반드시 기억해둘 것들:
<link type="text/css" rel="stylesheet" href="lounge.css" />
w3c css validator
http://jigsaw.w3.org/css-validator/
반드시 기억해둘 것들:
- text-align 은 그 이름과 다르게 텍스트 뿐 아니라 블록 앨리먼트 내부의 모든 인라인 앨리먼트를 정렬시킨다(text, img, span 등등)
- 즉, text-align 은 블록 앨리먼트에서만 설정되어야 한다. span이나 img 같은 인라인 요소에는 아무런 작동도 하지 않는다.
- <span> 같은 inline 앨리먼트의 모든 방향에 margin 값을 주면, 다른 블록앨리먼트와 달리 좌우에만 빈공간이 추가된다. 하지만 예외적으로 <img> 앨리먼트는 모든 방향에 빈공간이 추가된다.
- <img>를 제외한 <span><em><strong> 같은 인라인 앨리먼트의 너비를 설정할 수 있지만, 그들을 위치시키기 전에는 아무런 영향을 주지 못한다.
- <table> 의 셀(td)들은 패딩과 테두리를 갖지만, margin 값을 가질 수는 없다. 셀들의 간격은 border-spacing 속성으로 조정해야 한다. (익스플러어 6 버전에는 지원되지 않는다.)
재미난 기능들:
- css 선택자를 #elixire h2 { ... } 로 하면 elixire 라는 아이디를 가진 앨리먼트 내부의 모든 h2가 선택된다. 하지만 #elixire > h2 {...} 라고 선택자를 명시하면 elixire 라는 아이디를 가진 앨리먼트 내부의 직계자식 h2 만 선택된다
CSS 속기법 예:
font : italic small/1.9em Georgia, "Times New Roman", serif;
font : small/1.6em Verdana , Helvetica , Arial , sans-serif;
background : #a7cece url(images/background.gif) no-repeat;
CSS 레이아웃과 포지셔닝
- position: absolute 사용시 top , left , right , bottom 값은 가장 가깝게 위치한 조상을 기준으로 적용된다. 만약, 자신을 둘러싼 div 같은 앨리먼트가 있다면 그 div 를 기준으로, 혹은 자신을 둘러싼 조상이 없다면 <body>를 기준으로 매겨진다.
- 상대적인 포지셔닝(position: relative) 는 절대적인 것과는 다르게 가장 가깝게 포함된 블록으로 부터의 절대적인 좌표가 아니라 앨리먼트의 실제 위치로부터의 오프셋이다. 즉 앨리먼트가 전체 문맥의 흐름에서 놓여있는 위치로 부터의 거리이다.
# by | 2008/06/17 00:59 | Web2.0 준비물 | 트랙백 | 덧글(0)
☞ 내 이글루에 이 글과 관련된 글 쓰기 (트랙백 보내기) [도움말]