[패캠 네카라쿠배 2기 도전]CSS/ 개요, 선택자, 상속

패캠 네카라쿠배 도전: HTML CSS

[패캠 네카라쿠배 2기 도전]CSS/ 개요, 선택자, 상속

닉네임이 멋이 중헌디 2021. 5. 27. 21:52

1) 기본문법

(1)css는 화면에 꾸미는 도구

선택자{

속성: 속성값;

}

=> 이렇게 쓰는 것이 가독성이 더 좋다

(2) 선택자의 역할

: 속성과 값을 지정할 대상을 검색

첫번째 요소는 div

두번째 요소는 span

css

div{

color: red;

}

속성과 값의 역할

: 검색된 대상에 지정될 css 명령

/* 주석 */

문서내 수정사항이나 설명 등을 작성(주석)

2) 선언 방식

(1)인라인 방식 : html 요소(태그)의 style 속성에 직접 작성하는 방식 [html 안 속성]

<div style = "color: red; font-size: 20px; font-weight: bold;">Hello</div>

- 이 방식은 선택자가 필요하지 않다.

(2)내장 방식 : html <style>안에 작성하는 방법 [html 안 태그]

<head>

<style>

div { }

(3) 링크 방식: html <link>를 이용해 외부문서로 css를 가져와서 사용하는 방식

common.css 파일이 있을 때,

<head>

</head>

<body>

<div>Hello</div>

</body>

(4)@import 방식

css @import를 이용하여 외부 문서로 css를 불러와 적용하는 방식

<head>

common1.css

안에

@import url("./common2.css")

=> 외부에 있는 common2.css를 가져온다

cf. import와 link 방식의 차이

: <link rel="stylesheet" href="css/common1.css">

=> link는 1,2,3을 동시에 가져오는 병렬 방식

반면에 import는 하나씩 순차적으로 가져오는 직렬 방식

: 그러므로 더 오래 걸린다 / 대신 이후 파일이 이전 파일을 활용해야 하는 경우 사용하면 좋다

3) 기본 선택자 (Selector)

: html, css를 연결해주는 역할

(1)전체 선택자(Universal Selector)

: 요소 내부의 모든 요소를 선택

: *

ex. *{

color: red;

} // 전체 글자를 모두 빨강

(2)태그 선택자

: 태그 이름으로 검색(기호 없이 순수한 태그)

ex. div, img, span, table, h1, h3

ex. li{

color: red

}

(3)클래스 선택자

클래스는 html의 전역속성

html class 속성의 값이 E인 요소 선택

: .E

ex. .orange{

color: red;

}

(4)아이디 선택자

HTML id 속성의 값이 E인 요소 선택 (고유하게 사용해야 한다)

: #E

#orange{

color: red;

}

<li id = "orange" class = "orange"> 오렌지</li> // red

<li class = "orange"> 오렌지</li> // red X

4) 복합 선택자

: 기본 선택자를 조합해서 쓰는

(1)일치 선택자

E와 F를 동시에 만족하는 요소 선택

: EF

span.orange{ // 태그 선택자 span 클래스 선택자 orange // 두 선택자를 모두 만족할 때

color: red;

}

ex.

<li class = "orange"> // 선택 X

<span class = "orange"> // 선택

(2)자식 선택자

E의 자식 요소 F를 선택 (즉 결과적으로 E가 아닌 E안에 있는 F를 찾는 것.)

자식: 바로 아래 있는 태그

: E > F

ex. ul > .orange {

color : red;

}

<ul>

(3) 후손,자손(하위) 선택자

E의 후손(하위)요소 F를 선택

: E F

띄어쓰기가 선택자의 기호로 사용된다

E의 안에 있는 F를 선택

후손: 해당 태그 아래 있는 모든 요소

자식: 해당 태그 바로 아래 있는 요소

형제: 같은 상위 태그 아래 있는 요소

ex. div .orange { // div의 후손인 .orange를 가진 요소

color: red;

}

<div>

<ul>

</ul>

</div>

(4) 인접 형제 선택자

E의 다음 형제 요소 F 하나만 선택 (같은 부모 요소를 공유하는, 다음: next)

: E + F

=> E의 조건을 충족하는 F를 선택

.orange + li{

color: red;

}

<ul>

<li> 딸기 </li> // 빨강X

<li class = "orange">오렌지 </li> //빨강X

<li> 딸기 </li> // 빨강

(5)일반 형제 선택자

E의 다음 형제 요소 F 모두 선택

: E ~ F (E는 선택되지 않는다)

.orange ~ li{

color: red;

}

<ul>

<li> 딸기 </li> // 빨강X

<li class = "orange">오렌지 </li> //빨강X (orange는 선택되지 않는다)

<li> 딸기 </li> // 빨강

</ul>

5) 가상클래스 선택자

: 가짜 클래스를 제공하는 개념

-기본 선택자에 붙여서 사용하는 개념이다

- 앞에 : 이 붙는다 cf. :: 이 붙는 건 가상 요소 선택자

- event에 따라서 css (event는 원래 JS의 영역. 그러므로 이건 예외라고 생각하기)

