21.2.16

<배운 것 이용한 검색바 만들기>

1. 이미지 가운데 정렬하기 :
   header 태그로 구획 정한 뒤 text-align으로 center 설정.

2. 클래스와 input의 css를 따로 다룬 이유 :
   고민 포인트 : 같이 정렬하면 적용이 안 되었던 css 문제

• 클래스 : 블럭 단위의 div, 정렬의 문제
• input : 정렬의 문제가 아닌 css 꾸밈의 문제.

position 위치 시키기에 대해 참고하기 좋은 블로그
참고 블로그

3. 검색창 위에 이미지 올리기 초반 단계(input text 위에 img 올리기) :

• 고민했던 것 : div의 영역에 대한 고민
• 시도 :z-index를 적용하지 않고 태그 형태 설정

힌트

<div style="position: relative;">
첫번째 DIV 영역
</div>
<div style="position: relative; left:10px; top: -70px;">
두번째 DIV 영역
</div>

하지만 relative 하기 때문에 화면의 크기에 따라 아이콘의 위치가 바뀜.

• 해결 : absolute 를 활용한 고정 및 위치 조정

.search{
  text-align: center;
}
.search{
  position: absolute;
}

.icon1{
  position: absolute;
  top: 10px;
}

.icon2{
  position: absolute;
  right: 10px;
  top: 10px;
}

그 외 3, 4번 문제는 무난히 통과.

그 외 아쉬웠던 점 : buttons라는 클래스를 만들고 css를 적용했는데 조금 더 동적인 것을 못 만들어서(사실 생각이 잘 안 나서) 아쉬웠다.

• 문제 : div값 일부 수정하여 검색창 조절필요(값이 absolute로 묶여 있었음)
• 해결 : 전체를 div로 묶은 뒤 간격 조정 후 검색창 값 등 마진 값으로 해결.