1. 박스 설계하기
2. 구조화 하기
<!DOCTYPE html>
<html lang="en">
<head>
<title>Instagram</title>
<!-- 파비콘 넣기 -->
</head>
<body>
<!-- 전체 박스 시작 -->
<div class="main">
<!-- 위쪽 박스 시작 -->
<div class="main-up">
<!-- 왼쪽 박스 이미지 -->
<div class="main-img">
<div>이미지</div>
</div>
<!-- 오른쪽 박스 시작 -->
<div class="main-box">
<!-- 오른쪽 첫번째 박스 시작-->
<div main-box1>
<!-- 인스타 로고 이미지 -->
<div class="login-logo">logo</div>
<!-- 로그인 표 시작-->
<div class="login-table">
<table>
<tr>
<td><input type="text" placeholder="전화번호, 사용자 이름 또는 이미지"></td>
</tr>
<tr>
<td><input type="text" placeholder="비밀번호"></td>
</tr>
</table>
</div>
<!-- 로그인 표 종료-->
<!-- 로그인 버튼 -->
<div class="login-btn">
<button>로그인</button>
</div>
<!-- 또는 이미지 -->
<div class="login-img">또는</div>
<!-- 페이스북 로그인 -->
<div class="facebook">페이스북 로고 + Facebook으로 로그인</div>
<!-- 비밀번호 찾기 -->
<div class="login-pw">비밀번호를 잊으셨나요?</div>
<!-- 오른쪽 첫번째 박스 종료 -->
</div>
<!-- 오른쪽 가운데 박스 시작 -->
<!-- 계정 찾기 -->
<div class="sign">계정이 없으신가요?</div>
<div class="sign-up">가입하기</div>
<!-- 오른쪽 가운데 박스 종료 -->
<!-- 오른쪽 마지막 박스 시작 -->
<div class="download-box">
<div class="download-box-title"> 앱을 다운로드 하세요</div>
<div class="ios">
<div>아이오에스</div>
</div>
<div class="android">
<div>안드로이드</div>
</div>
</div>
<!-- 오른쪽 마지막 박스 종료 -->
</div>
<!-- 위쪽 박스 종료 -->
</div>
<!-- 아래쪽 박스 시작 -->
<div class="footer">
<!-- 아래쪽 박스 왼쪽 메뉴 -->
<div class="footer-menu">
<div>소개</div>
<div>도움말</div>
<div>홍보 센터</div>
<div>API</div>
<div>채용 정보</div>
<div>개인정보처리방침</div>
<div>약관</div>
<div>위치</div>
<div>인기 계정</div>
<div>해시태그</div>
<div>언어</div>
</div>
<!-- 아래쪽 박스 오른쪽 이미지 -->
<div class="footer-img">이미지</div>
<!-- 아래쪽 박스 종료 -->
</div>
<!-- 전체 박스 종료 -->
</div>
</body>
</html>
3. 디자인 하기
꼭 클래스만 호출할 수 있는 것은 아님
기본 태그로도 호출할 수 있음
이미지 크기 조절할 때는 img 태그로 호출해서 사이즈 조절하면 조절 됨
input 태그도 마찬가지 임!
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<title>Instagram</title>
<!-- 파비콘 넣기 -->
</head>
<body>
<!-- 전체 박스 시작 -->
<div class="main">
<!-- 위쪽 박스 시작 -->
<div class="main-up ml-200">
<!-- 왼쪽 박스 이미지 -->
<div class="main-img m-30">
<img src="./image/login-main.png" />
</div>
<!-- 오른쪽 박스 시작 -->
<div class="main-box ml-40 mt-30 ">
<!-- 오른쪽 첫번째 박스 시작-->
<div class="main-box1">
<!-- 인스타 로고 이미지 -->
<div class=" login-logo mt-10">
<img src="./image/logo.png" />
</div>
<!-- 로그인 표 시작-->
<div class="login-table ml-15">
<table>
<tr>
<td><input type="text" placeholder="전화번호, 사용자 이름 또는 이미지"></td>
</tr>
<tr>
<td><input type="text" placeholder="비밀번호"></td>
</tr>
<tr>
<td>
<button class="login-btn ml-40 ">로그인</button>
</td>
</tr>
</table>
</div>
<!-- 로그인 표 종료-->
<!-- 또는 이미지 -->
<div class="login-img">
<img src="./image/or.png">
</div>
<!-- 페이스북 로그인 -->
<div class="facebook">
<img src="./image/facebook-logo.png"> Facebook으로 로그인
</div>
<!-- 비밀번호 찾기 -->
<div class="login-pw mb-10">비밀번호를 잊으셨나요?</div>
<!-- 오른쪽 첫번째 박스 종료 -->
</div>
<!-- 오른쪽 가운데 박스 시작 -->
<div class="main-box1 mt-20">
<div class="main-box2 ">
<div class="sign">계정이 없으신가요?</div>
<div class="sign-up">가입하기</div>
<!-- 오른쪽 가운데 박스 종료 -->
<!-- 계정 찾기 -->
</div>
<!-- 위쪽 박스 종료 -->
</div>
<!-- 아래쪽 박스 시작 -->
<!-- 오른쪽 마지막 박스 시작 -->
<div class="main-box mt-10">
<div>앱을 다운로드 하세요</div>
<div class="download-box mt-20">
<div class="ios">
<img src="./image/login-ios.png" />
</div>
<div class="android">
<img src="./image/login-android.png" />
</div>
</div>
<!-- 오른쪽 마지막 박스 종료 -->
</div>
</div>
</div>
<div class="footer">
<!-- 아래쪽 박스 왼쪽 메뉴 -->
<div class="footer-menu">
<div>소개</div>
<div>도움말</div>
<div>홍보 센터</div>
<div>API</div>
<div>채용 정보</div>
<div>개인정보처리방침</div>
<div>약관</div>
<div>위치</div>
<div>인기 계정</div>
<div>해시태그</div>
<div>언어</div>
</div>
<!-- 아래쪽 박스 오른쪽 박스 -->
<div class="footer-end">
<div>ⓒ 2020 INSTAGRAM FROM</div>
</div>
<!-- 아래쪽 박스 종료 -->
</div>
<!-- 푸터 -->
</div>
<!-- 전체 박스 종료 -->
</body>
</html>.m-20 {
margin: 20px;
}
.m-30 {
margin: 30px;
}
.m-10 {
margin: 10px;
}
.mt-20 {
margin-top: 20px;
}
.mt-10 {
margin-top: 10px;
}
.mt-30 {
margin-top: 30px;
}
.mb-10 {
margin-bottom: 10px;
}
.ml-15 {
margin-left: 15px;
}
.ml-20 {
margin-left: 20px;
}
.ml-30 {
margin-left: 30px;
}
.ml-200 {
margin-left: 200px;
}
.ml-40 {
margin-left: 40px;
}
.main {
width: 1000px;
height: 550px;
background-color: #FAFAFA;
}
.main-up {
display: grid;
grid-template-columns: 1fr 1fr;
width: 600px;
height: 500px;
justify-content: center;
}
.main-img img {
width: 120%;
height: 100%;
}
.login-logo img {
width: 50%;
height: 40px;
}
input {
width: 150%;
height: 35px;
}
.login-btn {
width: 100%;
background-color: #B2DFFC;
color: white;
border-radius: 6px;
border: 1px solid #ddd;
padding: 5px;
}
.main-box {
text-align: center;
padding: 3px;
font-size: 12px;
}
.main-box:nth-child(3) {
border: 0;
}
.main-box1 {
border: 1px solid #D7D7D7;
background-color: white;
}
.main-box2 {
display: flex;
justify-content: center;
padding: 15px;
background-color: white;
font-size: 12px;
}
.login-table table {
width: 61%;
display: flex;
}
.facebook {
color: #385185;
font-size: 10px;
}
.login-pw {
font-size: 10px;
text-align: center;
padding: 10px;
}
.login-img img {
width: 80;
height: 80;
}
.sign-up {
padding-left: 10px;
color: #78C4FA;
font-weight: 700;
}
.download-box {
display: flex;
justify-content: center;
display: grid;
grid-template-columns: 1fr 1fr;
}
.download-box>div img {
width: 100%;
height: 100%;
}
.footer {
display: grid;
grid-template-columns: 3fr 1fr;
}
.footer-menu {
display: flex;
font-size: 10px;
gap: 10px;
padding-left: 60px;
}
.footer-end {
display: flex;
justify-content: end;
font-size: 10px;
padding-right: 60px;
}
Share article
