CSS ?
Cascading Style Sheet의 줄임말로 웹페이지를 꾸미려고 작성하는 코드입니다. HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있는 Style sheet 언어입니다.
CSS 에는 여러가지 스타일이 정의되어 있는데 각 스타일은 해당 스타일이 적용되는 규칙을 갖고 있습니다. 하나의 스타일이 여러 엘리먼트에 적용될 수 있고, 하나의 엘리먼트에도 여러 개의 스타일이 적용될 수 있습니다.
CSS 는 크게 selector와 실제 스타일로 이루어져 있습니다.
h1 {color: green; font-size: 16px;}선택자 (selector)
엘리먼트에 스타일이 적용되는 규칙, HTML의 태그를 선택하는 문법을 selector 라고 합니다. CSS 는 1. 선택한다 2. 변경한다 두 단계로 이루어집니다. 그래서 원하는 요소들만 선택하는 것이 중요합니다.
| 선택자 | 태그 |
|---|---|
| Universal (전체) | * |
| type (=Element) | Tag |
| ID | #id |
| Class | .class |
| State | : |
| Attribute | [] |
w3schools - CSS Selectors
w3schools - CSS Selectors Reference
HTML 파일에 CSS를 적용해보겠습니다. 아래는 HTML 파일입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS DEMO</title>
</head>
<body>
<ol>
<li id="special">First</li>
<li>Second</li>
</ol>
<button>Button 1</button>
<button>Button 2</button>
<div class="red"></div>
<div class="blue"></div>
<a href="naver.com">Naver</a>
<a href="google.com">Google</a>
<a>Empty</a>
</body>
</html>
Universal 선택자
문서의 모든 항목을 선택합니다.
/* CSS 파일 */
* {
color: green;
}
type 선택자
입력한 Tag를 선택합니다.
li {
color: blue;
}
❗️ 구체적으로 설정한 태그가 우선순위임. Universal < type
#id 선택자
입력한 id를 선택합니다.
#special {
color: pink;
}
.class 선택자
입력한 class를 선택합니다.
div태그는 기본적으로 사용자에게 보여지지 않지만, CSS에서 꾸밀 수 있습니다.
.red {
width: 100px;
height: 100px;
background: yellow;
}
: 선택자
입력한 상황, 상태에 해당하는 값을 선택합니다.
button:hover {
color: red;
background: beige;
}- :hover
마우스 커서가 element 위에 올라왔을 때 - :active
주로 <a> 태그(link)에 사용되는데, element가 클릭됐을 때를 의미 - :focus
주로 <input> 태그에서 사용되는데, element가 초점을 갖고 있을 경우를 의미 - :checked
radio button이나 checkbox 같은 유형의 <input> 태그가 체크되어 있는 경우를 의미 - :first-child, :last-child
상위 element를 기준으로 각각 첫 번째 child, 마지막 child일 경우를 의미
[] 선택자
입력한 속성값에 해당하는 값을 선택합니다.
a[href^="naver"] {
color: purple;
}
결합자
자식 결합자 (>)
자식 결합자(>)는 두 CSS 선택자 사이에 배치됩니다. 첫 번째와 일치하는 요소의 직계 자식인 두 번째 선택자와 일치하는 요소만 일치합니다. 계층 구조에서 더 아래에 있는 하위 요소는 일치하지 않습니다.
<article> 요소의 직계 자식인 <p> 요소만 선택합니다.
article > p인접 형제 결합자 (+)
인접한 형제 선택자 (+)는 두 CSS 선택자 사이에 배치됩니다. 첫 번째 선택자의 다음 형제 요소인 두 번째 선택자와 일치하는 요소만 일치합니다.
다음은 <p> 태그 바로 앞에 있는 모든 <img> 태그를 선택합니다.
p + img일반 형제 결합자 (~)
요소의 형제 요소가 바로 인접하지 않더라도 선택하려면 일반 형제 연결자(~)를 사용할 수 있습니다.
다음은 <p> 요소 다음에 오는 모든 <img> 요소를 선택합니다.
p ~ imgCSS 셀렉터 연습
flukeout 답안
.
