CSS 란? What is CSS?

yojuyoon·2020년 6월 23일

CSS TIL

TIL👌

목록 보기

1/23

CSS란?

HTML document의 스타일을 설명하는 언어
HTML과 CSS는 각자의 문법을 갖는 별개의 언어이다.(but HTML안에 CSS는 가능하지만 HTML없이 단독으로 존재하는 CSS는 의미가 없음)

선택자 Selector

스타일을 적용하고자 하는 html요소를 선택해야 하는데 이 때 css에서 제공하는 수단이 셀렉터

<style>
	h1{
    color:red;
    }
</style>
<body>
	<h1>hello</h2>
</body>

hello

위 예시처럼 <h1>의 컬러를 빨간색으로 변경해주는 것(선언)이 css의 역할이며 여기서 h1이 셀렉터가 되는 것이다. 다시말해 html안에 있는 특정 element들을 선택하는 것이 셀렉터이며 선택 후 선언 블록의 내용을 적용시켜 주는 것이다. 이런 문장들을 한데 모으면 스타일 시트를 이루게 되고, 여러가지 스타일 규칙들을 관리하기 쉬워진다.

선택자의 종류

전체 선택자(Universal Selector)

* : 스타일 속성을 HTML페이지 내부의 모든 태그에 적용할 때 쓰는 선택자
보통 margin, padding값을 초기화 하거나 기본값을 정해둘 때 사용한다.

*{
	box-sizing:border-box;
 }

태그 선택자

태그 선택자는 HTML요소를 직접 지칭하는 가장 간단한 선택자이다.
p, span, div, header, main ... 직접적으로 태그를 선택하여 스타일을 적용시킬 수 있다.

p{
	color:red;
    	font-size:24px;
 }

ID 선택자

예시와 같이 ID 속성값을 지정하여 선택할 수 있다. 다만 ID 속성값은 중복해서 사용할 수 없는 유일한 값임을 명심해야한다.

<style>
	#title{
    	color:purple;
    		}
</style>
<body>
	<div id="title">ID Selector</div>
 </body>

ID Selector

클래스 선택자

예시와 같이 클래스 선택자는 주어진 값을 class 속성값으로 가진 HTML요소를 찾아서 선택한다. 선택하려는 속성 값에 .마침표를 추가해야한다.
만약 같은 스타일을 적용하고 싶다면 여러 클래스를 함께 묶어 스타일을 적용시킬 수 도 있고, 클래스 안에 클래스를 선택할 수도 있다.

<style>
	title{
    	color:blue;
        font-size:24px;
        }
    content{
    	color:green;
        font-size:12px;
        }
</style>
<body>
	<div class="title">CSS Selector</div>
	<div class="content">class selector</div>
</body>

CSS Selector

class selector

속성 셀렉터

지정된 속성을 갖는 모든 요소를 선택한다.

<style>
	a[href] {
    		color:red;
  		  }
 </style>
 <body>
 	<a href ="http://yoonzyoung.com/"</a>
   	<a href ="https://www.naver.com/"</a>
    	<a href="https://www.youtube.com/?gl=KR"</a>
 </body>

yoonzyoung.com
naver.com
youtube.com

가상 셀렉터

가상 클래스는 요소의 특정 상태에 따라 스타일을 정의할 때 사용된다. 특정 상태란 마우스가 올라와 있을 때, 링크를 방문했을 때와 아직 방문하지 않았을 때, 포커스가 들어와 있을 때 등등.. 이러한 특정 상태에 원래 클래스가 존재하지 않았지만 혹은 존재하였더라도 특정 상태가 되었을 때 바뀌는 경우 사용한다. 가상 클래스는 마침표 대신 :콜론을 사용한다.

<style>
	a:hover {
  		  color:yellow;
  		  }
 <style>
 <body>
 	<a href ="http://yoonzyoung.com/">yoonzyoung.com</a><br>
</body>

동적 선택자 종류
:link -> 셀렉터가 방문하지 않은 링크일 경우
:visited -> 셀렉터가 방문한 링크일 때
:hover -> 셀렉터에 마우스가 올라와 있을 때
:active -> 셀렉터가 클릭된 상태일 때
:focus -> 셀렉터에 포커스가 들어와 있을 때

셀렉터는 정말 여러 경우로 선택할 수 있다. 구조 가상 클래스 셀렉터라는 것도 있는데..쉽게 말해서 여러 요소들 중 첫번째만 선택하고 싶을 때 혹은 마지막만 선택하고 싶을 때 또는...홀수,짝수만 선택하고 싶을 때 등 여러 방법으로 선택할 수 있다. 자세한건..아래 링크를 통해 공부해보기..!
https://poiemaweb.com/css3-selector
여기서 좀 더 다양하고 자세하게 공부할 수 있다.

~CSS란 무엇인가 살펴보면서 셀렉터까지 살펴보았다...!
다른 특성들도 따로 정리해두었으니 함께 살펴서 공부해보기!
무궁무진한 CSS의 세계...공부하면 할 수록 짜릿하고 새롭다😻

- CSS float 속성 정리
-CSS display 속성 정리
-CSS position 속성 정리

yojuyoon