Day1_VSCODE_CSS CSS문법과 선택자
2023. 3. 29. 09:29ㆍCSS
CSS 문법
HTML 문서 <head>요소 안에 <Style>요소를 사용하여 css문법을 적용
선택자는 태그가 아니여도 속성이 들어와도 된다.
사용법 선택자{속성명1: 속성값1; 속성명2: 속성값2;......} 예) p{ text-align: center; color: deepskyblue; } ------ ------------------ -------------------- 선택자 속성명 : 속성값 속성명: 속성값
🟢선택자
1.전체 선택자
-스타일을 모든 요소에 적용
-*를 사용하여 표현
-너무 많은 요소가 있는 HTML 문서에 사용할 경우 클라이언트에 부하를 줄 수 있다.
✔ 개별적으로 적용한 스타일은 전체 선택자에 적용한 스타일보다 우선
[예시] * {속성명: 속성값1; 속성명2:속성값2;....}
2.요소 선택자 -특정 요소가 쓰인 모든 요소에 style을 적용
3.id 선택자🔴 -웹 문서안의 특정 부분 스타일을 적용
- # 기호를 통해 id 속성을 가진 요소에 스타일을 적용
[예시] <style> <h2> {font-size:30px;} </h2> </style> <--- 모두 적용
🔴h2#hello {font-size: 20px;} /*안녕하세요 20px로 변경*/
🔴#hello {color: pink;} /* 안녕하세요를 pink 컬러로 변경*/
<h2 id='hello'>안녕하세요</h2> <h2>반갑습니다.</h2>
4.class 선택자
-특정 집단의 요소를 한번에 스타일 적용
- .기호를 사용해서 같은 class 이름을 가진 요소에 스타일을 적용
[예시]
[CSS] h2 {font-size: 20px;} (안녕하세요,반갑습니다) 적용
h2.hello {color: deepskyblue;} (안녕하세요) 적용 .
hello {color:deepskyblue} (안녕하세요,하이) 적용
p {font-weight: bold;} (하이,또만났군요) 적용
[HTML] <h2 class='hello'>안녕하세요</h2>
<h2>반갑습니다.</h2> <p class='hello'>하이</p>
<p> 또 만났군요</p>
5. 그룹 선택자
- 여러개의 요소를 나열하고 ,로 구분하여 스타일을 적용
[예시] h2,p {text-align: center;}
6. 자식 선택자
-부모의 요소 하위의 자식요소의 스타일을 적용할 때 사용
[예시] body > p { color:deepskyblue;}
7. 자손 선택자
-조상 요소 하위의 모든 요소의 스타일을 적용
-자손은 자식을 포함
[예시] body p {color:deepskyblue}
8. 인접 형제 선택자
-동일한 부모의 요소가 갖는 자식 요소들의 관계
-연속된 동생 요소의 스타일을 적용
[예시] h2 + p {color: deepskyblue;}
9. 일반 형제 선택자 -형제 관계를 갖는 요소 중에서 요소 다음에 나오는 모든 동생 요소의 스타일을 적용
[예시] h2 ~ p {color:deepink;}
10. 속성 선택자
- HTML요소에서 src,href,style,type,id,class.. 등 속성을 선택자로 지정해서 스타일을 적용
- 패턴이 많음 -> MDN참고 ✔https://developer.mozilla.org/enUS/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors
11. 가상 선택자 -클래스를 추가할 필요 없이 요소중에서 순서에 따라 원하는 요소를 선택
[예시]
li:first-child li 요소 중에서 첫번째 해당하는 요소의 스타일을 적용 ui>li:first-child {color: deepksyblue;}
li:last-child li 요소 중에서 마지막을 해당하는 요소의 스타일을 적용
li:nth-child(n) li 요소중에서 n번째 요소의 스타일을 적용
li:nth-child(odd) li 요소 중에서 홀수번째 요소의 스타일 적용
li:nth-child(even) li 요소 중에서 짝수번째 요소의 스타일 적용
[CSS] .deepsky {color:deepskyblue;}
[HTML]
<ui>
<li class='deepsky'>김사과<li>
<li>반하나<li>
<li class='deepsky'>오렌지<li>
<li>이메론<li>
</ui>
[CSS]
[scr] {border: 3px solid red;} (둘다 적용)
[scr='apple.png'] {width: 200px; height: 200px;} (사과만 적용)
[HTML]
<img src='apple.png' alt='사과이미지'>
<img src='banana.png' alt='바나나이미지'>
12. 스타일링 링크 - <a>태그를 꾸며주는것
a:link 하이퍼링크가 연결되었을 때 선택
a:visit 특정 하이퍼링크를 방문한 적이 있을 때 선택
a:hover 특정 요소에 마우스를 올렸을 때 선택
a:active 특정 요소에 마우스를 클릭할 때 선택
728x90
'CSS' 카테고리의 다른 글
| Day3 VSCODE_CSS Z-Index + Float + Clear (0) | 2023.03.29 |
|---|---|
| Day3 VSCODE_CSS 마진+ 박스사이징 + 디스플레이 + 포지션 (0) | 2023.03.29 |
| Day3_VSCODE_CSS 텍스트+ 배경+ 패딩+ 테두리 (0) | 2023.03.29 |
| Day2 VSCODE_CSS (0) | 2023.03.29 |
| Day1_VSCODE_CSS (0) | 2023.03.28 |