참고: 본문은 http://webberstudy.com 내용의 글을 정리한 것입니다.
IE6은 지원 종료로 IE6까진 고려하지 않는 추세. 하지만, IE6 사용자에게도 최소한의 정보 접근은 보장해야 함.
2. CSS 디버깅, 개발자도구
오류(버그)를 찾는 것을 디버깅(debug)이라고 함.
대부분의 브라우저들은 개발자 도구를 내장. (보통 단축키 F12 또는 Ctrl + Shit + I)
예전에는(또는 현재까지도) 파이어 폭스의 부가 기능인 파이어 버그를 많이 사용
검사기(Inspector)는 HTML 문서 구조를 보면서 해당 요소를 선택하고 정보를 볼 수 있는 도구. Elements 또는 DOM 탐색기로 표현 되기도 함.
검사기에서 요소를 선택하면, 우측 창에 해당 요소에 들어간 스타일을 확인할 수 있음.
해당 스타일 규칙이 나타나고 해당 규칙 우측 상단에 선언된 CSS와 해당 라인(몇 번째 줄인지) 표시됨.
박스 모델을 통해서 이 요소의 너비와 높이, 또한 내부와 외부의 여백, 테두리 선의 굵기 등을 파악할 수 있음.
3. CSS 선택자 2
* 선택자는 모든 요소를 선택하는 선택자. 테스트를 제외하곤 거의 쓸 일 없음.
관계를 나타내는 선택자들은 IE7 이상부터 지원 (IE6 미지원).
A > B 는 자식 선택자. 바로 하위 자식을 선택.
A + B 는 인접 형제 선택자. A 바로 다음에 오는 형제 요소 B를 선택.
A ~ B 는 일반 형제 선택자. A 바로 다음부터 B까지 오는 모든 형제 요소를 선택.
가상 클래스 선택자 - 주로 요소의 상태에 따른 선택.
:link - 링크인 상태를 선택.
:visited - 링크 중 방문한 링크를 선택.
:hover - 마우스가 오버된 상태.
:active - 마우스가 클릭되는 상태.
:link > :visited > :hover > :active 순으로 선언하는 것이 효과적
:focus - 폼 또는 링크에 포커스가 간 상태
:first-child - 요소가 형제들 중 가장 처음에 있는 경우.
4. 다중 CSS 스타일 시트와 우선 순위
여러 CSS를 넣는 방법으로 link태그를 쓰는 방법과 CSS파일 내에 @import를 쓰는 방법이 있음.
하지만 @import는 관리를 어렵게 하고, 페이지의 로딩 속도를 지연 시킴.
CSS 파일을 너무 여러개로 쪼개는 것은 그만큼 서버에 요청하는 횟수를 늘려, 로딩 속도에 지연을 가져옴.
CSS 선택자의 우선 순위는 [브라우저 스타일 < 사용자 일반 스타일 < 제작자 일반 스타일 < 제작자 강제 스타일 < 사용자 강제 스타일] 순
강제 스타일은 속성 값 뒤에 !important를 붙여서 표현. 사용 자제 권장.
선택자의 우선 순위는 a, b, c, d 단계 점수를 조합하여 결정.
보통 요소에 style 속성으로 직접 주는 것이 가장 높음
그 다음으로 #id 같은 아이디 선택자
보통 그 다음은 .class 같은 클래스 선택자
그리고 태그 선택자와 :hover같은 상태 선택자 순
5. dispalay와 visibility
display 속성을 통해서, 요소의 형태를 block/inline 형태로 바꿔줄 수 있음.
none 속성 값은 요소를 아예 없는 듯 만들어 주며, 자바스크립트와 함께 동적인 페이지(DHTML)에 유용하게 사용됨.
inline-block 값은 요소를 인라인과 블럭 형태를 동시에 지닌 형태로 만들어 줌.
inline-block은 IE7 이하는 지원을 하지 않기 때문에, 이를 지원하기 위해선 'zoom:1' 속성을 이용해야 함.
visibility 속성을 이용해서 요소를 보여주거나, 안 보여줄 수 있음.
visible은 보여주고, hidden은 숨김.
display:none;은 요소를 아예 없는 것처럼 만들지만, visibility:hidden;은 요소가 보이진 않지만, 요소의 영역만큼은 차지함.
visiblity:collapse는 테이블 요소(또는 테이블 형태의 요소)에서만 사용 가능. IE8 이상만 지원.
테이블의 전체적인 레이아웃이 깨지지 않도록, display:none 또는 visibility:hidden을 자동으로 적용.
6. overflow, float, clear
overflow:visible - 내부 내용이 넘치더라도, 넘친 모습을 그대로 노출.
overflow:scroll - 요소에 스크롤바를 보여 주며, 스크롤을 통해 내부 내용을 접근.
overflow:hidden - 내부 내용이 넘칠 경우, 넘친 부분을 숨김. 넘친 부분은 접근 불가능.
overflow:auto - 요소가 넘칠 때에만 스크롤바를 노출.
float 속성은 left나 right을 통해서 좌측 또는 우측에 정렬.
float된 요소 주변의 인라인 요소들은 float 주변으로 채워짐.
float된 요소의 행이 끝나기 전까진 다른 float된 요소와 인라인 요소가 float된 요소 옆에 배치되기 때문에, 의도치 않은 깨짐이 발생할 수 있음.
clear 속성은 float된 것을 해제하여, float 옆에 배치가 아닌, 다음 행에 배치가 됨.
clear 속성 값으로 해당 float 값인, left, right가 올 수 있으며, both을 통해 모두 해제할 수 있음.
7. float 레이아웃
블록 요소를 가로로 나란히 정렬하기 위해서는 float을 이용
float된 요소는 기본적으로 상위 요소가 영역을 파악하지 못함 (float가 요소를 띄움)
float는 띄어지기 때문에, 보통 다음 블록 요소는 float된 요소 밑에 깔리게 됨.
블록 요소는 기본적으로 float을 인식하지 못함. 텍스트, 인라인 요소, 그리고 float된 요소만 다른 float요소를 인식 함.
float된 요소를 부모 요소가 포함하기 위해, height로 임의의 높이 값을 줄 수 있지만, 내부 float 요소의 높이 바뀔 때마다 직접 바꿔줘야 함.
float된 요소들 다음에 비어있는 div에 clear:both 속성을 주어 부모가 높이를 자동으로 인식하게 할 수 있음.
float된 요소들의 부모 요소에 overflow:hidden을 줄 경우, 부모 요소는 float된 요소를 인식.
overflow:hidden은 자식 요소의 margin 값도 내부로 인식하게 함.
float된 요소의 부모가 float 될 경우, 부모 요소는 자식 요소를 인식 함.
float 될 경우, 기존 블럭 요소처럼 너비가 넓게 퍼지지 않음. 기본적으로 내부 영역 만큼의 너비를 가짐.
8. table 스타일
borer-collapse는 테이블 셀 간의 간격 여부를 결정.
border-spacing은 셀 간의 간격 거리를 지정. border-collapse가 serparate가 되어있는 상태에서만 가능.
table-layout은 셀의 너비를 유동적으로 할 지 고정으로 할 지 결정. fixed의 경우가 렌더링이 보다 빠름.
테이블의 셀에서 vertical-align은 셀 내부에서의 수직 정렬을 결정함.
caption-side로 테이블의 캡션 위치를 맨 위 또는 맨 아래로 지정.
display:table을 이용하면, div같은 table이 아닌 다른 요소를 table 처럼 보여줄 수 있음.(table-row는 tr, table-cell은 td처럼)
display:table에서는 rowspan, colspan같은 셀 병합은 구현 불가