HTML/CSS 클론코딩으로 복습하기 1

HTML-CSS-JS

HTML/CSS 클론코딩으로 복습하기 1 - 구글

H-V 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;
}