728x90
반응형
[CSS]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
<!--각 명찰은 head안의 style에서 꾸며줍니다-->
<style>
.mytitle{
color: red;
}
</style>
</head>
<body>
<!--h1은 제목으로 하나씩 사용해줍시다-->
<!--class는 각 태그를 지징하는 명찰의 역할을 합니다-->
<h1 class="mytitle"> 로그인 페이지</h1>
<!--p는 줄바꿈 할때 사용-->
<p>아이디: <input type="text"/></p>
<p>비밀번호: <input type="text"/></p>
<button>로그인하기</button>
</body>
</html>전에 작성했던 간단한 로그인 화면을 활용하였습니다.
- class는 각 태그를 지칭하는 명찰의 역할을 합니다.
- 명찰은 head 안에서 꾸며줄 수 있습니다. style안에다가 명찰의 이름을 적고 꾸며줍니다.
로그인 화면 꾸미기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
<!--각 명찰은 head안의 style에서 꾸며줍니다-->
<style>
.mytitle{
background-color: green;
width: 300px;
height: 200px;
color:white;
text-align: center;
background-image:url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
background-size: cover;
background-position: center;
border-radius: 10px;
padding-top:20px;
}
.wrap{
width: 300px;
margin:auto;
}
.mybtn{
display: block;
margin: auto;
}
.red-font{
color: red;
font-size: 38px;
}
</style>
</head>
<body>
<div class="wrap">
<!--div는 구역을 나눠줍니다-->
<div class="mytitle">
<!--h1은 제목으로 하나씩 사용해줍시다-->
<h1> 로그인 페이지</h1>
<h5>아이디, 패스워드를 입력해주세요</h5>
</div>
<!--p는 줄바꿈 할때 사용-->
<p>아이디: <input type="text"/></p>
<p>비밀번호: <input type="text"/></p>
<button class="mybtn">로그인하기</button>
</div>
</body>
</html>뭔가 뭉탱이로 코드를 적어버렸지만 자세히 살펴봅시다.
mytitle: 사진과 함께 화면에 대한 설명을 하는 영역
- background-color는 구역의 배경색을 지정합니다. 구역의 크기를 알아보기 위해 이상한 색을 깔아서 사용해도 좋습니다.
- width, height는 너비와 높이입니다. 숫자는 px단위로 지정합니다.
- color는 글자의 색상, text-align는 글자의 위치를 지정하는 것 입니다.
- background-image는 배경그림을 넣을 수 있도록 합니다.
- background-size는 배경의 사이즈를 최대한 구역의 범위와 맞춰주는 역할을 합니다.
- background-position은 배경의 위치를 지정하는 것 입니다. 보통 넣은 사진의 위치를 정렬할때 사용합니다.
- border-radius는 모서리를 둥글게 만드는 정도를 의미합니다.
- padding은 해당 구역 안쪽으로 여백을 만드는 것이고, margin은 구역 바깥쪽으로 여백을 만듭니다.
wrap: body 전체를 묶고있는 영역 (화면 전체를 중앙정렬 하고 싶다)
- width는 너비를 뜻하는데 너비를 일정수준으로 잡아주지 않으면 화면에 꽉 차서 중앙정렬이 소용없습니다.
- margin을 auto로 넣으면 왼쪽 오른쪽 비율이 같아지면서 중앙정렬이 됩니다.
mybtn: 로그인 버튼입니다. 이건 영역이나 블럭이 아니라 '글'로 취급되기 때문에 정렬방식이 특이합니다.
- display를 block으로 설정하면 영역과 같은 블럭으로 취급되기 때문에 정렬이 가능해집니다.
- 마찬가지로 margin을 auto로 주어 중앙정렬을 해줍니다.
red-font: 글자를 빨간색으로 지정합니다. 한 태그에 여러 스타일을 지정할 수 있다는 것을 보여드리기 위해 만들었습니다.
ex) 버튼에 mybtn과 red-font를 같이 적용하기
더보기
<button class="mybtn red-font">로그인하기</button>
728x90
반응형
'Frontend > HTML & CSS' 카테고리의 다른 글
| HTML의 완성도를 높이는 부트스트랩 기초 사용법 (1) | 2021.07.21 |
|---|---|
| HTML에서 style요소를 CSS파일로 분리하기 (0) | 2021.07.21 |
| HTML 주석 달기 (0) | 2021.07.21 |
| HTML 폰트 적용하는 방법 (0) | 2021.07.21 |
| HTML의 기초 (0) | 2021.07.16 |