< CSS 선택자 >
: CSS 꾸미기 적용 할껀데, 어디에 있는 어느 태그에 적용시킬꺼야?
[#] 아이디속성
< h1 id = "special" >
#special{color:green;}
- 아이디 걸어둔 그 태그에만 적용
[.] 클래스속성
<h1 class="target">
<h2 class="target">
<h3 class="target">
. target{color : blue;}
- class 속성의 걸어둔 태그들에만 적용
( 몇개의 태그만 적용하고 싶은 것에 class 걸어두고 사용 )
[*] 모두
*{color : red;}
- 모든 태그에 적용
[body]
body{color:pink;}
- body 전체에 적용
[여러개] 쉼표
h6 , a {color:blue;}
- 쉼표로 여러개 선택 적용 가능
[포함관계] 부모태그 > 자식태그
h1 > a {color:orange;}
- h1 에 "직계" 포함된 a 태그만 적용
body > a {color:blue;}
body 에 "직계"포함된 a 태그만 적용
ex)
<body>
<a href > : 직계 - 적용 (O)
<h1> <a href > </a> </h1>
: 직계 (X) => < h1> 이 직계 부모임.
[공백] => 후손 태그 포함
body a {color : red;}
- body 태그안에 a 태그 적용.
( a 태그가 후손이여도 적용, 즉 위의 경우 적용됨 )
< 띄어쓰기 중요 >
h1.target{color:pink;}
- h1중에 클래스에 target 값 가진것
h1 .target{color:pink;}
- 적용 (X) => 빈칸주면 포함관계 되면서 전혀다른 의미
< 속성값 내용으로 조건 줘서 거기만 적용 => [ ] 대괄호 사용 >
태그[ 속성 = "속성값" ] { CSS }
[ = ] 해당사항만 적용
h1[title="제목"] {color : yellow;}
- h1 속성값 title이 "제목" 으로 잡힌 것 에만 적용
( title 속성값은 마우스오버 했을 때 설명이 뜨는 속성이다. )
a [href="http://www.google.com/"] {color:red;}
- a태그의 속성값 href 가 해당 url 인것만 적용
[ *= ] 포함한 것 에만 적용 ( like 개념 )
a[href *= "kakao"] {color=pink;}
- a태그의 href 속성값이 "kakao" 를 포함한 것에만 적용
[ ^= ] 시작부분 일치하는 것에만 적용
a[href ^= "www"]
- 시작부분이 www 로 시작하는 것에만 적용
[ $= ] 끝나는부분 일치하는 것에만 적용
a[href $= "kr"]
- 끝나는부분이 kr 인 것에만 적용
< child 태그 순서로 적용하기 > + 테이블
tr { color } 전체 tr 적용
tr:first-child { } 테이블에서 첫 tr만 적용
tr:last-child { } 테이블에서 마지막 tr만 적용
tr:nth-child(3){ } 3번째 행만 적용
tr:nth-child(2n){ } 짝수행만 적용
tr:nth-child(2n+1){ } 홀수행만 적용
[ 공백으로 자손까지 ]
table tr:first-child{background-color}
- 테이블에 첫 tr 에 적용 ( 자손이어도 적용 )
=> Table은 <tbody> <thead> 등이 명시하지 않았어도, 자동으로 등록되기 때문에,
> 부등호로 자식관계로 설정하려면 직계자식 관계를 <tbody> 등이 막아서 적용 안될 수 있다.
talbe > tr:first-child (X) 적용 안됨
=> 후손관계인 "공백"으로 주면 적용됨
tabla a {text-decoration: none;}
- 테이블안에 있는 a 태그에 적용
( a 태그가 테이블의 직계자손이 아니지만, 후손이므로 적용 (O) )
text-decoration : 밑줄
[ child 순서 적용 주의사항 ]
<body>
<h1>afd
<h2>sfa
<p>첫번째p
<p>두번째p
<p>세번째p
p:nth-child(3){font-size : 30px;}
p 태그 찾을건데 body부터 시작해서 3번째꺼
근데 첫번째, 두번째는 p 가 아니라 적용 안됨
3번째가 되야 p 첫번째에 적용이 됨
다른 태그가 있으면 그것도 순서에 포함시키므로
순서 주의
=> 실제로는 # id 걸어두고 사용하는 것이 일반적이고 안전하다.
p#first {font-size : 10px;}
p#second {font-size : 20px;}
p#third {font-size : 30px;}
<body>
<h1>
<p id ="first"> 첫번
<p id ="second"> 두번
<p id ="third">세번
< List CSS 적용 >
li:nth-child(1) > a {color:red;}
- 먼저 li 중에서 첫번째를 가져오고
그것에 포함되는 a 태그/다른태그 에 적용하는 순서로 해야한다.
( 순서주의 - 이 순서로 안하면 전체적용 or 적용안됨 )
< a href 링크 내장 CSS >
- 기본 blue, 밑줄
- ulr 클릭한적 있으면 => purple, 밑줄
바꿀 수 있음
- 실제로 태그의 속성은 아니지만,
CSS에서 가상의 속성을 만들어서 기능 구현
a:link {color:green;}
- 방문안했을때 기본 링크
a:visited {color:yellow;}
- 방문했을때 링크
a:hover {color:blue;}
- 마우스오버 했을 때
=> hover 속성은 h1, p 등 모두에 사용 가능
h1:hover { color:red; }
h1:active { color:siver; }
- 클릭 하고있는 동안 적용 ( 그냥 text도 가능 )
a{ text-decoration: none; }
- a 링크 기본 밑줄 없애기
--------
'Back to the CSS' 카테고리의 다른 글
| [ CSS ] 정렬 / 배치 (0) | 2023.02.01 |
|---|---|
| 반응형 웹 viewport / @media / screen / max-width /min-width (0) | 2022.07.26 |
| 화면에 배치하는 규칙 display / position / float / overflow (0) | 2022.07.26 |
| CSS 꾸미기 기술들 (0) | 2022.07.26 |
| CSS 적용하는 3가지 방식 ( Local / Global / CSS파일 ) 우선순위 (0) | 2022.07.26 |