1. 가상요소 선택자(after, before)
1. before
E요소 내부의 앞에, 내용(content)를 삽입
💡가상 클래스 선택자 앞에는 콜론이 하나 붙는다. 하지만 가상요소선택자는 콜론이 두개 붙는다.
💡before태그는 div()content(내용)/div에서 앞에 빈 괄호 안에 있는 것을 선택한다.
예제)
💡tip 'ul>li{$}5' 이렇게 입력하게 되면 ul태그의 자식요소인 li태그를 $(증가)하는상태로 li태그가 5(총 li5개)를 만들겠다 라고 쉽게 입력할 수 있다.(마무리는 탭키를 입력하면된다.)
<ul>
<li>숫자1</li>
<li>숫자2</li>
<li>숫자3</li>
<li>숫자4</li>
<li>숫자5</li>
<li>숫자6</li>
</ul>ul{
font-size:40px;
}
ul li::before{
content:"숫자";
font-weight:bold;
color:red;
margin-right:20px;
}간혹가다가 content:""를 입력하지 않는 실수를 하는데 아무리 글을 안쓰더라도 content:""를 잊어서는 안된다.
2. after
E요소 내부의 뒤에, 내용(content)을 삽입.
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>ul{
font-size:40px;
}
ul li::after{
content:".0";\
}또한 여기서 before와 after은 뒤나 앞에 가상의 요소를 생성하는 것이기에 텍스트 뿐만 아니라 이미지도 삽입이 가능하다.
예제)
ul{
}
ul li::after{
content:url("");
}또한 간혹가다가 after이나 before앞에 콜론이 하나만 작성되어 있는 경우가 있다.
원래는 가능하나 가상클래스 선택자와 가상요소 선택자가 서로 다른 것이기 때문에 혼동하지 않아야 한다.
2. 속성선택자(attr, attr=value)
1.attr
속성
attr을 포함한 요소 선택
<input type="text" value="simon">
<input type="password" value="1234">
<input type="text" value="disabled text" disabled>.disabled
{
opacity:0.2; /*20%*/
}[disabled]{ opacity:0.5; /*50%*/ color:red; }이렇게 입력해도 된다. 여기서 []는 속성선택자이다.
2. attr=value
속성
attr을 포함하며 속성 값이value인 요소 선택
<input type="text" value="simon">
<input class="password" type="password" value="1234">
<input type="text" value="disabled text" disabled>.disabled
{
opacity:0.2; /*20%*/
}[type=password]{
opacity:0.5;
color:red;
}여기서
[type="password"] or [type=password]위에 처럼 []안에 ""를 생략해도 되고 그냥 써도 된다.
3. 속성선택자(attr^=value, attr$=value)
1. attr^=value
속성
attr을 포함하여 속성 값이value로 시작하는 요소선택
<button class="btn-Success">Success</button>
<button class="btn-Danger">Danger</button>
<button>normal</button>[class^="btn-"]{
font-weight:bold;
border-radius:20px;
}특정한 값으로 시작하는 속성을 찾기 위해서 캐럿기호(^)로 할 수 있다.
2. attr$=value
속성
attr을 포함하며 속성 값이value로 끝나는 요소 선택
<button class="btn-Success">Success</button>
<button class="btn-Danger">Danger</button>
<button>normal</button>[class^="btn-"]{
font-weight:bold;
border-radius:20px;
}[class$="Success"]{
color:green;
}
[class$="Danger"]{
color:red;
}이런 식으로 특정한 각기 다른 값들에 대한 css의 값을 정의할 수 있다.
4. 상속
1. 상속
조상요소로부터 하위요소로 어떤 css의 명령이나 속성들이 상속될 수 있다.
ex)
<div class="ecosystem"> <!--red-->
<div class="animal">동물 <!--red-->
<div class="tiger">호랑이</div> <!--red-->
<div class="lion">사자</div> <!--red-->
<div class="elephant">코끼리</div> <!--red-->
</div>
<div class="plant">식물</div> <!--red-->
</div>2. 상속되는 속성들
상속되는 속성들(기본적으로 글자를 다룬 것이다.)
1.font
- font-size
- font-style
- font-weight
- line height
- font-family
2.color
3.text-align
4.text-indent
5.text-decoration
6.letter-spacing
7.opacity
etc...
3. 강제상속
<div class="parent">
<div class="child"></div>
</div>.parent{
position:absolute;/*상속되지 않는 속성과 값*/
}
.child{
possition:inherit;/*강제 상속 받아 position:absolute;와 동일*/
}상속되지 않는 속성(값)도
inherit이라는 값을 사용하여'부모'에서 '자식'으로 강제 상속시킬 수 있습니다.'자식'을 제외한 '후손'에게는 적용되지 않으며, 모든 속성이 강제 속성을 사용할 수 있는 것은 아니다.
5. 우선순위
<!--인라인 선언방식-->
<body>
<div id="color_yellow" class="color_green" style="color:orange;">Hellow world!
</div>
</body
div{color:red; !important} /*important*/
#color_yellow{color:yellow;} /*아이디 선택자*/
.color_green{color:green;} /*클래스 선택자*/
div{color:blue;} /*태그선택자*/
*{color:darkblue;} /*전체 선택자*/
body{color:violet;} /*상속*/Q. 여기서 Hellow world!이 색은 무엇일까?
A. 우선순위 결정
같은 요소가 여러 선언의 대상이 될 경우, 어떤 선언의 CSS속성(property)을 우선 적용할지 결정하는 방법
1. 명시도 점수가 높은 선언이 우선(명시도)
2. 점수가 같은 경우,가장 마지막에 해석(늦게 작성한)되는 선언이 우선(선언 우선)
3. 명시도는'상속'규칙보다 우선(중요도)
4.!important가 적용된 선언 방식이 다른 모든 방식보다 우선(중요도)
"우선순위에는 '중요도, 명시도, 선언 순서'의 개념이 있습니다. 각 개념이 의미하는 것을 기억해야 한다.
💡살펴봐야할 점수 부분
1. 가장 중요(!importnat) - 모든 선언을 무시하고 가장 우선
2. 인라인 선언방식
ex)<div style="color:orange;">HELLOW WORLD!</div>여기서 인라인 선언방식이 우선순위가 너무 높기 때문에 추천하지 않는 방식이다.
3. ID선택자
ex)#color_yellow{color:yellow;}
4. class선택자 ex).color_green{color:green;}
- 태그선택자
span{color:blue;}
- 전체선택자
*{color:darkblue;}
- 상속(상속받은 속성은 항상 우선하지 않음)
body{color:violet;}
6. 마지막으로
class에서 공부할 것들 중에서 우선순위와 상속에 대해서 자세히 알아두자.
