CSS

[CSS] 선택자(selector) 기초 다지기🌱

CSS(Cascading Style Sheets)

" HTML로 작성된 문서를 '어떻게 표현'할 지 방법을 정해주는 언어 "

👉 CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어

👉 CSS는 문서의 콘텐츠와 레이아웃, 글꼴 및 시각적 요소들로 표현되는 문서의 외관(디자인)을 분리하기 위한 목적으로 만들어졌다.

📌 셀렉터(선택자) - 스타일을 적용하고자 하는 HTML 요소를 선택하기 위해 CSS에서 제공하는 수단

📌 선언 블록 - 셀렉터를 통해 어떤 요소에 스타일을 적용할건지를 선택한 후, 선택된 요소의 스타일을 선언 블록에서 정의

[CSS] 선언 방법 기초 다지기🌱

CSS(Cascading Style Sheets) " HTML로 작성된 문서를 '어떻게 표현'할 지 방법을 정해주는 언어 " 👉 CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어 👉 CS

dvlpseo.tistory.com

CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용

<style>
   a {
   color:orange;
   }    
</style>  

<h1>이 부분에 스타일 적용</h1>

CSS를 적용할 대상으로 특정 요소를 선택할 때 사용

#을 써서 구분

<style>    
   #apple {
   color:red;
   }    
</style>   

<h1 id="apple">이 부분에 스타일 적용</h1>

특정 집단의 여러 요소를 한 번에 선택할 때 사용

같은 클래스 이름을 가지는 요소들에게 모두 적용

<style>  
   .banana {
   color:yellow;
   }
</style>   

<h1 class="banana">이 부분에 스타일 적용</h1>
<h2 class="banana">이 부분에도 같은 스타일 적용</h2>

ex) 특정 id(class)를 가진 a태그들만 적용하고 싶을 때 사용

<style>
	.apple a{}
</style>

여러 선택자를 같이 사용하고 싶을 때 사용

쉼표(,) 로 구별

<style>
   h1 { color: navy; }
   h1, h2 { text-align: center; }
   h1, h2, p { background-color: lightgray; }
</style>

*을 사용하여 내부의 모든 요소를 선택

<style>
   * { color: teal; text-decoration: underline; }
</style

Contents