html 에서 style 속성으로 여러 태그들에 디자인을 입혔었다
< body >
< p style = " color: red" > 빨간색 글자입니다. </ p >
< div style = " color: red" > div 태그 - 빨간색 글자 </ div >
< h1 style = " color: red" > 빨간색 제목입니다 </ h1 >
</ body >
이런 식으로 <p>, <div>, <h1>태그들에 style=color:red 로 빨간색을 입혔다
예를 들어서 저렇게 빨간색을 입혀야하는 태그들이 100개,200개 이상이다하지만 css를 이용하여 내가 원하는 태그나, 동일한 규칙을 가지는 모든 태그들을 한번에 디자인을 적용을 할 수 있다 이것을 css선택자 라고 한다 CSS 선택자는 완벽히 이해하고 넘어가도록 하자 나중에 자바스크립트에서도 동일한 방법으로 내가 찾고자하는 태그들을 빠르게 찾을 수 있다고 한다
css 선택자의 문법 예시이다 맨 앞(selector)가 선택자란 의미이고 나는 이것들을 배울 것이다
*{} 태그 (전체 선택자)
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
< title > Document </ title >
< style >
/* CSS 선택자 */
/* 전체 선택자 */
* {
}
</ style >
</ head >
< body >
< p > 빨간색 글자입니다. </ p >
< div > div 태그 - 빨간색 글자 </ div >
< h1 > 빨간색 제목입니다 </ h1 >
</ body >
</ html >
<style> 태그를 만들어 *{} 이란 태그를 넣으면
< head >
< meta charset = "UTF-8" />
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
< title > Document </ title >
< style >
/* CSS 선택자 */
/* 전체 선택자 */
* {
color : blue ;
}
</ style >
</ head >
< body >
< p > 빨간색 글자입니다. </ p >
< div > div 태그 - 빨간색 글자 </ div >
< h1 > 빨간색 제목입니다 </ h1 >
</ body >
</ html >
이렇게 전체 선택자 태그에 color:blue; 속성을 입히면
속성 지정 예시 이다
.{} = 클래스 선택자
< style >
/* 클래스 선택자 */
/* 선택자 이름이 점(.)으로 시작 */
.color-red {
color : red ;
}
</ style >
예시로 color-red라는 선택자를 만들었다
< style >
/* 클래스 선택자 */
/* 선택자 이름이 점(.)으로 시작 */
.color-red {
color : red ;
}
</ style >
< body >
<!-- 글로벌 속성 class -->
< p style = " color: red" > 빨간색 글자 입니다 </ p >
< p class = "color-red" > 빨간색 글자 입니다 </ p >
</ body >
class 속성은 글로벌 속성이다 모든 태그에 쓸 수 있다
그러면 둘다 빨간색 글자가 된다
< style >
/* 클래스 선택자 */
/* 선택자 이름이 점(.)으로 시작 */
.color-red {
color : blue ;
}
</ style >
< body >
<!-- 글로벌 속성 class -->
< p style = " color: red" > 빨간색 글자 입니다 </ p >
< p class = "color-red" > 빨간색 글자 입니다 </ p >
</ body >
이렇게 클래스 선택자 이름은 color-red 지만 속성값이 blue기 떄문에
/* main color */
/* secondary color */
/* info */
/* danger */
예시 선택자 이름이다
.bg-yellow {
background-color : yellow ;
}
bg-yellow 란 선택자 이름으로 background-color: yellow; 라는 속성을 입혔다
< body >
<!-- 글로벌 속성 class -->
< p style = " color: red" > 빨간색 글자 입니다 </ p >
< p class = "color-red" > 빨간색 글자 입니다 </ p >
< p class = "bg-yellow" > 배경색이 노란색 입니다. </ p >
</ body >
<p>태그를 하나 더만들어 class=""속성에 bg-yellow라는 선택자 이름을 값으로 입력했다
당연히 노란색 배경으로 나온다
< p class = "color-red bg-yellow" > 빨간색 글자 입니다 </ p >
이렇게 선택자를 하나 더 넣었다(이때 한칸 띄어주어야 한다)
그러면 두번째<p>태그에도 두가지 선택자가 적용된걸 볼 수 있다
< style >
/* 클래스 선택자 */
/* 선택자 이름이 점(.)으로 시작 */
.color-red {
color : blue ;
}
.bg-yellow {
background-color : yellow ;
}
/* main color */
/* secondary color */
/* info */
/* danger */
</ style >
< body >
<!-- 글로벌 속성 class -->
< p style = " color: red" > 빨간색 글자 입니다 </ p >
< p class = "color-red bg-yellow" > 빨간색 글자 입니다 </ p >
< p class = "bg-yellow" > 배경색이 노란색 입니다. </ p >
</ body >
코드 내용
태그 선택자
< body >
< a href = "" > 링크1 </ a >
< a href = "" > 링크2 </ a >
< a href = "" > 링크3 </ a >
</ body >
a 태그로 링크 3가지를 만들어 보자
그러면 이렇게 밑줄 그어진 링크가 3개 뜬다
사용자가 봤을때 구별하기 쉽게 링크는 자동으로 밑줄이 그어진다
근데 쇼핑몰 처럼 링크가 엄청 많은 페이지의 경우
죄다 밑줄이 그어저있으면 너무 지저분하지 않은가
그래서 밑줄을 지워보자
< body >
< a href = "" style = " text-decoration:none ;" > 링크1 </ a >
< a href = "" > 링크2 </ a >
< a href = "" > 링크3 </ a >
</ body >
style="text-decoration:none;" 이란 속성으로 밑줄을 지울수 있다
하지만 이것도 마찬가지로 하나의 <a> 태그 마다 죄다 style 속성을 입력하긴 너무 비효율적이다
그래서 태그 선택자를 이용해보자
/* 태그 선택자 */
/* 태그명을 선택자로 사용 */
/* 해당하는 태그에 동일한 디자인 적용 */
나는 <a>태그에 적용하는게 목적이므로
선택자 이름을 a로 지정한다
그리고 해당 선택자에 속성과 속성값을 선언한다
a {
text-decoration : none ;
}
그러면 모든 <a>태그가 text-decoration:none; 속성을 가지는걸 볼 수 있다
요기서 만약 내가 특정 링크만 밑줄을 치고싶다고 하면
클래스 선택자를 사용하는 방법이 있다
.underline {
text-decoration : underline ;
}
선택자 이름을 underline 으로 정하고
속성과 속성값을 text-decoration: underline; 으로 선언한 후
내가 밑줄 치고 싶은 링크 태그에 class="underline" 속성을 선언해보자
< body >
< a href = "" style = " text-decoration:none ;" > 링크1 </ a >
< a href = "" > 링크2 </ a >
< a href = "" class = "underline" > 링크3 </ a >
</ body >
그러면
링크3번만 밑줄 쳐진걸 볼 수 있다
