HTML/CSS

실습 - Insta 만들기

yuzu sim's avatar
yuzu sim
Jan 17, 2024
실습 - Insta 만들기
notion image

1. 박스 설계하기

notion image
 

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>
notion image
 

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;
}
notion image
 
Share article

More articles

See more posts

Coolsms (문자 전송)

January 17, 2024
Coolsms (문자 전송)

실습 - 에어비앤비 만들기

January 17, 2024
실습 - 에어비앤비 만들기

실습 - vacation 만들기

January 17, 2024
실습 - vacation 만들기

전이중 통신

January 17, 2024
전이중 통신

Coding_study

RSS·Powered by Inblog