이미지 높이를 실제 이미지의 높이로 바꾸도록 주의하세요. 여기서는 이미지가 배경으로 표시되며 들여쓰기가 -2000픽셀로 설정되어 있으므로 실제 텍스트는 화면 왼쪽에 2000포인트 나타나 보이지 않게 됩니다. 하지만 사진을 꺼두시는 분들은 아예 못 보실 수도 있으니 주의하시기 바랍니다.
6. CSS 상자 모델을 위한 또 다른 조정 기술
이 Box 모델의 조정은 주로 IE6 이전의 IE 브라우저에 적용됩니다. 테두리 너비와 공백을 요소 너비로 계산합니다. 예:
#box { 너비: 100px; 테두리: 5px }
이렇게 부르세요:
...
이제 상자의 전체 너비는 150포인트가 되어야 하며 이는 IE6 이전의 IE를 제외한 모든 브라우저에서 정확합니다. 그러나 IE5와 같은 브라우저에서는 전체 너비가 여전히 100포인트입니다. 이 차이는 이전 사람들이 발명한 상자 조정 방법을 사용하여 처리할 수 있습니다.
그러나 CSS를 사용하여 일관성 있게 표시하면 동일한 목적을 달성할 수 있습니다.
#box { 너비: 150px } #box div { 테두리: 5px }
다음과 같이 전화하세요.
...
이렇게 하면 어떤 브라우저에서든 너비는 150포인트가 됩니다.
7. 블록 요소를 중앙에 정렬
폭이 고정된 웹페이지를 만들고 웹페이지를 가로 중앙에 배치하려는 경우 일반적으로 다음과 같습니다.
#content { 너비: 700px; 여백: 0 자동 }
를 사용하여 모든 요소를 둘러쌉니다. 이는 간단하지만 충분하지 않으며 IE6 이전 버전에서는 이 효과가 표시되지 않습니다. CSS를 다음과 같이 변경하세요.
body { text-align: center } #content { text-align: width: 700px margin: 0 auto }
이렇게 하면 웹페이지 콘텐츠가 중앙에 배치되므로 Content에
를 추가했습니다.
텍스트 정렬: 왼쪽 .
8. CSS를 사용하여 수직 정렬 처리
테이블을 사용하여 쉽게 수직 정렬을 수행할 수 있습니다. 테이블 단위를 수직 정렬: 중간으로 설정하면 됩니다. 그러나 이것은 CSS에서는 쓸모가 없습니다. 탐색 모음을 2em 높이로 설정하고 탐색 텍스트를 수직 중앙에 배치하려는 경우 이 속성을 설정하는 것은 쓸모가 없습니다.
CSS 방식이란 무엇인가요? 그런데 이 단어의 줄 높이를 2em으로 설정하면 됩니다. line-height: 2em이면 끝입니다.
9. 컨테이너 내 CSS 위치 지정
CSS의 장점 중 하나는 컨테이너 내에서도 요소를 임의로 배치할 수 있다는 것입니다. 예를 들어 이 컨테이너의 경우:
#container { 위치: 상대 }
이렇게 하면 컨테이너의 모든 요소가 상대적으로 배치됩니다.
...
왼쪽에서 30점, 위쪽에서 5점을 찾으려면 다음과 같이 하세요.
#navigation { 위치: 절대; 왼쪽: 30px 위쪽: 5px }
물론 다음과 같이 할 수도 있습니다.
여백: 5px 0 0 30px
4개 숫자의 순서는 위쪽, 오른쪽, 아래쪽, 왼쪽입니다. 물론 때로는 여백보다 위치 지정이 더 나을 때도 있습니다.
10. 배경색은 화면 하단까지 그대로
세로 방향 제어는 CSS의 기능을 벗어납니다. 내비게이션 바를 콘텐츠 바와 같이 페이지 하단으로 바로 이동시키고 싶다면 테이블을 사용하는 것이 매우 편리하지만, CSS만 사용한다면 다음과 같습니다.
#navigation { 배경: 너비: 150px }
짧은 내비게이션 바는 바로 하단으로 이동하지 않으며 콘텐츠가 중간에 끝나면 종료됩니다. 무엇을 해야 할까요?
아쉽게도 치트를 할 수 있는 유일한 방법은 더 짧은 열에 배경 이미지를 열 너비와 동일한 너비로 추가하고 설정된 배경색과 동일한 색상으로 만드는 것입니다.
본문 { 배경: url(blue-image.gif) 0 0 반복-y }
지금은 em을 단위로 사용할 수 없습니다. 독자가 글꼴 크기를 변경하면 트릭이 공개되고 px만 사용할 수 있기 때문입니다.
