CSS란
-
CSS는 Cascading Style Sheet의 약자로 스타일 언어 기존 HTML의 서식 작업(10%)과 확장 기능(90%)을 담당 버전은 CSS 1, CSS 2, CSS 3(+HTML 5)으로 구분
-
CSS의 장점은 서식 기능이 풍부하고 생산성과 유지 보수성이 높으며 HTML 코드와 CSS 코드를 분리해서 작업 가능
HTML과의 역할 분리는 다음과 같음
-
HTML - 골격 생성(블럭 태그), 내용물 생성(인라인 태그)
-
CSS - 서식 지정(크기, 색상, 여백 등)
CSS 적용 방법
-
인라인 스타일 시트(Inline Style Sheet) - HTML 태그에 직접 style 속성 사용 - <태그 style="CSS 코드"> 형태 - 적용 범위는 태그 1개 - 가독성은 높으나 재사용 불가
-
내부 스타일 시트(Embeded Style Sheet) - 페이지 상단에
-
외부 스타일 시트(External Style Sheet) - 별도의 CSS 파일(*.css)을 태그로 참조 - 적용 범위는 모든 페이지 - 재사용성 가장 높으나 가독성 최하
-
일반적인 적용 방식은 외부 스타일 시트로 전체 공통 서식을 잡고, 내부 스타일 시트로 특정 페이지 반복 서식을 구현하며, 인라인 스타일 시트로 특정 태그에 개별 서식을 적용
CSS 문법 구조
선택자 { 속성명: 값; }1 - 전체 선택자 - * {} - 모든 태그를 선택
2 - 태그 선택자 - 태그명 {} - 태그명으로 태그를 선택 - 쉽지만 같은 태그에 다른 서식 지정 불가
3 - 아이디 선택자 - 태그명#아이디 {} - 태그의 id 속성값으로 선택 - id는 문서 내에 유일해야 하며 재사용 불가
4 - 클래스 선택자 - 태그명.클래스 {} 또는 .클래스 {} - 태그의 class 속성값으로 선택 - class는 중복값을 가질 수 있음
5 - 그룹 선택자 - 여러 선택자를 한번에 선택하며 구현부를 공유
6 - 자식 선택자(Child Selector) - 부모선택자 > 자식선택자 {} - 친부모를 조건으로 친자식을 선택
7 - 자손 선택자(Descendant Selector) - 부모선택자 자손선택자 {} - 부모 하위의 모든 자손을 선택
8 - 인접 형제 선택자(Adjacent Sibling Selector) - 형제선택자 + 선택자 {} - 자식 선택자와 유사하게 바로 인접한 형제 하나를 선택
9 - 형제 선택자(Sibling Selector) - 형제선택자 ~ 선택자 {} - 자손 선택자와 유사하게 이후의 모든 형제를 선택
10 - 의사 클래스(Pseudo Class) / 의사 요소(Pseudo Element) - 태그의 특정 상태나 위치를 선택
table 관련 태그
-
<table>- 테이블 컨테이너 -
<tr>- 테이블 행 -
<td>- Table Data, 실제 데이터를 담는 셀 -
<th>- Table Header, 머릿말 역할의 셀
