반응형
01 로그인 페이지 구현해보기
우선 기능없이 해당 페이지만 똑같이 구현을 해보았다. ID값과 PW값을 입력할 수 있는 칸을 위해 <input>태그와 <button> 태그를 이용하여 구현을 하였고 로그인 버튼도 작성하였다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>로그인 페이지</h1>
<p>ID: <input type="text"/></p>
<p>PW: <input type="text"/></p>
<button>로그인하기</button>
</body>
</html>
02 CSS 연습하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.mytitle {
width: 300px;
height: 200px;
color: white;
text-align: center;
padding-top: 40px;
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>
<button>로그인하기</button>
</body>
</html>
이미지를 적용하여 불러올때는 style안에 꼭 3가지가 같이 한몸처럼 따라다닌다.
Style {
background-image: url('');
background-position: center;
background-size: cover;
}
class와 id를 어떨때 구분해서 사용하는지 궁금했었는데 class의 경우 보통 css에서 조작할때 ('.')을 사용해서 하는 것 같고 id의 경우 javascript에서 조작할때 ('#')을 사용하여 쓰는 것 같았다.
class : .클래스이름
id : #클래스이름
여백을 지정해주기 위해서 사용하는 두가지 명령어가 있는데 그것은 padding과 margin이다. padding의 경우 안쪽의 여백을 지정해줄 때 사용하며 margin은 바깥쪽 여백을 지정해줄때 사용한다. 여기서 margin에 경우 위-오른쪽-아래-왼쪽 순으로 여백 값을 지정해준다.
안쪽 여백 : padding
바깥쪽 여백 : margin
추가적으로 flex-direction을 통해 세로로 배치를 할지 가로로 배치할지를 정해줄 수 있다.
flex-direction: column; //세로
flex-direction: row; //가로반응형
'Study of Development > Front-End' 카테고리의 다른 글
| [FE] 영화 검색 사이트(바닐라JS) - (2) 중단부_검색창 (0) | 2024.01.08 |
|---|---|
| [FE] 영화 검색 사이트(바닐라JS) - (1) 상단부_타이틀 (0) | 2024.01.08 |
| [FE] 프로젝트 - 추억앨범(1) : 웹 페이지 구현 (1) | 2023.12.31 |
| [FE] 구글 폰트 적용하기 (0) | 2023.12.31 |
| [FE] 부트스트랩 사용하기 (0) | 2023.12.31 |