본문으로 건너뛰기
黯羽轻扬매일 조금씩

CSS 심화편

무료2015-03-20#CSS#CSS常识#CSS进阶

본고는 몇 가지 일반적인 문제와 기본 상식의 정리로, 모바일 지원 방안, 코딩 기본 규칙, 일반적인 디버깅 단계 등의 내용을 포함합니다

일. 스타일 우선순위##

  1. 구체적일수록 우선순위가 높다
  2. 동일 우선순위인 경우 후자가 전자를 덮어쓴다
  3. @import 캐스케이드导入 시, 일찍导入될수록 우선순위가 낮아진다（주로 사용자 커스텀 스타일 구현에 사용됨. 예를 들어 CMS 가 제공하는 템플릿에서 사용자가 일부 스타일을 커스텀할 수 있으며, 이 스타일들은 최고 우선순위가 필요）
  4. 인라인 스타일 > #（id 선택자） > ./:��클래스 선택자/의사 클래스 선택자） > tag/::（태그 선택자/의사 요소 선택자）
  5. !important 선언이 있는 스타일은 최고 우선순위를 가진다（IE7+ 지원）

이. 모바일 브라우저를 지원하는 방법##

  1. SSR（작은 화면 렌더링）: 일종의 브라우저 기능으로, 이 종류의 브라우저는 자동으로 페이지 표시를 최적화할 수 있음

단점: 사용자가 특정 브라우저（예: Opera）를 사용해야 효과를 볼 수 있으며, 재렌더링은 액세스 속도를 저하시킴

장점: 페이지 설계자는 전혀 변경을 가할 필요가 없음

  1. Reformat（프로그래밍 재포맷팅）: 서버 사이드 기술로 페이지를 단순화하여 모바일 사용자를 위한 "경량" 페이지를 생성

단점: 액세스 속도가 저하되며, 서버 사이드는 페이지 내용을 완벽하게 제어할 수 없음

장점: 액세스 속도는 SSR 보다 높으며, 페이지 설계자는 약간의 변경만 하면 됨（재포맷팅을 위한 범용 Reformat 메서드를 생성하여 모든 페이지에 적용）

  1. Stylesheets"휴대용"스타일시트: media query（미디어 쿼리）를 이용하여 반응형 레이아웃을 구축

단점: 여러 세트의 스타일시트를 유지보수해야 하며, 페이지 내용을 제어할 수 없음

장점: 액세스 속도가 빠르며, 작업량도 그리 크지 않음

  1. Mobile Specific Site（모바일 버전 사이트 생성）: 사이트 전용 모바일 버전을 생성

단점: 시간과 노력이 들며 작업량이 큼

장점: 액세스 속도가 가장 빠르며, 페이지 내용과 스타일도 자유롭게 제어할 수 있음

삼. 박스 붕괴를 해소하는 방법##

  1. 고정 높이를 선언

단점: 확장성이 없으며 내용에 적응할 수 없음

  1. 모든 요소를 플로트

단점: 가독성이 나쁘며 유지보수가 쉽지 않음

  1. 박스 바닥에 빈 block 요소를 추가하고 해당 요소에 clear: both; 스타일 적용

단점: 불필요한 요소를 도입함

  1. after 의사 요소로 플로트 클리어

  2. overflow: auto; width: 100%;

단점: 테두리와 마진을 적용할 수 없음. 그렇지 않으면 가로 스크롤바가 나타남

사. 음수 마진（margin: -100px;）의 역할##

주로 레이아웃 순서와 문서 소스 순서의 충돌을 해결하는 데 사용됨. 예를 들어 HTML 내에서 네비게이션 바가 콘텐츠 바 뒤에 있고, 네비게이션 바를 콘텐츠 바의 오른쪽이 아닌 왼쪽에 표시하고 싶을 때, 네비게이션 바에 음수 마진을 설정하면 됨. 하지만 음수 마진은 이해하기 어렵기 때문에, 사용할 수밖에 없는 경우에도 상세한 주석을 달아야 함.

