-
HTML/CSS 클론코딩으로 복습하기 1 - 구글HTML-CSS-JS 2021. 8. 5. 20:37
유투버 '개발하는 정대리'님 강의 참조!
1) 구글 사이트의 검사를 누르면 HTML과 CSS가 어떻게 정의가 되어있는지 볼 수 있다.
2) 뼈대 잡기 (섹션 나누기)
- 크게 섹션은 로고 제외 전체부분과 로고 부분으로 나눈다.
- 메인섹션에서 로고부분, 검색부분으로 또 나눈다
<!DOCTYPE html> <html lang="en"> <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="/assets/style.css" /> <title>구글 클론 사이트</title> </head> <body> <!-- 웹페이지 화면을 감싸는 랩퍼 및 인덱스 페이지 --> <div class="wrapper indexPage"> <!-- 메인 섹션 --> <div class="mainSection"> <!-- 로고부분 --> <div class="logoContainer"> <img src="assets/img/1.png" /> </div> <!-- 검색부분 --> <div class="searchContainer"> <div class="searchBox"> <img class="mag" src="assets/img/loupe.png" /> <input type="text" placeholder="SEARCH!!!" /> <img class="keyboard" src="assets/img/keyboard.png" /> <img class="mic" src="assets/img/microphone.png" /> </div> </div> <!-- 아래 두개 클릭 버튼--> <div class="buttonBox"> <button class="box1">Google 검색</button> <button class="box2">I'm Feeling Lucky</button> </div> </div> </div> </body> </html>3) 디자인 하기
- 로고 삽입
<!-- 로고부분 --> <div class="logoContainer"> <img src="assets/img/1.png" />
- 전체페이지 조절
/* 랩퍼 정의 */ .wrapper { display: flex; flex-direction: column; min-height: 100%; }
display:flex; -> 레이아웃을 유연하게
flex-direction:columnl; -> 주축은 열이고 방향은 콘텐츠와 동일
min-height:100%; -> 최소높이를 100%으로, 화면 전체를 가져감
.wrapper.indexPage { /*안의 내용물을 가운데로 정렬*/ justify-content: center; }- 메인 섹션
/*메인 부분*/ .mainSection { /*선형 정렬*/ display: flex; flex-direction: column; /*박스안의 아이템들을 페이지 가운데로*/ align-items: center; }- 서치 컨테이너
.mainSection .searchContainer { margin-top: 30px; width: 100%; display: flex; flex-direction: column; align-items: center; }- 서치 박스
.mainSection .searchContainer .searchBox { border: 1px solid rgb(211, 211, 211); outline: none; height: 44px; width: 60%; max-width: 600px; border-radius: 22px; /*선형정렬*/ display: flex; align-items: center; } .mainSection .searchContainer:hover .searchBox { box-shadow: 1px 1px 1px #ddd; } .mainSection .searchContainer .searchBox .mag { width: 20px; height: 20px; margin-right: 13px; margin-left: 10px; } .mainSection .searchContainer .keyboard { width: 20px; height: 20px; margin-right: 20px; } .mainSection .searchContainer .mic { width: 20px; height: 20px; margin-right: 20px; } .mainSection .searchContainer .searchBox input { /* 서치박스가 display:flex;를 가지고 있으면 input은 flex:1;을 하면 채워짐*/ flex: 1; height: 38px; margin-right: 20px; border: none; outline: none; }-> 여기서 중요 포인트는 뭐든지 <div>로 영역을 잡아서 거기안에 넣었다 뺏다 해야한다는 것! 또한 그 <div> 안에서 위치 조절을 해야한다는 것!!!
- 클릭 버튼 두개
.box1 { width: 100px; height: 40px; background-color: #f8f9fa; margin-top: 40px; text-align: center; justify-content: center; border: none; margin-right: 10px; } .box2 { text-align: center; justify-content: center; width: 130px; height: 40px; background-color: #f8f9fa; margin-top: 40px; border: none; } .box1:hover { box-shadow: 1px 1px 1px #ddd; } .box2:hover { box-shadow: 1px 1px 1px #ddd; }
완성! 힘들었다 ㅠㅠ 호버잡기 및 div로 영역 나누는게 어렵다 'HTML-CSS-JS' 카테고리의 다른 글
HTML/CSS 클론코딩으로 복습하기 3 - 유투브 (0) 2021.08.06 HTML/CSS 클론코딩으로 복습하기 2 - 반응형 헤더 (0) 2021.08.05 HTML/CSS/JS 기초 잡기 03 CSS (0) 2021.08.04 HTML/CSS/JS 기초 잡기 02 HTML (0) 2021.08.03 HTML/CSS/JS 기초 잡기 01 기본개념 (0) 2021.08.02