[CSS] 문법과 선택자
2022.05.23
💡 오늘의 CSS 공부
▶️ CSS문법
h1 { color: yellow; font-size: 2em; }
선택자 (selector)
속성 (property) / HTML의 속성은 (attribute)
값 (value)
선언 (declaration)
선언부 (declaration block)
규칙 (rule set)
▶️ 주석
/* 내용 */
▶️ CSS 적용방식
inline (자주 사용되는 방법은 아님)(각 단락 일일이 변경)
<div style=" ... "> 내용 </div>
internal (head 태그 내)(모든 단락 스타일 변경)
<style>...</style>
External (주로 사용)(head 태그 내)(모든 페이지 적용)(외부스타일 시트를 이용해야 용량도 적고 용이)
<link rel="stylesheet" href="css/style.css">
@import (거의 사용x)
@import url('css/style.css');
▶️ 선택자 (SELECTOR)
요소 선택자(태그)
h1 {color: yellow; }
h2 {color: yellow; }
h3 {color: yellow; } Grouping이 가능함
= h1,h2,h3 { color: yelow;}
전체 선택자 (성능에는 좋지 않아 사용을 가급적 지양하고있다.)
* {color: yellow; }
선언
h1 {color: yellow; font-size: 2em; background-color: gray;}
선택자 & 선언
h1,h2,h3 { color: yellow; font-size: 2em; background-color: gray; }
▶️ 선택자 (SELECTOR) 2
class 선택자
-css
.foo{font-size: 30px;}
-HTML
<p class="foo">...</p>
👨🏻💻 코드 & 출력
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Naver-CSS</title>
<style>
.html { color: red}
.css { text-decoration: underline;}
</style>
</head>
<body>
<dl>
<dt class="html">HTML</dt>
<dd><span class="html">HTML</span>은 문서의 구조를 나타냅니다.</dd>
<dt class="css">CSS</dt>
<dd><span class="css">CSS</span>는 문서의 표현을 나타냅니다.</dd>
<dt class="html css">JS</dt>
<dd><span class="html css">JS</span>는 문서의 동작을 나타냅니다.</dd>
</dl>
</body>
</html>
▶️ ID 선택자
d 선택자는 class 선택자와 비슷하다.
선택자를 쓸 때는, .(마침표) 기호 대신 #(해시) 기호를 써주면 되고,
요소에는 class 속성 대신 id 속성만 써주면 된다.
#bar { background-color: yellow; }
<p id="bar"> ... </p>
이 <p>는 id 선택자의 스타일 규칙이 적용된다.
▶️ ID 선택자와 Class 선택자의 차이점
1. .기호가 아닌 #기호 사용
2. 태그의 class 속성이 아닌 id 속성을 참조
3. 문서 내에 유일한 요소에 사용
4. 구체성
가장 큰 차이점은 class와 달리 id는 문서 내에서 유일해야 한다는 점이다.
클래스 선택자는 여러 요소에 같은 클래스를 넣고 같은 규칙을 적용 할 수 있다.
그리고 그것이 클래스 선택자의 장점이다.
하지만 id 속성값은 문서 내에 유일하게 사용이 되어야 한다.
결국, id 선택자로 규칙을 적용할 수 있는 요소는 단 하나뿐이다.
그리고 마지막으로 구체성의 값이 다르다.
👨🏻💻 코드 & 출력
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>css</title>
<style>
.item { background: gray; }
.a { color: yellow; }
.b { color: blue; }
#special { color: red; }
</style>
</head>
<body>
<ul>
<li class="item a">first</a>
<li class="item b">second</a>
<li class="item" id="special">third</a>
</ul>
</body>
</html>
▶️ 선택자의 조합
/* 요소와 class의 조합 */
p.bar { ... }
/* 다중 class */
.foo.bar { ... }
/* id와 class의 조합 */
#foo.bar { ... }
첫 번째는 요소와 클래스를 조합한 경우이다.
이 경우에는 <p>이면서 class 속성에 bar가 있어야 적용된다.
두 번째는 다중 클래스의 경우이다.
이 경우에는 class 속성에 foo와 bar가 모두 있어야 적용된다.
마지막은 id와 class를 조합한 경우이다.
이 경우에는 id가 foo이며 class가 bar인 요소에 적용된다.
▶️ 속성선택자
단순 속성으로 선택
<style>
p[class] { color: silver; }
p[class][id] { text-decoration: underline; }
</style>
<body>
<p class="foo">Hello</p>
<p class="bar">CSS</p>
<p class="baz" id="title">HTML</p>
</body>
속성 선택자는 대괄호를 이용해서 선언하며 대괄호 안에 속성 이름이 들어간다.
요소에 해당 이름의 속성이 있다면 해당 사항이 적용된다.
위 CSS 코드는 요소 선택자와의 조합으로 이루어진 코드이다.
첫 번째는 <p>이면서 class 속성이 있는 요소이면 color: silver 규칙이 적용된다.
두 번째는 <p>이면서 class 속성과 id 속성이 함께 있어야 text-decoration: underline 규칙이 적용된다.
바로 위 HTML 코드에는 3개의 <p>가 있다.
그렇다면 이 3개의 <p>에는 각자 어떤 스타일이 적용될까?
먼저 예측을 하고 직접 실습을 하는 게 좋다.
p[class] 선택자의 규칙은 class 속성만 존재하면 적용이 되기 때문에 3가지 요소 모두에 적용된다.
p[class][id] 선택자의 규칙은 class 속성과 id 속성 모두 있는 요소만 해당하기 때문에 마지막 요소에만 적용된다.
두 규칙 모두 속성의 값은 상관하지 않는다.
정확한 속성값으로 선택
정확한 속성값으로 선택은 제목 그대로 속성의 값으로 요소를 선택한다.
선택자는 대괄호 안에 속성 이름과 속성값을 다 적으면 된다.
p[class="foo"] { color: silver; }
p[id="title"] { text-decoration: underline; }
p[class="foo"]는 <p>이면서 class 속성의 값이 foo이면 적용되고, p[id="title"]는 <p> 이면서 id 속성의 값이 title이면 적용된다.
부분속성값으로 선택
부분 속성값으로 선택은 속성 이름과 속성값 사이에 사용되는 기호에 따라 동작이 조금 다르다.
[class~="bar"] : class 속성의 값이 공백으로 구분한 "bar" 단어가 포함되는 요소 선택
[class^="bar"] : class 속성의 값이 "bar"로 시작하는 요소 선택
[class$="bar"] : class 속성의 값이 "bar"로 끝나는 요소 선택
[class*="bar"] : class 속성의 값이 "bar" 문자가 포함되는 요소 선택
<p class="color hot">red</p>
<p class="cool color">blue</p>
<p class="colorful nature">rainbow</p>
p[class~="color"] { font-style: italic; }
p[class^="color"] { font-style: italic; }
p[class$="color"] { font-style: italic; }
p[class*="color"] { font-style: italic; }
위의 코드에서는 모두 class 속성값으로 "color"를 선택한다.
요소 순서대로 기호에 따라 규칙이 적용되는 결과는 다음과 같다.
p[class~="color"] { font-style: italic; } /* 1, 2번째 요소 */
p[class^="color"] { font-style: italic; } /* 1, 3번째 요소 */
p[class$="color"] { font-style: italic; } /* 2번째 요소 */
p[class*="color"] { font-style: italic; } /* 1, 2, 3번째 요소 */
👨🏻💻 코드 & 출력
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>css</title>
<style>
p[class$="color"] { font-style: italic; }
</style>
</head>
<body>
<p class="color hot">red</p>
<p class="cool color">blue</p>
<p class="colorful nature">rainbow</p>
</body>
</html>
Comments