구글 홈페이지 클론 코딩[유튜버 조코딩님]

728x90

CSS :nth-child() Selector (w3schools.com)

CSS :nth-child() Selector

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

Example

How to use the :nth-child() selector:

/* Selects the second element of div siblings */
div:nth-child(2) {
background: red;
}

/* Selects the second li element in a list */
li:nth-child(2) {
background: lightgreen;
}

/* Selects every third element among any group of siblings */
:nth-child(3) {
background: yellow;
}

유용한 자동 태그 익스텐션 htmltagwrap

사용법 alt+w

부트스트랩은 최종 css보다 위에 붙여주도록 하자. 개발자가 작성한 css가 최우선순위가 될 수 있게끔.

    <form action="https://www.google.com/search" method="GET">
      <div
        class="mx-auto mt-5 position-absolute top-90 start-50 translate-middle search-bar input-group mb-3"
      >
        <input
          name="q"
          type="text"
          class="form-control rounded-pill"
          placeholder="Google 검색 또는 URL 입력"
          aria-label="Recipient's username"
          aria-describedby="button-addon2"
        />
      </div>
    </form>

<form>태그의 action은 어디로 향할건지라는 주소이고

method는 데이터의 전송 방식이다.

Get 방식은 주소창의 뭔가를 ?물음표 뒤에 name에 해당하는걸 가져와서 사용자가 작성한걸 보내주는 방식

https://www.google.com/search?q="사용자입력값"

반대로 post 방식을 사용하게 되면

주소창에 전달할 때가 아니라 내부적으로 뭔가를 전달할 때 사용한다.

구글 검색창 같은 경우는 주소창에 정보를 보내기 때문에

Get 방식으로 사용자의 입력 내용을 q라는 이름에 담아서 보낼 것이다.

html

<!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
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <h1>
      <span>G</span><span>o</span><span>o</span><span>g</span><span>l</span
      ><span>e</span>
    </h1>

    <form action="https://www.google.com/search" method="GET">
      <div
        class="mx-auto mt-5 position-absolute top-90 start-50 translate-middle search-bar input-group mb-3"
      >
        <input
          name="q"
          type="text"
          class="form-control rounded-pill"
          placeholder="Google 검색 또는 URL 입력"
          aria-label="Recipient's username"
          aria-describedby="button-addon2"
        />
      </div>
    </form>
  </body>
</html>

css

h1 {
  margin-top: 257px;
  text-align: center;
  font-size: 90px;
  font-weight: 550;
}
form {
  text-align: center;
}
h1 span:nth-child(1) {
  color: #4582f4;
}

h1 span:nth-child(2) {
  color: #ea4335;
}

h1 span:nth-child(3) {
  color: #fbbc05;
}
h1 span:nth-child(4) {
  color: #4285f4;
}
h1 span:nth-child(5) {
  color: #34a853;
}

h1 span:nth-child(6) {
  color: #ea4335;
}
.search-bar {
  width: 500px;
}

728x90

'마크업 > Html & Css' 카테고리의 다른 글

Html/css 구성하는데 유용한 사이트 (0)	2022.04.23
[1분 코딩] CSS 레이아웃 핵심 (0)	2022.03.26
CSS의 레이아웃 display (0)	2022.03.21
CSS 기초 기본 (0)	2022.03.20
반응형 웹 필수템 부트스트랩 (0)	2022.03.18

Example

'마크업 > Html & Css' 카테고리의 다른 글

티스토리툴바