오.CSS 를 사용한 이미지 프리로드##

빈 span 태그의 background-image 속성에 이미지를 담아 실시간 로딩의 지연을 방지

육. 일반적인 로고 교체 방법##

일반적으로 로고는 이미지이지만, 검색 엔진의 크롤러 프로그램은 로고의 의미를 인식할 수 없음. SEO 를 위해 로고와 텍스트 설명을 함께 표시해야 함. 예를 들어<h1 style="background-image:url(...)">SiteName</h1>. 하지만 이때 로고 위에 텍스트가 표시됨. 해결 방법에는 다음 두 가지가 있음:

  1. h1 에 padding-top: 100px; 스타일 적용. 여기서 100px 은 이미지의 높이. 이 방식이 더 의미론적 디자인에 부합함

  2. h1 에 text-indent: -9999em; 스타일 적용. 이는 더 간단한 방식이지만 의미론적 디자인에 부합하지 않음

전자가 더 나은 호환성과 지원성을 가짐. 예를 들어 media="screen" 등의 필터 조건을 제공할 수 있음

팔. 스타일 디버깅 단계##

  1. 태그와 스타일 검증

닫히지 않은 태그가 있는지, HTML 과 CSS 의 스타일 이름이 일치하는지

  1. 스타일 무효화

상속된 스타일이 오류를 일으켰는지, 더 특수한 규칙이 중요한 규칙을 가렸는지, 어떤 스타일 규칙이 작동하지 않는지

  1. 핵 무효화

핵이 정상적으로 작동하는지, 또는 핵 코드에 문제가 있는지

  1. 최소 테스트 블록으로 분리（가능한 한 정확하게 오류 위치 파악）

전체 페이지는 디버깅하기 어려우므로, 최소 테스트 블록을 분리하여 별도로 디버깅

특별 주의: CSS 오류를排查할 때는 기존 스타일을 주석 처리하는 대신 백업 스타일 파일을 삭제/수정하는 것이 더 "안전"함

구.font（폰트）관련

###1. 서체 분류（일반적인 font 패밀리）###

  1. Serif（font-family:serif;）

특징: 폰트의 너비가 비례하며 장식이 있음. 비례한다는 것은 각 글자의 너비가 일치하지 않음을 말함. M 이 가장 넓고 i 가 가장 좁음. 장식이란 필획의 시작과 끝 부분에 작은 장식이 있어 가독성을 높임. Time New Roman, Georgia, Garamond 등을 포함

용도: 일반적으로 대량의 본문이나 긴 단락 및 인쇄용 폰트로 사용되며, 제목과 부제목에는 일반적으로 사용되지 않음

  1. Sans Serif（font-family:sans-serif）

특징: 너비가 비례하지만 장식이 없음. Helvetica, Verdana, Arial, Univers 등을 포함

용도: 제목과 부제목에 주로 사용됨

  1. Monospace（font-family:monospace;）

특징: 등폭 폰트. 장식이 있을 수도 있음. 등폭 폰트란 각 글자의 너비가 모두 같음을 말함. Courier, Monaco 등을 포함

용도: 주로 지시적 텍스트에 사용됨. 예를 들어 코드

  1. Cursive（font-family:cursive;）

특징: 손글씨체（또는 초서체）. Comic Sans, Zapf Chancery, Zapfino 등을 포함

용도: 가독성은 첫 번째와 두 번째보다 떨어지며, 일반적으로 본문 표시에는 사용되지 않음

  1. Fantasy（font-family:fantasy;）

특징: 주로 장식 효과를 내는 폰트. Desdemona, Playbill, Herculanum 등을 포함

용도: 이 종류의 폰트는 웹에서 거의 사용되지 않으며, 일반적으로 로고 이미지 디자인에 사용됨

###2. font-family 속성의 값에 대해###

폰트 이름에 공백이나 기타 모호한 문자가 포함된 경우 따옴표로 감싸야 함（홑따옴표/쌍따옴표 모두 가능）. 여러 개의 대체 폰트를 가질 수도 있으며, 폰트 이름 사이는 쉼표로 구분함.

