<11> HTML & CSS

[문법]

선택자 { ex) div {

속성: 속성값; color: red; /* 여기는 주석부분입니다 */

} }

선택자의 역할: 속성과 값을 지정할 대상을 검색

속성과 값의 역할: 검색된 대상에 지정될 CSS 명령

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

[선언방식]

인라인 방식: HTML 요소(태그)의 'style' 속성에 직접 작성하는 방식

ex) <div style="color: red; ">HELLO </div>

내장방식: HTML <style></style> 안에 작성하는 방식

ex)<head>

<style>

div {color: red;}

</style>

</head>

<body>

<div>HELLO</div>

</body>

링크방식: HTML<link>를 이용하여 외부 문서로 CSS를 불러와 적용하는 방식(추천방식)

병렬방식 호출

ex)HTML:

<head>

</head>

<body>

<div>HELLO</div>

</body>

------------------------------------------------------------------

CSS(common.css): div { color: red; }

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

링크방식과 차이점은 링크는 html문서에서 링크를 이용해 가져오고 import방식은 css에서 외부 css를 가져옴

직렬방식 호출(1번이 다 불러와지면 2번이 불러와지는 방식, 시간이 오래걸릴 수 있음)

ex)HTML:

<head>

</head>

<body>

<div>HELLO</div>

</body>

--------------------------------------------------------------------

CSS(common1.css): @import url("./common2.css"); /* ./이기 때문에 상대경로 */

---------------------------------------------------------------------

CSS(common2.css): div { color: red; }

[선택자]

기본선택자:

1. 전체선택자: (요소내부의)모든 요소를 선택, * 사용

ex) * { color: red;}

----------------------------------------------------------

</ul>

</div>

2. 태그 선택자: 태그이름이 E(요소=태그)인 요소 선택

ex) li { color: red;}

----------------------------------------------------------

<div>

<ul>

</ul>

</div>

3. 클래스선택자: HTML class 속성의 값이 E인 요소 선택, .사용

ex) li { color: red;}

----------------------------------------------------------

<div>

<ul>

</ul>

</div>

4. 아이디 선택자: HTML id 속성의 값이 E인 요소 선택, #사용

ex) #orange { color: red;}

----------------------------------------------------------

<div>

<ul>

</ul>

</div>

복합선택자:

1. 일치 선택자: E와 F를 동시에 만족하는 요소 선택, EF

ex) span.orange { color: red;} /* span태그이면서 class가 orange를 찾아라 */

----------------------------------------------------------

<div>

<ul>

</ul>

</div>

2. 자식 선택자: E의 자식 요소 F를 선택, E > F

ex) ul > .orange { color: red;} /* ul의 자식중 orange인 class를 찾아라 */

----------------------------------------------------------

<div>

<ul>

</ul>

</div>

3. 후손(하위) 선택자: E의 후손(하위) 요소 F를 선택, E F(띄어쓰기가 선택자의 기호로 사용됨)

ex) div .orange { color: red;} /* div후손 중에 orange인 class를 찾아라 */

----------------------------------------------------------

<div>

<ul>

</ul>

</div>

4. 인접 형제 선택자: E의 다음 형제 요소 F하나만 선택, E + F

ex) .orange + li { color: red;} /* div후손 중에 orange인 class를 찾아라 */

----------------------------------------------------------

<ul>

</ul>

5. 인접 형제 선택자: E의 다음 형제 요소 F 모두 선택, E - F

ex) .orange - li { color: red;} /* div후손 중에 orange인 class를 찾아라 */

----------------------------------------------------------

<ul>

</ul>

가상 클래스 선택자(:을 이용):

1. HOVER: E에 마우스(포인터)가 올라가 있는 동안에만 E선택, E:hover

같이 많이 쓰는게 transition인데 자연스럽게 모양을 변환

ex) .box {

width: 100px;

transition:0.4s;

}

.box:hover { width: 200px;}

2. ACTIVE: E를 마우스로 클릭하는 동안에만 E선택, E:active

3. FOCUS: E가 포커스 된 동안에만 E선택, E:focus

대화형 콘텐츠(ex. input, img, tabindex 등)에서 사용가능

4. FIRST CHILD: E가 형제 요소 중 첫번째 요소라면 선택, E:first-child

ex) .fruits li:first-child { color: red;} /* fruits클래스를 가진 태그의 후손중에(띄어쓰기) li 중 첫번째를 찾아라*/

----------------------------------------------------------

</ul>

5. LAST-CHILD: E가 형제 요소 중 마지막 요소라면 선택, E:last-child

ex) .fruits li:last-child { color: red;} /* fruits클래스를 가진 태그의 후손중에(띄어쓰기) li 중 마지막을 찾아라*/

----------------------------------------------------------

</ul>

6. NTH CHILD: E가 형제 요소 중 n번째 요소라면 선택, n키워드 사용시 0부터 해석, E:nth-child(n)

ex1) .fruits li:nth-child(2) { color: red;} /* fruits클래스를 가진 태그의 후손중에(띄어쓰기) li 중 두번째를 찾아라*/

/*.fruits li:nth-child(2n) { color: red;} fruits클래스를 가진 태그의 후손중에 li 중 짝수번을 찾아라*/

/*.fruits li:nth-child(n+3) { color: red;} fruits클래스를 가진 태그의 후손중에 li 중 3번째번 이상을 찾아라*/

----------------------------------------------------------

</ul>

