HTML은 "누가 누구안에 있느냐" 를 이해하는 것이 중요하다.
만약 아래 같이 빨간색 div 를 가운데로 옮기면 , 그안에 있는 초록/파란색 div 도 모두 함께 이동한다.
CSS 는 이러한 원리를 이해하여 뼈대를 꾸미는 일을 한다.
CSS에 사용되는 기본적인 문법들이다.
- 배경관련
background-color :배경색
background-image:배경사진
background-size:배경크기
- 사이즈
width
height
- 폰트
font-size
font-weight
font-family
color
- 간격
margin:바깥쪽 여백
padding :안쪽여백
CSS 사용방법을 이해하기 위해 예제로 먼저 살펴 보려고 한다.
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.mytitle {
color: red;
font-size: 40px;
}
.mybtn {
font-size: 12px;
color: white;
background-color: green;
}
.mytxt {
color: red;
}
</style>
</head>
<body>
<h1 class="mytitle">로그인 페이지</h1>
<p class="mytxt">ID: <input type="text" /></p>
<p class="mytxt">PW: <input type="text" /></p>
<button class="mybtn">로그인하기</button>
</body>
<style></style> : <head></head> 안에 들어가는 태그이며 사이에
.class명 { css문법 }
이 들어가게 된다.
<class= " 텍스트"> : <body></body> 사이에 들어가고 텍스트 부분에 원하는 명칭을 작성한다.
기본 로그인 페이지를 CSS문법들을 활용하여 꾸며보는 연습을 해보았다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인 페이지</title>
<style>
.mytitle {
width:300px; /* 가로넓이 */
height:200px; /* 새로넓이 */
background-color: green;
color:white;
text-align:center;
padding-top:30px; /* 위쪽 여백 */
border-radius:8px; /* 테두리 둥글기 */
background-image:url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
background-position:center;
background-size:cover;
}
</style>
</head>
<body>
<div class ="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디,비밀번호를 입력해주세요</h5>
</div>
<p>> ID: <input type ="text"/></p>
<p > PW: <input type ="text"/></p>
<p> <button>로그인하기</button></p>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| [JS]부트스트랩 활용하기 (0) | 2025.01.24 |
|---|---|
| [JS]HTML 구글 폰트 사용하기 (0) | 2025.01.24 |
| [JS]로그인 페이지 만들기 (0) | 2025.01.24 |
| [JS]HTML,CSS 의 개요 (0) | 2025.01.23 |
| JavaScript 사전캠프 부트캠프 OT (1일차) (0) | 2025.01.13 |