당신이 모를 수도 있는 좋은 CSS 기술 10가지_체험교류

이 번역은 저자나 웹사이트의 승인을 받지 않았습니다. 모든 권리는 원저작자와 원사이트에 있습니다.
원저자 또는 원 출판 사이트의 승인을 받은 경우 이 번역물을 자유롭게 사용할 수 있습니다.

1. CSS 글꼴 속성 약어 규칙

일반적으로 CSS로 글꼴 속성을 설정하는 방법은 다음과 같습니다.

font-weight:
font-style: 기울임꼴
글꼴 크기:1em;
줄 높이:1.5em
글꼴-가족:verdana,
하지만 한 줄에 모두 쓸 수도 있습니다.

font: 굵은 기울임꼴 작은 대문자 1em/1.5em verdana,sans-serif

좋아요! 한 가지 주의 사항: 이 단축 방법은 글꼴 크기와 글꼴 모음 속성이 모두 지정된 경우에만 작동합니다. 또한, 글꼴 두께, 글꼴 스타일, 글꼴 변형을 설정하지 않으면 기본값을 사용하므로 이 점을 명심하세요.

2. 두 개의 클래스를 동시에 사용

일반적으로 하나의 요소에 하나의 클래스(Class)만 설정할 수 있지만, 그렇다고 두 개를 사용할 수 없다는 의미는 아닙니다. 실제로 다음과 같이 할 수 있습니다.


...

P 요소에 공백으로 구분된 두 클래스를 동시에 제공하여 모든 텍스트와 측면이 클래스 속성이 P 요소에 추가됩니다. 두 클래스의 속성 사이에 충돌이 있는 경우 나중에 설정된 속성이 적용됩니다. 즉, CSS 파일에 나중에 배치된 클래스의 속성이 적용됩니다.

보충: ID에는
...
이렇게 쓸 수도 없고

CSS 테두리 기본값

는 일반적으로 괜찮습니다. 다음과 같이 테두리의 색상, 너비 및 스타일을 설정합니다.
border: 3px solid #000
이렇게 하면 테두리가 3픽셀 너비, 검정색 및 단색으로 표시됩니다. 그러나 실제로는 여기서 스타일만 지정하면 됩니다.

스타일만 지정하면 다른 속성은 기본값을 사용합니다. 일반적으로 Border의 기본 너비는 중간이며 일반적으로 3~4픽셀과 같습니다. 기본 색상은 텍스트 색상입니다. 이 값이 딱 맞다면 그렇게 많은 설정을 할 필요가 없습니다.

4. 문서 인쇄용 CSS

많은 웹사이트에 인쇄용 버전이 있지만 실제로는 CSS를 사용하여 인쇄 스타일을 설정할 수 있기 때문에 필요하지 않습니다.

즉, 페이지에 두 개의 CSS 파일을 지정할 수 있습니다. 하나는 화면 표시용이고 다른 하나는 인쇄용입니다.



아니요. 첫 번째 줄은 표시용이고 두 번째 줄은 인쇄용입니다.

그런데 인쇄 CSS에는 뭐라고 써야 할까요? 일반 CSS를 디자인하는 것과 같은 방식으로 설정할 수 있습니다. 디자인하는 동안 이 CSS를 설정하여 CSS를 표시하여 효과를 확인할 수 있습니다. 어쩌면 일부 장식 이미지를 끄고 일부 탐색 버튼을 끄기 위해 display: none 명령을 사용할 수도 있습니다. 자세한 내용은 "인쇄 차이" 문서를 참조하세요.

5. 이미지 교체 기술

일반적으로 이미지 대신 텍스트를 표시하려면 표준 HTML을 사용하는 것이 좋습니다. 하지만 일부 특수 글꼴을 사용하려면 그림만 사용할 수 있습니다.

예를 들어 아이콘 전체를 판매하려면 다음 사진을 사용하면 됩니다.

물론 가능하지만 검색엔진의 경우, 그것은 정상입니다 텍스트에 비해 대체 텍스트에 대한 관심이 거의 없습니다. 이는 많은 디자이너가 검색 엔진을 속이기 위해 여기에 많은 키워드를 넣기 때문입니다. 따라서 방법은 다음과 같아야 합니다.

위젯 구입

그러나 이 방법에는 특별한 글꼴이 없습니다. 동일한 효과를 얻으려면 다음과 같이 CSS를 디자인할 수 있습니다.

h1 { background: url(widget-image.gif) no-repeat; height: image height text-indent: -2000px }

결제 이미지 높이에 대한 관심이 실제 사진의 높이로 대체됩니다. 여기서는 이미지가 배경으로 표시되며, 실제 텍스트는 -2000픽셀의 들여쓰기가 설정되어 있으므로 화면 왼쪽에 2000포인트 나타나 보이지 않게 됩니다. 하지만 사진을 꺼두시는 분들은 아예 못 보실 수도 있으니 주의하시기 바랍니다.

