airbnb clone coding

Notice

Recent Posts

Recent Comments

Link

« 2025/05 »
일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

비전공 프론트엔드 개발자

airbnb clone coding_Media query 본문

카테고리 없음

airbnb clone coding_Media query

JJ_hyun 2022. 1. 29. 20:46

코드 변경이 조금 있어서 다시금 코드를 입력해 본다.

HTML

<!DOCTYPE html>

<head>

<title>airbnb clone 을 위한 연습용 페이지</title>

</head>

<body>

<a href="" class="aside_title_content">에어비앤비의 코로나19 대응 방안에 대한 최신 정보를 확인하세요.</a>

</h1>

</aside>

airbnb

</a>

</div>

</form>

</span>

</a>

</span>

</nav>

</header>

<!-- <section class="title_box" >

airbnb

</a>

</button>

</span>

</a>

</span>

</section> -->

</span>

</span>

</span>

<span>

</span>

</a>

</div>

HyunJun (이)가 <br>

여행지를 찾아드릴게요! <br>

</span>

</div>

HyunJun (이)가 <br>

여행지를 찾아드릴게요! <br>

</span>

</section>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</article>

</section>

<h2 class="thir_title">에어비앤비 체험 둘러보기</h2>

</span>

</span>

</section>

<button type="button" class="thir_btn last_btn">슈퍼호스트에게 물어보세요</button>

</div>

</section>

<button type="button" class="thir_btn last_btn">슈퍼호스트에게 물어보세요</button>

</div>

<p>에어비앤비 지원</p>

<ul>

<li><a href="">에어비앤비의 코로나19 대응 방안</a></li>

</ul>

</span>

<ul>

<li><a href="">Airbnb.org:재난 구호 숙소</a></li>

</ul>

</span>

<ul>

</ul>

</span>

<ul>

<li><a href="">에어비앤비 공동창업자의 메세지</a></li>

<li><a href="">에어비앤비 Luxe</a></li>

</ul>

</span>

</nav>

</span>

</span>

</section>

</nav>

</footer>

// const topMenu = document.getElementsByClassName('title_box')

</script>

</body>

</html>

CSS

@charset 'utf-8';

body {

width: 100%;

}

a {

text-decoration: none;

color: white;

}

img {

width: 30px;

}

/* aside를 제외하고 다 묶는 섹션 */

.main_body {

width: 80%;

padding:0 10%;

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 {

padding: 0 10%;

background-color: black;

}

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

/* 상단 메뉴바를 전체로 묶는 클래스 */

.title_box {

padding-top: 10px;

text-align: center;

/* background-color: #fff; */

position:sticky ;

top: 0;

}

.title_box img {

width: 20px;

}

.title_logo {

float: left;

color: black;

/* title_box ( 상단 메뉴를 감싸는 섹션 ) 에 텍스트 센터를 주고,

(센터를 준 이유는 검색버튼이 가운데 오기 위함.)

그리고 로고는 왼쪽으로 보내고, 프로필은 우측으로 보내기 위해

float 속성을 사용했다. */

}

/* 위쪽은 로고레이아웃 */

/* 상단 메뉴바 중간 검색버튼 */

.search_box {

display: inline-block;

border-radius: 21px;

background-color: rgba(255, 255, 255, 0.267);

border: 1px solid #ddd;

cursor: pointer;

height: 33px;

width: 230px;

margin:0 0 10px 100px;

}

.search_box:hover {

box-shadow: 1px 1px 1px 1px #ddd;

}

.search_text {

padding:0 90px 2px 4px;

font-size: 10px;

vertical-align:7px;

font-weight: 200;

}

.search_box img {

width: 12px;

vertical-align: 5px;

}

.search_box .search_box_img {

padding:5px;

border-radius: 21px;

transform: translateY(5px);

background-color: tomato;

}

/* 중간 검색 버튼 */

/* 우측 프로필 버튼 */

.title_bar {

float: right;

}

/* 고정된 상단 메뉴 작업 시작 */

.header {

background-color: black;

padding:0 10%;

}

.header img {

width: 20px;

}

.header_content {

/* display: flex;

justify-content: space-around; */

overflow: hidden;

clear: both;

text-align: center;

}

.header_content_logo {

float: left;

}

.header_content_pro {

float: right;

}

.header_content_input {

display: inline-block;

color: white;

margin: 0 auto;

}

.input_content span {

padding-right: 5px;

}

.under_line {

border-bottom: 1px solid white;

}

.host {

padding:0 20px 0 0;

}

.content_second a {

color: black;

}

.header_content_pro .header_content_earth {

padding-right: 20px;

}

.header_content_pro .menu {

padding: 0;

display: inline-block;

border-radius: 21px;

background-color: #fff;

}

.wid {

padding: 3px 4px;

border-radius: 21px;

}

/* 우측 프로필 버튼 */

/* 고정된 상단 메뉴 작업 종, 밑에 input 박스 작업 시작. */

.header_content_data {

text-align: center;

background-color: black;

/* transform: translateY(-70%); */

}

.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;

}

