๐จ CSS (Cascading Style Sheets)
- HTML์ ๊พธ๋ฉฐ์ฃผ๋ ์ธ์ด๋ก, ๋ฌธ์ ํต์งธ๋ก ํ๋ฒ์๊ฐ ์๋ HTML ํ๊ทธ ํ๋ํ๋๋ฅผ ๊พธ๋ฏผ๋ค.
๐๏ธ HTML์ CSS ์ ์ฉํ๋ ๋ฐฉ๋ฒ
1. ์ธ๋ผ์ธ (inline) : HTML ํ๊ทธ ์์ ๊ฐ์ด ์์ฑ
<h1 style="color: darkred; text-align: center; ">Login</h1>ํ๊ทธ ์์ style ์์ฑ์ ๋ฃ์ด์ ์คํ์ผ ์ ์ฉ
์ฌ๋ฌ ์คํ์ผ ์ ์ฉํ๋ ค๋ฉด ์์ฑ๋ง๋ค ๋์ ; (์ธ๋ฏธ์ฝ๋ก )์ ๋ถ์ด๊ธฐ
style ์์ฑ
- color : ๊ธ์ ์์
- text-align : ๊ธ์ ์ ๋ ฌ
- font-size : ๊ธ์ ํฌ๊ธฐ
- input ์ฐฝ ํฌ๊ธฐ ํค์ธ ๋์๋ ์ฌ์ฉ
- font-weight : ํฐํธ ๊ตต๊ธฐ
- width : ๊ฐ๋ก ํฌ๊ธฐ
- height : ์ธ๋ก ํฌ๊ธฐ
- background-color : ๋ฐฐ๊ฒฝ์
๐ข ์น์์๋ ํฌ๊ธฐ์ ๋จ์๋ก px (ํฝ์ ) ์ฌ์ฉ
๐๐ป ์ค์ต ์ฝ๋ ๐๐ป
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> LOGIN </title>
</head>
<body>
<h1 style="color: darkred; text-align: center;">Login</h1>
<form>
ID : <input type="text" style="font-size: 25px;"> <!-- ๊ธฐ๋ณธ๊ฐ -->
<br>
PW : <input type="password" style="font-size: 25px;"> <!-- ๋ฌด์์ ์ ๋์ง ๋ณด์ด์ง ์์ -->
<br>
<input type="button" value="login" style="font-size: 20px; width: 100px; height: 30px;">
</form>
</body>
</html>
๐๐ป ์คํ ํ๋ฉด ๐๐ป
2. ๋ด๋ถ ์คํ์ผ ์ํธ (internal style sheet) : HTML ๋ฌธ์ ์์ ๊ฐ์ด ์์ฑ
<head>
<style>
/*ํ๊ทธ๋ช
์ ๋ฐ๋ก ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ*/
h1 {
color: darkred;
text-align: center;
}
/*ํด๋์ค๋ก ๋ฌถ์ด์ ์ ์ฉํ๋ ๋ฐฉ๋ฒ*/
.login_inputs {
font-size: 25px;
}
/*์์ด๋๋ก ์ ์ฉํ๋ ๋ฐฉ๋ฒ*/
#btn_login {
font-size: 20px;
width: 100px;
height: 30px;
}
</style>
</head>
<body>
<h1>Login</h1>
<input class="login_inputs" type="text"> <!-- ํด๋์ค๋ช
์ง์ -->
<input class="login_inputs" type="password">
<input id="btn_login"> <!-- ์์ด๋๊ฐ ์ง์ -->
</body><head> ์์ <style>๋ง๋ค์ด ์ด ์์ ์คํ์ผ ์์ฑ ๋ชจ์๋๊ณ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ
๊ฐ๊ฐ ์ด๋ค element๋ฅผ ๊พธ๋ฉฐ์ค ๊ฒ์ธ์ง ์ง์ ํด์ค์ผ ํ๋ค. * element : HTML ํ๊ทธ ํ์
- ํ๊ทธ๋ช
์ ๋ฐ๋ก ์ฌ์ฉ
- ์ ์ฉํ๋ ค๋ ํ๊ทธ๋ช ์ ๊ทธ๋๋ก ์ฌ์ฉ
- ํด๋์ค๋ก ๋ฌถ์ด์ ์ ์ฉ
- ๊ณตํต์ ์ผ๋ก ์ง์ ํ๊ณ ์ถ์ ํ๊ทธ๋ค์ class="ํด๋์ค๋ช " ์์ฑ์ ์ถ๊ฐํ ๋ค ์คํ์ผํ๊ทธ์ .ํด๋์ค๋ช ์ผ๋ก ์ ์ฉ
- ์์ด๋๋ก ์ ์ฉ
- ํ๊ทธ์ ์ ์ผํ ์์ด๋๋ฅผ id="์์ด๋๋ช "์ผ๋ก ์ง์ ํ ๋ค ์คํ์ผํ๊ทธ์์ #์์ด๋๋ช ์ผ๋ก ์ ์ฉ
์ธ๋ผ์ธ๋ณด๋ค ํจ์ฌ ๊น๋ํ๊ณ ๊ฐ๋ ์ฑ์ด ๋๋ค.
์ฝ๋ ๋ด๋น์์ ์คํ์ผ ๋ด๋น์๊ฐ ์๋ก ๋ค๋ฅธ ๋ถ๋ถ์ ํ์ธํ๊ณ ์์ ํ๋ฉด ๋๊ธฐ์ ์ ์ง๋ณด์๊ฐ ์ฌ์์ง์ง๋ง
์ฌ์ ํ ๊ฐ์ ํ์ผ์์ ์์ ํด์ผํ๊ธฐ์ ์ด๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ์ธ๋ถ ์คํ์ผ ์ํธ๋ฅผ ์ฃผ๋ก ์ฌ์ฉํ๋ค.
3. ์ธ๋ถ ์คํ์ผ ์ํธ (external style sheet) : HTML ๋ฌธ์ ๋ฐ์ ์์ฑํ๊ณ ์ฐ๊ฒฐ
<head>
<link rel="stylesheet" href="login.css">
</head>์คํ์ผ ์์ฑ์ ์์ฑํ cssํ์ผ์ ๋ณ๋๋ก ์์ฑํ ํ
html์์ ์์ฑํ styleํ๊ทธ์์ ์์ฑํ๋ ์์ฑ๋ค์ ๊ทธ๋๋ก ์์ฑํ๋ฉด๋๋ค.
์ดํ htmlํ์ผ๊ณผ cssํ์ผ์ ์ฐ๊ฒฐ์์ผ์ฃผ๊ธฐ ์ํด head ํ๊ทธ ์์ linkํ๊ทธ๋ฅผ ๋ฃ๋๋ค.
- rel : ํ์ฌ ๋ฌธ์์์ ๊ด๊ณ
- href : ๊ฐ์ ธ์ฌ ์คํ์ผ ์์ฑ์ ๊ฒฝ๋ก
โจ Javascript
- ํน์ HTML ์์๋ฅผ ์ ํํ์ฌ ์ ์ดํ ์ ์๋ ์คํฌ๋ฆฝํธ ์ธ์ด
- ์คํฌ๋ฆฝํธ ์ธ์ด๋, ๋
๋ฆฝ์ ์ธ ํ๋ก๊ทธ๋จ์ ๊ฐ๋ฐํ ์ ์๋ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๊ฐ ์๋
"(ํ๋ก๊ทธ๋จ ๋ด๋ถ์ ๊ตฌ์ฑ ์์ ์ค ํ๋๋ก) ํ๋ก๊ทธ๋จ์ ์ ์ดํ๋ ์คํฌ๋ฆฝํธ ์ญํ ์ ํ๋ ์ธ์ด"
- ์คํฌ๋ฆฝํธ ์ธ์ด๋, ๋
๋ฆฝ์ ์ธ ํ๋ก๊ทธ๋จ์ ๊ฐ๋ฐํ ์ ์๋ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๊ฐ ์๋
์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ ์ฉํ๋ ๋ฐฉ๋ฒ์ ๋ณด๊ธฐ ์ ์์ฃผ ์ฌ์ฉ๋๋ ๋ฌธ๋ฒ๋ค๋ถํฐ ์์๋ณด์.
๐ฉ ํจ์
ํน์ ๊ธฐ๋ฅ์ ์ํํ๋ ์ฝ๋ ๋ฉ์ด๋ฆฌ๋ก, ๋ค์๊ณผ ๊ฐ์ด bodyํ๊ทธ ์ ๊ฐ์ฅ ๋ง์ง๋ง ๋ถ๋ถ์ ์ ์ํ๋ค.
<body>
/* ์ฝ๋๋ค */
<script>
function ํจ์์ด๋ฆ() {
/* ์ด ๊ณต๊ฐ์ ํจ์๊ฐ ํ ์ผ์ ์ฝ๋๋ก ์์ฑ */
}
</script>
</body>ํจ์๋ฅผ ์ ์ธํด์ค ๋ค, ํ์ํ ํ๊ทธ์์ ํจ์ ์ด๋ฆ()์ผ๋ก ํธ์ถํ์ฌ ์ฌ์ฉํ๋ค.
๐ ํน์ ํ๊ทธ ์ฐพ๋ ๋ฐฉ๋ฒ
ํจ์์์๋ ํน์ ํ๊ทธ๋ฅผ ์ง์ ํ๊ณ ์ถ๋ค๋ฉด ๋ค์๊ณผ ๊ฐ์ ๊ธฐ๋ฅ์ ์ด์ฉํ๋ค.
- id๋ก ์ฐพ๊ธฐ : document.getElementById(’์์ด๋’)
- class ์ด๋ฆ์ผ๋ก ์ฐพ๊ธฐ : document.getElementsByClassName(’ํด๋์ค ์ด๋ฆ’)
- tag ์ด๋ฆ์ผ๋ก ์ฐพ๊ธฐ : document.getElementsByTageName(’ํ๊ทธ ์ด๋ฆ’)
๐ ์กฐ๊ฑด๋ฌธ (if๋ฌธ)
๋ง์ฝ ์์ด๋์นธ์ด ๋น์ด์๋ค๋ฉด ๐๐ป '์์ด๋๋ฅผ ์ ๋ ฅํด์ฃผ์ธ์.' ํ์ ์ฐฝ
์๋๋ผ๋ฉด (= ์นธ์ ๊ฐ์ด ์๋ค๋ฉด) ๐๐ป ์ ๋ ฅ๋ ์์ด๋๋ฅผ ํ์ ์ฐฝ
์ด๋ฐ ์ฝ๋๋ฅผ ์ง๊ณ ์ถ๋ค๋ฉด if๋ฌธ์ ์ฌ์ฉํ๋ฉด ๋๋ค
if (!document.getElementById('txt_id').value) {
// = document.getElementById('txt_id').value == ""
alert('์์ด๋๋ฅผ ์
๋ ฅํด์ฃผ์ธ์.');
} else {
alert(document.getElementById('txt_id').value);
}document.getElementBy๋ฅผ ํตํด ์์ด๋๋ฅผ ์ฐพ๊ณ .value๋ก ํด๋น ๊ฐ์ ๊ฐ์ ธ์จ๋ค.
์ด ๊ฐ์ด ๋น์ด์๋์ง ์กฐ๊ฑด๋ฌธ์ ํตํด ํ์ธ ํ ๊ฒฝ์ฐ์ ๋ฐ๋ผ ๋ค๋ฅธ ํ์ ์ฐฝ์ ๋์ด๋ค.
๐ช ๋ณ์
๊ณตํต๋ ์์๋ฅผ ์์์ ๋ด์ ์ด๋ฆ์ ๋ถ์ฌ ์ฌ์ฉํ๋ ๊ฒ์ผ๋ก, ์ํ์์ ์ฌ์ฉํ๋ ๋ณํ๋ ์์ ๋ณ์์ ๋ค๋ฅธ ์๋ฏธ์ด๋ค.
๋ณ์ ์ ์ธ ๋ฐฉ๋ฒ
let ์์ ์ด๋ฆ = ์์์ ๋ด์ ๋ฐ์ดํฐ(์ซ์, ๋ฌธ์, element, ... );
var vs let vs const
| ๋ณ์ ์ ์ธ ๋ฐฉ๋ฒ | ์ค๋ช |
| var a; | let๊ณผ const๊ฐ ์๊ธฐ๊ธฐ ์ ์ ๋ชจ๋ ์ญํ ์ ํ์์ผ๋ ์์ฆ์ ์ ์ฌ์ฉํ์ง ์๋๋ค. |
| let b; | ์ ์ธ ์ดํ ๋ค์ด๊ฐ ๊ฐ์ ๋นผ๊ณ ์๋ก์ด ๊ฐ์ ๋ฃ์ ์ ์๋ค. |
| const c; | ์ ์ธ๊ณผ ๋์์ ๊ฐ์ ๋ฃ์ด์ค์ผ ํ๋ฉฐ ์ดํ ๋ณ๊ฒฝํ ์ ์๋ค. |
๐ง HTML์ Javascript ์ ์ฉํ๋ ๋ฐฉ๋ฒ
1. ์ธ๋ผ์ธ (inline) : ์ฌ์ฉ์์์ ์ํธ์์ฉ( e.g. ๋ฒํผ ํด๋ฆญ ํ์ ๋, ํค๋ณด๋๋ฅผ ๋๋ ์ ๋ )์ด ์์ ๋๋ง ๊ฐ๋ฅ
| ์ํธ์์ฉ | ์ค๋ช |
| click | ๋ง์ฐ์ค ํด๋ฆญํ์ ๋ |
| dbclick | ๋ง์ฐ์ค ๋๋ธ ํด๋ฆญํ์ ๋ |
| mouseover | ๋ง์ฐ์ค๋ฅผ ์ค๋ฒํ์ ๋ |
| mouseout | ๋ง์ฐ์ค๋ฅผ ์์ํ์ ๋ |
| mousedown | ๋ง์ฐ์ค๋ฅผ ๋๋ ์ ๋ |
| mouseup | ๋ง์ฐ์ค๋ฅผ ๋์ ๋ |
| mousemove | ๋ง์ฐ์ค๋ฅผ ์์ง์์ ๋ |
| keydown | ํค๋ฅผ ๋๋ ์ ๋ |
| keyup | ํค๋ฅผ ๋ผ์์ ๋ |
| keypress | ํค๋ฅผ ๋๋ฅธ ์ํ์์ |
์ฌ์ฉํ ๋์๋ ์์ on์ ๋ถ์ฌ ์ฌ์ฉํ๋ฉด ๋๋ค.
<input id="btn_login" type="button" value="login" onclick="alert('clicked!')">
์ ์ฝ๋๋ ๋ฒํผ์ ํด๋ฆญํ์ ๋, 'clicked!'๋ผ๋ ํ์ ์ฐฝ์ด ๋จ๋๋ก ์ค์ ํ ์ฝ๋์ด๋ค.
2. ๋ด๋ถ ์คํฌ๋ฆฝํธ (internal script) : HTML ๋ฌธ์ ์์ ๊ฐ์ด ์์ฑ
bodyํ๊ทธ ์, ๊ฐ์ฅ ๋ง์ง๋ง์ scriptํ๊ทธ๋ฅผ ๋ง๋ค์ด ๊ทธ ์์ ์์ฑํด์ฃผ๋ฉด ๋๋ค.
<body>
<h1>Login</h1>
<form>
ID : <input class="login_inputs" type="text"> <!-- ๊ธฐ๋ณธ๊ฐ -->
<br>
PW : <input class="login_inputs" type="password"> <!-- ๋ฌด์์ ์ ๋์ง ๋ณด์ด์ง ์์ -->
<br>
<input id="btn_login" type="button" value="login" onclick="myFunction()">
</form>
<script>
// ๋๋ง์ ํจ์ ๋ง๋ค๊ณ , ๋ฒํผ ํด๋ฆญํ๋ฉด ํธ์ถํ๊ธฐ
function myFunction() {
alert('1');
alert('2');
alert('3');
}
</script>
3. ์ธ๋ถ ์คํฌ๋ฆฝํธ (external script) : HTML ๋ฌธ์ ๋ฐ์ ์์ฑํ๊ณ ์ฐ๊ฒฐ
๋ณ๋์ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ(.js)๋ฅผ ์์ฑ ํ scriptํ๊ทธ์์ ์๋ ์์ฑ์ ๊ทธ๋๋ก ์์ฑํด์ค ๋ค html ํ์ผ๊ณผ ์ฐ๊ฒฐ
<head>
<link rel="stylesheet" href="login.css"> <!-- ์ธ๋ถ ์คํ์ผ ์ํธ ์ฐ๊ฒฐ -->
<script type="text/javascript" src="login.js"></script> <!-- ์ธ๋ถ ์คํฌ๋ฆฝํธ ์ฐ๊ฒฐ -->
</head>
- type : ํ์ฌ ๋ฌธ์์์ ๊ด๊ณ
- src : ๊ฐ์ ธ์ฌ ์คํฌ๋ฆฝํธ์ ๊ฒฝ๋ก
โจ๏ธ ์ค์ต
์์ด๋ ์ ๋ ฅ์ฐฝ์ ์ ๋ ฅํ ๊ฐ์ ํ์ ์ฐฝ์ ๋์ฐ๊ธฐ!
๐๐ป html ๐๐ป
๐๐ป js ๐๐ป
๐๐ป css ๐๐ป
๐๐ป ์คํ ํ๋ฉด ๐๐ป
'๐๏ธ DevCourse > Backend' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [TIL] Week 3 ๋ฐฑ์๋ ๊ธฐ์ด (2) | 2025.02.07 |
|---|---|
| [TIL] Week 3 ํ๋ก ํธ ํ๋ก์ ํธ์ ๋ฐฑ์๋ (1) | 2025.02.04 |
| [TIL] Week 2 ์น ์๋น์ค ๊ฐ๋ฐ์ ์ดํด์ ์ค์ต (2) | 2025.01.31 |
| [TIL] Week 1 ๋ธ๋์น ์ ๋ต (0) | 2025.01.24 |
| [TIL] Week 1 ๊นํ๋ธ๋ก ํ์ ํ๊ธฐ (0) | 2025.01.23 |
