반응형

HTML 3

[웹 개발 #3] 검색 바 만들기

홈페이지 필수 요소 중 하나인 검색 바! 다들 알다시피 요로코롬 생겼다 보통 홈페이지 메인 화면에 있는 검색바는이렇게 아이콘으로 대체하다 마우스를 클릭하면입력창으로 바뀌는 모양으로 한다. (나도 못 만들 건 없지) [HTML 코드] ↓          div class="search">            input type="text"/>            div class="material-icons">searchdiv>          div>검색 바 영역 클래스 -> search검색 바 입력 박스 선언 -> type="text"검색(돋보기) 아이콘 클래스 -> material-icons 여기서 돋보기 아이콘은 구글 폰트에서 무료로 배포하는 아이콘으로 사용하였다 다운로드 하려면 ↓https://f..

웹 개발 일지 2024.12.19

[웹 개발 #2] 화면을 맨 위로 이동하는 편리한 버튼 만들기

홈페이지를 구경하다가 맨 위의 화면으로 이동하고 싶을 때 있지 않습니까?마우스 휠로 드르륵하며 힘들게 이동하는 불편함을 없애줄 편리한 버튼 만들기! 우선 이 버튼은 화면 하단에 표시할 예정이므로 footer 밑에 생성하는 것을 추천한다 [HTML 코드] ↓  div id="to-top">    div class="material-icons">arrow_upwarddiv>  div> 여기서 arrow_upward는 위로 방향 화살표로, 보통 html에 저렇게 쓰면 글자로 나오지만 이 링크를 연결하면 구글에서 무료로 제공하는 위로 방향 화살표를 가져다가 사용할 수 있다link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+I..

웹 개발 일지 2024.12.13

[웹 개발 #1] 휙 휙 지나가는 슬라이드 만드는 방법

포트폴리오 제작과정을 잊지 않기 위해 블로그에다 기능 하나하나 올려보기로 하였다!하루에 하나씩 올려보는 것이 목표이다완벽하게 만들 수 있을진 몰라도 할 수 있는 한 계속해서 디자인을 다듬고 기능을 추가할 예정이다..!  홈페이지에 단골로 등장하는 슬라이드 나도 한 번 만들어 보았다. ↓        div class="slider">            div class="slides">                div class="slide">                    img src="./slide/slide1.jpg" alt="이미지 1">                div>                div class="slide">                    img src="./..

웹 개발 일지 2024.12.10
반응형