CSS 속성을 스스로 알아내기
우리는 이제 CSS에서 어떤 효과를 의미하는 용어가 Property 라는 것을 알게 되었으므로 검색하고 질문하고 궁금해할 수 있다.
그래서 이번 시간에는 CSS 속성을 스스로 알아내는 경험을 해보았다.
만약에 WEB 이라는 제목의 크기를 조절하고 싶다면 "css text size property"라고 검색하고, 가운데 정렬을 하고 싶다면 "css text center property"라고 검색하면 된다.
h1{ //h1이라는 속성을 가진 태그를 가리키는 선택자
font-size:60px; //글씨 크기 조절
text-align:center; //정렬 조절
}결국 이 수업에서 전달하고자 하는 것은 무작정 수많은 Property를 머리 속에 외우라는 것이 아니라, 정보기술이 발달한 지금 시대에는 필요한 정보를 1분 만에 찾아서 사용할 수 있다는 것이고 이 말은 즉슨 "우리는 이미 모든 속성을 사실상 알고 있음과 다름없다"는 것이다.
CSS 선택자의 기본
우리는 CSS를 지배하는 두 가지 중요한 토대로 효과와 선택자가 있다는 것을 알았고 위에서 효과에 대한 내용을 공부하였다.
이번에는 선택자에 대한 중요한 토대들을 공부해보기로 하였다.
다수의 태그에 속성을 부여하고 관리하기 위해서는 클래스(class)라는 HTML의 속성을 사용하면 된다.
.saw{ //클래스 값이 saw인 태그를 가리키는 선택자
color:gray;
}
<li><a href="1.html" class="saw">HTML</a></li>
<li><a href="2.html" class="saw">CSS</a></li>class(클래스)는 하나로 묶는다 , Grouping하다 라는 의미가 포함되어 있다.
class 속성에는 여러 개의 값이 들어올 수 있고 띄어쓰기로 구분한다.
하나의 태그에는 여러 개의 속성이 들어올 수 있고 여러 개의 선택자를 통해서 하나의 태그를 공동으로 제어할 수 있다.
HTML에서는 더 가까운 명령이 더 큰 영향력을 가진다.(똑같은 형태의 선택자라면 가장 최근에 명령한 선택자가 더 우선순위가 높다)
<!doctype html>
<html>
<head>
<title>WEB1 - CSS</title>
<meta charset="utf=8">
<style>
a {
color:black;
text-decoration: none;
}
.active{
color:red;
}
.saw{ //active와 같은 형태의 선택자(클래스)일땐 마지막에 명령한 선택자가 우선순위가 높음
color:gray;
}
h1{
font-size:60px;
text-align:center;
}
</style>
</head>
<body>
<h1><a href="index.html">WEB</font></a></h1>
<ol>
<li><a href="1.html" class="saw">HTML</a></li>
<li><a href="2.html" class="saw active">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
(.saw가 더 늦게 명령되어서 CSS의 색깔이 gray로 되었음)
하지만 하나의 태그에 같은 형태의 속성을 넣는 것은 좋은 방법이 아니기 때문에 우리는 ID선택자라는 우선순위가 더 높은 선택자를 이용할 필요가 있다.
선택자의 우선순위는 태그 < 클래스 < id 이다.(★★좀 더 구체적인 것이 포괄적인 것보다 우선순위가 높다)
Why ? 이렇게 우선순위를 나눠놓은 이유는 태그 선택자를 통해서 전체적인 태그의 디자인을 하고 그 중에 예외적인 것들만 우선순위가 더 높은 선택자로 예외를 두는 것이 디자인하고 코딩하는데 더 효율적이기 때문이다.(★★원리)
<!doctype html>
<html>
<head>
<title>WEB1 - CSS</title>
<meta charset="utf=8">
<style>
a {
color:black;
text-decoration: none;
}
#active{
color:red;
}
.saw{
color:gray;
}
h1{
font-size:60px;
text-align:center;
}
</style>
</head>
<body>
<h1><a href="index.html">WEB</font></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>
(active가 더 일찍 명령되었음에도 불구하고 CSS가 red로 반영됨)
id의 핵심은 중복되어선 안되는, 유일무이한 값이고 더 구체적이라는 것이다.(id의 값은 단 한번만 등장해야 한다)
ex)한번 id="active"라는 태그가 웹페이지에 한번 나왔다면 다른 곳에서 active을 사용해선 안됨.
그렇다면 이제 우리는 필요한 선택자를 찾기 위해 "css selector"로 검색할 수 있다.
여러가지 형태의 선택자들을 조합하여 우리가 원하는 효과를 정교하게 특정 태그에 타겟팅할 수 있고, 이것을 통해 작성하는 코드의 양을 획기적으로 줄일뿐만 아니라 한 부분만 수정하면 많은 것을 바꿀 수 있는 효율적인 코드를 짤 수 있다.