.data_input {

border-right: lightgray 1px solid;

}

.lab_box {

display: block;

}

.last_menu {

padding-right: 0px;

border:none;

}

.search_img {

float: right;

margin-top: 0px;

padding: 3px;

background-color: tomato;

border-radius: 21px;

}

/* 첫번째 콘텐츠 섹션 시작 */

.fir_section {

background-color: black;

text-align: center;

height: 800px;

padding: 0 10% 50px 10%;

overflow: hidden;

}

.fir_content{

background-size: cover;

width: 100%;

height: 800px;

border-radius: 50px;

}

.fir_content .sentence{

transform: translateY(350%);

text-align: center;

color: white;

font-size: 40px;

display: block;

}

.fir_content_search{

display: inline-block;

width: 200px;

background-color: white;

border-radius: 50px;

text-decoration: none;

color: #FF385C ;

font-weight: bold;

font-size: 15px;

padding: 7px;

margin: 5px;

}

.media_sec {

display: none;

transform: translateY(320%);

text-align: center;

color: white;

font-size: 40px;

display: block;

}

/* 두번째 콘텐츠 섹션 시작 */

.main_sec_body {

width: 80%;

padding:0 10%;

/* text 와 img 사이에 간격이 있는데 body 에 line-height가 있었음.

그래서 해당 섹션의 제일 상위 부모에게 따로 속성을 먹임. */

}

.sec_sect {

width: 100%;

padding: 50px 0 ;

line-height: 0;

}

.sec_sect .sec_title {

box-sizing: content-box;

width: 100%;

font-size: 30px;

padding:0px 0 50px 0;

text-align: left;

font-weight: bold;

}

.sec_sect .sec_sect_content {

width: 100%;

text-align: left;

display: flex;

justify-content: space-between;

}

.sec_sect .sec_sect_content .sec_link {

display: inline-block;

width: 24%;

height: 400px;

text-decoration: none;

}

/* 마지막 콘텐츠의 margin-right 때문에 오른쪽 끝선에 맞출 수 없어서

따로 속성을 줌. */

.sec_sect .sec_sect_content .sec_link_last {

display: inline-block;

width: 23%;

height: 400px;

text-decoration: none;

}

.sec_sect_content .sec_sect_img {

width: 100%;

height: 200px;

display: inline-block;

border-radius: 10% 10% 0 0;

}

.sec_sect_text {

width: 100%;

height: 200px;

border-radius: 0 0 10% 10%;

background-color:lightcoral;

}

.text_layout {

display: inline-block;

font-size: 30px;

margin:40px 0 0 10px;

font-weight: bold;

}

.far {

display: block;

font-size: 16px;

margin: 30px 0 0 10px;

}

/* 두번째 섹션 작엽 완료, 세번째 섹션 시작. */

.thir_sect {

width: 100%;

}

.thir_title {

font-size: 50px;

padding:30px 0 30px 0%;

text-align: left;

font-weight: bold;

}

.thir_sect_layout {

display: flex;

justify-content: space-between;

}

.thir_fir_span {

}

.thir_span_same {

display: inline-block;

width: 49%;

height: 650px;

border-radius: 10px;

background-size: cover;

}

.thir_sec_span {

}

.thir_third_div {

width: 100%;

height: 700px;

margin: 70px auto;

background-size: cover;

border-radius: 10px;

}

/* media */

