CSS 검색창 만들기

    div, form, input {

            box-sizing: border-box;

        }

 

box-sizing : border-box; 역할 

box-sizing : border-box;를 사용하면 지정한 크기 안에 

패딩과 보더가 포함이 된다 레이아웃을 조정할 때 유용하다 

 

 

box-sizing : border-box;를 사용 안할 시 

box-sizing : 의 기본값은 

box-sizing:content-box;

이다

 

 

   #header {

            width: 600px;

            height: 150px;

            position: relative;

         }

 

#header는 div 태그의 id = header 요소이다 

가로 600px 세로 150px로 설정을 했다

 

position : relative;는 현재 이 요소의 위치를 기준으로 자식 요소들이 배치될 수 있게 만든다

자식 요소에 absolute를 사용할 때 기준이 된다 

 

        #search-form {

            width: 80%;

            height: 20%;

 

            position: absolute;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            margin: auto;

            /* => 절대위치/상대위치를 사용하여 상하좌우 모두 양 끝으로 가도록 설정하면 가운데 배치됨! */

        }

 

search-form은 

form의 요소이다 

 

*form :

HTML 문서에서 사용자가 입력을 받아 서버로 전송하는 역할을 한다  

 

 

 width: 80%;

 height: 20%;

 

너비는 부모 요소의 80% 

높이는 부모 요소의 20%로 설정한다 

 

테두리 안에 있는 빨간부분이 부모 요소인 header

 

      position: absolute;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            margin: auto;

은 부모 요소의 중앙에 배치하게 한다 

모든 방향값이 0이고 margin이 auto로 설정 되어 있어 

부모 요소의 중앙에 정렬이 된다

 

  #search-form > input { height: 100%; float: left; }

        #search-form > input:nth-child(1) { width: 80%; }

        #search-form > input:nth-child(2) { width: 20%; }

 

선택자 search-form > input

> 자식 선택자를 의미한다 요소가 앞의 요소의 직계 자식이어야만 선택이 된다 

form 태그의 직계 자식으로 존재하는 모든 input 요소가 대상이다 

 

:nth-child(n) => 자손들 중에 n번째 자손 요소 선택