(1) hover

E(기본 선택자) 에 마우스(포인터)가 올라가 있는 동안에만 E 선택

E : hover

ex.

html

<a href = "https://google.com">Google!</a>

css

a:hover{
font-weight: bold;
font-size: 20px;
}

(2)active

E를 마우스로 클릭하는 동안에만 E 선택

E:active

(3) focus

E가 포커스된 동안에만 E 선택

E: focus

대화형 콘텐츠에서 사용 가능

=> input, img, tabindex 등

=> input 박스에 커서를 누르면 focus가 된다

(4) first-child

E가 형제 요소 중 첫번째 요소라면 선택

E: first-child

.fruits li: first-child{ // 클래스 (의 후손) li 태그들 중 :(가상 클래스 선택자) first-child를 선택

color: red;

}

<li> 딸기 </li> // red

(5) last-child

E가 형제 요소 중 마지막 요소라면 선택

E: last-child

.fruits li: last-child{

color: red;

}

<li> 망고 </li> // red

</ul>

(3)nth-child

: E가 형제 요소 중 n번째 요소라면 선택

같은 부모 요소 아래 있는 모든 태그들 중에서 n번째

n 키워드 사용시 0부터 해석 (zero-base)

E:nth-child(n)

.fruits li: nth-child(2){

color: red;

}

<li> 사과 </li> // red

</ul>

.fruits li: nth-child(2n){ //n은 0부터 시작하니까 : 0,2,4,6,8..

color: red;

}

<li> 사과 </li> // red (2번째)

<li> 망고 </li> // red (4번째)

</ul>

.fruits li: nth-child(n+3){ //n은 0부터 시작하니까 : 3번째 요소부터 이후 요소들을 선택

color: red;

}

<li> 오렌지 </li> // red(3번째)

<li> 망고 </li> // red (4번째)

</ul>

cf. -child 주의사항

: .fruits p: nth-child(1){ // fruits 클래스의 후손 중 형제 요소들 중 lst child를 찾는데

그게 p가 아니라서 먹히지 않음

즉 오른쪽에서 왼쪽으로 해석하는 방식이 더 맞다

color: red;

}

</ul>

.box-group div:first-child{ // box-group의 모든 div태그들 중에서 첫번째인 친구들 모두 선택

//1만 잡고 싶으면 .box-group > div:first-child(자식 선택자)

// 조건이 자유롭기 때문에 box-group의 후손 중 첫번째인 1, 3-1을 선택한다 ( .box-group :first-child
color: red;
font-weight: bold;
}

3-1

3-2

3-3

(4)nth-of-type

: E의 타입(태그이름)과 동일한 태그인 형제 요소 중 E가 n번째 요소라면 선택 [태그별로, 클래스나 아이디가 아니라!]

(n 키워드 사용시 0부터 해석(zero-base))

E:nth-of-type(n)

.fruits p:nth-child(1){ // 사과가 선택되지 않는다
color: red;
}

.fruits p:nth-of-type(1){ // 사과 선택
color: red;
}

(5)부정 선택자

: S가 아닌 E 선택

E: not(S)

- S선택자를 제외하고 찾는다

[.red가 없는 li 선택]

.fruits li:not(.red){
color:red;
}

6)가상 요소 선택자

: CSS를 통해서 HTML에 가상 요소를 생성해서 사용한다

(1)before

E요소 내부의 앞에 내용을 삽입

content: "" 속성이 꼭 있어야 작동한다

E :: before

ex. div :: before

div 태그의 내용의 앞에 가상 요소가 생긴다

이를 이용해서 추가적으로 CSS를 입히거나 할 수 있다

ul li::before{
content: "숫자"; // 매우 중요. ul 후손 li의 내용 앞에 내용으로 숫자를 넣는다

// content속성은 가상 요소를 만들어준다 - 이용할 수 있는 sth이다

//내용을 넣지 않아도 ""로 빈칸은 꼭 있어야 한다

}

숫자1

숫자2

숫자3

숫자4

숫자5

숫자6

숫자7

숫자8

숫자9

숫자10

(2)after

E요소 내부의 뒤에 내용을 삽입

E::after

img 첨부하기 : 사용하고자 하는 이미지 - 개발자 도구 왼쪽 상단 커서로 선택 - 상대경로였으면 우클릭해서 open in new tab - 절대경로 복붙해서 사용 - after쓰면서 content: 속성으로 url("경로")로 사용

cf. 가상 요소 선택자도 ":" 하나로 작동하긴 하지만 가상 클래스 선택자와 구분하기 위해 꼭 :: 두개 쓰기

6)속성 선택자 (attruibute selectors)

html도 속성이 있고 <div class = ""> - attribute

css도 속성이 있다 color: red; - property

(1)[attr]: 속성 attr을 포함한 요소 선택

해당 property가 있는 요소를 선택하게 된다

HTML

<input type="text" value="HEROPY">
<input type="password" value="1234">
<input type="text" value="disabled text"
disabled> // 아래 CSS에서 [attr]을 사용해서 선택된다

CSS

[disabled]{
color:red;
}

