css 스타일 시트
CSS는 html 문서에 모양, 색, 출력 위치 등 외관을 꾸미는 언어이다. CSS로 작성 된 코드를 스타일 시트라고 부른다.
1. CSS 스타일 시트 구성
셀렉터 { 프로퍼티 : 값; 프로퍼티 : 값; }의 구조로 되어있다.
2. CSS 스타일 시트 만들기
CSS 스타일 시트를 만드는 방법에는 3가지가 있다.
1) <style></style> 태그에 스타일 시트 작성
:이 태그는 반드시 <head> 태그 내에서만 작성 가능.
:여러 번 작성이 가능하고 겹쳐서 실행된다.
:웹페이지 전체에 적용된다.
2) style 속성에 스타일 시트 작성
:태그 내에 스타일을 입히는 방법으로 가장 우선순위가 높다.
3) 스타일 시트를 별도 파일로 작성하고, <link> 태그나 @import로 불러 사용
: 우선순위가 가장 낮다.
3. CSS 규칙
1) CSS3 스타일은 부모 태그로부터 상속된다.
2) 스타일 합치기와 오버 라이딩
:스타일 합치기는 여러 개의 스타일 시트가 동시에 적용될 때 스타일이 합쳐서 적용되는 것을 말한다.
:오버 라이딩은 우선순위에 따라 덮였으이는 것을 말한다.
인라인- 스타일 태그-외부 연결 순으로 적용된다.
4. 실렉터
1) 태그 이름 실렉터
:태그 이름을 실렉터로 사용하는 유형
2) Class 이름 셀렉터
실렉터 이름 앞에. 을 붙여. class로 사용한다.
3) id 셀렉터
4) 실렉터 조합하기
① 자식 셀렉터
:부모와 자식 관계인 두 태그를 > 기호로 조합한 형태.
div의 직계 자식 관계인 strong 태그에 적용
② 자손 실렉터
:자손 실렉터는 자손 관계인 2개 이상의 태그를 나열한 형태이다.
<ul>의 자손인 strong에 적용하는 모습
5) 전체 셀렉터
:와일드카드 문자 (*)를 사용하여 모든 html 태그에 적용할 스타일을 만드는 것이다.
6) 속성 셀렉터
:html 특정 속성에 대해 값이 일치하는 태그에만 스타일을 부여하는 것
7) 가상 클래스 실렉터
: 가상이라는 이름처럼 어떤 상황이 발생하였을 때만 적용되는 실렉터를 만드는 것
태그의 뒤에 :visited, :hover 등으로 사용한다.
주의할 점은 가상 실렉터를 사용할 때 클론(:)의 앞뒤에 빈칸이 있으면 안 된다.
|
유형
|
셀렉터
|
설명
|
|
마우스
|
:hover
|
마우스가 올라갈때 스타일 적용
|
|
:active
|
마우스로 누르고 있는 상황에서 스타일적용
|
|
|
폼요소
|
:focus
|
폼요소가 키보드나 마우스 클릭으로 포커스를 바을때 스타일 적용
|
|
링크
|
:link
|
방문하지 않은 링크에 스타일 적용
|
|
:visited
|
방문한 링크에 스타일 적용
|
|
|
블록
|
:first-letter
|
<p>,<div> 등의 같은 블록형 태그의 첫 글자
|
|
:first-line
|
<p>,<div> 등과 같은 블록형 태그의 첫라인에 스타일 적용
|
|
|
구조
|
:nth-child(even)
|
짝수 번째 모든 자식 태그에 스타일 적용
|
|
:nth_child(1)
|
첫 번째 자식 태그에 스타일 적용
|