프론트엔드

[프론트엔드]혼자서 공부하기 day3: CSS와 선택자

Im_light.J 2023. 4. 11. 23:53
728x90

😀TODAY

어제까지 HTML에 대해서 간략히 공부해보고 3일차인 오늘 CSS에 대해서 배워보았습니다 

 

 

😀CSS? 

 

Html을 통해서 웹페이지의 구조를 정해주었다면, CSS는 디자인적인 요소를 담당합니다 

간단히 말하면 예쁘게 꾸며주는 역할을 합니다 

 

CSS 선언방식 

 

HTML에서 CSS를 활용하는 방법은 크게 네가지가 있습니다 

 

1. 내장 방식 

<style></style>의 내용으로 스타일을 작성하는 방식입니다. 

<head>태그 안에 위치하게 됩니다 

<style>
  div  { 
  color: red; 
  margin: 20px;
  }
</style>​


2.인라인 방식 

요소의 style 속성에 직접 스타일을 작성하는 방식입니다
우선순위가 높기 때문에 일반적으로 사용을 권장하지 않는다고 합니다 
👉 CSS를 수정하기가 어렵기 때문에..! 

<div style:"color red; margin: 20px;"></div>​



3.링크 방식 

<link/> 로 외부 CSS문서를 가져와서 연결하는 방식입니다 

<link rel="stylesheet" href="./css/main.css">​

 

main.css..!

4.import 방식 




파이썬이나 기타 다른 언어에서 많이 본 import 방식입니다 
CSS문서 안에서 또 다른 CSS 문서를 가져와 연결하는 방식입니다 

예를 들어 main.css에서 box.css를 불러오는 경우 
 실행하는 순서가 main.css 👉 box.css이기 때문에 실행의 지연이 발생합니다. 
이를 직렬 방식이라고 하며, 많이 사용하는 편은 아니라고 합니다 

 

CSS 선택자 

 

 

1.전체 선택자 :( * )  

모든 요소를 선택하는 선택자입니다 
*(asterisk)를 활용합니다 
*  {
  color: red; 
}​

2. 태그 선택자(Type selector) ( 💬 )

태그 이름이 💬인 요소를 선택합니다 

li  { 
	color: red; 
}​

위와 같이 li 태그를 선택하게 되면 해당하는 요소를 선택하게 됩니다 


3.클래스 선택자 ( .💬 )


 HTML class 속성의 값이 💬인  요소를 선택 
태그의 종류는 다양하지만 무한하지는 않습니다 

이를 위해서 class라는 속성이 존재하고 이름을 정해줄 수 있습니다. 
class의 값은 중복이 가능한 특성을 가지고 있습니다 


4.아이디 선택자 (# 💬)

HTML의 id 속성의 값이 💬인 요소를 선택 
class와 동일하지만, 중복을 허락하지 않습니다 

5.일치 선택자 ( 💬🏐)

선택자 💬와 🏐를 동시에 만족하는 요소를 선택합니다 
두 선택자를 붙여쓰는 것으로 표기합니다 

span.orange {
  color: red;
}​

6.자식 선택자(child combinator) (  💬>🏐 ) 

선택자 의 자식 요소를 선택합니다 
화살표가 오른쪽을 향하는 부등호 기호를 통해서 표기합니다 
ul>.orange  {
  color: red;
}​

7. 하위 선택자  (💬 .🏐) 

선택자 💬의 하위요소 🏐를 선택합니다 
중간에 띄어쓰기를 삽입하여 줍니다 
div .orange  { 
  color: red; 
}​

8. 인접 형제 선택자 (💬+🏐)

선택자 💬의 다음 형제 요소 🏐 하나를 선택 

.orange + li  { 
  color: red;
}​


9.일반 형제 선택자 (💬~🏐)

선택자 💬의 다음 형제 요소 🏐 모두를 선택합니다 
인접 형제와는 다르게 요소 모두를 선택합니다 


 

 

728x90