[html css js] 이미지 순차적으로 나타내는 효과 이미지를 순차적으로 나타내는 효과를 만들기 위해 gsap 라이브러리를 사용한다. html 코드 자세히 보기 css 코드 (요소 배치 코드는 생략) .visual .fade-in { opacity: 0; } - 기본으로 투명도를 0으로 설정 Javascript 코드 const fadeEls = document.querySelectorAll(".visual .fade-in"); fadeEls.forEach(function (fadeEl, index) { //gsap.to(요소, 지속시간, 옵션); gsap.to(fadeEl, 1, { delay: (index + 1) * 0.7, opacity: 1, }); }); .visual 클래스의 .fade-in으로 설정된 요소들을 가져온 후 각각에 요소에 다른 시간.. 2022. 2. 20. [HTML CSS JS] 우측에 고정 배너 구현하기 화면 우측 상단 부분에 고정되어 있으며 스크롤을 아래로 내릴때 사라지는 배너 구현하기 1. HTML badges 클래스 div 생성 두 개의 badge 클래스 div 생성 후 각각에 div 내에 배너 이미지 링크 2. CSS /* badges 항목을 항상 같은 위치에 놓기 위해 position 속성 absolute 설정 상위에 header의 position 속성은 fixed로 스크롤에 영향 없이 고정 속성 */ header .badges { position: absolute; top: 132px; right: 12px; } /* 배너 이미지의 코너 부분을 둥글게 마감하기 위해 border-radius 값 설정 border-radius 설정 적용을 위한 overflow : hidden 설정 배너 위에 마우.. 2022. 2. 6. [HTML CSS JS] 검색 박스 구현 (Search Box) HTML CSS JS를 활용하여 Transition 효과가 들어간 검색 박스를 구현한다. 1. HTML 구현 search 클래스 div를 생성 search div 내에 input 태그 생성 material-icons 클래스를 갖는 span 태그 생성 material-icons 클래스는 구글에서 제공하는 아이콘들을 이용하기 위한 방법으로 내용(content)로 아이콘 명을 작성하면 해당 아이콘이 삽입됨 https://fonts.google.com/icons 구글에서 제공하는 material-icons를 활용하기 위해 태그 안에 아래 코드 삽입 (삽입 위치는 js파일, css파일 위에 작성하는 것이 좋음) 2. CSS 구현 /* 높이와 하위 항목 position absolute 지정을 위한 position .. 2022. 2. 6. [HTML JS] data 속성(data attribute) HTML 학습중 data 속성을 알게되었다. 태그에 데이터를 저장? 지정? 하는 속송 사용법 예시 신기했던 것은 javascript에서 데이터에 접근할 때 "ele.dataset.데이터이름"으로 접근하는 것이다. html에서는 분명 데이터 이름을 "place-name"으로 작성했는데 js에서는 placeName으로 접근이 가능했다. 자동으로 이름을 js에서 가능한 이름으로 변경하는 것 같다. 몇 가지 실험을 했다. 1. js 코드 수정 elem.dataset.placename => 동작X -> HTML에서 하이픈(-)으로 작성한 코드는 js에서 대문자로 접근해야하는 것 같다. 2. html 코드 수정 data-placename으로 데이터 속성 수정 js에서 elem.dataset.placename으로 접.. 2022. 1. 23. 이전 1 2 3 다음
