https://opentutorials.org/course/3086/18329
CSS 선택자를 스스로 알아내는 방법 - 생활코딩
강의 내용이 많고 복잡합니다. 시간을 충분히 확보하고 시작하세요. 소스코드 변경사항
opentutorials.org
<!doctype html>
<html>
<head>
<title>WEB - CSS</title>
<meta charset="utf-8">
<style>
#active {
color:red;
}
.saw {
color:gray;
}
a {
color:black;
text-decoration: none;
}
h1 {
font-size:45px;
text-align: center;
}
</style>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<ol>
<li><a href="1.html" class="saw">HTML</a></li>
<li><a href="2.html" class="saw" id="active">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<h2>CSS</h2>
<p>
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.[1] Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.
</p>
</body>
</html> <style>
#active {
color:red;
}
.saw {
color:gray;
}
a {
color:black;
text-decoration: none;
}
h1 {
font-size:45px;
text-align: center;
}class가 saw인 경우만을 의미하는 '.'
클래스는 그룹핑 하나로 묶는다는 뜻이다.
<style>
.saw {
color:gray;
}
.active {
color:red;
}
a {
color:black;
text-decoration: none;
}
h1 {
font-size:45px;
text-align: center;
}
<li><a href="2.html" class="saw active">CSS</a></li>
.active {
color:red;
}
그리고 밑에 class = "saw active"로 하면 CSS는 saw클래스지만 active 클래스의 빨간색이 적용됨이 보여진다.
여기서 배울 수 있는건
클래스를 여러개 중복시킬 수 있다 (띄어쓰기로 구분)
보다 더 뒤에 있는 명령이 더 큰 영향력을 가진다.
위 예시에서 .active의 red가 더 뒤에 있으니까 red가 된다.
.saw와 .active 선택자 순서를 바꾸면 css의 saw만 적용된다.
#active로 바꾸면 (id) 아이디가 이긴다
맨 앞에 #active가 옴에도 불구하고 red이다.
클래스 선택자와 태그 선택자가 만나면 클래스가 더 중요하다.
id값은 단 한번만 등장해야 한다.
생각해보자. id는 학번, 주민등록번호
중복되서는 안된다는게 젤 중요함
!!!!!!유일무이한 값일 때 쓰자
구체적인 것이 우선순위가 높은 이유다.
예외를 두는 것이 훨씬 효율적이기 때문
a{} #active{}사이에 클래스 선택자 중간 순위!!
<!doctype html>
<html>
<head>
<title>WEB - CSS</title>
<meta charset="utf-8">
<style>
#active {
color:red;
}
.saw {
color:gray;
}
a {
color:black;
text-decoration: none;
}
h1 {
font-size:45px;
text-align: center;
}
</style>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<ol>
<li><a href="1.html" class="saw">HTML</a></li>
<li><a href="2.html" class="saw" id="active">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<h2>CSS</h2>
<p>
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.[1] Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.
</p>
</body>
</html>https://www.w3schools.com/cssref/css_selectors.asp
CSS Selectors Reference
CSS Selector Reference CSS Selectors In CSS, selectors are patterns used to select the element(s) you want to style. Use our CSS Selector Tester to demonstrate the different selectors. Selector Example Example description .class .intro Selects all elements
www.w3schools.com
여기 들어가도 좋다
'웹 프로그래밍 > CSS' 카테고리의 다른 글
| 생활코딩 css 반응형 디자인과 미디어 쿼리 소개 (0) | 2021.07.14 |
|---|---|
| 생활코딩 css 그리드2 그리드 써먹기 (0) | 2021.07.14 |
| 생활코딩 css 그리드 (0) | 2021.07.14 |
| 생활코딩 박스모델2 줄긋기 (0) | 2021.07.14 |
| 생활코딩 박스모델 (0) | 2021.07.14 |
| 생활코딩 css속성을 스스로 알아내는 방법 (0) | 2021.07.12 |
| 생활코딩 css 혁명적 변화 (0) | 2021.07.12 |
| 생활코딩 css의 등장 (0) | 2021.07.12 |