(2) [attr = value]

속성 attr을 포함하여 속성 값이 value인 요소 선택

HTML

CSS

[type="password"]{ //"" 생략 가능
color:red;
}

(3)[attr^=value]

속성 attr을 포함하여 속성 값이 value로 시작하는 요소 선택

HTML

CSS

[class^="btn-"]{
font-weight: bold;
border-radius: 20px;
}

(4)[attr$=value]

속성 attr을 포함하여 속성 값이 value로 끝나는 요소 선택

HTML

CSS

[class$="danger"]{
color: red;
}
[class$="success"]{
color: green;

7)상속

: 조상요소로부터 하위 요소로 css의 명령, 속성들이 상속될 수 있다는 의미

CSS

.ecosystem{

color: red;

}

HTML

<div class="ecosystem">생태계</div> // 이 안에 있는 모든 하위 요소에게 영향을 미쳐 모두 red

<div> 동물

<div> 호랑이

<div> 식물

<div> 장미

=> ecosystem을 선택하면 이 모든 태그가 다 선택된다

[상속되는 속성들] // 주로 글자와 상관이 있다

font

- size

- weight

- style

- line-height

- font-family

color

text-align

text-indent

text-decoration

letter-spacing

opacity

[강제 속성] // 필요에 의해서 원래 상속되지 않는 속성을 자식 요소에 임의로 상속시키는 방법

CSS에서 자식요소 {부모의 속성: inherit}를 한다

단, 자식을 제외한 후손에게는 적용되지 않으며 모든 속성이 강제 상속을 사용할 수 있는 것은 아니다

</div>

.parent{

position: absolute // 원래 상속되지 않는 속성과 값

}

.child{

postion: inherit; //부모 요소의 속성이 바뀌어도 그대로 상속 받는다 (positon: absolute과 같은 효과)

// 부모의 속성: inherit

}

8)우선 순위

<body>

<div id="color_yellow" class="color_green" style="color:orange">Hello World!</div>

CSS

div {color: red !important} // 태그 선택자 1위

#color_yellow{color: yellow;} // 아이디 선택자

.color_green{color: green;} // 클래스 선택자

div{color: blue }

*{color: darkblue} //전체 선택자

body{color: violet} // 태그 선택자

[우선 순위를 결정하는 방법 ]

같은 요소가 여러 선언의 대상이 도리 경우 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법

1)명시도 : 명시도 점수가 높은 선언

2)선언 순서 : 점수가 같은 경우, 가장 마지막에 해석(늦게 작성한)되는 선언

3)중요도 : '상속' 규칙보다 우선/ !important가 적용된 선언 방식이 다른 모든 방식보다 우선

ex. 위의 예시의 body는 직접 선언이 아닌 상속을 통해 간접적으로 적용되는 것. 그러므로 중요도가 떨어진다

우선 순위

1. 가장 중요 (!important)

:모든 선언을 무시하고 가장 우선

2. 인라인 선언 방식 [1000점]

: 인라인 선언(HTML style속성을 사용 )

<div id="color_yellow" class="color_green" style="color:orange">Hello World!</div>

3.아이디 선택자 [100점]

#color_yellow{color: yellow;}

4.클래스 선택자 [10점]

.color_green{color: green;}

cf. 가상 클래스 선택자도 마찬가지

5. 태그 선택자 [1점]

div{color: blue }

cf. 가상 요소 선택자도 마찬가지

6. 전체 선택자 [0점]

*{color: darkblue}

7. 상속 선택자 [계산하지 않음]

상속 받은 속성은 항상 우선하지 않음

body{color: violet}

.list li.item{color: red;} // 클래스 태그 클래스 : 10 + 1 + 10 = 21

.list li:hover{color:red;} // 클래스 태그 (가상) 클래스 10+ 1 + 10 = 21

.box :: before {content: "Good"; color: red;} // 클래스 (가상)요소 [태그] 10+1 = 11

#submit span{color: red;} // 아이디 태그 100+1 = 101

header .menu li:nth-child(2) {color: red;} //태그 클래스 태그 (가상) 클래스 1+ 10+1+10 = 22

h1 {color: red;} // 태그 1

:not .box {color: red;} // 부정선택자 클래스 0 + 10 = 10

:not(span) {color: red;} // 부정선택자 태그 0 + 1 = 1

'패캠 네카라쿠배 도전: HTML CSS' 카테고리의 다른 글

[패캠 네카라쿠배 2기 도전] CSS/속성 - 박스 모델 (0)	2021.05.31
[패캠 네카라쿠배 2기 도전] CSS/ 단위 (1)	2021.05.28
[패캠 네카라쿠배 2기 도전]CSS/실습 환경 (0)	2021.05.27
[패캠 네카라쿠배 2기 도전] HTML/ 전역 속성, 기타 (1)	2021.05.27
[패캠 네카라쿠배 2기 도전] HTML/ 요소 - 표 콘텐츠&양식 (0)	2021.05.24

현재글[패캠 네카라쿠배 2기 도전]CSS/ 개요, 선택자, 상속

개발새발

Today :
Yesterday :

일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

개발새발