![[HTML&CSS] 에어비앤비 메인페이지 만들기](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2024-09-05T15%3A06%3A59.354Z-d7babc69-cc4e-466c-9cdb-a350ed3dd5c4&w=3840&q=75)
아파치 같은거임. 설치.
1. block과 inline
block - 다음 태그는 옆으로 못오고 아래로 내려감 ex ) <section> , <div>
inline - 자기 크기만큼만 차지 ex ) <a> , <img>
inline block - 안에 내용이 없어도 자기 크기만큼 차지할 수 있음
자바스크립트는 도큐먼트 라고 한다. 태그를 ?
마진, 패딩을 무효화 시키고 작업해야함
margin : 0
padding : 0
box-sizing : border-box → 테두리까지 박스의 크기로 보겠다.
마진, 패딩 , 보더를 다 합쳐서 높이로 잡을 지 프론트는 설정할 수 있다.
우리도 border까지 포함해서 높이로 잡자!
css는 id 안쓴다. 디자인 할때는 class 쓰기!
2. data-set
- “data-” 라고 작성한 속성에 자바스크립트 코드로 접근가능
- SSR 할때 data- 이런식으로 적어두면 데이터 뿌리기 편하다
++
프레임워크 : 부트스트랩
3. 에이비엔비 메인 페이지 만들기
박스가 크게 2개
3.1 HTML 시멘틱 태그
css 컨벤션 정하기
<div class="서치박스">
search_box
search-box
searchBox
<div class="form-search"></div>
부트스트랩 컨벤션을 지켜서 이렇게 만들수도 있지만 이렇게 하지말기!
css 가져다 쓰면 class 명이 겹쳐서 적용이 안 될 수가 있다.
<div class="form__search"></div>
언더스코어 2개로 쓰기
이미지 백그라운드로 넣으면
스택으로 쌓는 방법을 사용할 수도 있는데 나중에 해보기
./ 는 내위치
근데 이렇게 상대경로 하지말고 절대경로로 잡아라
/는 절대경로
상대경로를 사용하면 css 파일 위치를 바꾸었을때 경로를 다 수정해야하니
정대경로를 사용하자.
백그라운드로 넣을때는 background-size 사용
100% 100% 으로 하면 바둑판으로 안나오고 이미지가 화면에 꽉차게 나온다.
마진 패딩 0
box-sizing: border-box → border도 박스 크기안에 포함시킴
로고 와 메뉴를 한줄에 오게 하려면 ?
⇒ flex로 하면 안에있는 애들이 다 inline이 된다. (→ 가로로 배치됨)
flex는
1. 자식 모두에게 인라인을 한번에 줄 수 있음
( → .logo .menu 해서 각각 inline을 주는 방법도 있지만 flex가 더 간편 )
2. 비율과 배치도 지원함
가로 배치하는 건 justify-content 인데 네모친 3개가 잘쓰인다.
space-between → 맨앞 맨끝 딱 붙는다.
space-around → 양옆에 여백이 좀 있음.
이제는 float 이런거 잘 안쓰고 flex를 쓰는 추세 !
W3Schools 에서 flex 연습 !
로고 svg
<svg viewBox="0 0 1000 1000" role="presentation" aria-hidden="true" focusable="false"
style="height: 1em; width: 1em; display: inline-block; fill: currentcolor;">
<path
d="m499.3 736.7c-51-64-81-120.1-91-168.1-10-39-6-70 11-93 18-27 45-40 80-40s62 13 80 40c17 23 21 54 11 93-11 49-41 105-91 168.1zm362.2 43c-7 47-39 86-83 105-85 37-169.1-22-241.1-102 119.1-149.1 141.1-265.1 90-340.2-30-43-73-64-128.1-64-111 0-172.1 94-148.1 203.1 14 59 51 126.1 110 201.1-37 41-72 70-103 88-24 13-47 21-69 23-101 15-180.1-83-144.1-184.1 5-13 15-37 32-74l1-2c55-120.1 122.1-256.1 199.1-407.2l2-5 22-42c17-31 24-45 51-62 13-8 29-12 47-12 36 0 64 21 76 38 6 9 13 21 22 36l21 41 3 6c77 151.1 144.1 287.1 199.1 407.2l1 1 20 46 12 29c9.2 23.1 11.2 46.1 8.2 70.1zm46-90.1c-7-22-19-48-34-79v-1c-71-151.1-137.1-287.1-200.1-409.2l-4-6c-45-92-77-147.1-170.1-147.1-92 0-131.1 64-171.1 147.1l-3 6c-63 122.1-129.1 258.1-200.1 409.2v2l-21 46c-8 19-12 29-13 32-51 140.1 54 263.1 181.1 263.1 1 0 5 0 10-1h14c66-8 134.1-50 203.1-125.1 69 75 137.1 117.1 203.1 125.1h14c5 1 9 1 10 1 127.1.1 232.1-123 181.1-263.1z">
</path>
</svg>
→ “백터 이미지“ 라고 함 (→ 애는 화질에 영향을 받지 않음)
→ logo div 안에 추가하기
<div>호스트가 되어보세요</div>
<div>도움말</div>
<div>회원가입</div>
<div>로그인</div>
이런건 div 말고 span을 사용해서 한줄로 나오도록 할 수도 있다.
하지만 플렉스하면 “배치”를 할 수있다.
→ 그러니 span을 사용하지 말고 display: flex 사용해서 inline 으로 배치하자.
++
margin
0px 0px 0px 0px
12시 3시 6시 9시
방향으로 적용된다.
“>” 을 사용하면 바로 밑 자식한테만 적용할 수 있다.
→ 호스트가 되어보세요, 도움말, 회원가입, 로그인 div 에 margin-right : 30px 이 적용된다.
특정 자식한테만 하려면 위처럼 하면 된다.
flex는 바로 밑에 자식한테만 준다.
그래서 nav 에 display flex 주고 menu 에 display flex 또 준거임
form__search 만들기
→ div를 위와같이 나눌 수 있다.
→ 검색 버튼에도 부모 div를 만들어 주는게 버튼 배치에 좋다.
→ 목적지 title 은 colspan 을 줘서 너비를 채우자 !
section 안에 이 하얀부분도 div로 만들어 줌 ( → form__search )
position 프로퍼티의 요소는
static. 제일 기본은 static ( HTML elements are positioned static by default )
→ Static positioned elements are not affected by the top, bottom, left, and right properties.
position: relative → 를 쓰면 거리를 줄 수 있음. 마진이나 패딩으로 거리를 주지는 않음.
position: fixed → 베너같은거 그 자리에 있어야하는거. position : fixed 사용
position: absolute → 기존 도화지에 스택으로 계속 쌓을 수 있음.
relative 속성을 준애가 absolute 인 애랑 같이 움직이게 하는 방법은
→ 밖에 있는걸 relative로 주고 안에있는걸 absoulte로 주기
지금은 업그레이드 되어서
자식 div 에도 relative 만 주면 같이 잘 움직인다.
완성
자 이제 버튼 만들자
박스를 만들어서 버튼을 배치시키자.
모든 태그는 부모를 가지고 있어야 배치하기 좋다.
⇒ 부모가 있어야 독립적으로 배치시킬 수 있다.
뼈대를 다 만들고 CSS 를 하자
class로 디자인 하기전에 이름 붙이기
테이블이 너무 작으니 먼저 늘리기
css
input 너비 100% 로 설정하면 table 너비만큼 설정됨
뼈대를 잘 만들어야지 고칠 수 있다.
제일 중요한게 뼈대
레이아웃 잘 잡아서 위치 잘 잡기
common.css 만들어서 버튼같은거
button__search에 높이를 주고, form__search 의 height 를 없앴는데 왜 없애야해?
section 은 단락
여기까지 하고 이름주기
Network → style.css 찾아서 적용한걸 볼 수 있다.
라이브서버 - port 로 app을 찾음
아파치 → 웹서버 폴더
컴퓨터의 특정 폴더를 외부에 개방하는것 url을 사용해서!
지금 폴더인 airbnb_sample 이 웹서버 폴더. → 이걸 아파치가 관리
Share article