HTML로 만든 로그인 페이지를 CSS를 활용하여 꾸며보도록 하겠습니다.
1. <div> 태그를 사용하여 구역을 나눕니다.
HTML의 <header>, <section> 같은 시맨틱 태그가 나오기 전에는 header나 navigation, footer 등을 구별할 때 <div> 태그를 많이 사용했습니다. 아직도 문서 구조를 만들 때 <div> 태그를 사용하는 경우가 많습니다.
<div> 태그는 division의 약어로 <div id="header"> <div class="detail"> 처럼 id나 class 속성을 사용해서 문서 구조를 만들거나 스타일을 적용할 때 사용합니다. 즉, 영역을 구별하거나 스타일로 문서를 꾸미는 것 입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인</title>
</head>
<body>
<div>
<div>
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력해주세요</h5>
</div>
<p>ID: <input type="text" /></p>
<p>PW: <input type="text" /></p>
<button>로그인하기</button>
</div>
</body>
</html>
2. class 속성을 사용하여 스타일 적용하기
클래스 선택자는 특정 부분만 선택해서 스타일을 적용할 수 있습니다.
우선 로그인 페이지 먼저 스타일을 적용해보겠습니다.
가장 중요한 것은 브라우저에서 보여질 때 어디까지가 스타일 적용 구간인지 확인하기 위해서 backgroud-color를 사용하여 구분을 지어놓은 다음 차차 스타일을 적용해 나가는 것이 편리합니다.
<!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 {
background-color: green;
width: 300px;
height: 200px;
color: white;
text-align: center;
padding-top: 30px;
border-radius: 8px;
}
</style>
</head>
<body>
<div>
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력해주세요</h5>
</div>
<p>ID: <input type="text" /></p>
<p>PW: <input type="text" /></p>
<button>로그인하기</button>
</div>
</body>
</html>
<!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;
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;
}
.wrap {
width: 300px;
margin: 50px auto 0px auto;
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력해주세요</h5>
</div>
<p>ID: <input type="text" /></p>
<p>PW: <input type="text" /></p>
<button>로그인하기</button>
</div>
</body>
</html>
3. 폰트 적용하기
마지막으로 폰트를 적용해보겠습니다.
다음 구글 폰트에서 적용하고자 하는 폰트를 선택 후 이를 html에 적용해보겠습니다.
Embeded code in the <head> of your html 에 적힌 @import url 문을 style에 추가하여 font를 import 해 옵니다.
그 다음 적용하고자 하는 선택자에 스타일을 적용합니다.
여기서는 전체에 스타일을 적용해보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap');
* {
font-family: "Do Hyeon", sans-serif;
font-weight: 400;
font-style: normal;
}
.mytitle {
width: 300px;
height: 200px;
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;
}
.wrap {
width: 300px;
margin: 50px auto 0px auto;
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력해주세요</h5>
</div>
<p>ID: <input type="text" /></p>
<p>PW: <input type="text" /></p>
<button>로그인하기</button>
</div>
</body>
</html>
이렇게 하면 상단에 나와있는 이미지와 같이 페이지를 만들 수 있습니다.
오늘 사용한 CSS를 정리하면 다음과 같습니다.
배경관련
background-color
background-image
background-size
사이즈
width
height
폰트
font-size
font-weight
font-family
color
간격
margin
padding
'Frontend > HTML, CSS' 카테고리의 다른 글
| [CSS] 케스케이딩 스타일 시트 알아보기 (0) | 2024.08.27 |
|---|---|
| [CSS] CSS 기본 선택자 (2) | 2024.08.26 |
| [CSS] 스타일과 스타일 시트 (0) | 2024.08.26 |
| [HTML] 로그인 화면 만들기 (0) | 2024.08.07 |
