1. CSS 글꼴 약어 규칙
CSS를 사용하여 글꼴을 정의할 때 다음을 수행할 수 있습니다.
| 인용된 내용은 다음과 같습니다. 글꼴 크기: 1em; 줄 높이: 1.5em; 글꼴 두께: 굵게; 글꼴 스타일: 기울임체; 글꼴 변형: 작은 대문자; 글꼴 모음: verdana,serif; |
실제로 다음 속성을 축약할 수 있습니다.
글꼴: 1em/1.5em 굵은 이탤릭체 작은 대문자 verdana,serif
지금은 훨씬 나아졌지만 한 가지 주의할 점이 있습니다. 이 단축 방법을 사용하려면 최소한 글꼴 크기 및 글꼴 계열 속성을 지정해야 합니다(예: 글꼴 두께, 글꼴 스타일, 글꼴- 변형)이 지정되지 않으면 기본값이 자동으로 사용됩니다.
2. 두 개의 클래스를 동시에 사용
일반적으로 속성에 대해 하나의 클래스만 지정하지만 이는 하나만 지정할 수 있다는 의미는 아닙니다. 예를 들면 다음과 같습니다.
<p class="text side">...</p>두 클래스를 동시에 사용하면(쉼표 대신 공백으로 구분) 이 단락에서는 두 클래스에 지정된 규칙을 적용합니다. 규칙 중 하나라도 중복되는 경우 후자의 규칙이 우선 적용됩니다.
3. CSS의 테두리 기본값
테두리 규칙을 작성할 때 일반적으로 색상, 너비 및 스타일(순서 상관없이)을 지정합니다. 예: border: 3px solid #000(3픽셀 너비의 검은색 실선 테두리) 실제로 이 예에서 지정해야 하는 유일한 값은 스타일입니다. 스타일을 단색으로 지정하면 나머지 값에는 기본값이 사용됩니다. 기본 너비는 중간(3~4픽셀에 해당)입니다. 기본 색상은 테두리의 텍스트 색상입니다. . 이것이 정확히 원하는 것이라면 CSS에서 지정할 필요가 없습니다.
4. !important는 IE에서 무시됩니다.
CSS에서는 일반적으로 지정된 마지막 규칙이 우선 적용됩니다. 그러나 IE 이외의 브라우저의 경우 !important로 표시된 모든 문은 절대 우선순위를 갖습니다. 예: margin-top: 3.5em !important; margin-top: 2em IE를 제외한 모든 브라우저에서 상단 여백은 항상 3.5em입니다. IE는 2em입니다. 특히 상대 여백 값을 사용할 때(예: 이 예) IE와 다른 브라우저 간의 미묘한 차이를 표시하는 데 유용합니다. (많은 사람들은 CSS 하위 선택기도 IE에서 무시된다는 것을 알 수 있습니다.)
5. 그림 교체 기술
텍스트를 표시하기 위해 이미지 대신 표준 HTML을 사용하는 것이 다운로드 속도를 높이고 유용성을 높이는 것이 더 현명한 경우가 많습니다. 그러나 방문자의 컴퓨터에서 사용할 수 없는 글꼴을 사용하기로 결정한 경우 이미지만 선택할 수 있습니다.
예를 들어, 각 페이지 상단에 "위젯 구입"이라는 제목을 사용하고 싶지만 검색 엔진에서도 발견되기를 원할 경우 미적 측면에서 보기 드문 글꼴을 사용하는 경우 표시할 이미지를 사용해야 합니다. 그것을 얻었습니다:
<h1><img src="/widget-image.gif" alt="위젯 구매" /></h1>
이것은 확실히 사실이지만 검색 엔진이 대체 텍스트보다 실제 텍스트를 훨씬 더 중요하게 여긴다는 증거가 있습니다(너무 많은 웹사이트가 이미 대체 텍스트를 키워드로 사용하고 있기 때문입니다). 따라서 우리는 다른 방법을 사용해야 합니다: <h1><span >위젯 구매< /span></h1>, 다음 CSS가 도움이 될 수 있나요?
| 인용된 내용은 다음과 같습니다. h1 { 배경: url(/widget-image.gif) no-repeat; } h1 스팬 { 위치: 절대; 왼쪽:-2000px; } |
이제 아름다운 이미지와 실제 텍스트를 잘 숨길 수 있습니다. CSS를 사용하면 텍스트가 화면 왼쪽에서 -2000픽셀에 배치됩니다.
6. CSS 박스 모델 해킹을 위한 또 다른 옵션
CSS 상자 모델 해킹은 IE6 이전의 브라우저 표시 문제를 해결하는 데 사용되었습니다. IE6.0 이전 버전에서는 너비 값에 추가하는 대신 너비 내에 요소의 테두리 값과 패딩 값을 포함했습니다. 예를 들어 다음 CSS를 사용하여 컨테이너의 크기를 지정할 수 있습니다.
| 인용된 내용은 다음과 같습니다. #상자 { 너비: 100px; 테두리: 5px; 패딩: 20px; } |
그런 다음 HTML로 적용하십시오.
<div id="box">...</div>
상자의 전체 너비는 거의 모든 브라우저에서 150픽셀입니다(100픽셀 너비 + 5픽셀 테두리 2개 + 20픽셀 패딩 2개). 단, IE6 이전 브라우저에서는 여전히 100픽셀입니다(테두리 값과 패딩 값은 너비 값), 박스 모델 해킹은 이 문제를 해결하도록 설계되었지만 문제를 일으킬 수도 있습니다. 더 간단한 방법은 다음과 같습니다.
| 인용된 내용은 다음과 같습니다. CSS: #상자 { 너비: 150px; } #박스 div { 테두리: 5px; 패딩: 20px; } HTML: |
그러면 모든 브라우저에서 상자의 전체 너비가 150픽셀이 됩니다.
7. 블록 요소를 중앙에 배치합니다.
웹 사이트가 고정 너비 레이아웃을 사용하고 모든 콘텐츠가 화면 중앙에 배치되어 있다고 가정하면 다음을 사용할 수 있습니다.
다음 CSS:
| 인용된 내용은 다음과 같습니다. #콘텐츠 { 너비: 700px; 여백: 0 자동; } |
HTML 본문 내에 항목을 배치할 수 있으며 항목은 중앙에 표시되도록 자동으로 동일한 왼쪽 및 오른쪽 경계 값을 얻습니다. 하지만 이는 IE6 이전 브라우저에서는 여전히 문제가 되어 중앙에 위치하지 않으므로 다음과 같이 수정해야 합니다.
| 인용된 내용은 다음과 같습니다. 몸 { 텍스트 정렬: 중앙; } #콘텐츠 { 텍스트 정렬: 왼쪽; 너비: 700px; 여백: 0 자동; } |
본문을 설정하면 기본 콘텐츠가 중앙에 정렬되지만 모든 텍스트도 중앙에 정렬됩니다. 이러한 이유로 #content의 div에는 text-align: left 값도 지정해야 합니다.
8. CSS를 사용하여 수직 중심 맞추기
수직 센터링은 테이블의 케이크 조각입니다. 셀을 수직 정렬: 중간으로 지정하기만 하면 됩니다. 하지만 CSS 레이아웃에서는 작동하지 않습니다. 탐색 메뉴의 높이를 2em으로 설정하고 CSS에서 수직 정렬 규칙을 지정한다고 가정하면 텍스트는 여전히 상자 상단에 정렬되며 전혀 차이가 없습니다.
이 문제를 해결하려면 상자의 줄 높이를 상자의 높이와 동일하게 설정하면 됩니다. 이 예에서는 상자 높이가 2em이고 CSS에 다른 줄 높이 2em을 추가하면 됩니다. !
9. 컨테이너 내 CSS 위치 지정
CSS의 가장 큰 장점 중 하나는 개체를 문서의 어느 위치에나 배치할 수 있고, 컨테이너 내에서도 개체를 배치할 수 있다는 것입니다. 컨테이너에 CSS 규칙을 추가하면 됩니다.
| 인용된 내용은 다음과 같습니다. #컨테이너 { 위치: 상대; } |
그런 다음 컨테이너 내의 모든 요소는 컨테이너를 기준으로 배치됩니다. 다음 HTML 구조를 사용한다고 가정합니다.
왼쪽 가장자리에서 30픽셀, 위쪽에서 5픽셀 떨어진 컨테이너 내에서 탐색 위치를 지정하려면 다음 CSS 문을 사용할 수 있습니다.
| 인용된 내용은 다음과 같습니다. #항해 { 위치: 절대; 왼쪽: 30px; 상단: 5px; } |
10. 화면 하단까지 확장되는 배경색
CSS의 단점 중 하나는 수직 제어가 부족하여 테이블 레이아웃에서 발생하지 않는 문제가 발생한다는 것입니다. 웹사이트 탐색을 배치하기 위해 페이지 왼쪽에 열을 설정했다고 가정해 보겠습니다. 페이지 배경은 흰색이지만 탐색 열의 배경은 파란색으로 지정하려면 다음 CSS를 사용하세요.
| 인용된 내용은 다음과 같습니다. #항해 { 배경: 파란색; 너비: 150px; } |
문제는 탐색 항목이 페이지 하단까지 확장되지 않고 당연히 배경색도 하단까지 확장되지 않는다는 것입니다. 따라서 왼쪽 열의 파란색 배경이 페이지 중간에서 잘려 디자인이 낭비됩니다. 안타깝게도 우리는 속임수만 사용할 수 있습니다. 즉, 본문의 배경을 왼쪽 열과 동일한 색상과 너비의 이미지로 지정하는 것입니다. CSS는 다음과 같습니다.
| 인용된 내용은 다음과 같습니다. 몸 { 배경: url(/blue-image.gif) 0 0 반복-y; } |
배경 이미지는 너비가 150픽셀인 파란색 이미지여야 합니다. 이 방법의 단점은 em을 사용하여 왼쪽 열의 너비를 지정할 수 없다는 것입니다. 사용자가 텍스트의 크기를 변경하고 내용의 너비가 확장되면 배경색의 너비가 그에 따라 변경되지 않습니다.
이 글을 쓰는 시점에서는 이것이 이러한 유형의 문제에 대한 유일한 해결책이므로 왼쪽 열의 픽셀 값만 사용하여 자동으로 늘어나는 다른 배경색을 얻을 수 있습니다.