HTML+CSS 를 이용한 웹 메인 사이트 만들기 - 4 일차 보고서

1. 작업 시간 : 56분

2. 작업물 : 

레이아웃 css를 다 짜려고 했는데 뭔가 마음에 안들어서 지우고 다시 쓰는 데 시간이 많이 들었고, 결국 header만 작성 했다. Flex 기법을 사용했던 곳에 직접 조율이 힘들어서 float으로 바꿧다가 나중에 요소가 추가되면 수정하기 쉽게 다시 flex로 바꿧다가 겨우 그작업만 했는데 시간을 다써버렸다.

 

아래는 header만 작성된 결과물이다.

4일차 헤더(header)

나머지 section 과 footer는 display:none을 박아 헤더에만 집중하기 좋게 감춰둿다.

 

위의 검색 창은 naver쪽 검색을 참고했다.

<div class="search_box">
  <form name="네이버" action="https://search.naver.com/search.naver" method="get">
    <input name="query" type="text" />
    <button type="submit">
      <i class="fa fa-search"></i>
    </button>
  </form>
</div>

form태그의 action속성과 input 태그의 name값 query, button태그의 type=submit 을 활용해 적은 것이다.

 

네이버 검색 url

input태그의 name값을 query로 쓴 이유

네이버에서 직접 '1234'를 검색하면 url 맨 뒤에 query=1234가 보인다. 이는 네이버가 query라는 것에 사용자가 입력한 값을 대입해서 결과물을 가져온다는 얘기이다.

 

query 대신 다른 name 을 쓰면 naver 검색창은 작동이 되지만 결과물은 가져오지 못할 것이다. db에서 query로 검색을 하지 않았기 때문이다.

 

 

3. 다음 계획 :

세세한 수정은 뒤로하고 레이아웃을 다 짜놓고 하는게 나을 것 같아 css 레이아웃 작업 완료를 목표로 할 예정이다.

 

5일차 정리↓↓

 

HTML+CSS 를 이용한 웹 메인 사이트 만들기 - 5일차 보고서