HTML/CSS/JS Ch 7

11796 단어 Week204190419

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

좋은 웹페이지 즐겨찾기