๐ป์๋ฐ์คํฌ๋ฆฝํธ๋ก css ์กฐ์ ๋ฐฉ๋ฒ๐ป
1. style ํ๋กํผํฐ
- ๋ชจ๋ ํ๊ทธ๋ ์ธ๋ผ์ธ ์คํ์ผ ์ํธ์ ๊ฐ์ style ์์ฑ์ ์ ๊ณตํ๋ค.
- ์๋ฐ์คํฌ๋ฆฝํธ๋ style ํ๋กํผํฐ๋ฅผ ์ ๊ณตํ๋ค.
2. class ์กฐ์
- ๊ฐ์ ์ ์ผ๋ก class ์กฐ์ํ๋ ๊ฒฐ๊ณผ๊ฐ ๋์จ๋ค. ๊ด๋ฆฌ์ฐจ์์์ ์ ์ฉํ ๋ฐฉ๋ฒ์ด๋ค.
- className ํ๋กํผํฐ
- classList ํ๋กํผํฐ
์ฐธ๊ณ : HTML ๋ฌธ์์ CSS๋ฅผ ์ ์ฉํ๋ ๋ฐฉ๋ฒ
https://steady-record.tistory.com/entry/CSS-HTML-%EB%AC%B8%EC%84%9C%EC%97%90-CSS%EB%A5%BC-%EC%A0%81%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95
๐ปstyle ํ๋กํผํฐ๋ก ์กฐ์ํ๊ธฐ๐ป
๊ธฐ๋ณธ ๋ผ๋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://kit.fontawesome.com/1f653a59f2.js" crossorigin="anonymous"></script>
<style>
#box1 {
border: 1px solid black;
width: 200px;
height: 200px;
}
.one {font-size: 3rem;}
.two {color: cornflowerblue;}
.three {text-decoration: underline;}
body {margin-bottom: 100px;}
</style>
</head>
<body>
<h1>CSS</h1>
<input type="button" value="๋ฒํผ" id="btn1">
<hr>
<div id="box1">์์</div>
</body>
</html>
box1 ์คํ์ผ ์กฐ์ํ๊ธฐ
<div id="box1">์์</div>const box1 = document.getElementById('box1');
box1.style = 'color: blue'; //BOM ๋ฐฉ์
box1.setAttribute('style', 'color: gold'); //DOM ๋ฐฉ์div ํ๊ทธ๋ก ๋ box1์ style๋ฅผ ์์ ๊ฐ์ด ์์ฑํ๋ค.
์ฃผ๋ก BOM๋ฐฉ์์ผ๋ก ์์ฑํ๋ค.
<div id="box1" style="color: blue">์์</div>์๋ฐ์คํฌ๋ฆฝํธ๋ก ์กฐ์ํ style์ ์ธ๋ผ์ธ ์ํธ๋ก ์์ฑํ style๊ณผ ๊ฐ๋ค.
style ํ๋กํผํฐ ๋ฐฐ์ด ์ ๊ณต
style ํ๋กํผํฐ๋ ์กฐ์ง์ ์ธ ๊ด๋ฆฌ๊ฐ ์ด๋ ค์์ ์ ๊ทผ ๊ฐ๋ฅํ ์์ฑ์ ๋ฐฐ์ด๋ก๋ ์ ๊ณตํ๋ค.
box1.style = 'color: blue';box1.style.color = 'blue';
box1.style = 'color: blue; font-size: 2rem'box1.style.color = 'blue';
box1.style.fontSize = '2rem';๋จ, font-size์ ๊ฐ์ด '-'๋ก ๋์ด ์๋ ์์ฑ์ fontSize ์ฒ๋ผ ์บ๋ฉํ๊ธฐ๋ฒ์ผ๋ก ์์ฑํด์ผํ๋ค.
map ํ์ ์ ๊ณต
๋ฉค๋ฒํ๋กํผํฐ๋ก ์ ๊ทผํ ์ ์๋ ๋๋ถ๋ถ์ mapํ์์ผ๋ก๋ ์ ๊ทผํ ์ ์๋ค.
box1.style['color'] = 'blue';
box1.style['font-size'] = '2rem';๋จ์๊ฐ ์๋ ์ซ์๋ ๋จ์๋ฅผ ์๋ตํด๋ ๊ด์ฐฎ๋ค.
์ ์ํ ์
1. ์คํ์ผ ๊ฐ ๋จ์
ํน์ ์คํ์ผ ์์ฑ์ ๋จ์๋ฅผ ๊ธฐ์ฌํด์ผํ๋ค.
์๋ฅผ ๋ค์ด, width, height, margin, padding ๋ฑ์ ์์ฑ์ ์ ํจํ ๋จ์๋ฅผ ๊ฐ์ ธ์ผํ๋ฏ๋ก ๋ฌธ์์ด๋ก ๊ฐ์ ๋์ ํด์ค์ผํ๋ค.
box1.style.width = '300px';
2. Inline Styles์ ์ฐ์ ์์
JavaScript๋ก element.style.property๋ฅผ ์ฌ์ฉํ์ฌ ์คํ์ผ์ ์ค์ ํ๋ฉด ํด๋น ์คํ์ผ์ HTML ์์์ ์ธ๋ผ์ธ ์คํ์ผ๋ก ์ถ๊ฐ๋๋ค.
์ด๋ ๊ฒ ์ถ๊ฐ๋ ์คํ์ผ์ CSS ํ์ผ์ ์ ์๋ ์คํ์ผ๋ณด๋ค ์ฐ์ ์ด๋ค. ๋ฐ๋ผ์ ์ธ๋ผ์ธ ์คํ์ผ์ด ๋ค๋ฅธ CSS ๊ท์น์ ๋ฎ์ด์์ธ ์ ์๋ค.
๋ด๋ถ ์คํ์ผ ์ํธ
<style>
#box1 {
border: 1px solid black;
width: 200px;
height: 200px;
}
.one {font-size: 3rem;}
.tow {color: cornflowerblue;}
.three {text-decoration: underline;}
</style>javascript๋ก style ์ค์
<script>
box1.style.width = '300px';
</script>
width๊ฐ ์๋ก ์์ดํ๋ฉด ์ธ๋ผ์ธ์ํธ css๊ฐ ์ ์ฉ๋๋ค.
3. ์ธ๋ผ์ธ์ํธ๋ง ์ ๊ทผ ๊ฐ๋ฅ
element.style์ ์ธ๋ผ์ธ ์คํ์ผ๋ง์ ๋ค๋ฃฌ๋ค. ๋ง์ฝ HTML ์์์ ์ ์๋ ์คํ์ผ์ด ์๋ CSS ์คํ์ผ์ด ์ ์ฉ๋์ด ์๋ค๋ฉด element.style.property๋ฅผ ์ฌ์ฉํ์ฌ ์ ๊ทผํ ์ ์๋ค.
alert(box1.style.width);ํฌ๊ธฐ๊ฐ ์๋๋ฐ null์ ๋ฐํํ๋ค.
๋ด๋ถ์คํ์ผ์ css ์ ์ฉํ ๊ฒ์ ์ฝ์ง ๋ชปํ๋ค.
const list = window.getComputedStyle(box1);
//getComputedStyle ์ด์ฉ
alert(list.width);
//getPropertyValue ์ด์ฉ
alert(list.getPropertyValue('width'));getComputedStyle , getPropertyValue : CSS ์ ์ฉ ๋ฐฉ์๊ณผ ๋ฌด๊ดํ๊ฒ ํ์ฌ ๊ฐ์ฒด์ ์ ์ฉ๋ ๋ชจ๋ CSS ์์ฑ์ ๋ฐํํ๋ค.
์๊น๋ ์ฝ์ ์ ์์๋ css ๋ฅผ ์ฝ์ ์ ์๋ค.
์ ์์ผ๋ก getPropertyValue ๋ฅผ ์ฌ์ฉํ๋ค.
๐ปclass๋ก ์กฐ์ํ๊ธฐ๐ป
ํด๋์ค ์ถ๊ฐํ๊ธฐ
content.className = 'one two';content.className += ' three';๋์ ๋ ๊ฐ๋ฅํ๋, ๋์ด์ฐ๊ธฐ์ ์ฃผ์ํ์ฌ ์์ฑํ๋ค.
content.classList.add('three');classList.add() ๋ฉ์๋๋ฅผ ์ฌ์ฉํด๋ ์ถ๊ฐ ๋ฐ ๋์ ์ด ๊ฐ๋ฅํ๋ค
ํด๋์ค ์ ๊ฑฐํ๊ธฐ
content.classList.remove('three');classList.remove() ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๋ค.
ํด๋์ค ์กด์ฌ์ฌ๋ถ ํ์ธํ๊ธฐ
const element = document.getElementById('myElement');
// ํด๋์ค๊ฐ ์๋์ง ํ์ธ
const hasClass = element.classList.contains('someClass');
console.log(hasClass);classList.contains() ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๋ค.
๐ป๋ฒํผ์ผ๋ก ํฐํธํฌ๊ธฐ ์กฐ์ ํ๊ธฐ๐ป
๊ธฐ๋ณธ ๋ผ๋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://kit.fontawesome.com/1f653a59f2.js" crossorigin="anonymous"></script>
</head>
<body>
<h1>ํ
์คํธ</h1>
<div class="tool">
<button type="button" id="btn1" <i class="fa-solid fa-magnifying-glass-plus"></i></button>
<button type="button" id="btn2"<i class="fa-solid fa-magnifying-glass-minus"></i></button>
</div>
<p id="content">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel hic expedita, temporibus aspernatur voluptatem deleniti recusandae quasi iure enim, nisi eaque cupiditate laboriosam provident voluptas, culpa veniam quos corporis ullam sunt? Quasi sequi itaque veritatis aspernatur fuga soluta, pariatur repudiandae et, eum ratione voluptatibus alias dolore expedita aliquam recusandae ducimus. Nam earum, recusandae unde veritatis nostrum iure explicabo quisquam voluptatem, vero nemo error cum officia eligendi accusamus numquam provident inventore consectetur aut distinctio ullam. Sequi, at amet eveniet unde ab voluptates? Distinctio vitae quaerat labore ab minus quas nam neque exercitationem eligendi voluptatem alias, necessitatibus tenetur quos non accusamus enim eius hic voluptas accusantium quae libero quasi vel. Commodi voluptas amet eum vero magni accusamus impedit ex incidunt consectetur tempora optio harum hic et animi maiores minus, repudiandae assumenda illo voluptatum maxime quas, officiis, sequi placeat? Saepe nobis quod natus illo quos voluptatem vero quas aperiam voluptates. Officia adipisci deleniti asperiores dolorum nulla earum obcaecati facilis aliquid voluptatem est, porro accusantium hic sed deserunt suscipit, dolores quibusdam eos aperiam laborum ducimus. Expedita nisi nihil laboriosam ducimus cupiditate voluptatibus eveniet ipsum iure? Reiciendis incidunt vel, ullam a ducimus autem ut veniam eligendi, quisquam minima assumenda perferendis fugit harum asperiores provident dolorum. Nemo sit error quod in ea, suscipit expedita fugit magni reiciendis magnam nulla asperiores, sapiente quos dignissimos molestiae vitae id! Explicabo necessitatibus officiis nostrum. Iste et sunt laborum optio harum nisi aliquam veritatis atque omnis deleniti amet, quos, illum suscipit! Itaque excepturi harum temporibus, voluptatum officia omnis consequatur error aspernatur quos culpa perferendis, impedit corrupti explicabo et ullam placeat molestias eius nemo ut cum veniam facilis accusamus odio consequuntur! Incidunt expedita architecto harum beatae sed earum nesciunt dolor saepe cupiditate minima totam deleniti sit non doloribus, impedit ratione accusamus? Molestiae rerum unde omnis eos quia recusandae sit iste dolorem in?</p>
</body>
</html>
๋ฒ์ 1. ์ด๋ฒคํธ - style ํ๋กํผํฐ
<script>
const btn1 = document.getElementById('btn1');
const btn2 = document.getElementById('btn2');
const content = document.getElementById('content');
//ํฐํธ ํฌ๊ธฐ ํต์ ๋ฅผ ํ๊ธฐ ์ํ ๋ณ์ ์์ฑ
let size = 16; //๊ธฐ๋ณธ ํฐํธํฌ๊ธฐ 16px
btn1.addEventListener('click', function() {
size--;
content.style.fontSize = size + 'px';
});
btn2.addEventListener('click', function() {
size++;
content.style.fontSize = size + 'px';
});
</script>
๋ฒ์ 2. ์ด๋ฒคํธ - class ์กฐ์
<script>
//๋ฒํผ์ผ๋ก ํฐํธํฌ๊ธฐ ์กฐ์ ํ๊ธฐ
const btn2 = document.getElementById('btn2');
const btn3 = document.getElementById('btn3');
const content = document.getElementById('content');
//ํฐํธ ํฌ๊ธฐ ํต์ ๋ฅผ ํ๊ธฐ ์ํ ๋ณ์ ์์ฑ
let size = 16;
btn2.addEventListener('click', function() {
content.className = 'one two';
content.classList.add('three');
});
btn3.addEventListener('click', function() {
content.classList.add('one');
content.classList.add('three');
content.classList.remove('three');
});
</script>
'WEB > JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [JavaScript] ํด๋ฆญ ์ด๋ฒคํธ : ํด๋ฆญํ ์์น์ ์์ ์์ฑํ๊ธฐ (0) | 2023.10.12 |
|---|---|
| [JavaScript] ํด๋ฆญ ์ด๋ฒคํธ : ํด๋ฆญํ ์์น๋ก ์์ ์ด๋ํ๊ธฐ (0) | 2023.10.12 |
| [JavaScript] ์ด๋ฒคํธ์ Hover Table(3) (0) | 2023.10.11 |
| [JavaScript] ์ด๋ฒคํธ์ Hover Table(2) (0) | 2023.10.11 |
| [JavaScript] ์ด๋ฒคํธ ๋ฒ๋ธ๋ง, ์ด๋ฒคํธ ํฐ๋๋ง (0) | 2023.10.11 |
