[π±λͺ©μ°¨π±]
- κ°μ ν΄λμ€ μ νμ
- hover
- active
- focus
- +μ€μ΅. κ°μν΄λμ€ μ νμ
- :first-child
- :last-child
- :nth-child(n)
- :not(XYZ)
- +μ€μ΅. μ€λ¬΄λ¬ λ§λ€κΈ°
- κ°μ μμ μ νμ
- ::before
- after
- CSS μ°μ μμ
- μμ± μ νμ
- μμ± μ νμ
- μ΄μΈ μμ£Ό μ°μ΄λ CSS μμ±
- CSS λ°μ€ λͺ¨λΈ
- CSSμ 볡μ‘ν μμ± : position
- +μ€μ΅. μ λ²λ 그리기
- CSSμ 볡μ‘ν μμ± : transform
- +μ€μ΅. transition
- +μ€μ΅. μ¬μ§μκΈ°
01. κ°μ ν΄λμ€ μ νμ
μ¬μ©μμ νλμ λ°λΌ λ³ννλ κ°μ μν©μ λ°λΌμ μμ μ νμ μ¬μ©νλ μ νμλ‘ κ° μμμ μν©μ λ°λΌ μ¬μ©μκ° μνλ μμλ₯Ό μ νν λ μ¬μ©ν©λλ€. νΉμ μμλ₯Ό λΆμ ν λ μ¬μ©ν©λλ€. κ°μ ν΄λμ€ μ νμλ
- μ¬μ©μμ νλμ λ°λΌ λ³ν -> hover, active, focus,visited
- μμμ μν© -> first-child, last-child, nth-child
- λΆμ μ ν -> not
01-1 hover
μ νμ ABC(μμλ‘ μ§μ )μμμ λ§μ°μ€ 컀μκ° μ¬λΌκ° μλ λμ μ ν.
<a href="https://www.naver.com">naver</a>λΌλ νμ΄νΌλ§ν¬κ° κ±Έλ €μλ html νμΌμ
a:hover{
color : red;
}ccsλ₯Ό μμ±νλ©΄ λ§μ°μ€ 컀μλ₯Ό λ§ν¬μ μ¬λ¦¬λ©΄ μμ΄ λ³ν©λλ€.
01-2 active
μ νμ ABC(μμλ‘ μ§μ ) μμμ λ§μ°μ€λ₯Ό ν΄λ¦νκ³ μλ λμ μ ν
a:active{
color : red;
}λ€μκ³Ό κ°μ΄ μμ±ν©λλ€.
01-3 focus
μ νμ ABC(μμλ‘ μ§μ )μμκ° ν¬μ»€μ€ λλ©΄ μ νλ©λλ€.
μλ₯Ό λ€μ΄
<input type="text"/>λΌλ typeμ΄ textμΈ μμ±μ κ°μ§ μΈννκ·Έμ
input:focus{
background-color:orange;
}λ€μκ³Ό κ°μ΄ css μ½λλ₯Ό μμ±νλ©΄ textμ ν¬μ»€μ€ λλ©΄ μμ΄ λ³ν©λλ€.
+ μ€μ΅. κ°μν΄λμ€ μ νμ
- <h1>,<a>,<input type="text"νκ·Έ λ§λ€κΈ°
- <h1>νκ·Έμ λ§μ°μ€κ° μ¬λΌκ°λ©΄ κΈμκ° λΉ¨κ°μ
- <a>νκ·Έλ₯Ό ν΄λ¦ νκ³ μμΌλ©΄ λ°°κ²½μ΄ νλμ
- <input>νκ·Έμ ν¬μ»€μ€κ° κ°λ©΄ μ λ ₯μ°½μ΄ μ€λ μ§μ
solution) html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>κ°μν΄λμ€ μ νμ μ€μ΅ </title>
<!-- <link rel="stylesheet" href="./pseudo_classes_practice.css"> -->
<style>
h1:hover{
color: red;
}
a:active{
background-color: blue;
}
input:focus{
background-color: orange;
}
</style>
</head>
<body>
<h1>μ λ h1 νκ·Έμμ€ </h1>
<a href="https://www.instagram.com/h0ngminyeong/">μ μΈμ€νκ·Έλ¨κ³μ μ
λλ€. γ
γ
</a>
<input type="text" placeholder="μ΄κ³³μ focusλλ©΄ μμ΄ λ°λμ΄μ!">
</body>
</html>μ€ννλ©΄μ
μ λ h1 νκ·Έμμ€
μ μΈμ€νκ·Έλ¨κ³μ μ λλ€. γ γ
01-4 :first-child
μ νμ ABC(μμλ‘ μ§μ )κ° νμ μμ μ€ μ²«μ§ΈλΌλ©΄ μ νλλ κ°μ ν΄λμ€ μ νμ μ
λλ€. μ¬μ©μ ABC:first-child{}
μ
λλΉ.
μλ₯Ό λ€μ΄
<ul class="zoo">
<h1>λλ¬Όμ μ
λλ€.</h1>
<div>μμμ΄</div>
<li>μ¬μ</li>
<li>ν λΌ</li>
<li>νΈλμ΄</li>
<div>μ½μλΌ</div>
<li>μ½λΌλ¦¬</li>
<li>κ°μμ§</li>
</ul>μμ
λ§ν¬λ css νμΌμ΄
.zoo > *:first-child {
background-color: red;
}μ΄λ κ² λμλ€λ©΄ zoo λΌλ ν΄λμ€μμ λͺ¨λ μμμ 첫째μ λ°°κ²½μ΄ redκ° λλκ²λλ€. μμμλ htmlμ½λμμ zooν΄λμ€ μμ 첫째λ λꡬμΌκΉμ?λ°λ‘ <h1>νκ·Έλ₯Ό κ°μ§ λλ¬Όμμ
λλ€.κ° λ©λλ€. νμ§λ§ μλ₯Όλ€μ΄ .zoo > div:first-child{}λ₯Ό μ μΈνλλ° divμμκ° zoo ν΄λμ€μ 첫λ²μ§Έ μμμ΄ μλλΌλ©΄ μ΄λ»κ² λ κΉμ? μ λ΅μ μ μ©μ΄ μλλ€! μ
λλ€. μλνλ©΄ μ μ΄μ λ»μ΄ div μμκ° μ²«λ²μ§Έ μμλΌλ©΄ μ μ©μ΄ λλκ±΄λ° class zoo μμλ 첫λ²μ§Έ μμκ° h1μ΄κΈ° λλ¬Έμ
λλ€.
01-5 :last-child
μ νμ ABC(μμλ‘ μ§μ ) κ° νμ μμ μ€ λ§λ΄λΌλ©΄ μ νλλ κ°μν΄λμ€ μ νμμ λλ€. μ¬μ©μ ABC:last-child{}λ‘ μ¬μ©νλ©΄ λ©λλ€. μλ₯Ό λ€μ΄
<div class="fruits">
<span>λΈκΈ°</span>
<span>μλ°</span>
<div>μ€λ μ§</div>
<p>λ§κ³ </p>
<h3>μ¬κ³Ό</h3>
</div>λΌλ html νμΌμμ
.fruits span:last-child{
color:red;
}λΌλ css νμΌμ μμ±νλ€λ©΄ μ΄λ»κ² λ κΉμ. μ λ΅μ μ무 λ³νκ° μμ΅λλ€. μλνλ©΄ class fruitsμ μμμ€ last-childμ μμλ h3μ΄κΈ° λλ¬Έμ λλ€.
01-6 :nth-child(n)
μ νμ ABC(μμλ‘ μ§μ )κ° νμ μμ μ€ (n)μ§ΈλΌλ©΄ μ νλλ κ°μν΄λμ€ μ νμμ
λλ€. μ¬μ©μ ABC:nth-child(n){}λ‘ μ¬μ©νλ©΄ λ©λλ€. μλ₯Όλ€μ΄
<div class="fruits">
<span>λΈκΈ°</span>
<span>μλ°</span>
<div>μ€λ μ§</div>
<p>λ§κ³ </p>
<h3>μ¬κ³Ό</h3>
</div>html νμΌμμ
.fruits *:nth-child(2){
color:red;
}λΌλ css νμΌμ μμ±νκ² λλ€λ©΄ class fruitsμμ 2λ²μ§Έ νμ μμλ€μ color κ° red λ‘ λ°λκ²λλ€.
01-7 :not(XYZ)
μ νμ XYZ(μμλ‘ μ§μ ) κ° μλ ABC μμλ₯Ό μ ννλ κ°μν΄λμ€ μ νμ μ
λλ€. μ¬μ©μ ABC:not(XYZ){}λ‘ μ¬μ©νλ©΄ λ©λλ€.
μμ κ°μ html μμ
.fruits *:not(span) {
color: red;
}μ κ°μ css νμΌμ μμ±νλ€λ©΄ class fruits μ€ span μ΄ μλ λͺ¨λ μμλ€μ color κ° red λ‘ λ°λλλ€.
μ€μ΅. μ€λ¬΄λ¬ λ§λ€κΈ°
solution) css
.stripes div:nth-child(2n) {
background-color: yellow;
}
.stripes div:nth-child(2n + 1) {
background-color: navy;
}
02. κ°μ μμ μ νμ
κ°μ μμ μ νμλ μ ν λ μμμ μ, λ€μ λ³λμ content λ₯Ό μ½μ νλ μ νμλ‘ λ°λμ contentλΌλ μμ±μ μ¬μ©ν΄μΌ ν©λλ€. λν λΉ κ°("")μ΄λΌλ λ£μ΄ μ£Όμ΄μΌ μ μμ΄ λ©λλ€. μ’ λ₯λ μλμ κ°μ΅λλ€. μ€μ λ‘ μλ―Έ μλ HTML νκ·Έλ₯Ό λ§λ€μ§ μκ³ μμ μ½μ μ΄ κ°λ₯νμ¬ μμ£Ό μ¬μ©ν©λλ€. μλ₯Ό λ€μ΄ μΌνλͺ° νμ΄μ§ λ©λ΄μ Hot, μΆμ² λ±μ λ£κΈ° μν΄ λ³λμ νκ·Έλ₯Ό μ½μ νλ κ²μ΄ μλλΌ κ°μ μμ μ νμλ₯Ό νμ©νμ¬ μ²λ¦¬νλ©΄ νΈλ¦¬ν©λλ€.
- after: μμμ λ€μ λ΄μ© μ½μ
- before:μμμ μμ λ΄μ© μ½μ
02-01 ::before
μ νμ ABC(μμλ‘ μ§μ ) μμμ λ΄λΆ μμ λ΄μ© (content)μ μ½μ
ν©λλ€.
<div class="box">μ¬κΈ°μ!</div>νμΌμ΄ μμλ μμ λ΄μ©μ μ½μ
νλ €λ©΄ css νμΌμ
.box::before {
content: 'νμ~';
font-weight: bold;
color: red;
}μ κ°μ΄ μμ±ν΄μ£Όμλ©΄ μΉ νλ©΄μ νμ~ μ¬κΈ°μ! μ κ°μ΄ contentκ° μ½μ
λ©λλ€.
02-02 ::after
afterλ beforeμ λ§μ°¬κ°μ§λ‘ μ νμABC(μμλ‘ μ§μ ) μμμ λ΄λΆ λ€μ λ΄μ©(content)μ μ½μ
ν©λλ€. css νμΌμ
.box::after {
content: '빨리!!';
font-weight: bold;
color: blue ;
}λ€μκ³Ό κ°μ΄ μμ±ν΄ μ£Όμλ©΄ λ©λλ€. κ·Έλ¬λ©΄ 'μ¬κΈ°μ! 빨리!!'μ κ°μ contentκ° μ½μ
λκ² λ©λλ€.
03. CSS μ°μ μμ
λμΌν μμλ₯Ό λ€λ₯Έ μ νμλ‘ μ μ©ν΄ μ¬λ¬ μ€νμΌμ΄ μ μ©λλ λκ°ν μν©μ΄ λ°μνκΈ°λ ν©λλ€. CSS νμΌμ΄ μ¬λ¬ κ°λΌλ©΄ λμ± λκ°ν΄μ§κ² μ£ . CSS μ°μ μμλ λ€μκ³Ό κ°μ΅λλ€.
!important > μΈλΌμΈ μ€νμΌ > μμ΄λ μ νμ > ν΄λμ€/μμ±/κ°μ μ νμ > νκ·Έ μ νμ > μ 체 μ νμ
04. μμ± μ νμ
μ§μ ν νΉμ μμ±μ κ°μ§κ³ μλ νκ·Έλ₯Ό μ ννλ μ νμλ‘ μ’
λ₯λ νΉμ μμ±λ§ μ§μ νλ μ νμμ μμ±κ³Ό μμ±μ κ°μ μ§μ νλ μ νμκ° μμ΅λλ€.
04-01 μμ±μ νμ (Attribute)
μμ± ABC(μμλ‘ μ§μ )μ ν¬ν¨ν μμλ₯Ό μ νν©λλ€.
μλ₯Ό λ€μ΄
<input type="text" placeholder="μ΄λ¦" />
<input type="password" value="pw" />
<input type="text" value="000-0000-0000" />
<input type="text" placeholder="νΈλν°" />
<input type="text" placeholder="μ£Όλ―Όλ²νΈ" disabled />μ κ°μ html νμΌμ΄ μμλ
[disabled] {
background-color: red;
}
[placeholder='μ΄λ¦'] {
background-color: orange;
}
input:not([placeholder]) {
background-color: blue;
}μ κ°μ΄ μμ± μ νμλ₯Ό cssνμΌμ μμ±νλ©΄ disabled μμ±μ κ°μ§ text νμ
μ input placeholder="μ£Όλ―Όλ²νΈ"μ λ°°κ²½μμ΄ redκ° λ©λλ€. λ λ€μ μ½λλ₯Ό 보면 placeholder = 'μ΄λ¦' κ°μ κ°μ§λ νκ·Έλ₯Ό μ ννμ¬ background-color λ₯Ό μ€λ μ§μμΌλ‘ λ°κΏμ€λλ€. λ§μ§λ§μΌλ‘ placeholder μμ±μ κ°μ§μ§ μλ νκ·Έλ₯Ό μ ννμ¬ λ°°κ²½μ νλμμΌλ‘ λ°κΏμ€λλ€.
05. μ΄μΈ μμ£Ό μ°μ΄λ CSS μμ±
μ΄μΈμ μμ£Όμ°μ΄λ css μμ±μλ
- color, background-color
- font-size,font-weight,font-family,font-style
- width,height,max-width,min-width,max-height,min-height
- border
- margin, padding
λ±μ΄ μμ΅λλ€.
06. CSS λ°μ€ λͺ¨λΈ
μ½ν
μΈ μμμ κΈ°μ€μΌλ‘ ν¬κΈ°λ₯Ό μ νλ content-box(κΈ°λ³Έκ°)κ³Ό ν
λ리λ₯Ό κΈ°μ€μΌλ‘ ν¬κΈ°λ₯Ό μ νλ border-box(content+padding+border) κ° μμ΅λλ€. κ°λ° μ΄κΈ° λ¨κ³μμ λ μμ± κ° μ€ νλλ‘ κ²°μ νλ κ²μ΄ μ’μλ° κ·Έ μ΄μ λ,, κ·Έλ μ§ μμΌλ©΄ μμ ν¬κΈ° κ³μ°μ΄ 볡μ‘ν΄μ§κΈ° λλ¬Έμ
λλ€...
content-boxμλ only contentλ§ λ€μ΄κ°κ³ border-boxλ content+ padding+ border λͺ¨λ ν¬ν¨λμ΄ μμ΅λλ€.
marginκ³Ό paddingμ μ°¨μ΄λ borderλ₯Ό κ²½κ³μ μΌλ‘ λκ³ μμͺ½μ padding border λ°κΉ₯μͺ½μ marginμ΄λΌκ³ ν©λλ€. μ°λ¦¬ λͺΈμ΄ contentκ³ padding μ΄ ν¨λ© margin μ΄ λ°μ΄λΌκ³ μκ°νμλ©΄ νΈνκ² μ΅λλ€ ^^
07. CSSμ 볡μ‘ν μμ± : position
cssμ positionμ HTML μμμ μμΉλ₯Ό κ²°μ νλ λ°©μμ μ€μ νλ μμ±μ λ§ν©λλ€. positionμμ± λ°©μμλ 4κ°μ§ λ°©μμ΄ μμ΅λλ€.
- static : μ μ μμΉ μ§μ λ°©μ
- relative : μλ μμΉ μ§μ λ°©μ
- absolute : μ λ μμΉ μ§μ λ°©μ
- fixed : κ³ μ μμΉ μ§μ λ°©μ
position μμ±μλ μμΉκ° μ€μ λ μ‘°μ μμμ μλ‘λΆν°μ μ¬λ°±μ μ€μ νλ top// μμΉκ° μ€μ λ μ‘°μ μμμ μ€λ₯Έμͺ½μΌλ‘λΆν°μ μ¬λ°±μ μ€μ νλ right// μμΉκ° μ€μ λ μ‘°μ μμμ μλλ‘λΆν°μ μ¬λ°±μ μ€μ νλ bottom // μμΉκ° μ€μ λ μ‘°μ μμμ μΌμͺ½μΌλ‘λΆν°μ μ¬λ°±μ μ€μ νλ left // κ²Ήμ³μ§λ μμλ€μ΄ μμ΄λ μ€ν(stack)μ μμλ₯Ό μ€μ νλ z-index κ° μμ΅λλ€. μ΄ λͺ¨λ κ²μ λ°λμ position μμ±μ΄ μ μλμ΄ μμ΄μΌ μ¬μ©μ΄ κ°λ₯ν©λλ€.
+μ€μ΅. μ λ²λ 그리기
λ€μν position μμ±μ μ΄μ©νμ¬ μ λ²λ λ₯Ό λ§λ€μ΄ λ΄
μλ€.
solution)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>μ λ²λ 그리기</title>
<link rel="stylesheet" href="practice_worm_drawing.css" />
</head>
<body>
<div class="body body1">
<div class="eye-white">
<div class="eye-black"></div>
</div>
</div>
<div class="body body2"></div>
<div class="body body3"></div>
<div class="body body4"></div>
<div class="body body5"></div>
<div class="body body6"></div>
<img class="grass" src="./grass.png" alt="μλ" />
</body>
</html>
* {
box-sizing: border-box;
position: fixed;
}
.body {
border-radius: 50%;
width: 120px;
height: 120px;
}
.eye-white {
border-radius: 50%;
width: 20px;
height: 20px;
top: 20px;
left: 20px;
background-color: white;
z-index: 6;
}
.eye-black {
border-radius: 50%;
width: 10px;
height: 10px;
top: 20px;
left: 20px;
background-color: black;
z-index: 7;
}
.body2 {
border-radius: 50%;
width: 50px;
height: 50px;
position: absolute;
top: 3px;
left: 3px;
background-color: skyblue;
z-index: -1;
}
.body3 {
border-radius: 50%;
width: 50px;
height: 50px;
position: absolute;
top: 20px;
left: 40px;
background-color: rgb(22, 75, 96);
}
.body4 {
border-radius: 50%;
width: 50px;
height: 50px;
position: absolute;
top: 40px;
left: 60px;
background-color: rgb(19, 19, 72);
}
.body5 {
border-radius: 50%;
width: 50px;
height: 50px;
position: absolute;
top: 45px;
left: 85px;
background-color: rgb(109, 109, 189);
}
.body6 {
border-radius: 50%;
width: 50px;
height: 50px;
position: absolute;
top: 40px;
left: 120px;
background-color: rgb(173, 173, 218);
z-index: 6;
}
.grass {
z-index: 5;
}08. CSSμ 볡μ‘ν μμ± : transform
transform μμ±μλ μμμ μ΄λ(translate), νμ (rotate), νλ μΆμ(scale), λΉνκΈ°(skew) ν¨κ³Όλ₯Ό λΆμ¬νκΈ° μν ν¨μλ₯Ό μ 곡νλ€.
+μ€μ΅. transition
- 100px,100px div λ§λ€κ³ λ°°κ²½μ κ²μ , κΈμλ ν°μμΌλ‘ λ§λ€κΈ°
- divμ λ§μ°μ€ μ¬λ €λμμ λ 300px, 300px λ‘ λ³κ²½
- transitionμ μ°μΈ‘λλ‘ μ€ν
- (delay λ 0.5s, μ§ν μλλ 1s)
solution)
.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>transition μ€μ΅</title>
<link rel="stylesheet" href="practice_transition.css" />
</head>
<body>
<h1>Transition μ€μ΅</h1>
<div>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Itaque vel ut
voluptatum tenetur sit architecto, aperiam amet ullam adipisci, quasi iste
ducimus modi enim eveniet delectus cum quod esse minus?
</div>
</body>
</html>
.css
div {
width: 100px;
height: 100px;
background-color: black;
color: white;
overflow: hidden;
overflow-y: scroll;
}
div:hover {
width: 300px;
height: 300px;
transition: all 1s 0.5s;
}
+μ€μ΅. μ¬μ§μκΈ°
transform κ³Ό z-index λ₯Ό μ΄μ©ν΄ μ΄λ―Έμ§ 3κ°λ₯Ό μ°λ¬μ λμ΄νκΈ°
solution)
.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>μ¬μ§ μκΈ°</title>
<link rel="stylesheet" href="practice_transition_stackpic.css" />
</head>
<body>
<img class="img1" src="./PIC/beach1.jpg" alt="" />
<img class="img2" src="./PIC/beach2.jpg" alt="" />
<img class="img3" src="./PIC/beach3.jpg" alt="" />
</body>
</html>
.css
img {
width: 300px;
height: 300px;
top: 100px;
transform: skewY(30deg);
}
.img1 {
position: absolute;
left: 200px;
z-index: 3;
}
.img2 {
position: absolute;
left: 450px;
z-index: 2;
}
.img3 {
position: absolute;
left: 700px;
z-index: 1;
}