ex2) .fruits p:nth-child(1) { color: red;}

/* 여기서 조건을 살펴보면 nth-child(1)은 <div>딸기</딸기>를 말하는데 p태그가 아니기 때문에 조건이 성립하지 않음 */

/* nth-child를 쓸때는 조건에 주의해야함, 자식 부모 형제 조건을 잘 지정해주어야함 */

----------------------------------------------------------

</div>

7. NTH OF TYPE: E의 타입(태그이름)과 동일한 타입인 형제 요소 중 E가 n번째 요소라면 선택

E:nth-of-type(n), n키워드 사용시 0부터 해석

ex) .fruits p:nth-of-child(1) { color: red;} /* fruits클래스를 가진 태그의 후손중에 p태그중 첫번째를 찾아라*/

----------------------------------------------------------

</div>

8. 부정 선택자: S가 아닌 E 선택, E:not(S)

ex) .fruits li:not(.orange) { color: red;} /* fruits클래스를 가진 태그의 후손중에 p태그중 첫번째를 찾아라*/

----------------------------------------------------------

</ul>

가상요소 선택자:

1. BEFORE: E 요소 내부의 앞에, 내용(content)을 삽입, E::before

tip) ul>li{숫자$}*20

ul 자식으로 li태그 3개를 만들건데 내용은 숫자$이고 $는 순서대로 1,2,3...20으로 들어감

ex) ul li::before { content: "숫자"; }

----------------------------------------------------------

</ul> </ul>

2. AFTER: E 요소 내부의 뒤에, 내용(content)을 삽입, E::after

ex) ul li::after{ content: ".0"; }

----------------------------------------------------------

</ul> </ul>

속성 선택자:

1. ATTR: 속성 attr을 포함한 요소 선택, [attr]

ex) [disabled] { opacity: 0.2; } /* 투명도 20% */

----------------------------------------------------------

2. ATTR=VALUE: 속성 attr을 포함하며 속성 값이 value인 요소 선택, [attr=value]

ex) [type="password"] { opacity: 0.2; } /* ""는 생략가능*/

----------------------------------------------------------

3. ATTR^=VALUE: 속성 attr을 포함하며 속성 값이 value로 시작하는 요소 선택, [attr^=value]

ex) [class^="btn-"] { font-weight: bold; } /* 글씨 굵게 */

----------------------------------------------------------

<button class="btn-success">Success</button>

<button class="btn-danger">Danger</button>

<button>Normal</button>

4. ATTR$=VALUE: 속성 attr을 포함하며 속성 값이 value로 끝나는 요소 선택, [attr$=value]

ex) [class$="success"] { color:red; } /* 글자색 빨강 */

----------------------------------------------------------

<button class="btn-success">Success</button>

<button class="btn-danger">Danger</button>

<button>Normal</button>

[상속]

상속: 상위요소에게만 지정한 것이 하위 요소들에게도 적용되는 것

글자를 다루는 속성들이 기본적으로 상속이 됨

상속되는 속성들: font (font-size, font-weight, font-size, line-height, font-family)

color, text-align, text-indent, text-decoration, letter-spacing, opacity 등등

강제상속: 상속되지 않는 속성(값)도 inherit 이라는 값을 사용하여 '부모'에서 '자식'으로 강제 상속시킬 수 있음

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

[우선순위]

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

1. 명시도 점수가 높은 선언이 우선(명시도)

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

3. 명시도는 '상속' 규칙보다 우선(중요도)

4. !important가 적용된 선언 방식이 다른 모든 방식보다 우선(중요도)

ex) <body>

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

</body>

---------------------------------------------------------------------------------------------------------------------

div { color: red !important; } /* !important */

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

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

div { color: blue; } /* 태그 선택자 */

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

body { color: violet; } /* 상속 */

1.가장 중요(!important): 모든 선언을 무시하고 가장 우선 → 포인트: 무한

2. 인라인 선언 방식: 인라인 선언(HTML style 속성을 사용) → 포인트: 1000

3. 아이디: 아이디 선택자 → 포인트: 100

4. 클래스: 클래스 선택자 → 포인트: 10

5. 태그: 태그 선택자 → 포인트: 1

6. 전체: 전체 선택자 → 포인트: 0

7. 상속: 상속 받은 속성은 항상 우선하지 않음 → 포인트: x

ex) .list li.item { color: red; } /* 21pt */

.list li:hover { color: red; } /* 21pt */

.box::before { content: "Good"; color: red; } /* 11pt */

:not(.box) { color: red; } /* 10pt */

:not(span) { color: red; } /* 1pt */

:hover처럼 '가상 클래스'는 '클래스' 선택자 점수(10pt)를 가지며 ::before 처럼 '가상요소'는 '태그'선택자의 점수 (1pt)를 가짐 하지만 부정 선택자 :not()은 점수를 가지지 않음

'기초 > HTML l& CSS' 카테고리의 다른 글

<13> HTML & CSS (0)	2022.08.17
<12> HTML & CSS (0)	2022.08.17
<10> HTML & CSS (0)	2022.08.05
<9> HTML & CSS (0)	2022.08.03
<8> HTML & CSS (0)	2022.08.03

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

Hyeon_E의 배움터

<11> HTML & CSS

'기초 > HTML l& CSS' 카테고리의 다른 글

댓글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

<11> HTML & CSS

'기초 > HTML l& CSS' 카테고리의 다른 글

관련글

댓글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역