📁 CH06. [예제로 배우는] CSS의 이해
📌 CSS이란?
- Cascading Style Sheets의 약자로, HTML을 꾸며주는 언어
- 문서를 통째로 한 번에 꾸며주는 것이 아니라, HTML 태그를 하나 하나 꾸며줌
- HTML에 CSS를 적용하는 방법은 다음과 같이 3가지가 있음
- 인라인 (Inline) : HTML 태그 안에 같이 작성
- 내부 스타일 시트 (Internal Style Sheet) : HTML 문서 안에 같이 작성
- 외부 스타일 시트 (External Style Sheet) : HTML 문서 밖에 작성하고 연결함.
- * HTML 태그 한쌍 (
<태그> 텍스트 </태그> 또는 하나 <태그/>)을 우리는 element라고 부르기도 함.
📌 인라인 (Inline)
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title> LOGIN </title>
</head>
<body>
<h1 style = "color:rgb(173, 6, 6); 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: 25px; width: 100px; height: 30px;">
</form>
</body>
</html>
📌 내부 스타일 시트 (Internal Style Sheet)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> LOGIN </title>
<style>
h1 {
color: rgb(173, 6, 6);
text-align: center;
}
.login_inputs {
font-size: 25px;
}
#btn_login {
font-size: 30px;
width: 100px;
height: 30px;
}
</style>
</head>
<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">
</form>
</body>
</html>
📌 외부 스타일 시트 (External Style sheet)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> LOGIN </title>
<link rel="stylesheet" href="login.css">
</head>
<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">
</form>
</body>
</html>
/* login.css */
h1 {
color: rgb(173, 6, 6);
text-align: center;
}
.login_inputs { /* 클래스 */
font-size: 25px;
}
#btn_login { /* 아이디 */
font-size: 30px;
width: 100px;
height: 30px;
}
