이번 시간에는 CSS에서 Selector(선택자)들을 배웠다.
이 selector들은 무엇인가에 스타일을 주고자 할때 대상을 지정하기 위해 사용하는 기능이다.
selector들은 크게 3가지로 나뉜다.
ID, Class, Tag Selector로 구분이 되며
우선순위는
ID > Class > Tag Selector로 정해진다.
예시로... 하기와 같이 1. Before의 코드가 있고 a 명령어에 color가 red로 출력되라는 명령어가 적혀져 있다면...
1.Before
<style>
a {
color:black
text-decoration:none;
}
h1 {
font-size:45px;
text-align: center;
}
</style>
</head>
<body>
<h1><a href="index.html" style="color:red">WEB</h1>
<ol>
<li><a href="생활코딩 15.1.html" style="color:red">HTML</a></li>
<li><a href="생활코딩 15.2.html" style="color:red;text-decoration:underline">CSS</a></li>
<li><a href="생활코딩 15.3.html" style="color:red">JavaScript</a></li>
</ol>
- After에서는... 태그 선택자, 클래스 선택자, ID 선택자를 통해 text에 color를 명령할 수 있다.
2.After
<style>
#active {
color:red;
}
.saw {
color:red;
}
.active {
color:red;
}
a {
color:red;
text-decoration:none;
}
h1 {
font-size:45px;
text-align: center;
}
</style>
</head>
<body>
<h1><a href="index.html" class="saw" id="active">WEB</font></a></h1>
<ol>
<li><a href="생활코딩 15.1.html" class="saw">HTML</a></li>
<li><a href="생활코딩 15.2.html" style="color:red;text-decoration:underline">CSS</a></li>
<li><a href="생활코딩 15.3.html" class="active">JavaScript</a></li>
</ol>단...
<style> </style> 내에서 ID, Class, Tag selector들을 (# ) (. ) (a,p,span and etc )들을 표기하고
지정된 스타일이 적용될 곳에는...
ID, Class, style을 적어준다.
leeyou34 개발자의 블로그입니다. 방문해주셔서 감사합니다~ =D