HTML/CSS/JS Ch 7
CH07.
기본문법 및 주석
- 선택자{속성: 값;}
선택자: 스타일(CSS)을 적용할 대상 (Selector)
속성: 스타일(CSS)의 종류(Property)
{}: 스타일 범위의 시작과 끝
- HTML
<div>Hello</div>
- CSS
div {
font-size: 50px;
color: blue;
text-decoration: underline;
}
-주석
/**/
CSS 선언방식
- 내장방식
html에서 style 태그로 작성하는 방식
<style>
div{
color: red;
}
</style}
- 인라인 방식
요소의 style속성에 직접 스타일을 작성하는 방식
선택자가 없음
유지보수 측면에서 단점을 가짐 (우선순위)
<div style="color: red;></div>
- 링크 방식
link 태그로 외부 css 문서를 가져와서 연결하는 방식
<link rel="stylesheet" href="./css/main.css">
- main.css
div{
color: red;
}
- import 방식
CSS의 @import 규칙으로 CSS문서 안에서
다른 CSS 문서를 가져와 연결하는 방식
연결을 지연시키는 용도로 사용가능
<link rel="stylesheet" href="./css/main.css">
- main.css
@import url(./box.css)
div{
color: red;
}
- box.css
.box {
background-color: red;
}
CSS 선택자
기본 선택자
- Universal Selector
*
모든 요소를 선택
* {
color: red;
}
- Type Selector
태그이름
해당 태그 요소 선택
li {
color: red;
}
- class Selector
.class
HTML class 속성의 값이 해당 값인 요소 선택
.ABC {
color: red;
}
- ID Selector
#id
HTML id 속성의 값이 해당 값인 요소 선택
#ABC {
color: red;
}
복합선택자
기본 선택자를 조합한 선택자
- Basic Combinator
ABC.XYZ
선택자 두개를 동시에 만족하는 요소 선택
ABC.XYZ {
color: red;
}
- Child Combinator
ABC > XYZ
선택자 ABC의 자식 요소 XYZ 선택
ABC>XYZ {
color: red;
}
- Descendant Combinator
ABC .XYZ (띄어쓰기 주의)
선택자 ABC의 하위 요소 XYZ 선택
ABC. XYZ {
color: red;
}
- Adjacent Sibling Combinator
ABC + XYZ
선택자 ABC의 다음 형제 요소 XYZ 하나를 선택
ABC + XYZ {
color: red;
}
- General Sibling Combinator
ABC ~ XYZ
선택자 ABC의 다음 형제 요소 XYZ 모두를 선택
ABC ~ XYZ {
color: red;
}
Pseudo-Classes(가상 클래스 선택자)
- HOVER
선택자 요소에 마우스 커서가 올라가 있는 동안 선택
a:hover {
color: red;
}
- ACTIVE
선택자 요소에 마우스를 클릭하고 있는 동안 선택
a:active {
color: red;
}
- FOCUS
선택자 요소가 포커스 되면 선택
포커스가 가능한 요소에서만 작동함
input:focus {
background-color: red;
}
cf. tabindex 속성을 통해 Focus가 될 수 있는 요소로 만들 수 있다.
- FIRST CHILD
선택자가 형제 요소 중 첫째라면 선택
.fruits div:first-child {
color: red;
}
- LAST CHILD
선택자가 형제 요소 중 막내라면 선택
.fruits div:first-child {
color: red;
}
- NTH CHILD
선택자가 형제 요소 중 n번째라면 선택
- 2
.fruits *:nth-child(2) {
color: red;
}
- 2, 4, 6, ...
.fruits *:nth-child(2n) {
color: red;
}
- NOT
XYZ가 아닌 ABC 선택
.fruits *:NOT(span){
color: red;
}
Pseudo-Elements (가상 요소 선택자)
- BEFORE, AFTER
요소의 내부 앞/뒤에 Content를 삽입
인라인 요소
content <- 필수속성
- HTML
<div class = "box"
content!
</div>
- CSS
.box::before{
content: "앞"
}
.box::after{
content: "뒤"
}
- print
앞content!뒤
Attribute (속성선택자)
- ATTR
특정 속성을 포함하는 요소 선택
- HTML
<input type="text" value = "Hello">
<input type="password" value = "1234">
<input type="text" value = "ABCD" disabled>
- CSS
[disabled] {
color: red;
}
- ATTR=VALUE
특정 속성을 포함하고 특정 값인 요소 선택
- HTML
<input type="text" value = "Hello">
<input type="password" value = "1234">
<input type="text" value = "ABCD" disabled>
- CSS
[type="password"] {
color: red;
}
스타일 상속
글자/문자 관련 속성들은 상속됨
상속되지 않는 속성들은 inherit를 사용해서 상속할 수 있음
선택자 우선순위
같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법
1. 점수가 높은 선언이 우선함
2. 점수가 같다면, 가장 마지막에 해석된 선언이 우선함
- HTML
<div id="color_yellow"
class="color_green"
style="color: orange;">
hello!
</div>
- CSS
div {color: red !important;} -> 태그
#color_yellow {color: yellow} -> ID
.color_green {color: green;} -> Class
div {color: blue;} -> 태그
* {color: darkblue} -> 전체
body {color: violet} -> 태그
!important : infinity
인라인 : 1000
ID : 100
CLASS : 10
태그 : 1
전체 선택자 : 0
상속 : X
Author And Source
이 문제에 관하여(HTML/CSS/JS Ch 7), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hungeun/HTMLCSSJS-Ch-7저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)