카테고리 없음

airbnb clone coding

JJ_hyun 2022. 1. 11. 20:10

index.html 파일 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./reset.css">
    <link rel="stylesheet" href="./testStyel.css">
    <title>airbnb clone 을 위한 연습용 페이지</title>
</head>
<body>
    <aside class="cov19">
        <h1 class="aside_title">
            <a href="" class="aside_title_content">에어비앤비의 코로나19 대응 방안에 대한 최신 정보를 확인하세요.</a>
        </h1>
    </aside>

    <section class="main_body">
        <!-- 전체 섹션을 묶어주고, 좌우 페딩값을 준 section -->




        <header class="header">
            <nav class="header_content">
                <a href="" class="header_content_logo">
                    <img src="./img/Logo.png" alt="airbnb 메인이미지" class="">
                    airbnb
                </a>
   
                <span class="">
                    <a href="" class="host">호스트 되기</a>
                    <a href=""><img src="./img/Earth.jpg" alt="언어설정" class="header_content_earth"></a>
                    <a href="#" class="menu">
                        <img src="./img/menu.png" alt="" class="tree_line wid">
                        <img src="./img/Profile.png" alt="우측상단메뉴" class="header_content_profile wid">
                    </a>
                </span>
            </nav>
   
            <div class="header_content_input">
                <form action="" class="">
                    <!-- <legend>숙소</legend>
                    <legend>체험</legend>
                    <legend>온라인 체험</legend> -->
                    <div class="">
                        <span class=" ">숙소</span>
                        <span class=" ">체험</span>
                        <span class=" ">온라인 체험</span>
                    </div>
   
                </form>
            </div>

            <!-- input 박스 레이아웃 시작. -->
            <div class="header_content_data">
                <div class="data_border">
                    <span class="data_one data_input">
                        <label for="" class="lab_box">위치</label>
                        <input type="text" placeholder="어디로 여행가세요?">
                    </span>
                    <span class="checked data_input">
                        <label for="" class="lab_box">체크인</label>
                        <input type="text" placeholder="날짜 입력">
                    </span>
                    <span class="checked data_input">
                        <label for="" class="lab_box">체크아웃</label>
                        <input type="text" placeholder="날짜입력">
                    </span>
                    <span class="last_menu data_input">
                        <span>
                            <label for="" class="lab_box">인원</label>
                            <input type="text" placeholder="게스트 추가">
                        </span>
                       
                    </span>
                    <a href="#" class="search">
                        <img src="./img/Search.png" alt="검색" class="search_img">
                    </a>
                </div>
               
            </div>
       
        </header>
   






            <section class="title_box">
                <a href="" class="title_logo">
                    <img src="./img/Logo.png" alt="airbnb 메인이미지" class="title_logo_img">
                    airbnb
                </a>
   
                <button type="button" class="search_box">
                    <span class="search_text">검색 시작하기</span>
                    <img src="./img/Search.png" alt="검색버튼" class="search_box_img">
                </button>
   
                <span class="title_bar">
                    <span class="header_content_second">
                        <a href="" class="host">호스트 되기</a>
                        <a href=""><img src="./img/Earth.jpg" alt="언어설정" class="header_content_earth"></a>
                       
                    </span>
               
                    <a href="#" class="menu">
                        <img src="./img/menu.png" alt="" class="tree_line wid">
                        <img src="./img/Profile.png" alt="우측상단메뉴" class="header_content_profile wid">
                    </a>
                </span>
            </section>
            <!-- 상단 메뉴바 작업라인  -->
   
           


    </section>
    <!-- 바디 다음으로 큰 섹션 -->
</body>
</html>

 

style.css

 

@charset 'utf-8';
body {
    width: 100%;
    height: 2000px;
    /* font-size: 20px; */
}

a {
    text-decoration: none;
    color: white;
}


img {
    width: 30px;
}

/* aside를 제외하고 다 묶는 섹션 */
.main_body {
    width: 80%;
    padding:0 10%;
    height: 1000px;
    background-color: black;
}

