CSS (Cascading Style Sheets)
CSS 속성 스스로 알아보기
- property 스스로 알아보기, 효과에 대한 중요한 토대 닦기
- 텍스트 크게 만들기
h1 {
font-size: 50px;
}
[추천 검색어] CSS text size property
- 가운데 정렬하기
h1 {
text-align: center;
}
align - 정렬하다.
[추천 검색어] CSS text center property
<!DOCTYPE html>
<html>
<head>
<title>WEB1 - CSS</title>
<meta charset="utf-8">
<style>
a {
color: black;
text-decoration: none;
}
h1 {
font-size: 50px;
text-align: center;
}
</style>
</head>
<body>
<h1><a href="index.html" title="到百科">WEB网络</a></h1>
<h2>计算机语言-常见语言</h2>
<ol>
<li><a href="1.html" title="到HTML意义">HTML超文本标记语言</a></li>
<li><a href="2.html" title="到CSS意义">CSS层叠样式表</a></li>
<li><a href="3.html" title="到JavaScript意义">JavaScript</a></li>
</ol>
<!--
<h1><a href="index.html" title="到百科"><font color="red">WEB网络</font></a></h1>
<h2>计算机语言-常见语言</h2>
<ol>
<li><a href="1.html" title="到HTML意义"><font color="red">HTML超文本标记语言</font></a></li>
<li><a href="2.html" title="到CSS意义"><font color="red">CSS层叠样式表</font></a></li>
<li><a href="3.html" title="到JavaScript意义"><font color="red">JavaScript</font></a></li>
</ol>
-->
<h2>-CSS层叠样式表</h2>
<p style="margin-top:40px;"
<strong><u>层叠样式表CSS</u></strong>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
</p>
<p>
<a href="https://baike.baidu.com/item/CSS/5457" target="_blank" title="到百科的CSS意义">更多>></a>
</p>
<img src="coding.jpg" width="50%">
</body>
</html>
CSS 선택자의 기본
- 선택자에 대한 중대한 토대 닦기
Ex)
Web page의 모든 태그들을 검은색으로
사용자가 방문한 적이 있는 태그는 회색으로
그리고 현재 사용자가 방문하고 있는 링크는 초록색으로
아래와 같이 CSS层叠样式表에 방문하고 있는 Web page를 만들어 보자!
① 이 Web page에 있는 <a>태그의 컬러를 검은색으로
<style>
a {
color: black;
}
</style>② (현재 CSS层叠样式表 페이지에 있고) 방문한 적이 있는 HTML超文本标记语言페이지와 현재 CSS层叠样式表페이지의 색을 회색으로
원래 지금까지 배운 내용을 토대로 만들어 본다면 style 속성을 추가하였을 것이다.
<ol>
<li><a href="1.html" title="到HTML意义"style="color:gray;">HTML超文本标记语言</a></li>
<li><a href="2.html" title="到CSS意义"style="color:gray;">CSS层叠样式表</a></li>
<li><a href="3.html" title="到JavaScript意义">JavaScript</a></li>
</ol>그러나 이렇게 되면 중복이 발생한다. (style="color: gray;")
이제부터는 HTML超文本标记语言와 CSS层叠样式表를 그룹으로 묶고 이 그룹에 폰트 컬러를 회색을 줄 거다.
saw라는 class값을 가지고 있는 모든 태그에 대해서 폰트 컬러를 gray이로 주고 싶은 상태
ⓐ class="____"라는 HTML의 속성으로 묶고 속성의 값으로 '보았다' 라는 saw를 입력
ⓑ saw {
color: gray;
} 추가
<!DOCTYPE html>
<html>
<head>
<title>WEB1 - CSS</title>
<meta charset="utf-8">
<style>
a {
color: black;
text-decoration: none;
}
saw {
color: gray;
}
h1 {
font-size: 50px;
text-align: center;
}
</style>
</head>
<body>
<h1><a href="index.html" title="到百科">WEB网络</a></h1>
<h2>计算机语言-常见语言</h2>
<ol>
<li><a href="1.html" title="到HTML意义" class="saw">HTML超文本标记语言</a></li>
<li><a href="2.html" title="到CSS意义" class="saw">CSS层叠样式表</a></li>
<li><a href="3.html" title="到JavaScript意义">JavaScript</a></li>
</ol>
<h2>-CSS层叠样式表</h2>
<p style="margin-top:40px;">
<strong><u>层叠样式表CSS</u></strong>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
</p>
<p>
<a href="https://baike.baidu.com/item/CSS/5457" target="_blank" title="到百科的CSS意义">更多>></a>
</p>
<img src="coding.jpg" width="50%">
</body>
</html>리로드를 해보면 적용되지 않을 거다.
이유는 위 코드대로 그냥 saw만 쓰면 이 Web page의 모든 saw라는 이름의 태그를 선택하는 선택자이기 때문
우리가 하고 싶은 것은 class값이 saw인 태그인데 이 때 사용하는 약속된 특수한 기호가 바로 온점(.)이다.
saw앞에 온점(.)을 붙이게 되면 어떠한 뜻이냐
= 이 Web page에 있는 모든 class가 saw인 태그를 가리키는 선택자
<!DOCTYPE html>
<html>
<head>
<title>WEB1 - CSS</title>
<meta charset="utf-8">
<style>
a {
color: black;
text-decoration: none;
}
.saw {
color: gray;
}
h1 {
font-size: 50px;
text-align: center;
}
</style>
</head>
<body>
<h1><a href="index.html" title="到百科">WEB网络</a></h1>
<h2>计算机语言-常见语言</h2>
<ol>
<li><a href="1.html" title="到HTML意义" class="saw">HTML超文本标记语言</a></li>
<li><a href="2.html" title="到CSS意义" class="saw">CSS层叠样式表</a></li>
<li><a href="3.html" title="到JavaScript意义">JavaScript</a></li>
</ol>
<h2>-CSS层叠样式表</h2>
<p style="margin-top:40px;">
<strong><u>层叠样式表CSS</u></strong>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
</p>
<p>
<a href="https://baike.baidu.com/item/CSS/5457" target="_blank" title="到百科的CSS意义">更多>></a>
</p>
<img src="coding.jpg" width="50%">
</body>
</html>saw앞에 온점(.)을 붙이고 리로드 했을 때 비로소 회색으로 표시
③ 현재 머물고 있는 CSS层叠样式表페이지를 초록색으로
ⓐ active를 추가하고
<li><a href="2.html" title="到CSS意义" class="saw active">CSS层叠样式表</a></li>
ⓑ .active {
color : green;
} 추가
<!DOCTYPE html>
<html>
<head>
<title>WEB1 - CSS</title>
<meta charset="utf-8">
<style>
a {
color: black;
text-decoration: none;
}
.saw {
color: gray;
}
.active {
color: green;
}
h1 {
font-size: 50px;
text-align: center;
}
</style>
</head>
<body>
<h1><a href="index.html" title="到百科">WEB网络</a></h1>
<h2>计算机语言-常见语言</h2>
<ol>
<li><a href="1.html" title="到HTML意义" class="saw">HTML超文本标记语言</a></li>
<li><a href="2.html" title="到CSS意义" class="saw active">CSS层叠样式表</a></li>
<li><a href="3.html" title="到JavaScript意义">JavaScript</a></li>
</ol>
<h2>-CSS层叠样式表</h2>
<p style="margin-top:40px;">
<strong><u>层叠样式表CSS</u></strong>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
</p>
<p>
<a href="https://baike.baidu.com/item/CSS/5457" target="_blank" title="到百科的CSS意义">更多>></a>
</p>
<img src="coding.jpg" width="50%">
</body>
</html>이것을 통해 알 수 있는 것은
class라는 저 속성의 값은 여러 개의 값이 들어올 수 있고 띄어쓰기로 구분한다.
하나의 태그에는 여러개의 속성이 들어올 수 있고 보는 거와 같이 여러 개의 선택자를 통해서 하나의 태그를 공동으로 제어할 수 있다.
그러나 이 방법은 좋지 못하다.
왜냐?
여기서 <a>태그는 두개의 class에 영향을 받고 있다.
.saw {
color: gray;
}
와
.active {
color: green;
}
의 class가
<li><a href="2.html" title="到CSS意义" class="saw active">CSS层叠样式表</a></li>
의 <a>태그에 영향을 주고 있다.
(<a>태그는 .saw와 .active의 class에 영향을 받고 있다.)
현재 왜 <a>태그가 초록색이 되었는가? 순서 때문이다.
.active가 .saw보다 나중에 등장했기 때문이다.
(같은 형태의 선택자들이 이루어져 있다면 이들중 순서로 우선순위를 매김, 설명은 아래에)
즉 보다 가까이에 있는 명령이 더 큰 효과를 갖는다.
(.active를 .saw위에 올리면 초록색이 적용되지 않고 다시 회색으로 표시된다.)
그래서 좀 더 우선순위가 높은 것을 사용할 필요가 있다.
그것이 바로, id 선택자다.
㉮ class="saw active"에서 active를 지우고 <a>태그에 id="active"를 추가
㉯ .acitve에서 온점(.)을 지우고 #을 붙인다
<!DOCTYPE html>
<html>
<head>
<title>WEB1 - CSS</title>
<meta charset="utf-8">
<style>
a {
color: black;
text-decoration: none;
}
#active {
color: green;
}
.saw {
color: gray;
}
h1 {
font-size: 50px;
text-align: center;
}
</style>
</head>
<body>
<h1><a href="index.html" title="到百科">WEB网络</a></h1>
<h2>计算机语言-常见语言</h2>
<ol>
<li><a href="1.html" title="到HTML意义" class="saw">HTML超文本标记语言</a></li>
<li><a href="2.html" title="到CSS意义" class="saw" id="active">CSS层叠样式表</a></li>
<li><a href="3.html" title="到JavaScript意义">JavaScript</a></li>
</ol>
<h2>-CSS层叠样式表</h2>
<p style="margin-top:40px;">
<strong><u>层叠样式表CSS</u></strong>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
</p>
<p>
<a href="https://baike.baidu.com/item/CSS/5457" target="_blank" title="到百科的CSS意义">更多>></a>
</p>
<img src="coding.jpg" width="50%">
</body>
</html>즉 id선택자와 class선택자가 붙으면 id선택자가 이긴다.
class선택자와 tag선택자가 붙으면 class 선택자가 이긴다.
tag Selector < class Selector < id Selector
모두 같은 형태의 선택자로 이루어져 있다면 가장 마지막에 등장하는 선택자가 우선순위가 높다.
(모두 다 class Selector라면 가장 마지막에 등장하는 class Selector가 우선순위가 높다는 얘기)
왜 id선택자가 가장 우선순위가 높을까?
id선택자의 값이 active인 태그가 이 Web page에 한번만 등장한다면 그 다음엔 저 acitve라고 하는 값은 쓰면 안된다.
즉 id의 값은 단 한번만 등장해야 되는다는 얘기다.
ex) 국가의 주민등록번호, 대학생의 학번
CSS를 만든 사람들은 좀 더 구체적인 것을 포괄적인 것보다 우선순위를 높였다.
그래야지만 tag 선택자를 통해서 전체적인 디자인을 쭉 해내고 그 중에 예외적인 것들의 ID를 딱, 딱, 딱, 찍어가면서
id선택자를 통해서 예외를 두는 것이 아무래도 디자인하고 코딩하는데 훨씬 더 효율적이기 때문이다.
[추천 검색어] CSS Selector
오늘 강의를 통해서 이룬 것은...
추천 검색어를 통해 여러 선택자들을 조합해서
우리는 자기가 원하는 효과를 정교하게 어떠한 태그에 타겟팅 할 수 있고
그걸 통해서 작성하는 코드의 양을 획기적으로 줄일 수 있고
동시에 어떤 한 부분만 수정하면 나머지가 동시에 바뀌는
굉장히 똑똑한 코드를 짤 수 있는 토대가 마련된 것이다
'youtube.com|user|egoing2 > WEB2 - CSS' 카테고리의 다른 글
| WEB2 - CSS 11 (2) | 2021.09.02 |
|---|---|
| WEB2 - CSS 10 (10) | 2021.09.01 |
| WEB2 - CSS 9 (5) | 2021.08.30 |
| WEB2 - CSS 8 (4) | 2021.07.06 |
| WEB2 - CSS 1 to 5 (9) | 2021.07.03 |