나.. 나도 검색창 옆에 돋보기 만들고 싶어 !!!
돋보기 아이콘 추가하고 싶어 !!
search 창은 나름 간지나게 생성하였으나, 문제는 검색창 옆에 돋보기 아이콘을 추가하고 싶은 욕심이 생겼다는 것이다.
그 욕망을 실현시키기 위해 fontawesome 아이콘을 이용하겠다.
1. 해당 코드 <head> 영역에 삽입
<script src="https://use.fontawesome.com/releases/v5.2.0/js/all.js"></script>html 파일 중 <head> 영역에 위의 코드를 삽입하자
2. fontawesome 사이트 접속 후 search 아이콘 페이지 접속
https://fontawesome.com/v4/icon/search
fa-search: Font Awesome Icons
Get 1535 icons right now with FA Free, plus another 7020 icons with Pro, which also gets you another 53 icon category packs as we finish them! Our all-new SVG with JavaScript gives you all the power of SVG without the usual hassle. Ligatures for easier des
fontawesome.com
3. <i> 돋보기 코드를 <body> 태그 안 원하는 곳에 삽입
<span id="search_icon">
<i class="fa fa-search"></i>
</span>나는 돋보기 아이콘을 css에서 다른 색깔로 지정해주고 싶기 때문에
<span> 태그로 감싸주었으며, id를 지정하였다.
fontawesome 태그 형식 <i>는 이 자체로 색을 지정해줄 수 없으므로
<span>이나 <div> 태그로 감싸준다.
span, div에 id나 class를 부여하면 해당 속성을 이용해서 색을 지정해줄 수 있다.
4. (css) 색 지정
지정한 id를 css 파일에서 color 속성을 darkgray값으로 지정해주었다.
그리고 돋보기 아이콘이 검색창 안에 위치해있으면 좋을 것 같아서 margin 값을 -43px로 지정해줌
#search_icon{
margin: -43px;
padding: 0px;
color: darkgray;
}
멋없게 메뉴바 피카츄색으로 칠해놓는 그런 사람 아닙니다.
단지 영역을 확인하려고 하는 것일뿐,
원래는 메뉴바 하얀색으로 해놓을 예정 (나중가서는 모르겠지만 일단 계획은 하얀색임)
5. 커서 포인터 추가
검색어를 입력하고 돋보기 버튼을 클릭하면 검색어 찾기 결과 페이지로 넘어가는 기능을 구현하면 좋겠지만
아직 초짜이므로 그런 느낌만 주기 위해, 마우스를 돋보기에 가져가면 클릭 커서로 넘어가는 포인트를 주겠다.
#search_icon{
margin: -43px;
padding: 0px;
color: darkgray;
cursor: pointer;
}
언젠간 ..! 찾기 결과 페이지로 넘어가는 기능을 구현해보겠어
오 나중가서는 진짜 뜯어고칠게 너무 많겠다
그래도 잼써 ~!~!~!~!~!~!~!~!
'[Language] > VIEW' 카테고리의 다른 글
| [SH FILM/CSS] 이미지 가운데 정렬 (0) | 2022.10.22 |
|---|---|
| [SH FILM/CSS] Menu 상단바 완성 (0) | 2022.10.22 |
| [HTML] link rel 속성 (0) | 2022.10.20 |
| [HTML] div / span / p 차이 (0) | 2022.10.20 |
| [HTML/CSS] 1. 웹페이지 메인 - 초안 제작 완료 (0) | 2022.10.20 |
