생각기록
CSS 기초편-선택자 본문
HTML이 명사, CSS가 형용사, JS가 동사
CSS
웹문서에 쓰일 글자의 크기, 특정 태그의 색 등 서식과 관련된 내용들을 관리
CSS가 없다면?
CSS 참조 방식
외부 스타일 시트 ( External Style Sheet )
- css 확장자를 가진 스타일 시트 파일 생성
- html 문서에 연결해 사용
- 예)공통 적용 할 때, 3개의 파일에 똑같은 빨강을 입힐 때
내부 스타일 시트 ( Internal Style Sheet )
- 공유할 필요 없고, 이파일에만 저장할 때
- HTML 문서 내에서 <head> 태그 내부에 <style> 태그를 이용해 CSS 정의한 방식
- 직관적, 수정이 간편
html에서 내부 스타일로( Inline Styles ) <style>태그는 어느 위치에 사용될까요?
<head>입니다.
이유는 html문서는 위, 아래로 순차적으로 읽는데, 스타일을 먼저 읽도록 위에 두는 것 body에 두면, 스타일이 뒤에 읽히는데 위의 사진처럼 구조만 보이게 된다.
css 작성법
p { color: red; padding:5px; }
선택자 {속성 속성값;}
선택자 {속성:속성값; 선언} = 선택자의 속성(property)를 값(속성값)으로 변경하겠다.
css에서 선택자는 우리가 원하는 요소를 선택할 수 있기때문에, 중요하다.
선택자 class, id, 타입선택자, 전체선택자
1) class선택자 - 한페이지에 반복적으로 이용되는 스타일에 지정
정의 방법 : .(마침표)class 이름 (클래스 이름은 숫자로 시작하면 안됨)
.title {color: red;} title이란 class의 글씨색을 red로 꾸며라.
응용) h1.title { color:red; } h1요소 중 클래스가 title인 요소 선택
2) id선택자 - 하나의 웹문서에 오직 한 번만 적용, 반복 사용이 불가능
정의 방법 : #(샾)class 이름
#title {color: red;} title이란 id의 글씨색을 red로 꾸며라.
응용) h1#title { color:red; } h1요소 중 아이디가 title인 요소 선택
3) 타입선택자 = 태그
<li> {color: red;} 모든 li 요소의 글씨색을 모두 red로 꾸며라.
4) 전체 선택자 : * (별) 사용
* { color: blue; } 모든 글씨색 blue로 꾸며라.
5) 선택자 그룹 : ,(콤마) 사용
h1, h2, h3 { font-family : sans-serif; } h1,h2,h3 선택된 요소들을 합친다.
이런식으로 태그 하나하나에 class를 두고 타겟팅 하면, 실제로는 불편하다.
이유1. 만든 class 이름을 기억하지 못한다.
이유2. 그래서 이 class가 도대체 무슨 효과인지 하나하나 찾아야한다.
복합선택자
1) 일치 선택자 : 조건을 만족해야 선택
span.orange{color:red;}
span태그인 class가 orange인 아이들을 선택한다.
2) 하위(후손) 선택자 : '띄어쓰기' 선택자 기호
div .orange
선택자 띄고, 선택자 (띄어쓰기는 하위 선택자를 나타낼 때 사용)
div안의 orange클레스를 선택하겠다.
3)자식 선택자 : ‘꺽쇠(>)’ 선택자 기호
#div2 > .apple {text-decoration: underline rebeccapurple;}
div2의 자식인 .apple만 적용한다.
1. 인접 형제 선택자 : ‘+’가 선택자 기호 ( 다음 한개 선택 )
.orange + li (ornage클래스의 태그 다음 나타나는 li 태그 선택)
.orange + li {color: red;} //css
<li class="orange">오렌지</li> //body
<li>망고</li> <!-- 선택 -->
2 . 일반 형제 선택자 : ‘~’선택자 기호
.orange ~ li {} = orange 클래스의 “다음” 형제들 선택
<li>수박</li>
<li class="orange">오렌지</li>
<li>망고</li> <!-- 선택 -->
<li>사과</li> <!-- 선택 -->
가상 선택자
간주한다는 의미, 하이퍼링크에 많이 쓰임
1. E::active {}
마우스 포인터가 올라와 있는(활성화) 링크
2. E::hover {}
마우스를 올린 링크
3. E::focus {}
input과 같은 입력창에 키보드가 foucus됬을때
4. E::Visited {}
방문한 사이트 링크
5: E::link {}
방문하기 전 사이트 링크
if문처럼 생각하면 편하다. "~라면? 적용해라"
6. E::first-child {}
첫번째 자식에 적용
.ABC span:first-child = ABC클래스의 span태그의 첫 번째 자식이면? 적용해라
7. E::last-child { }
마지막 자식에 적용
div h2:last-child {} div태그의 마지막 자식이, h2라면? 적용해라
같은 부모를 둔 형제의 n번 째
.fruits *:nth-child(2){color: blueviolet;} = 해당 클래스의 두 번째 아이에게 적용하겠다.
9. E:nth-of-type(n)
E의 타입(태그이름)과 동일한 타입인 형제 요소 중 E가 n번째 요소라면 선택합니다. (n 변수 사용시 0부터 해석)
즉 E태그 속성을 가진 형제중 n번 째
E::nth-child(n) { } / E:nth-of-type(n) 차이점
css
<style>
.ss p:nth-child(1) {background-color: rgba(255, 180, 130, 0.272);}
.ss p:nth-of-type(3) {background-color: rgba(130, 180, 255, 0.272);}
</style>
html
<div id="idorange">
<li class="classorange">오렌지</li>
<li>사과</li>
<div class="ss">
<p>파인애플</p>
<span>수박</span>
<p>왕수박</p>
<span>덜익은수박</span>
<p>씨없는수박</p>
</div>.ss p:nth-child(1) {background-color: rgba(255, 180, 130, 0.272);}
.ss 클래스의 p태그의 부모(div class="ss")을 기준으로 첫번째 자식에 핑크색
.ss 클래스의 p태그와 동일한 타입중 세번째 형제에 하늘색
10. E::not(선택자) { } = 선택자가 아닌
E:not(s) 라고 하면, E를 선택하는데, s라는 선택자를 제외하고 선택하겠다는 의미입니다.
즉, s가 아닌 E를 선택하겠다는 의미입니다.
'SeSAC 풀스택 > CSS' 카테고리의 다른 글
| CSS-레이아웃, Display, animation, @keyframes (0) | 2022.11.01 |
|---|---|
| CSS-기초편 Position과 Transform (0) | 2022.10.31 |
