서론
아침에 미니오티 1시간 진행하고 팀 배정 후 팀원들과 소통하고 강의를 들었다!
오늘 강의는 진도를 좀 나갔으며 전에 놓쳤던 부분에 대해서 공부할 수 있어서 유익했다.
진도는 어제 로그인페이지 조금 꾸미는 것과 부트스트랩을 사용하는 것이었다!!
로그인 페이지 꾸미기
로그인 페이지의 폰트를 바꾸고 배경 이미지 삽입 및 자주 쓰이는 CSS에 대해서 배웠습니다.
1) 배경 이미지 삽입하기
1. 우선 전에 짜 놓은 코드들을 <div>로 묶어주고 class로 지정해 줍니다!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인 페이지</title>
</head>
<body>
<div class="login">
<h1>로그인 페이지</h1>
<h5>아이디,비밀번호를 입력하세요.</h5>
<p>ID : <input type="text"></p>
<p>Password : <input type="text"></p>
</div>
</body>
</html>
2. <head> 안에 <style>을 만들고 그 안에 CSS를 넣어줍니다.
<style>
.login{
width: 500px;
height: 300px;
background-image: url("이미지 주소");
background-size: cover;
background-position: center;
color: white;
border-radius: 10px;
}
</style>width는 넓이를 지정해주며 height는 높이를 지정해 줍니다.
background-image는 배경에 이미지를 삽입하는 코드인데 url("이미지 주소")를 사용하여 이미지 다운로드 없이 웹사이트에서 바로 적용이 가능하고 background-size: cover와 background-position: center가 대부분 따라옵니다.
color는 글자 색을 변경해 주는 코드입니다.
border-radius는 테두리를 둥글게 만들어 줍니다.
3. 이제 가운데로 옮기고 안에 있는 내용물들도 가운데 정렬을 해보겠습니다.
<style>
.login{
margin: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>margin은 객체의 바깥 부분에 여백을 주는 것이고 0px 0px 0px 0px 시계방향으로 여백을 줄 수 있습니다. 위처럼 auto를 줄 경우에 4방향에 최대한 줄 수 있는 여백을 주기 때문에 중앙에 위치하게 됩니다.
배경 박스 안에 내용물들을 가운데 정렬할 경우 4개의 코드가 대부분 함께 작성되는데, display: flex를 준 뒤 flex-direction: column으로 열을 중심으로 모으고 justify-content: center와 align-items: center로 가운데 정렬을 합니다.
4. 마지막으로 Font를 바꿔보겠습니다.
구글 폰트 : https://fonts.google.com/?subset=korean에서 원하는 폰트를 선택한 후,
세 번째 <link href=" ... ">를 복사하여 <title> 밑에 붙여 넣기를 해준 뒤,
font-family를 복사하여 <style> 안에 *{ }를 만들어준 뒤 그 안에 붙여넣기를 합니다.
*{ }는 페이지 내의 전체에 적용한다는 뜻입니다.
이렇게 다 해주면 폰트가 적용되며 로그인 페이지가 완성이 됩니다.
2) 부트스트랩 적용하기
부트스트랩 적용하기 전 우선적으로 해야 할 일이 있습니다.
HTML파일 내에 코드를 추가해 주어야 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>로그인 페이지</title>
</head>추가해 주었으면 https://getbootstrap.com/ 이 페이지에 들어가 Components > button에서 마음에 드는 버튼을 고른 후 복사해서 붙여넣어 줍니다.
따로 CSS를 안 줘도 버튼이 꾸며져 있는 것을 볼 수 있습니다!
마치며
오늘은 제법 진도를 나갔고 아직까지는 난이도가 있다고 느껴지지 않지만 전에 공부할 때 놓치고 간 부분도 다시 알게 되고 복습도 되니 만족하는 중입니다. 초심을 잃지 않고 끝까지 매일 수업들은 내용을 기록하자!
'SpartaCodingClub > 사전캠프' 카테고리의 다른 글
| [스파르타코딩클럽] 사전캠프 6일차 - python & crawling(크롤링) (0) | 2022.10.22 |
|---|---|
| [스파르타코딩클럽] 사전캠프 5일차 - Ajax (0) | 2022.10.21 |
| [스파르타코딩클럽] 사전캠프 4일차 - JQuery!! (0) | 2022.10.20 |
| [스파르타코딩클럽] 사전캠프 3일차 - Javascript (0) | 2022.10.19 |
| [스파르타코딩클럽] 사전캠프 1일차 - 웹의 동작 개념 (0) | 2022.10.17 |
댓글