선택자란?:
html에서 css를적용할때 css에 속성과 값을 적용할 대상이다.
속성과 값의 역할:
속성과 값은
어떤방식에 css를 사용할꺼니? =속성이다.
그 방식에 얼마의 만큼의 값을 넣을꺼니? =속성값이다.
ex)
div{ font-size:20px}
위 css코드에서 div라는 태그에 font-size(속성)라는 방식을 사용할껀데 그값은 20px(속성값)이야 라고 말 할 수있다.
css 사용방법
선택자 { 속성:속성값;
속성:속성값;
속성:속성값;
}
위 와같은 방식으로 css를 작성한다
ex)
<body>
<style>
p.text1{
color: red;
font-size: 20px;
background-color: black;
}
</style>
<p class="text1">안녕하세요</p>
<p class="text2">hello</p>
</body>위와같이 작성 할 수 있다. css는 주로 html과 연결할때 link태그를 이용해 외부에서 불러오지만 css코드와 html코드를 함깨보여주고 싶기에 여기선
style태그를 이용해 html에 내장하는 방식을 이용하겠다
위 코드에서 style태그를 해석하면 선택자에 css속성을 적용하겠다는것인데 여기서 선택자는 p태그이고 p태그중에서도 .text1 즉 class가 text1인것에 css를
적용할깨 라는 의미인데 이때 color,font-size,background-color는 속성이고 : 뒤는 속성값으로써 실제 적용되는 값이다.
css를 사용하다보면 class선택자를 사용하는일이 아주 빈번하므로 실습 해보기를 권한다.
css 선언방식
1인라인방식 : css를 적용하고 싶은 요소에 직접적으로 적용하는 방식이다
ex)
<p style="color: red;">안녕하세요</p>
위와같이 태그에 style이라는 속성을 사용해 직접 css속성과 속성값을 입력 할 수 있다.
부가적으로 style은 태그로써도 쓰이고 속성으로써도 쓰이는데
태그로사용될때는 html에 css를 내장할때 사용되고
속성으로사용될때는 요소에 직접적으로 css를 적용할때 사용한다
2내장방식 : html파일에 style태그를 이용하여 css를 내장하여 선언하는 방식이다
ex)
<body>
<style>
p.text1{
color: red;
font-size: 20px;
background-color: black;
}
</style>
<p style="color: red;">안녕하세요</p>
</body>
위와같이 body태그안에 style이라는 태그를 사용하여 css를 적용하여 사용 할 수 있다.
3외부파일 연결 방식(가장 많이 사용되는 방식이다) css를 1과2번방식으로 작성하면 코드가 너무 길어지기 때문에 가독성이 떨어지기 때문이다.
link 태그를 이용해 html에 css파일을 연결하여 사용하는방식이다 이때 rel과 href를 이용하는데
rel= html과 link태그로 가져온 파일에 관계를 명시하는데 css파일을 가져올때 rel = stylesheet가된다
href= 그파일이 저장되어있는 주소(url)을 명시한다.
ex)
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./test.css">
</head>
위와같이 head태그에 link태그를 작성하여주고 link태그를 사용하여 외부css파일을 연결 할때는 제대로 연결되었는지 꼭 테스트를 해보길 권한다.
선택자의종류
가장 기본적으로 사용되는 선택자
1전체선택자:
html에 모든 요소를 선택하게된다 이때 *로 명시한다
ex)
<style>
*{
color: red;
}
</style>
<p>안녕하세요</p>
<div>hellow</div>
<span>디지몬!</span>
위 코드를 확인해보면 p,div,span태그에 글자색깔이 빨간색인것을 확인 할 수 있다.
2태그선택자 :
태그이름으로 요소를 선택한다 이때 적용하고싶은 선택자에 이름을 명시한다
부가적으로 태그선택자는 해당 태그가 사용되면 될수록 css범위가 넓어지기 때문에 단독으로 쓰이면 원하는 부분을 꾸미기가 어렵다.
ex)
<style>
span{
color: red;
}
</style>
<p>안녕하세요</p>
<div>hellow</div>
<span>디지몬!</span>
<span>친구들</span>
위 코드를 확인해보면 span태그에 글자색이 빨간색인 것을 확인 할 수있다.
전채선택자와 태그선택자를 단독으로 사용하면 선택되는 범위가 광범위해지므로 class와 id속성을 잘 이용해야한다
특히 class 선택자는 여러번 사용될 수 있기때문에 가장 많이 사용되는 선택자이기도하다.
3★class 선택자:
html에 class속성의 이름을 이용해 요소를 선택한다. 이때 css에서 .으로 class선택자를 명시한다
ex)
<style>
.say{
color: red;
}
</style>
<p class="say">안녕하세요</p>
<div>hellow</div>
<span class="say">디지몬!</span>
위 코드에서 style 태그안에 .say에 css값이 명시되어있다 .say에 값을 p태그와 span태그에 class="say"라는 속성을 명시해 css와 html을 연결 할 수 있는 예시이다
.say는 p태그와 span태그에 사용되었다 즉 여러번 사용 할 수 있다는 의미이다 이것이 class에 가장 큰 장점이다 특정 부분에 css를 적용할때
동일하게 적용하고싶은 부분이있다면 재사용이 가능하기 때문이다.
4 id 선택자:
html에 id속성의 이름을 이용해 요소를 선택한다. 이때 css에서 #으로 선택자를 명시한다.
ex)
<style>
.say{
color: red;
}
#say{
color: blue;
}
</style>
<p id="say">안녕하세요</p>
<div>hellow</div>
<span class="say">디지몬!</span>
위 코드를 확인해보면 style태그안에 작성된 #say에 내용과 p태그안에 id가 연결되어 p태그에 글자색이 파란색이 되었음을 확인 할 수있다.
class와 id선택자에 차이
class와 id는 내가 원하는 특정부분을 꾸밀수있다는 공통적인 장점을 가지고있지만 class는 여러번 사용될 수 있고 id는 고유한 값으로써 1번만 사용이 가능하다는 차이가있다.
ex)
<style>
.say{
color: red;
}
#friend{
color: blue;
}
</style>
<p id="friend">안녕하세요</p>
<div class="say">hellow</div>
<span class="say">디지몬!</span>
<p id="friend">친구들</p>즉 위와같이 id를 2번사용하면 잘못된 사용이라 할 수 있다.
복합 선택자:
선택자 2가지를 동시에 만족하는 요소를 선택한다 이때 선택자두개를 붙여씀으로써 사용된다.
ex)
<style>
.say {
color: red;
}
#friend {
color: blue;
}
p.say {
color: green;
}
</style>
<p id="friend">안녕하세요</p>
<div class="say">hellow</div>
<span class="say">디지몬!</span>
<p class="say">친구들</p>
위 코드에서 style태그 부분에 마지막을보면 p.say가 보이는데 이것이 복합선택자이다 즉 p태그이면서 class가 say인 요소에 글자색을 초록색으로 적용할깨 라는 의미로써
2가지 선택자 조건을 모두 만족해야 css가 적용된다 class가 say지만 div태그와 span태그에는 글자색 green이 적용되지 않는 것을 볼 수 있다.
자식 선택자:
자식요소중에 조건을 만족하는 선택자에 css를 적용한다. 이때 >기호를 사용하여 자식선택자를 명시한다
ex)
<style>
ul>.hellow{
color: red;
}
</style>
<ul>
<li class="hellow">item1</li>
<li>item2</li>
<li>item3</li>
</ul>
위코드에서 style태그에서 ul에 자식(하위요소)에 css를적용할껀데 자식은 hellow라는클레스를 가진 놈에게 css를 적용할꺼야 라고 말 할 수있다.
item1에 글자색이 빨간색인것을 확인 할 수있을것이다.
하위 선택자: 선택자 2가지를 사용하는데 이때 1번째 선택자에 하위요소중 2번째선택자에 조건을 만족하는 요소에 css를 적용하게 하는 기능이있다. 이때 띄어쓰기를 이용해 하위 선택자를 명시한다.
ex)
<style>
div .hellow{
color: red;
}
</style>
<ul>
<li class="hellow">item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<div>
<p>당근</p>
<div class="hellow">토마토</div>
<span>오렌지</span>
</div>
위 코드에서 style태그를 확인해보면 div태그(1번선택자)안에 있는 요소중에서 class가hellow(2번선택자)인 요소에 css를 적용할깨 라고 말 할 수있다
결과적으로 토마토에 글자색이 빨간색이 되는것을 확인 할 수 있다.
형제 선택자란?:
같은 부모를 공유하는 요소들을 의미한다.
ex)
<div>
<p>당근</p>
<div class="hellow">토마토</div>
<span>오렌지</span>
</div>
위코드에서 div태그안에 p,div,span태그는 div라는 태그로 감싸져있다 이때 자신이 감싸고있다면 부모요소이고 감싸져있다면 자식요소이다
p,div,span태그는 div태그에 감싸져있기에 div에자식들이고 부모가 같은 요소들을 형제요소라고 부른다
때문에 p,div,span태그는 형제요소이다
인접 형제선택자 :
인접형제 선택자는 2가지선택자를 사용하는데 이떄 1번 선택자의 다음형제요소 하나를 선택한다. 이때 +기호를 사용하여 명시한다
ex)
<style>
.hellow+li{
color: red;
}
</style>
<ul>
<li class="hellow">item1</li>
<li>item2</li>
<li>item3</li>
</ul>
위코드에 style태그 부분을 확인해보면 .hellow(1번선택자) 즉 class가 hellow인 요소의 다음형제 하나를 선택하는데 이떄 +li(2번선택자) 즉 다음형제의 태그가 li태그이면 css를 적용할깨 라고 말 할수 있다.
결과적으로 item2에 글자색이 빨개지는것을 확인 할 수 있다.
일반 형제 선택자 :
일반 형제 선택자는 2가지선택자를 사용하는데 이때 1번 선택자의 다음형제요소 모두를 선택한다. 이때 ~기호를 사용하여 명시한다.
ex)
<style>
.hellow~li{
color: red;
}
</style>
<ul>
<li class="hellow">item1</li>
<li>item2</li>
<li>item3</li>
</ul>
위 코드에서 style 태그를 확인해보면 class가 .hellow(1번선택자) 즉 class가 hellow인 요소의 다음형제 모두를 선택하는데 이때 ~li(2번선택자) 즉 다음형제가 li태그이면 css를 적용할깨 라고 말 할수 있다.
때문에 item2,3에 글자색이 빨개지는것을 확인 할 수있다
가상 클래스 선택자 :
선택자에 어떠한 동작을 행했을때 css를 적용시키는 기능이있다. 선택자에 :을 붙여 사용한다.
1 hover: 요소에 마우스가 올라가 있는동안에만 css를 적용한다.
ex)
<style>
li.hellow{
color: red;
}
li.hellow:hover{
color: blue;
}
</style>
<ul>
<li class="hellow">item1</li>
<li>item2</li>
<li>item3</li>
</ul>
위 코드에서 style태그안에 li.hellow는 li태그중 class가 hellow인 조건을 전부만족하는 item1에 빨간색 글자를 적용하는 css이다
여기서 li.hellow:hover를이용해 li태그중 class가 hellow인요소에 hover 라는 가상클레스 선택자를 이용해 마우스가 올라가 있는동안 파란색 글자가 적용되는것을 확인 할 수 있다.
2 active : 요소를 마우스로 클릭하고 있는동안 css를 적용한다. 이떄 선택자에 :를 붙여 사용한다.
ex)
<style>
li.hellow{
color: red;
background-color: black;
width: 100px;
height: 100px;
}
li.hellow:active{
background-color: blue;
width: 200px;
height: 200px;
}
</style>
<ul>
<li class="hellow">item1</li>
<li>item2</li>
<li>item3</li>
</ul>
위코드에서 style태그부분을 보면 li태그이고 class가 hellow인 요소에 글자색 빨간,가로너비 100px,새로너비 100px, 배경색이 검정색인 css를 적용시킨것을 확인 할 수있다.
이때 li태그이고 hellow라는class를가진요소에 가상클레스 선택자인 active를 적용했을때 화면에서 item1을 클릭하는 동안 배경색이 파란,가로 세로너비가 200px로 늘어났음을 확인 할 수있다.
3 focus: 요소에 초점이 맞춰져있는동안에만 css를 적용한다 대화형 콘텐츠에서 사용가능한데 대표적으로 input태그가있다 선택자에 :을 붙여 사용한다.
ex)
<style>
input.passwordbox1:focus{
background-color: gray;
color: blue;
}
</style>
<label>id <input type="text" class="id-box1"></label>
<label>password <input type="password" class="passwordbox1"></label>위 코드에 style태그 부분을 확인해보면 input태그이고 class가 passwordbox1인 요소에 초점이 맞춰져있는동안 css를 적용하겠다는 뜻인데 말로 이해가 안갈 수있기때문에
코드를 복사해서 id와 password에 박스를 하나하나 클릭해 초점을 맞춰보면 css가 적용된것과 안된것을 확인 할 수있다.
4 first-child: 형제요소중 가장 첫번째 요소에 css를 적용한다 이떄 선택자에:를 붙여 사용한다
ex)
<style>
ul li:first-child{
color: red;
}
</style>
<ul>
<li>사과</li>
<li>바나나</li>
<li>파인애플</li>
<li>포도</li>
</ul>
위코드에서 ul태그안에 4개의 li태그가있다 li태그4개는 ul태그로 감싸져있기에 부모가 ul이고 li태그는 서로 같은 부모를 공유하므로 형제요소이다
다음 style태그안에 ul li:first-child부분을 해석하면 ul태그에 후손(자식요소도 후손에 포함된다.)중 li태그가 있는데 first-child 즉 형제요소중 가장 첫번째 요소에 css를 적용하겠다는 의미이다
결과적으로 사과의 글자색이 빨간색이 되는것을 확인 할 수 있다.
5 last-child: 형제요소중 가장 마지막 요소에 css를 적용한다 이때 선택자에 :를 붙여 사용한다.
ex)
<style>
ul li:last-child{
color: violet;
}
</style>
<ul>
<li>사과</li>
<li>바나나</li>
<li>파인애플</li>
<li>포도</li>
</ul>위 코드에서 ul태그안에 4개의 li태그가있는데 style태그에 css를 해석해보면 ul의 후손인 li태그중 가장마지막 요소에 css를 적용하겠다라는 의미로써 가장 마지막 요소인 포도에 글자색이 보라색이 되었음을 확인 할 수있다.
6 nth-child : 형제요소중 특정요소를 지정하여 css를 적용한다. 이때 선택자에 :를 붙여 사용하다
ex)
<style>
ul li:nth-child(3){
color: green;
}
</style>
<ul>
<li>사과</li>
<li>바나나</li>
<li>파인애플</li>
<li>포도</li>
</ul>위코드에서 ul태그는 li태그에 부모이고 li태그입장에서 다른 li태그는 같은 부모를 공유하기에 형제요소이다
style태그안에 내용을보면 ul의 후손인 li태그중 3번째요소에 css를 적용하겠다 라고 해석 할 수있다.
결과적으로 파인애플에 글자색이 초록색이 되는것을 확인 할 수있다.
부가적으로 nth-child에 ()안에 n을 사용 할 수 있는데 이때 n은 0부터 시작하여 순차적으로 증가한다.
ex)
<style>
ul li:nth-child(2n){
color: green;
}
</style>
<ul>
<li>사과</li>
<li>바나나</li>
<li>파인애플</li>
<li>포도</li>
</ul>
위코드에서 ()안에 2n이라는 숫자가 명시되어있는데 n은 0부터시작하여 순차적으로 증가하게되어
2*0 즉 nth-child(0)이되고
다음 n=1 2*1 즉 nth-chilid(2)가 된다
다음 n=2 2*2 즉 nth-child(4)가 된다
다음 n=3 2*3 즉 nth-child(6)이 되지만 li태그가 4개만 존재하므로 여기서부터는 css가 적용되지않는다.
결과적으로 바나나와 포도의 글자색이 초록색이 되는것을 확인 할 수있을것이다
실습을 통해 위 시스템을 이해 해보기를 권한다.
주의사항: nth-child를 사용할때 아래와같이 작성하면 css가 적용되지않는다
<style>
ul li:nth-child(1){
color: green;
}
</style>
<ul>
<div>과일</div>
<li>사과</li>
<li>바나나</li>
<li>파인애플</li>
<li>포도</li>
</ul>
위코드에 style태그부분을보면 ul에 후손중 li태그의1번째요소에 css를 적용하겠다고 생각 할 수있지만
코드에서 ul에 후손중 1번째요소는 li태그가아니라 div태그이므로 css가 적용되지않는다 때문에 nth-child를 사용할때 1번선택자를 해석한후 2번선택자는 뒤에서부터 해석해줘야한다
즉 style태그안에 css를 예시로 ul태그 = 1번선택자이다 li:nth-child(1) =2번선택자이다 해석을할때 ul태그(1번선택자)에 후손중 nth:child(1)(2번선택자의 뒷부분) 형제요소에 1번째가 li태그(2번선택자의 앞부분)이니?
라고 해석할 수 있다. 하지만 2번선택자에 앞부분이 li태그가아니라 div태그이기에 css가 적용되지않는것이다
해당 주의사항은 nth-child뿐아니라 first,last-child도 마찬가지이다
-child를 사용할땐 다음과같이 2번선택자는 뒷부분부터 해석해야 오류없이 css를 적용 할 수 있을것이다.
7 nth-of-type : nth-of type는 nth-child와 유사한 기능을 가지지만 nth-of-type의 앞에 명시된 태그와 동일한 타입에 css를 적용한다
ex)
<style>
ul li:nth-of-type(1){
color: red;
}
</style>
<ul>
<div>과일</div>
<li>사과</li>
<li>바나나</li>
<li>파인애플</li>
<li>포도</li>
</ul>
위코드에서 style태그에 css선택자를 해석하면 ul(1번선택자)에 후손중 타입이 li태그인것에 첫번째에 css를 적용 할깨라고 할 수있다.
nth-child를 사용했을때에는 형제요소의 1번째가 li태그가아니라 div태그이므로 css가 적용되지않았지만 nth-of-type은 앞에 명시되어있는 태그중에서
css를 적용할 선택자를 찾기때문에 사과에 css가 적용 될 수 있는것이다.
주의사항 nth-of-type을 사용할때 앞에명시되는 내용은 태그만 사용해야한다 class나 id를 명시하면 예상치 못한 오류가 발생하기 쉽기 때문이다.
8 부정선택자: 부정선택자는 css를 적용할때 특정 요소는 제외시키는 기능이있다. 이때 :not으로 명시한다
ex)
<style>
ul li:not(.banana){
color: blue;
}
</style>
<ul>
<li>사과</li>
<li class="banana">바나나</li>
<li>파인애플</li>
<li>포도</li>
</ul>
위코드에서 style태그에 css를 해석해보면 ul에 후손인 li태그에 글자색을 파란색으로 적용할깨 라고할 수 있는데 이때 :not(.banana)를 보면
그중에서 class가 banana인 부분에는 css적용을 제외할깨 라고 해석 할 수있다.
가상 요소 선택자: 가상 클래스 선택자와 다르게 css를통해 html에 가상의 요소를 생성한다. ::를 이용하여 사용한다
1 before: 요소에 가장 앞부분에 내용을 삽입한다
이때 속성으로 content를 사용하여 내용을 추가한다
만들어진 내용에 css를 적용 할 수있다.
ex)
<style>
div.mainText::before{
content: "안녕 ";
color: red;
}
</style>
<div class="mainText">디지몬!</div>
위코드에서 div태그를 이용하여 디지몬! 이라는 text를 출력했는데 style태그 안에 ::before 가상 요소 선택자를 이용해 내용을 삽입 할 수있다.
이때 content 부분에 삽입할 내용을 적어주고 삽입한 내용에 css를 적용 시킬 수 있기에 글자색을 빨간색으로 적용했다.
결과적으로 안녕 디지몬!이 출력될것이고 삽입된 안녕에는 글자색이 빨간색인 것을 확인 할 수있다.
부가적으로 삽입하고싶은 내용이 없더라도 before:: 가성 요소 선택자를 사용할때 content는 필수적으로 명시해야한다
요소앞에 삽입하고싶은 내용이 글자가아니라 css로 만들어진 어떤 도형같은 경우일때 content를 명시하지않으면 css가 적용되지않기 때문이다.
2 after: 요소에 가장 뒷부분에 내용을 삽입한다
이때 속성으로 content를 사용하고 css를 적용 할 수있다.
ex)
<style>
div.mainText::after{
content: " 디지몬!";
color: red;
}
</style>
<div class="mainText">안녕</div>
위와같이 div태그에 안녕 뒤에 ::after 가상 요소 선택자를 사용해 빨간글자에 디지몬!이라는 내용이 삽입되었음을 확인 할 수있다,
before과 같이 content는 필수적으로 명시해야한다 이유는 before과 같은 이유이다
부가적으로 before와 after 가상요소 선택자를 이용해 image도 삽입 가능하다
상속 : 상속이란 상위요소에 css값이 하위요소에 영향을 미쳐 하위요소에 css가 적용되는것을 의미한다.
주로 글자를 다루는 css속성들이 상속된다
ex)
<style>
.parentE{
color: red;
}
</style>
<div class="parentE">
<div>난 div태그이고</div>
<span>class가 parentE인 요소의</span>
<p>자식이야</p>
</div>
위 코드에서 style태그 부분에 class가 parentE인 부분에 글자색을 빨간색으로 적용했는데 class가 parentE인요소의 하위요소 전부에 글자색이 빨간색이 적용된것을 확인 할 수있다.
css적용에 우선순위
1!important
점수 : ∞(무한대)
2 인라인 선언 방식 : html에 태그 안에 직접 style을 선언하여 css를 적용하는 방식
점수 : 1000점
ex) <div style="color: red;">hellow</div>
3#(id선택자)
점수 :100점
4.(클래스 선택자)
점수 : 10점
5div등등(태그 선택자)
점수 : 1점
6*(전체 선택자)
점수 : 0점
7상속
: 점수 없음
우선순위를 결정하는순위
1 점수가 높은 선언이 우선적용된다.
2 점수가 같은경우 가장 마지막에 명시된 선언이 적용된다.
3 !important가 적용된 선언은 어떤것보다 가장 우선적으로 적용된다.
ex)
<style>
#i100.c10{
color: blue;
}
div.c10{
color: red;
}
</style>
<div id="i100" class="c10">hellow</div>
위 코드에 style태그 부분을보면
1번코드블럭은 id가 i100이고 class가c10인 요소에 글자색을 파란색으로 적용하겠다는의미이고
2번코드블럭 div태그이면서 class가 c10인 요소에 글자색 빨간색으로 적용하겠다는 의미이다
div태그는 style태그에 1번과 2번코드블럭을 둘다 만족한다 이때 어떤 코드블럭이 적용되는지에 대해 판단할때 점수가 사용된다
1번코드블럭은 id선택자(100점)에 class선택자(10점)이므로 110점이되고
2번코드블럭은 태그선택자(1점)에 class선택자(10점)이므로 11점 즉 1번코드블럭에 css가 적용된다
2-1만약 2번코드블럭에 태그선택자가 아니라 id선택자가 사용되어 1,2번코드의 점수가 동일하다면 2번코드블럭 즉 글자색이 빨간색이 적용된다
2-2만약 2번코드 블럭에 점수가 11점임에도 !important가 명시되어있으면 2번코드블럭 즉 글자색이 빨간색이 적용된다.
위처럼 css가 중복되어 적용될때는 점수를 통해 또는 작성순서를 통해 어떤 코드블럭이 적용되는지 판단 할 수 있다.
'CSS' 카테고리의 다른 글
| css 전환(Transitions)과 변환(Transforms) (0) | 2022.04.03 |
|---|---|
| css background- (0) | 2022.04.03 |
| css float와 position (0) | 2022.04.03 |
| css 글꼴과 문자 (0) | 2022.04.03 |
| css 단위와 박스모델 (0) | 2022.04.03 |