.cov19 {
    width: 100%;
    background-color: black;
    font-size: 14px;
    text-align: center;
    color: white;
    line-height: 50px;
}

.cov19 .aside_title .aside_title_content {
    color: white;
    text-decoration: underline;
    font-weight: 900;
}

/* 상단 메뉴바 레이아웃 작업 시작 */

/* 상단 메뉴바를 전체로 묶는 클래스 */
.title_box {
    position: sticky;
    top: 0;
    padding-top: 10px;
    text-align: center;
    /* background-color: #fff; */
    margin-top: 100px;
    /* 삭제요망 */
    background-color:turquoise;
    z-index: ;
}

.title_box img {
    width: 20px;
}


.title_logo {
    float: left;
    /* title_box ( 상단 메뉴를 감싸는 섹션 ) 에 텍스트 센터를 주고,
    (센터를 준 이유는 검색버튼이 가운데 오기 위함.)
    그리고 로고는 왼쪽으로 보내고, 프로필은 우측으로 보내기 위해
    float 속성을 사용했다.  */
}
/* 위쪽은 로고레이아웃  */
 

/* 상단 메뉴바 중간 검색버튼 */
.search_box {
    display: inline-block;
    border-radius: 21px;
    background-color: #fff;
    border: none;
    cursor: pointer;
    height: 33px;
    width: 250px;
    margin-left: 100px;
}

.search_text {
    padding:0 80px 2px 4px;
    height: 30px;
    line-height: 30px;
}

.search_box img {
    width: 12px;
}

.search_box .search_box_img {
    padding:5px;
    border-radius: 21px;
    transform: translateY(5px);
    background-color: tomato;
}
/* 중간 검색 버튼 */

/* 우측 프로필 버튼 */
.title_bar {
    float: right;
}

.host {
    padding-right: 20px;
}

.header_content_earth {
    margin-right: 20px;
    border-radius: 21px;
}

.menu {
    border: 1px solid black;
    display: inline-block;
    border-radius: 21px 21px 21px 21px;
    background-color: #fff;
   
}

.wid {
    padding: 3px 4px;
    border-radius: 21px;
}
/* 우측 프로필 버튼 */





/* 고정된 상단 메뉴 작업 시작 */
.header {
    background-color: black;
    text-align: center;
}

.header img {
    width: 20px;
}

.header_content {
    display: flex;
    justify-content: space-between;

}

.header_content_logo {

}


.header_content_input {
    color: white;
    border-bottom: 1px solid white;
}

/* .center_menu1 {
    border-bottom: 1px solid white;
} */
/* 고정된 상단 메뉴 작업 종류, 밑에 input 박스 작업 시작. */

.data_border {
    margin: 10px auto;
    font-size: 14px;
    width: 56%;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 50px;
    background-color:white;
    text-align:left;
}

.data_border .data_input {
    display:inline-block;
    padding:0 40px 0 5px;

}

.data_one {
    border-right: lightgray 1px solid;
}

.data_input input {
    width: 100px;
    font-size: 6px;
    margin-top: 5px;
}


.lab_box {
    display: block;
   
}

.last_menu {
    padding-right: 0px;
}


.search_img {
    float: right;
    margin-top: 7px;
    padding: 3px;
    background-color: tomato;
    border-radius: 21px;
}


 

얼른 작업을 끝내고 javascript 로 넘어갈 생각이다. 레이아웃도 새로 구성하고, 상단 메뉴는 특히 

position : sticky 를 써보고 싶다. 그래서 불가피하게 화면의 레이아웃이나 여러가지를

변경하느라 새로 작업을 하는 느낌이다. 

좀 더 고민하고 최고의 방법과 개발자라면 어떻게 할지 충분히 고민하자. 

난 할 수 있다. 훗날 프론트 엔드 개발자가 되었을때 도움이 될 것이다. 화이팅 !!!