###3. font-weight 에 대해###

100-900 의 수치를 사용하지 않고 bold 와 normal 만 사용하는 것이 좋음. 일부 폰트는 9 단계의 font-weight 를 가지지 않을 수 있기 때문（사용자가 보는 페이지가 설정한 폰트일 것이라고 보장할 수 없으며, 많은 브라우저는 사용자의 커스텀 폰트 사용을 지원함）

###4. font-size 에 대해###

가능한 한 em 또는 백분율을 사용하며, 62.5% 핵을 사용할 수 있음. 즉, body 에 font-size:62.5%; 스타일을 추가. 대부분의 브라우저 기본값은 1em=16px 이며, 62.5% 후에는 1em=10px 이 되어 계산이 용이함

font-size 에 px 를 직접 사용하지 않는 것은 IE6- 가 px 로 font-size 를 지정한 폰트의 사용자 재설정을 허용하지 않기 때문

십.CSS 상식##

  1. 모든 스타일시트 파일을 같은 폴더에 배치. 예를 들어 style/css

  2. 스타일시트 파일 통합. @import 또는 직접 통합

  3. 클래스와 id 이름은 일관된 방식을 고수（또는 팀 약정에 따름）. 예를 들어 class_name, className, class-name 등

  4. 단일 행 포맷과 복수 행 포맷 적용: 편집 버전은 디버깅이 용이한 복수 행 포맷 사용, 릴리스 버전은 빠른 로딩을 위한 단일 행 압축 포맷 사용

  5. CSS 속성 정렬에는 일정한 규칙이 있어야 함. 중복을 피하기 위해, 예를 들어 사전순 또는 기타 규칙에 따라 정렬

  6. CSS 약어를 적절히 사용. 예를 들어 border: 1px solid red; 등. "정도"를 파악하여 문법이 너무 복잡하고 이해하기 어려워지지 않도록 함

  7. 주석으로 스타일 그룹화. 우수한 포맷이 있음：/*=group */. 등호를 검색하면 모든 분류를 찾을 수 있음（CSS 규칙에는 등호가 나타나지 않으므로）

  8. 메타데이터 주석 추가. 수정과 관리를 용이하게 하기 위해, 예를 들어 스타일시트 파일 시작에 저자, 날짜 등의 관련 설명 추가

  9. 주석으로 파일 시작에 스타일에서 반복 사용되는 색상 값, 폰트 등의 속성 값 선언 가능

  10. 스타일시트 파일의 CSS 규칙에는 특정 순서가 있어야 함. 예를 들어 일반에서 특수로, 페이지 내 요소의 위치 순서 또는 콘텐츠 영역에 따라 정렬. 하지만 두 번째 방법은 문제를 일으킬 수 있음（규칙이 상속/덮어씌워질 수 있음）

  11. reset.css/initial.css 를 사용하여 스타일 리셋. 브라우저 기본 스타일 간의 차이를 제거하기 위해

  12. 스타일 라이브러리 구축 또는 자체 CSS 프레임워크 구현 가능. 재사용도를 높이기 위해

  13. 커스텀 목록 항목 기호는 li 의 background 사용. list-style-image 는 사용하지 않음. IE6 에서 list-style-image 는 li 내용과 수직 정렬되지 않으므로, 배경 이미지로 구현하는 것이 자유도가 높고 브라우저 호환성도 더 좋음

  14. 인쇄용 스타일시트 가져오기 문장은 head 내의 모든 스타일 가져오기/선언 부분 이후에 있어야 함. 인쇄용 스타일을 먼저 선언하면, 이후에 media 속성을 선언하지 않은 스타일이 무시될 수 있음

참고 자료:##

『Pro CSS Techniques』（중국어 번역명『CSS 실전 정수』）. 번역은 그다지 좋지 않지만, 2008 년경에 출판된 책이므로 IE6- 호환 디버깅에 좋은 지도적 의미가 있음.

댓글

아직 댓글이 없습니다

댓글 작성