Html 네이버 검색창 - html neibeo geomsaegchang

HTML+CSS 검색창

위의 이미지를 예시로서 쓰면, 쉽게 말해 div안에 input와 button이 있는 것이다.

물론 인푸트(input)와 버튼(button)만으로도 표현이가능하지만,
디자인적인 요소로 인푸트검색창(input)에 패딩(padding)값을 줘야하기때문에 이와같은 형태를 갖춰야한다.

패딩이 없다면 div 테두리와 인푸트 가로세로 글씨의 간격이 좁아서 이상하게보인다.
검색창에서는 여백의 미가 중요하다.

아래는 위 예시의 html 소스로 돋보기 이미지 대신 검색이라는 글자로 대체하겠다.

<div> <input type="text" placeholder="검색어 입력"> <button>검색<button> </div>

인푸트와 버튼의 부모인 div의 크기는 사용자가 해당 페이지에 알맞게 맞춰 넣으면된다.
value는 버튼의 내부 글씨를 말한다면 placeholder는 해당 인푸트(input)창에 텍스트를 입력하면 사라지는 유동적인 기능이다.

여기서 추가로 하나 더 알려주면 placeholder 색상을 조정할 수 있다.

input:-ms-input-placeholder {color:#a8a8a8; } input::-webkit-input-placeholder {color:#a8a8a8;} input::-moz-placeholder {color:#a8a8a8;}

위의 소스처럼 색상을 지정하면된다.
크롬, 익스플로러, 파이어폭스 등등 적용할 수 있게 도와주는 3개의 소스다.
하나씩만 한다면 브라우저별로 적용안되는 부분이 나타날것이다.

따라서 3개가 한세트로 움직여야하는 소스라는 것이다.
스타일 시트나 css에 넣어주면된다.

div{ height: 40px; width: 400px; border: 1px solid #1b5ac2; background: #ffffff; }

기본적으로 div에 원하는 세로(heigh) 사이즈와 가로(width) 사이즈를 주고
border:1px solid로 색상 파란색 테두리를 적용해준다.
(※인푸트의 테두리 대신 div의 테두리를 사용)

이때 background로 배경색을 흰색으로 적용해도, 안해도되지만
이 부모인 div를 품고있는 부모의 부모 div 또는 html, body 등에 색상이 있을 것을 염두해두고
백그라운드(background)로 배경색을 흰색으로 미리 적용하는 것을 추천하겠다.

input{ font-size: 16px; width: 325px; padding: 10px; border: 0px; outline: none; float: left; }

인푸트(input)
인푸트는 기본적으로 테두리가 적용되있다.
따라서 border:0 을 하여 테두리를 제거하는 것이 첫번째 우선시해야한다.
그 후
text-align:left 로 글자 왼쪽 정렬로 맞추고
padding값을 주어 해당 div만큼 크기를 조절하여
float:left로 인푸트창을 왼쪽에 고정하고
font-size로 폰트사이즈로 텍스트의 크기 지정하면된다.
width는 div보다 작게, 버튼하고 합쳐도 400이 넘지않도록하며
약간 여유있게 395정도가 적당하다.추가적으로 outline: none를 주어 인푸트 창 클릭시 파란 테두리(선택테두리)나타나지 않게 적용하는 것도 하나의 방법이다.

button{ width: 50px; height: 100%; border: 0px background: #1b5ac2; outline: none; float: right; color: #ffffff }

button
버튼또한 기본적으로 테두리가 적용되있다.
따라서 인푸트와 마찬가지로 border 값을 0으로 주고
float:right - 버튼을 오른쪽에 고정
height:100%를 주어 div에 세로가 딱맞추고
width(가로)는 사용자가 원하는 만큼 넣어주면된다.
background로 색이 입혀졌으니
color를 #fff으로 검색 글자를 흰색으로 한다.

이 버튼 또한 인푸트와 마찬가지로 아웃라인 논(outline:none)을 주어
클릭 시 선택 표시인 파란색 테두리가 나타나지 않게 적용하면 더 깔끔하게 표현할 수 있다.

최종적으로 완성된 검색창의 형태는 아래와 같다.

매일 쓰는 브라우저 보안이 걱정된다면, 안전하고 빠른 최신 브라우저 웨일로 업데이트 하세요.다운로드

• 메일
• 카페
• 블로그
• 지식iN
• 쇼핑
• 쇼핑LIVE
• Pay
• TV

• 사전
• 뉴스
• 증권
• 부동산
• 지도
• VIBE
• 도서
• 웹툰

더보기

뉴스스탠드

주제별 캐스트

• 
  경제 "월세 돌려줄게 제발 떠나지마"… 이젠 세입자가 '갑'?

  집주인이 세입자에 내려간 전셋값 만큼 ‘월세’ 지급 대출 여력 없는 ‘영끌족’ 위험… “역월세 확산될 수 있어”대구에서 3년차 신축 아파트를 보유 중인 A씨는 곧 만기가 돌아오는 세입자가 전셋값을 2억원 낮춰달라고 해 고민이 커지고 있다. 세입자는 전세가격을 낮춰주지 않을 경우 이

  2일 전 조선비즈

• 
  경제 "11월 입주인데 당첨 취소되게 생겼습니다"

  몰락하는 부동산 시장부동산 시장이 사상 최악의 거래 빙하기로 접어들고 있습니다. 갖가지 일이 벌어지고 있는데요. 최근 부동산 시장 동향을 정리했습니다. ◇역대급 가격 하락세KB국민은행에 따르면, 8월 전국 아파트 매매가격은 전월보다 0.23% 하락해 2019년 4월 이후 3년 4개월 만에 가장 크게 내렸습니다. 특히 8월 마지막 주 전국 아파트 값은 일주일

  2일 전 데이트저스트

• 
  경제 세번의 투자를 하고 인생의 전환점을 맞다.

  대한민국에서 가장 따뜻한 '북극성부동산재테크' 네이버 카페(북극성부동산재테크 (대한민국 No.1 부동산 커뮤니티) : 네이버 카페 (naver.com))에서 활동하고 있는 단빠 입니다. 부동산 첫 투자는... 2013~2014년쯤 친정 인천 부평에 "다세대 빌라" 였습니다. 제 나이 38쯤? 직장생활 13년차 정도 됐겠네여...

  17시간 전 북극성주

• 
  경제 서울서 귀한 '6억 미만' 아파트, 영끌족 몰리더니…'환호'

  서울 강북구 번동주공1단지 재건축 사업에 속도가 붙었다. 서울에서 드문 ‘6억원 미만’ 아파트로 한때 ‘영끌(영혼까지 끌어모은)’ 투자 수요가 몰렸는데 최근 정비사업 진행 소식에 시세가 연일 오름세다.13일 강북구에 따르면 번동에 자리한 주공1단지(1430가구)는 이달 7일 예비안전진단을 통과했다. 지난 6월 말 예비안전진단을 신청한 지 약 석 달 만이다.

  4일 전 한국경제

• 
  경제 "아내 얼굴 보기 미안"…'영끌족' 패닉

  사진=연합뉴스 "주택담보대출(주담대) 금리 확인하는게 무섭네요. 이러다 연 7%를 넘어 8%대도 보게 되는 건가요. 서둘러 내 집 마련해야 한다고 고집해서 샀는데 아내 얼굴보기가 미안해질 지경입니다."대출금리가 하루가 멀다하고 오르면서 차주들의 이자 부담이 커지고 있다. 변동형 주택담보대출(주담대) 금리 기준이 되는 코픽스(COFIX·

  21시간 전 한국경제

• 경제 서장훈 빌딩 앞 1평짜리 땅 공매로 나와 '화제'…감정가는 7441만원

  서장훈 빌딩 앞 1평짜리 땅 공매로 나와 '화제'…감정가는 7441만원 방송인 서장훈이 소유한 서울시 서초구의 빌딩 앞 1평짜리 대지가 공매로 나와 화제가 되고 있다. 13일 캠코의 온라인 공매시스템 온비드에 따르면, 물건관리번호 2021-13223-012, 서울시 서초구 서초동 1366-19 대지 5.5㎡가 공매 매물로 나와 입찰이 진행 중이다. 지하철

  4일 전 곰

• 
  경제 "서울은 더 오래됐는데?" 1기 신도시, 재건축 서두르는 이유 봤더니

  동영상 버튼을 누르면 현재 화면에서 재생됩니다. '1기신도시'의 재건축 이슈, 서둘러야 할까? 사연자를 모집합니다!나만의 투자 방법, 내 집 마련 성공기, 부동산 관련 고민 등여러분의 사연을 들으러 앤디가 직접 찾아갑니다!내 집 자랑도 OK!앤디와 부동산 토크를 원하시면 링크 클릭https://forms.gle/LqvfAoGkbgVohHES

  어제 부동산R114

• 
  경제 서울 송파구·노원구 집값, 최고가 대비 20% 이상 하락한다

  [조영광의 빅데이터 부동산] 서울 부동산 매수 타이밍은 내년 여름이 적기일 듯8월, 2019년 이후 3년 만에 서울 집값이 2개월 연속 하락했다. 미래 집값을 가장 잘 설명해주는 한국은행의 주택가격전망 소비자물가지수(CSI) 역시 8월 들어 기준치를 한참 하회하는 76포인트(기준 100포인트)를 기록하며 하반기 서울 부동산시장의

  2일 전 투벤저스

• 
  경제 "부동산 전문가도 경악했다"...박명수 아내가 스타벅스로 돈버는 방법

  박명수 아내 한수민, 재테크 안목 뛰어나 '스타벅스 재테크'로 엄청난 시세차익 챙겨 임대료 연체 걱정 없는 입점 재테크 해바라기 피부과 원장 운영 중개그계 '만년 2인자'로 불리던 박명수가 재테크는 '1인자'로 알려지며 실제 재테크 천재는 따로 있는것으로 알려졌습니다. 그의 부인이 재테크 고수이며 투자 안목이 뛰어난 것으로 밝혀져 네티즌들의 관심과 부러움을

  6일 전 살구뉴스

• 
  경제 "드디어 '신발 되팔이 꾼' 사라지나"... 나이키, 운동화 재판매 금지한다

  나이키코리아가 이용약관을 개정하면서 ‘재판매를 위한 구매 불가’ 항목을 별도로 추가해 ‘리셀러(재판매자)’와 관련한 제재를 강화했습니다. 리셀 시장이 확대되면서 일부 구매자들이 인기 있을 것으로 예상되는 품목을 대량 구매하는 행위를 차단하기 위한 방편으로 풀이됩니다. 약관에는 리셀러로 판단되는 경우

  5일 전 살구뉴스

타임스퀘어

TOP