공식 문서
https://www.w3schools.com/css/default.asp
CSS(Cascading Style Sheets[캐스케이딩 스타일 시트]) 이란?
- CSS 는 HTML 이나 XML 과 같은 구조화 된 문서(Document) 를 화면, 종이 등에 어떻게 렌더링 할 것인지 정의하기 위한 언어
즉, CSS 는 HTML 의 각 요소 (element) 의 style (design, laylout ect) 을 정의하여 화면 (Screen) 등에 어떻게 렌더링하면 되는지 브라우저에게 설명하기 위한 언어 - html 의 스타일을 정의하기 위해 모여둔 것 (연쇄/연속적으로 적용)
- 특정 element 를 찾아 스타일 적용
- 하나의 css 파일로 여러 html 파일에 적용할 수 있음
- html 과 css 는 분리가 되면서 html 에 스타일을 적용한다면 웹 표준에 어긋남
- 웹 표준 (http://www.smartebiz.kr/new/subpage02_02.html)
CSS 기본 문법
- 선택자 ( Selector ) 와 선언부 ( declaration ) 로 구성
- Selector (선택자) : 스타일을 지정하려는 HTML 요소
- declaration block (선언 블록) : 세미콜론(;) 으로 구분된 하나 이상의 선언이 포함 되어 있음
- 한 줄 사용도 가능하지만, 줄바꿈 사용도 가능 (회사마다 다름)
- 서버에 올릴 땐 한 줄 사용하여 업로드 => 용량 관련
- 각 선언은 CSS 속성명과 속성값을 가지며, 그 둘은 콜론(:) 으로 연결됨
이러한 CSS 선언은 언제나 마지막에 세미콜론 (;) 으로 끝마침
선택자 선언 블록 선언 블록
h1 {color: blue; font-size:12px;}
---- ---- --------- -----
속성 값 속성 값
# 한 줄 사용
h1 {color: blue; font-size:12px;}
# 줄바꿈
h1 {
color: blue; font-size:12px;
}
CSS 사용 방법 3가지
- Internal CSS : 내부 파일 (HTML)
- External CSS : 외부 파일
- Inline CSS : Tag 내
1. Internal CSS (내부)
- CSS 가 나오기 전에 사용했던 방식
- HTML 페이지에 고유한 스타일이 있는 경우 내부 스타일 시트를 사용
- 내부 스타일은 head 섹션 내부의 <style> 요소 내부에 정의
- 스타일을 적용하기 위한 속성이 따로 있는데 구분하기 어려워 태그를 사용하지 않고, CSS 가 나온 것
# p240509/index-old.html
구조에 영향을 줌
<h2><font color="green">about</font></h2>
<h2><font color="red">aside</font></h2>
<h2><font color="blue">contact us</font></h2>
# p240509/index-internal-style.html
<!DOCTYPE html>
<html lang="ko">
<head>
...
<style>
h2 {
color:orchid;
}
</style>
</head>
2. External CSS (외부)
- 파일 하나만 변경하여 전체 웹사이트의 모양을 변경할 수 있음
- 각 HTML 페이지에는 head 섹션 내부의 <link> 요소 내부에 외부 스타일 시트 파일에 대한 참조가 포함되어야 함
- 모든 텍스트 편집기에서 작성할 수 있으며 .css 확장자로 저장
- 외부 .css 파일에는 HTML 태그가 포함되어서는 안됨
# p240509/index-external-style.html
<!DOCTYPE html>
<html lang="ko">
<head>
// link 태그 : 연결
// rel 속성 : 현재 문서와 외부 리소스 사이의 연관 관계를 명시
<link rel="stylesheet" href="./css/basic.css">
--- --- ---------- --------------
연결 경로
</head>
...
</html>
# p240509/css/basic.css
h2 {
color: skyblue;
}
p {
color: aquamarine
}
방법 1번을 주로 사용함
<head>
<!-- 외부 css 파일 연결 -->
<!-- [방법 1] -->
<!-- rel : relationship -->
<link rel="stylesheet" href="./css/basic.css">
<!-- [방법 2] -->
<style>
@import url(css/basic.css);
@import "css/basic.css"; // 문자열
</style>
</head>
3. Inline CSS (태그 내)
- 태그에 속성을 넣어준 것, 구조에 영향을 주지 않았음 (old 방식은 영향을 줌)
- 단일 요소에 고유한 스타일을 적용하는 데 사용될 수 있음
- 스타일 속성에는 모든 CSS 속성이 포함될 수 있음
- 스타일시트의 많은 장점(컨텐츠와 프리젠테이션 혼합)을 잃을 수 있어 이 방법은 선호 x
#p240509/index-inline-style.html
<!DOCTYPE html>
<html lang="ko">
<head>
...
</head>
<body>
...
<h2 style="color: blueviolet;">main menu</h2>
</body>
</html>
CSS Selectors 종류
1. Simple selectors
2. Combinator selectors
3. Pseudo-class selectors
4. Pseudo-elements selectors
5. Attribute selectors
1. Simple selectors
: 이름(태그), ID, 클래스를 기준으로 요소 선택
Type Selector (태그 선택자)
- 태그명 : 모든 지정된 태그명을 가지는 요소 선택
p {
color: red;
}
Universal Selector(전체 선택자)
- * : HTML 문서 내의 모든 요소를 선택, 아스테리크
* {
color: blue;
}
ID Selector(ID 선택자)
- #id명 : 그 이름을 가진 id를 선택
- id는 중복 x
#ex {
background-color: aqua;
}
Class Selector(Class 선택자)
- .class명 : 그 이름을 가진 class 선택
- class는 중복이 가능
.first-classn {
background-color: #ff0;
}
구체적으로 지정할 때
- 태그명.class명, 태그명#id명, #id명.class명 등: 띄어쓰기 안함
p.center {
text-align: center;
color: red;
}
Grouping Selector(여러개 지정)
- 여러 개의 선택자를 사용할 때 , (콤마) 사용
h1, h2 {
border-style: solid;
}
2. Combinator selectors
: 요소 간의 특정 관계를 기반으로 요소 선택
Child Selector(자식 선택자)
- 부모A > 자식B : 부모의 자식(자손, 한 단계 아래의 하위 요소) 중에서 B와 일치하는 요소를 선택
- 부모는 선택하지 않음
- 자식을 가리킬 땐 > (꺽쇠) 사용
div > span {
color: gray;
}
Descendant Selector(후손 선택자)
- 부모A 후손B : 부모의 후손(모든 하위 요소) 중에서 B와 일치하는 요소를 선택
- 부모는 선택하지 않음
- 자손을 가리킬 땐 띄워쓰기로 구분
#ex span {
background-color: aqua;
}
Adjacent Sibling Selector(인접 형제 선택자)
- A + B : A의 형제 요소 중 A 바로 뒤에 위치하는 B 요소를 선택
- A와 B 사이에 다른 요소가 존재하면 선택되지 않음
/* + : 인접한 형제 */
#header > p+p {
border: 3px solid black;
}
General Sibling Selector(일반 형제 선택자)
- A ~ B : A의 형제 요소 중 A 뒤에 위치하는 B 요소를 모두 선택
/* ~(틸드) : 입접하지 않아도 모든 형제 적용 */
#container ol~p {
background-color: lightblue;
}
3. Pseudo-class selectors
: 특정 상태에 따라 요소 선택
: 사용자가 요소 위로 마우스를 가져갈 때 요소 스타일 지정 (hover)
: 방문한 링크, 방문하지 않은 링크의 스타일을 다르게 지정 (link / visited)
: 포커스가 있을 때 요소 스타일 지정 (특정 element 인식)
child
- CSS2
- :first-child : 부모의 첫번째 자식중에서 해당 요소를 선택
큰 단점 : 꼭 부모의 첫 번째 자식만 해당이 됨 - :last-child : 부모의 마지막 자식중에서 해당 요소를 선택
- :nth-child(n) : 부모의 n번째 자식중에서 해당 요소를 선택
- :nth-last-child(n) : 부모의 끝에서 n번째 자식중에서 해당 요소를 선택
type
- CSS3
- :first-of-type : 같은 유형의 첫번째 형제 선택. 형제 요소 중 자신의 유형과 일치하는 제일 첫 요소
- :last-of-type : 같은 유형의 마지막 형제 선택. 형제 요소 중 자신의 유형과 일치하는 제일 마지막 요소
- :nth-of-type(n) : 같은 유형의 n번째 형제 선택. 형제 요소 중 자신의 유형과 일치하는 n번째 요소
- :nth-of-type(2n +1) : 홀수 자식
- :nth-of-type(odd) : 홀수 자식
- :nth-of-type(2n) : 홀수 자식
- :nth-of-type(even) : 홀수 자식
- :nth-last-of-type(n) : 같은 유형의 끝에서 n번째 형제 선택. 형제 요소 중 자신의 유형과 일치하는 끝에서 n번째 요소
ect
- :link : 방문하지 않은 링크 일 때
- :visited : 방문한 링크 일 때
- :hover : 마우스가 올라왔을 때
- :active : 클릭한 상태일 때
- :focus : 포커스 상태일 때
/* unvisited link : 방문하지 않은 링크 */
a:link {
color: greenyellow;
/* a 태그 링크의 언더라인 삭제 */
text-decoration: none;
}
/* visited link : 방문한 링크 */
/* 기본적으로 언더라인 스타일 지원 x */
a:visited {
color: gray;
}
/* hover : 마우스를 올려 놓고 있는 상태 */
/* : 마우스를 댈 때 언더라인 보이기 */
a:hover {
color: red;
text-decoration: underline;
}
/* active : 마우스를 누르고 있는 상태 */
a:active {
color: blue;
}
/* 탭키 : 특정 element 선택될 때 */
a:focus {
background-color: yellow;
}
4. Pseudo-elements selectors
: 요소의 일부 선택 및 스타일 지정
before, after
- float 를 해지할 때 주로 사용
- ::before : 각 요소의 콘텐츠 앞에 무언가를 삽입
- ::after : 각 요소의 콘텐츠 뒤에 무언가를 삽입
h1::before {
content: "이전";
color: blue;
}
h1::after {
content: "이후";
color: red;
}
first-
- ::first-letter : 텍스트의 첫 글자에 특별한 스타일을 추가
- ::first-line : 너비가 어떻게 되든 첫 줄에 스타일 추가
p::first-letter {
font-size: 2em;
font-weight: bold;
color: aqua;
}
div::first-line {
color: blue;
background-color: yellow;
}
marker, selection
- ::marker : list 아이템 마커를 선택
- ::mark 는 모든 것을 사용할 때 사용
- 선택자 사용도 가능
- ::selection : 유저가 드래그하는 콘텐츠를 선택
div::selection {
background-color: powderblue;
color:red;
}
5. Attribute selectors
: 속성 또는 속성 값을 기반으로 요소 선택
- [attribute ] : 특정 속성을 가진 모든 요소를 선택
a[target] {
background-color: yellow;
}
- = : 모두 일치
- ^= : 시작하는
- $= : 끝나는
- *= : 일부 문자 (단어 중 일부 문자)
- ~= : 단어 (단어 일치)
/* daum 과 naver 적용 */
a[href^="https"] {
background-color: plum;
color: white;
}
/* daum 만 적용 */
a[href$="net"] {
color:blueviolet;
}
/*
일부 단어 ==> li[title*="ip"]
단어 ==> li[title~="ipsum"]
*/
li[title~="ipsum"] {
color: aqua;
}
<body>
<h1>속성으로 적용하기</h1>
<ul>
<li><a href="https://www.daum.net">daum</a></li>
<li><a href="https://www.naver.com">naver</a></li>
<li><a href="mailto:help@host.co.kr" title="mail">help</a></li>
<li title="lorem ipsum">Lorem ipsum dolor sit amet.</li>
<li title="lorem">Lorem ipsum dolor sit amet.</li>
</ul>
</body>
CSS Font
- css 초기화 작업할 때, 기존 스타일을 모두 빼고 시작
- 맑은 고딕은 sans-serif 에 속해있음
- body 에 font 속성을 부여하면 자식에 영향을 줌
- css 에 상속이 되는 속성이 있는데 그 중 하나가 font !
- 상위 요소를 찾기 위해 위로 타고 올라감
- font 는 주로 px, em(기본값), rem 사용
- 웹 브라우저(크롬) 기준이 아닌 html body 기준으로 해서 작아짐
단위 | 추가 설명 | |
절대값 단위 (인쇄용) |
- cm - mm - pt(포인트) - pc(파이카) |
|
상대값 단위 (웹, 스크린) |
- px (1 픽셀을 1로 하는 단위) - em (~배, 상위 요소 기준) - rem (~배, 최상위 요소 [HTML] 기준) - % (비율, 상위 요소 기준[부모/조상]) |
- px : 설정에 따라 달라짐 - em 단점 : 상위 요소가 em 인 경우 값이 너무 커짐 이를 해결하기 위해 rem 이 나옴 - rem : HTML5 부터 추가 body 가 스타일이 있으도 상위 요소와 관련이 없음 - % : 폰트에서 잘 안 쓰고, 이미지에서 사용 |
/* https://www.w3schools.com/css/css_font.asp */
/* css 초기화 작업할 때, 기존 스타일을 모두 빼고 시작 */
/* 맑은 고딕은 sans-serif 에 속해있다 */
/* font-family : 폰트의 종류 */
CSS Text
word-break 와 text-align 차이점
- 텍스트 정력과 줄바꿈
<head>
<style>
.content1, .content2 {
width: 300px;
border: 3px solid black;
}
</style>
</head>
<head>
<style>
.content1, .content2 {
width: 300px;
border: 3px solid black;
}
.content2 {
text-align: justify; // 추가
}
</style>
</head>
<head>
<style>
.content1, .content2 {
width: 300px;
border: 3px solid black;
}
.content2 {
text-align: justify;
}
.content1 {
word-break: break-all;; // 추가
}
</style>
</head>
<head>
<style>
.content1, .content2 {
width: 300px;
border: 3px solid black;
}
.content2 {
text-align: justify;
}
.content1 {
word-break: break-all;
}
.white {
width: 400px;
background-color: aquamarine;
/* pre 태그와 비슷한 속성 */
/*
wrap : 자동 줄바꿈(기본값)
nowrap : 자동 줄바꿈 해제
pre : pre 태그처럼 입력된 대로 표현(기존적으로 nowrap)
pre-wrap : 자동 줄바꿈
pre-line : 왼쪽 공백 제거
*/
white-space: pre-line;
}
</style>
</head>
CSS list
<style>
.ex {
/* bullet 블릿 제거 */
/* list-style: none; */
/* bullet 블릿 위치 */
/* outside(기본값) | inside */
list-style-position: outside;
/* disc(검은색원) | circle(흰색원) | square(검은색네모) */
/* hangul(가나다..) | hangul-consonant(ㄱㄴㄷ..) */
list-style-type: hangul;
}
</style>
CSS box-maodel
selector 예제
p240509/ex01
기본 사용 방법
<!DOCTYPE html>
<html lang="ko">
<head>
<title>[선택자] 사용법 1</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 선택자 : 태그 이름, id 값, 클래스 값 지정 */
/* 모든 span 변경 */
span {
color:green;
}
/* css 는 연속적이라 마지막 선언으로 스타일 적용, 우선 순위가 있지만 나중에 정리 */
span {
color:blue;
}
/* 자식을 가리킬 땐 ">" (꺽쇠) */
div > span {
color: gray;
}
/* class => . / id => # */
.first-class > span {
background-color: #ff0;
}
/* 자손을 가리킬 땐 공백 */
#ex span {
background-color: aqua;
}
/* 여러 개의 선택자를 사용할 때 콤마 사용 */
/* h1 {border-style: solid;}
h2 {border-style: solid;} */
h1, h2 {
border-style: solid;
}
</style>
</head>
<body>
<div id="ex">
<h1>Heading 1</h1>
<h2>Heading 2-1</h2>
<div class="first-class">
<span>span tag 1</span>
<p>
<span>span tag 2</span>
</p>
</div>
<span>span tag 3</span>
</div>
<!-- -->
<div class="secound-class">
<h2>Heading 2-2</h2>
<span>span tag 4</span>
</div>
<!-- -->
<span>span tag 5</span>
</body>
</html>
p240509/ ex02
속성과 값 관련되어 스타일 적용할 때
<!DOCTYPE html>
<html lang="ko">
<head>
<title>[선택자] 사용법 2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/*
속성과 값이 모두 일치할 때 ==> a[href="https://www.daum.net"]
=============================================================
^= 시작하는
$= 끝나는
*= 일부 문자 (단어 중 일부 문자)
~= 단어 (단어 일치)
=============================================================
*/
/* daum 과 naver 적용 */
a[href^="https"] {
background-color: plum;
color: white;
}
/* daum 만 적용 */
a[href$="net"] {
color:blueviolet;
}
/*
일부 단어 ==> li[title*="ip"]
단어 ==> li[title~="ipsum"]
*/
li[title~="ipsum"] {
color: aqua;
}
</style>
</head>
<body>
<h1>속성으로 적용하기</h1>
<ul>
<li><a href="https://www.daum.net">daum</a></li>
<li><a href="https://www.naver.com">naver</a></li>
<li><a href="mailto:help@host.co.kr" title="mail">help</a></li>
<li title="lorem ipsum">Lorem ipsum dolor sit amet.</li>
<li title="lorem">Lorem ipsum dolor sit amet.</li>
</ul>
</body>
</html>
p240509/ ex03
a 태그의 가상 클래스 사용할 때 주의 사항 (순서 지키기)
1. link / visited -> 2. hover -> 3. active
<!DOCTYPE html>
<html lang="ko">
<head>
<title>[선택자] 사용법 3</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/*
[ a 태그의 가상 클래스 사용할 때 주의 사항]
(순서 지키기)
1. link / visited -> 2. hover -> 3. active
*/
/* unvisited link : 방문하지 않은 링크 */
a:link {
color: greenyellow;
/* a 태그 링크의 언더라인 삭제 */
text-decoration: none;
}
/* visited link : 방문한 링크 */
/* 기본적으로 언더라인 스타일 지원 x */
a:visited {
color: gray;
}
/* hover : 마우스를 올려 놓고 있는 상태 */
/* : 마우스를 댈 때 언더라인 보이기 */
a:hover {
color: red;
text-decoration: underline;
}
/* active : 마우스를 누르고 있는 상태 */
a:active {
color: blue;
}
/* 탭키 : 특정 element 선택될 때 */
a:focus {
background-color: yellow;
}
</style>
</head>
<body>
<h1>prseudo-class (가상 클래스)</h1>
<!--
: 사용자가 요소 위로 마우스를 가져갈 때 요소 스타일 지정 (hover)
: 방문한 링크, 방문하지 않은 링크의 스타일을 다르게 지정 (link/visited)
: 포커스가 있을 때 요소 스타일 지정 (특정 element 인식)
-->
<ol>
<li><a href="https://www.naver.com">naver</a></li>
<li><a href="www.daum.net">daum</a></li>
<li><a href="https://www.atom.io">atom</a></li>
</ol>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa tempore cumque deserunt porro rem! Quos fugit quam optio maxime consequatur unde illo, cupiditate temporibus, provident quidem vitae et rem recusandae.</p>
</body>
</html>
p240509/ ex04
첫 번째 단락에 마우스를 올렸을 때
<!DOCTYPE html>
<html lang="ko">
<head>
<title>[선택자] 사용법 4</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 첫 번째 단락에 마우스를 올렸을 때 */
p:hover {
background-color: aqua;
}
</style>
</head>
<body>
<h1>prseudo-class (가상 클래스)</h1>
<p>첫 번째 단락 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ducimus amet eius, exercitationem suscipit quam mollitia ratione excepturi? Dolore tempore velit assumenda pariatur eius exercitationem veritatis obcaecati repudiandae non est?</p>
<div>두번째 번째 단락 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ducimus amet eius, exercitationem suscipit quam mollitia ratione excepturi? Dolore tempore velit assumenda pariatur eius exercitationem veritatis obcaecati repudiandae non est?</div>
</body>
</html>
p240509/ ex05
가상 엘리먼트 사용시, 플롯 해제 할 때
<!DOCTYPE html>
<html lang="ko">
<head>
<title>[선택자] 사용법 5</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* float(플롯) 해제 */
/* h1 의 content 도 자식, 처음과 끝에 추가할 수 있음 */
/* :: 가상 element, content 는 "" 사용 */
/* 시작 부분에 content 추가 */
h1::before {
content: "이전";
color: blue;
}
/* 끝 부분에 content 추가 */
h1::after {
content: "이후";
color: red;
}
</style>
</head>
<body>
<h1>pseudo-element</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id cupiditate quas quia quisquam consectetur aperiam fuga
eligendi impedit. Ipsam saepe fugit incidunt et corrupti voluptatem reiciendis ullam facere dolorem explicabo.</p>
</body>
</html>
p240509/ ex06
여러 단락 중 첫 단락, 첫 단어, 첫 글자를 크게 강조하고 싶을 때,
너비가 어떻게 되든 첫 번째 줄에 배경색 넣기
<!DOCTYPE html>
<html lang="ko">
<head>
<title>[선택자] 사용법 6</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 여러 단락 중 첫 단락, 첫 단어의 첫 문자를 크게 강조하고 싶을 때 */
/* first-letter : 첫 번째 문자 인식 */
p::first-letter {
font-size: 2em;
font-weight: bold;
color: aqua;
}
/* 너비가 어떻게 되든 첫번째 줄에 배경색 넣기 */
div::first-line {
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<h1>pseudo-element</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error illum labore odit minus iure dolor maxime veritatis ipsa quae, ad, corrupti dicta molestiae repellat quam aliquid quasi quaerat esse nesciunt.</p>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ut quasi aspernatur libero beatae ea eligendi provident voluptates molestiae nisi ipsa, adipisci eum fugit possimus natus ab. Dolore, nemo autem!</div>
</body>
</html>
p240509/ ex07
블럭 지정을 하면 크롬은 기본적으로 배경색이 파랑, 텍스트는 흰색인데, 따로 스타일 지정할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>[선택자] 사용법 7</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 블럭 지정을 하면 크롬은 파랑, 따로 배경색을 바꿀 수 있음 */
/* 첫 번째 단락만 스타일 적용 */
div::selection {
background-color: powderblue;
color:red;
}
</style>
</head>
<body>
<h1>pseudo-element</h1>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus voluptas dignissimos ab ullam nam delectus soluta quae nisi eligendi qui dicta unde esse doloremque minus dolorem quibusdam sequi, maiores ducimus?</div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. A, sit! Pariatur fugit, iste dolor, delectus nostrum expedita minus sunt adipisci porro dignissimos ut sequi ipsa quas. Molestias impedit sunt dolores.</p>
</body>
</html>
p2405010/selector-priortiy
선택자 우선 순위
<body>
<h1>CSS selector</h1>
<div class="sample" id="sample" style="background-color: pink;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit error praesentium, labore ut obcaecati dignissimos, eum libero quisquam neque, voluptate rerum. Numquam hic iusto facilis ratione quo reprehenderit iste adipisci.
</div>
</body>
<head>
<style>
/* 우선 순위 : tag(yellow) < tag(green) */
div {background-color: yellow;}
div {background-color: green;}
</style>
</head>
<head>
<style>
/* 우선 순위 : tag(yellow) < tag(green) < class(red) */
.sample {background-color: red;}
div {background-color: yellow;}
div {background-color: green;}
</style>
</head>
<head>
<style>
/* 우선 순위 : tag(yellow) < tag(green) < class(red) < id(blue) */
div {background-color: yellow;}
div {background-color: green;}
#sample {background-color: blue;}
.sample {background-color: red;}
</style>
</head>
<head>
<style>
/* 우선 순위 :
tag(yellow) < tag(green) < class(red) < id(blue) < tag+class+id(gray) */
div.sample#sample {background-color: gray;}
.sample {background-color: red;}
div {background-color: yellow;}
div {background-color: green;}
#sample {background-color: blue;}
</style>
</head>
<body>
<h1>CSS selector</h1>
<div class="sample" id="sample" style="background-color: pink;"> // style 추가 !
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit error praesentium, labore ut obcaecati dignissimos, eum libero quisquam neque, voluptate rerum. Numquam hic iusto facilis ratione quo reprehenderit iste adipisci.
</div>
</body>
<head>
<style>
/* 우선 순위 :
tag(yellow) < tag(green) < class(red) < id(blue) < tag+class+id(gray) < inline-style(pink) */
div.sample#sample {background-color: gray;}
.sample {background-color: red;}
div {background-color: yellow;}
div {background-color: green;}
#sample {background-color: blue;}
</style>
</head>
<body>
<h1>CSS selector</h1>
<div class="sample" id="sample" style="background-color: pink;"> // style 추가 !
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit error praesentium, labore ut obcaecati dignissimos, eum libero quisquam neque, voluptate rerum. Numquam hic iusto facilis ratione quo reprehenderit iste adipisci.
</div>
</body>
<head>
<style>
/* 우선 순위 :
tag(green) < class(red) < id(blue) < tag+class+id(gray) < inline-style(pink) < tag(yellow) !important */
div.sample#sample {background-color: gray;}
.sample {background-color: red;}
div {background-color: yellow !important;}
div {background-color: green;}
#sample {background-color: blue;}
</style>
</head>
p2405010/pseudo-class-ex01.html
가상 클래스 자식 찾아가는 방법
<body>
<h1>pseudo-class</h1>
<!-- 순서가 있는 목록 / 순서가 없는 목록 -->
<ul>
<ol>
<li>추가 항목 1</li>
<li>추가 항목 2</li>
<li>추가 항목 3</li>
</ol>
<li>1번째</li>
<li>2번째</li>
<li>3번째</li>
</ul>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt tenetur et harum libero quos! Minus delectus placeat alias, consequuntur ipsum, adipisci porro accusamus omnis architecto, fugit harum animi fugiat numquam.</p>
</body>
# 첫 번째 자식을 찾아가는 방법
# CSS2
[ 부모 ul 의 첫 번째 자식 li 에 스타일 적용]
type 을 요소라 생각하면 됨
<head>
<style>
/* 부모가 누구든 첫 번째 li 에 스타일 적용 */
li:first-child {
background-color: yellow;
}
</style>
</head>
# 첫 번째 자식을 찾아가는 방법
# CSS2
[ 부모 ul 의 첫 번째 자식 li 에 스타일 적용]
type 을 요소라 생각하면 됨
<head>
<style>
/* 가장 큰 단점 : 꼭 ul 의 첫 번째 자식이어야 하는데, 현재 ol 이라 스타일 적용할 수 없음 */
/* 부모가 ul 인 엘리먼트의 첫 번째 자식 li */
ul>li:first-child {
background-color: yellow;
}
</style>
</head>
# 첫 번째 자식을 찾아가는 방법
# CSS3
<head>
<style>
/* 부모가 누구든 첫 번째 li */
li:first-of-type {
background-color: yellow;
}
</style>
</head>
# 첫 번째 자식을 찾아가는 방법
# CSS3
<head>
<style>
/* 부모가 ul 인 li 중 첫 번째 li */
ul>li:first-of-type {
background-color: yellow;
}
</style>
</head>
p2405010/pseudo-class-ex02.html
마지막 자식을 찾아가는 방법
<body>
<h1>pseudo-class</h1>
<ul>
<ol>
<li>추가 항목 1</li>
<li>추가 항목 2</li>
<li>추가 항목 3</li>
</ol>
<li>첫 번째</li>
<li>두 번째</li>
<li>세 번째</li>
<ol>
<li>아이템 1</li>
<li>아이템 2</li>
<li>아이템 3</li>
<li>아이템 4</li>
</ol>
</ul>
</body>
<head>
<style>
/* 부모가 ul 를 둔 자식 li 마지막 자식은 ol 라 스타일 적용 안됨 */
ul>li:last-child {
background-color: rgb(87, 207, 255);
}
</style>
</head>
<head>
<style>
/* 부모 ul 를 둔 자식 li 중 마지막 li */
ul>li:last-of-type {
background-color: rgb(87, 207, 255);
}
</style>
</head>
p2405010/pseudo-class-ex03.html
부모의 n번째 자식 중 해당 요소 선택
<body>
<h1>pseudo-class</h1>
<ol>
<li>항목 1</li>
<ul>
<li>추가</li>
<li>추가</li>
<li>추가</li>
</ul>
<li>항목 2</li>
<li>항목 3</li>
<li>항목 4</li>
<li>항목 5</li>
<li>항목 6</li>
<li>항목 7</li>
<li>항목 8</li>
<li>항목 9</li>
<li>항목 10</li>
</ol>
</body>
<head>
<style>
/* -------CSS2------- */
/* nth-child(n) : 부모의 n번째 자식 중 해당 요소 선택 */
ol>:nth-child(2) {
background-color: aqua;
}
</style>
</head>
<head>
<style>
/* -------CSS3------- */
/* 부모 ol 에 2번째 자식 li 찾아가 스타일 적용 */
ol>:nth-of-type(2) {
background-color: aqua;
}
</style>
</head>
<head>
<style>
/* -------CSS3------- */
/* 부모 ol 에 홀수 자식 */
/* [방법 1] */
ol>li:nth-of-type(2n+1) {
background-color: rgb(190, 213, 255);
}
/* [방법 2] */
ol>li:nth-of-type(odd) {
background-color: rgb(190, 213, 255);
}
</style>
</head>
<head>
<style>
/* -------CSS3------- */
/* 부모 ol 에 짝수 자식 */
/* [방법 1] */
ol>li:nth-of-type(2n) {
background-color: rgb(255, 207, 215);
}
/* [방법 2] */
ol>li:nth-of-type(even) {
background-color: rgb(255, 207, 215);
}
</style>
</head>
p2405010/font-ex01.html
부모의 n번째 자식 중 해당 요소 선택
p2405010/font-ex02.html
부모의 n번째 자식 중 해당 요소 선택
p2405010/font-ex03.html
부모의 n번째 자식 중 해당 요소 선택
p2405010/font-ex04.html
부모의 n번째 자식 중 해당 요소 선택
참고 블로그
https://velog.io/@juyeonma9/CSS-Selector-%EC%A0%95%EB%A6%AC
'Language > HTML & CSS & JavaScript' 카테고리의 다른 글
[HTML/CSS] float 을 활용하여 레이아웃 잡고, 해제하기 (0) | 2024.05.16 |
---|---|
[HTML/CSS] table 태그로 테이블 만들고 style 적용하기 (0) | 2024.05.16 |
004. 웹 표준 활용 Web Front 개발 - HTML (0) | 2024.05.03 |
003. 디자인씽킹 활용 프로젝트 준비 (0) | 2024.04.26 |
[CSS] 마우스 갖다댈 때 손모양 커서로 바꾸기 - cursor 속성 (0) | 2024.04.26 |