CSS - 기초 배우기

young 2021. 12. 23. 23:17

CSS란?

CSS (Cascading Style Sheets)는 웹 페이지를 꾸미기 위해 작성하는 코드다. HTML처럼 프로그래밍 언어가 아니고, 마크업 언어도 아닌, Style sheet 언어다. HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다. HTML 내 모든 p 태그의 글자를 빨갛게 하려면 아래 처럼 쓰면 된다.

p {
  color: red;
}

위 내용을 styles 디렉토리에 style.css 란 제목으로 저장을 했다면, 이 스타일이 필요한 HTML에 적용해야 한다. HTML에서 <head> 태그 안에 아래와 같이 적어야 한다

<link href="styles/style.css" rel="stylesheet" type="text/css">

CSS의 ruleset 해부

1. 선택자(selector)

맨 앞에 있는 HTML 요소 이름으로, 위 예시에서는 p요소를 말한다. 이곳엔 HTML 태그, 클래스명, id명 등이 올 수 있다.

2. 선언(declaration)

color: red 와 같은 단일 규칙으로, 꾸미기 원하는 요소의 속성을 명시한다.

3. 속성(property)

주어진 HTML 요소를 꾸밀 수 있는 방법으로, 위 예에서는 color는 p 요소의 속성이다.

4. 속성 값(property value)

속성의 오른쪽에, 콜론 뒤에, 주어진 속성을 위한 많은 가능한 결과 중 하나를 선택하기 위해 속성 값을 가진다.

여러 요소 선택하기

2개 이상의 요소를 선택하기 위해 콤마를 사용한다.

p,li,h1 {
  color: red;
}

선택자의 여러 종류

선택자 이름	선택하는 것	예시
요소 선택자(때때로 태그 또는 타입 선택자라 불림)	특정 타입의 모든 HTML 요소.	p <p> 를 선택
아이디 선택자	특정 아이디를 가진 페이지의 요소 (주어진 HTML 페이지에서, 아이디당 딱 하나의 요소만 허용됩니다).	#my-id <p id="my-id"> 또는 <a id="my-id"> 를 선택
클래스 선택자	특정 클래스를 가진 페이지의 요소 (한 페이지에 클래스가 여러번 나타날 수 있습니다).	.my-class <p class="my-class"> 와 <a class="my-class"> 를 선택
속성 선택자	특정 속성을 갖는 페이지의 요소.	img[src] <img src="myimage.png"> 를 선택하지만 <img> 는 선택 안함
수도(Pseudo) 클래스 선택자	특정 요소이지만 특정 상태에 있을 때만, 예를 들면, hover over 상태일 때.	a:hover <a> 를 선택하지만, 마우스 포인터가 링크위에 있을 때만 선택함