.media_fir {

display: none;

width: 100%;

height: 700px;

margin: 70px auto;

background-size: cover;

border-radius: 10px;

}

/* 이 콘텐츠를 새로 만든 이유는 전체 섹션에 마진이 들어가 있는데,

그 마진을 제거하려면 이 콘텐츠를 큰섹션 밖으로 빼내야 한다.

그 작업이 너무 복잡할것 같아서 섹션 밖에 똑같은 콘텐츠를 만들고,

display:none으로 해둿다가 조건이 맞을때 반응 할 수 있도록 해두었다. */

.thir_title_text {

font-size: 50px;

color: white;

padding: 50px 0 50px 30px;

}

section .thir_third_div .thir_title_text {

padding-left: 60px;

font-size: 60px;

font-weight: bold;

line-height: 70px;

}

.thir_btn {

margin-left: 40px;

border-radius: 10px;

border: none;

padding:10px 15px;

background-color:white;

font-size: 12px;

font-weight: 900;

cursor: pointer;

}

.thir_btn:hover {

background-color: lightgray;

}

.last_btn {

margin:250px 0 0 70px;

cursor: pointer;

}

/* 세번째 섹션 작업 끝, 마지막 footer 작업 시작. */

footer {

background-color:lightgray;

width: 100vw;

}

.fir_nav {

/* width: 100vw; */

padding:50px 10%;

color: black;

font-size:1rem;

display: flex;

justify-content: space-around;

}

.nav_content {

width: 100%;

display: inline-block;

vertical-align: top;

margin-right: 150px;

}

.nav_content p {

font-weight: bold;

padding-bottom: 10px;

}

.nav_content ul li {

padding-bottom: 10px;

}

.nav_content ul li a {

color: black;

font-size: 0.8rem;

}

/* 상단 nav 작업 종료, 하단 출처 작업 시작 */

.sec_nav {

width: 80%;

padding: 10px 10%;

}

.sec_nav_layout {

width: 100%;

border-top: 1px solid black;

display: flex;

justify-content: space-between;

}

.sec_nav .nav_last_fir {

font-size: 15px;

height: 70px;

line-height: 70px;

}

.fake::before {

content: '.';

font-size:15px;

font-weight: bold;

position:relative;

top:-4px;

margin-right:5px;

}

.nav_last_sec {

height: 70px;

line-height: 70px;

}

.sec_nav a {

color: black;

font-weight: 200;

}

.nav_last_sec a img {

width: 15px;

}

/* 미디어 쿼리 시작 */

@media (max-width:900px) {

.nav_content {

display: block;

width: 100%;

}

.media_li {

width: 100%;

display: inline-block;

border-bottom: 1px solid black;

}

@media ( max-width: 1000px ) {

.fir_section {

background-size:cover;

background-repeat: no-repeat;

z-index: 1;

}

.fir_content {

display: none;

}

.media_sec {

display: block;

}

@media ( max-width:1100px) {

.thir_third_div {

display: none;

}

.media_fir {

display: block;

}

};

레이아웃을 조금 변경했다. 상단의 로고와 프로필 이미지 사이에 숙소관련 메뉴를 넣었고,

미디어 쿼리를 작업하면서 큰 section 을 없애고 각 영역마다 따로 padding 을 주었다.

미디어 쿼리는 처음 써봣는데 왠지 javascript 라는 생각때문에 나도 모르게

대괄호 끝에 세미클론을 붙이는 실수를 해서 실행이 안되는 현상을 겪었다.

이 간단한 문제를 못찾고 검색을 무려 30분 넘게 했다. 섬세하지 못한 나..

그래도 문제는 해결하였고 미디어 쿼리를 쓰면서 좀 더 코딩을 알아가는 느낌이였다.

airbnb 클론 코딩의 디자인 그리고 반응형도 어느정도 틀이 잡혀가면서 작업을 진행하고 있다.

문제는 javascript 의 기능문제인데.. 아직도 상단의 붙는 기능은 아직 적용하지 못했다.

30일 스터디가 있는데 스터티 팀원에게 자문을 구해봐야 겠다.

조금씩이라도 발전하는 사람이 되자. 화이팅 !!

비전공 프론트엔드 개발자

airbnb clone coding_Media query 본문

airbnb clone coding_Media query

티스토리툴바