0303
CSS
- 웹페이지를 디자인하기 위해 사용
- 인라인방식,내부스타일태그 방식,외부링크 방식
(인라인방식은 유지보수에 불편하다)
(외부링크방식 : 재사용성, 유지보수성)링크방식
<link rel="stylesheet" href ="외부스타일 경로">@import url('외부스타일 경로'): CSS의 규칙으로 , CSS문서에서 또 다른 CSS문서를 불러오기 할 수 있다.참조방식
- 인라인,내부,외부가 겹칠경우 ; Cascading, 즉 나중에 읽히는것(맨마지막) 이 우선 적용
- 인라인 방식은 무조건 우선적용 !
CSS 선택자!
- CSS는 HTML 요소들을 꾸며주는 문서. i.e) HTML요소를 선택 할 수 있어야 함.
p(선택자) {color(속성) : red;(값)}
속성 : HTML을 다양하게 꾸며주는 여러 속성들
벨류 : 수치선택자
기본 선택자
- 선택자 종류가 너무 많다....
( 전체 선택자 , 태그 선택자 , class 선택자 , ID 선택자 )*{}: 전체 선택자 : 모든 요소들에게 적용p{}: 태그 선택자 : 모든 해당태그들에게 적용.class{}:Class 선택자 : 해당클래스 태그들에게 적용#id{}:ID 선택자 : 해당 아이디에게 적용복합 선택자
- 특수한 요소를 선택하고 싶을떄 사용
(일치 선택자,자식 선택자, 후손 선택자 , 인접 형제 선택자, 일반 형제 선택자(?))
span.orange : 일치 선택자 : span태그와 orange 클래스를 동시 만족 하는 요소 선택
ul > .orange : 자식 선택자 : 선택한 ul 요소의 자식 .orange 클래스 선택
span .orange : 하위(후손)선택자 : 선택한span의 요소의 하위 클래스
.orange + li : 인접 형제 선택자 : 선택한 .orange클래스 다음 요소를 선택
.orange ~ li : 일반 형제 선택자 : 선택한 .orange부터 li 모두를 선택가상 선택자
- 사용자(클라이언트)의 행동에 따라 변화하는 가상 상황을 선택
:hover : 마우스 커서를 올린 상황을 선택
:active : 마우스를 클릭하고 있는 상황을 선택
:focus : 포커스(tab)이 되는 상황을 선택가상 클래스 선택자
ABC:first-child : 여러 ABC태그들 중 첫번째 요소 선택
ABC:last-child : 여러 ABC태그들 중 마지막 요소 선택
ABC:nth-child(n) :여러 태그들중 n번째 요소가상 요소 선택자
- 선택한 태그 앞 뒤로 별도에 컨텐츠를 만들 수 있다
ABC::before : ABC태그 앞에 컨텐츠 생성
ABC::after : ABC태그 뒤에 컨텐츠 생성속성 선택자
*지정한 특정 속성을 선택
[ABC] :ABC속성을 포함한 요소 선택
[ABC="XYZ"] :ABC속성의 벨류가XYZ인 요소 선택
It's the smurf smurf smurf!