6. CSS 상자 모델의 또 다른 조정 기술

이 상자 모델 조정은 주로 IE6 이전의 IE 브라우저에 적용되며 요소 너비가 우수합니다. 예:

#box { width: 100px; border: 5px; padding: 20px }

다음과 같이 호출하세요.

...

이제 상자의 전체 너비는 150포인트가 되어야 하며 이는 IE6 이전의 IE를 제외한 모든 브라우저에서 정확합니다. 그러나 IE5와 같은 브라우저에서는 전체 너비가 여전히 100포인트입니다. 이 차이는 이전 사람들이 발명한 상자 조정 방법을 사용하여 처리할 수 있습니다.

그러나 CSS를 사용하여 동일한 목적을 달성하여 일관되게 표시할 수 있습니다.

#box { 너비: 150px } #box div { border: 5px; padding: 20px }

다음과 같이 호출하세요:

...

이렇게 하면 어떤 브라우저에서든 너비는 150포인트가 됩니다.

7. 블록 요소를 중앙에 정렬

폭이 고정된 웹 페이지를 만들고 웹 페이지를 가로 중앙에 배치하려면 일반적으로 다음과 같습니다.

#content { width: 700px ; margin: 0 auto }

모든 요소를 ​​둘러싸려면

을 사용합니다. 이는 간단하지만 충분하지 않으며 IE6 이전 버전에서는 이 효과가 표시되지 않습니다. CSS를 다음과 같이 변경합니다:

body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }

이렇게 하면 내용이 중앙에 배치됩니다. 그래서
text-align: left가 Content에 추가되었습니다.

8. CSS를 사용하여 수직 정렬 처리

테이블을 사용하면 수직 정렬을 쉽게 수행할 수 있습니다. 테이블 단위를 수직 정렬: 중간으로 설정하면 됩니다. 그러나 이것은 CSS에서는 쓸모가 없습니다. 탐색 모음을 2em 높이로 설정하고 탐색 텍스트를 수직 중앙에 배치하려는 경우 이 속성을 설정하는 것은 쓸모가 없습니다.

CSS 방식이란 무엇인가요? 그건 그렇고, 이 단어의 줄 높이를 2em으로 설정하세요. 줄 높이: 2em, 그게 전부입니다.

9. 컨테이너 내 CSS 위치 지정

CSS의 장점 중 하나는 컨테이너 내에서도 요소를 임의로 배치할 수 있다는 것입니다. 예를 들어 다음 컨테이너의 경우:

#container { position:relative }

이러한 방식으로 컨테이너의 모든 요소는 다음과 같이 상대적으로 배치됩니다.

...

왼쪽에서 30포인트, 위에서 5포인트를 배치하려면 다음과 같이 하면 됩니다.

#navigation { position : 절대; 왼쪽: 30px; 상단: 5px }

물론 다음과 같이 할 수도 있습니다:
margin: 5px 0 0 30px
4개 숫자의 순서는 top, 오른쪽, 아래쪽, 왼쪽. 물론 때로는 여백보다 위치 지정이 더 나을 때도 있습니다.

10. 화면 하단으로 바로 들어가는 배경색

CSS로는 세로 방향으로 조절이 불가능합니다. 내비게이션 바가 콘텐츠 바와 같이 페이지 하단으로 바로 가기를 원할 경우 테이블을 사용하면 매우 편리하지만 CSS만 사용한다면 다음과 같습니다:

#navigation { background: blue ; width: 150px }

더 짧은 네비게이션 바는 바로 하단으로 이동하지 않으며, 콘텐츠가 중간에 끝나면 종료됩니다. 무엇을 해야 할까요?

아쉽게도 치트를 할 수 있는 유일한 방법은 더 짧은 열에 배경 이미지를 열 너비와 동일하게 추가하고 설정된 배경색과 동일하게 만드는 것입니다.

body { background: url(blue-image.gif) 0 0 Repeat-y }

지금은 em을 단위로 사용할 수 없습니다. 왜냐하면 이 경우 리더가 변경되면 글꼴 크기, 이 트릭이 공개됩니다. px만 사용할 수 있습니다.

이 기사의 작성자는 Trenton Moss입니다.
출판 웹사이트는 http://www.webcredible.co.uk/입니다.

이 번역은 저자나 웹사이트의 승인을 받지 않았습니다. 모든 권리는 원저작자와 원사이트에 있습니다.
원저자나 원 출판 사이트의 승인을 받은 경우 이 번역물을 자유롭게 사용할 수 있습니다.​