● 이미지와 하이퍼링크 동시 설정
<a href="하이퍼링크주소">
<img src="이미지경로">
</a>
ex)
| <p><a href="https://campaign.naver.com/naverdetails/whale/?=main&wpid=RydDy7" target="_self"> <img src="C:\Users\Daniel Yang\Desktop\네이버클론/네이버상단배너.png" alt="이미지가 표시되지않음" style="width:100%"></p></a> ##이렇게 a태그 안에 img를 넣으니 되었다!!! ##참고로 경로는 네이버클론/---.png 만 해도 괜춘 |
주의: img src를 하면 alt무조건해줘야하는듯..
하이퍼링크 글자는 왼쪽에다가 하는 것
● 네이버 상단 광고 배너같이 반응형 100% 설정
<p><img src="C:\Users\Daniel Yang\Desktop\네이버클론/네이버상단배너.png" alt="이미지가 표시되지않음" style="width:100%"> ##img 태그 안에 style 로 설정, css 설정은 필요x
+ style 안에 여러개를 설정하고 싶으면 style="width:100%; height:100%;" 같이...
● 이미지 침범 문제
object-fit: cover; ##가로세로 맞추면서 블록 안에 맞게 이미지 조정
로 해결!! ++ overflow:hidden; 으로 하면 삐져나온 부분은 숨길 수 있다!!!
●
●
● 검색창 생성
| <Nav> <div id="nav_list"> <div class="search"> <div> <form class="naver_search"> <button class="img-button" type="submit" name="click" value=""> <i class="fas fa-search"></i> </button> <input class="keyword" type="text" name="naver_search" maxlength=255 value="" autocomplete="off"> </form> |
● 검색엔진 연동
| <form name=fsearch class="google_search" action="http://www.google.co.kr/search" method="GET" target="_blank"> <input name=query class="keyword" type="text" name="google_search" placeholder=" 검색어를 입력 하세요" maxlength=255 value="" autocomplete="off" style="width:400px"> <button class="img-button2" type="submit" name="click" value=""> <i class="google_enter">enter</i> </button> </form> |
포인트는 form과 input에 각각 name=fsearch, name=query를 넣는 것
● 검색창 속성
<div id="naversearch">
<input type="text" size="50" />
## 일단 검색창 사이즈는 이렇게 키운다. 대충 20정도 기본값인듯하다. 이는 글자수를 의미한다.
- placeholder="검색어를 입력하세요." 를 추가하면 검색창에 기본값으로 입력된다.
- class="searchbar" 같은 거로 설정해주면 검색창 안을 수정할 수 있다.
##주의: <input type="" /> 이다.
♣ 왜 padding 속성으로 검색창의 크기가 커지지??
● 로고 이미지 왼쪽에, 검색창을 연결
- wrap 같은 걸로 묶어준다
♣ 로고 이미지와 검색창의 크기를 같이 높이면(height) 로고만 커지는 건 왜지???
● 검색창 글자 이쁘게
| .google>span{ font-size:1.4em; } .google>span:nth-child(1) {color:blue;} .google>span:nth-child(2) {color: red;} .google>span:nth-child(3) {color: yellow;} ----------------------- <div class="google"> <span>구</span> <span>글</span> <span>링</span> |
## span으로 글자를 따로따로. 태그:nth-child(몇번째):{color}
● 검색창 배치 오류
(1) .google {display:flex;}를 하니까 검색창이 세로로 나열되는 오류
| form class="google_search"> <input class="keyword" type="text" name="google_search" maxlength=255 value="" autocomplete="off" style="width:50px"> <button class="img-button2" type="submit" name="click" value=""> <i class="fas fa-search"></i> </button> |
=>> input이 form 안에 있고 없고 차이였다.,,, 저 오류는 form 바깥에 있을때!
(2) ♣ 검색창 오른쪽에 있는거 어떻게 위치를 설정. font-size로 대강했으나...
.img-button2{
vertical-align: top;
margin-top: 6px;
}
++ button 테두리는 border:none 으로 해결한다!!! 그것두 button class에서 해결!
| .img-button2{ width:70px; height:40px; vertical-align: top; font-size:1.7em; border:none; background-color:grey; color:beige; border-radius: 10px; } |
♣ 근데 vertical-align:top을 없애면 검색창이 내려가는,,,, 도대체 무슨 관계인거지???
♣ 검색창과 padding의 연관성????
.google .keyword{
margin:13px 0px 0px 30px;
}
vs
.google .keyword{
margin:7px 0px 0px 30px;
padding: 8px 0px;
}
혹은 margin:0px 0px 0px 5px;
height:30px;
object-fit: cover;
}
도 가능. 왜 그러는거지??
(3) ♣ 어거지로 검색창 제대로 배열
| .naver .keyword{ margin:10px 0px 0px 5px; padding: 5px 0px; vertical-align:top; } |
## vertical-align:top 하면 맨 위로 올라가는데 그걸 margin으로 처리했다... 뭔가 어거지로 한 느낌
● 검색돋보기 배열(어거지....)
| .img-button1{ box-sizing: border-box; border:none; } |
++
| .img-button1{ box-sizing: border-box; border:none; background-color: teal; } |
<button type="submit" class="search_image"><span class="img"><img src="검색돋보기.png"></span></button> 이것도 가능한듯.... 검색창으로 수평으로 나열.
●
'프로그래밍 언어 > HTML' 카테고리의 다른 글
| HTML 웹사이트 만들 때 (0) | 2021.06.26 |
|---|---|
| HTML 시맨틱 방식 (0) | 2021.05.28 |
| HTML b태그, meta 태그, dl, 테이블 태그, img태그, video 태그, i, sup, ins, del 등 기타 태그 (0) | 2021.05.28 |
댓글