본문 바로가기

HTML／CSS92

[ HTML / CSS ] 스크롤 스냅(Scroll Snap) 기능 사용해보기 안녕하세요 오늘은 CSS의 스크롤 스냅(Scroll Snap) 기능을 사용해보겠습니다. 이 기능을 사용하면 스크롤바가 이동한 만큼만 하위 요소들이 이동하는 것이 아니라, 스크롤을 하면 자동으로 다음 요소로 애니메이션 효과와 함께 이동하면서 달라붙는 효과를 표현할 수 있습니다. 구현한 예제 시연 화면은 다음과 같습니다. 다음은 예제 전체 코드입니다. Spring Summer Autumn Winter 'container' 클래스에 'scroll-snap-type' 속성을 추가했습니다. 속성 값은 'y mandatory' 를 사용했습니다. 세로 방향으로 스크롤할 것이므로 'y' 값을 주었고, 페이지 단위로 자동으로 스크롤되게 하기 위해서 'mandatory' 값을 사용했습니다. 'mandatory' 속성을 사.. 2022. 10. 3.
[HTML/CSS] 간단한 그림판 만들어보기 오늘은 HTML, CSS, Javascript 로 간단한 그림판을 구현해보겠습니다. - 10 + X const canvas = document.getElementById("canvas"); const increaseBtn = document.getElementById("increase"); const decreaseBtn = document.getElementById("decrease"); const sizeEL = document.getElementById("size"); const colorEl = document.getElementById("color"); const clearEl = document.getElementById("clear"); const ctx = canvas.getContext(.. 2022. 9. 25.
[HTML/CSS] 랜딩 페이지 만들어보기 렌딩 페이지는 웹사이트에 처음 들어갔을 때, 사용자의 이목을 집중시키는 것이 필요합니다 간단한 렌딩페이지를 만들어보겠습니다. Playstation 5 Buy Now XBox Series X Buy Now const left = document.querySelector(".left"); const right = document.querySelector(".right"); const container = document.querySelector(".container"); left.addEventListener("mouseenter", () => container.classList.add("hover-left") ); left.addEventListener("mouseleave", () => container.. 2022. 9. 25.
[ HTML / CSS ] 파비콘(favicon) 적용해보기 안녕하세요 오늘은 파비콘을 적용해보겠습니다. 파비콘은 웹사이트에 접속했을 때 상단 탭에 보여지는 아이콘을 말합니다. 예를 들어 네이버의 파비콘은 다음과 같습니다. 파비콘을 적용하는 방법은 다음과 같습니다. 파비콘 튜토리얼 파비콘이 적용된 모습은 다음과 같습니다. 2022. 9. 20.
[HTML/CSS] 아날로그 시계 구현해보기 오늘은 아날로그 시계 구현해보겠습니다. Dark mode const hourEl = document.querySelector(".hour"); const minuteEl = document.querySelector(".minute"); const secondEl = document.querySelector(".second"); const timeEl = document.querySelector(".time"); const dateEl = document.querySelector(".date"); const toggle = document.querySelector(".toggle"); const days = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday.. 2022. 9. 10.
[ HTML / CSS ] Tailwind CSS 사용해보기 안녕하세요, 오늘은 Tailwind CSS 를 사용해보겠습니다. Tailwind 는 CSS 프레임워크 중 하나로, HTML 안에서 CSS 스타일을 쉽고 빠르게 만들 수 있게 도와줍니다. 스타일 코드가 HTML 안에 있기 때문에 HTML과 CSS 파일을 따로 관리할 필요가 없어집니다. 그리고 부트스트랩과 비슷하게 미리 정해진 유틸리티 클래스를 사용함으로써 일관된 디자인이 가능하며 클래스명을 고민하는 수고를 덜 수 있습니다. 예를 들어, 다음과 같은 버튼 3개를 구현 할 때, Tailwind CSS 를 사용하지 않고 일반 CSS 스타일링을 하면 다음과 같은 코드가 필요합니다. 빨간색 버튼 녹색 버튼 검은색 버튼  Tailwind CSS 를 사용하는 경우에는 다음과 같이 코드를 작성할 수 있습니다. 빨간색 .. 2022. 9. 5.
[HTML/CSS] 다이나믹한 리스트 만들어보기 오늘은 다이나믹한 리스트를 만들어보겠습니다. 밋밋한 리스트말고, 동적인 리스트를 만들어보세요. Scroll to see the animation Content Content Content Content Content Content Content Content Content Content Content Content Content const boxes = document.querySelectorAll(".box"); window.addEventListener("scroll", checkBoxes); checkBoxes(); function checkBoxes() { const triggerBottom = (window.innerHeight / 5) * 4; boxes.forEach((box) => { co.. 2022. 8. 26.
[ HTML / CSS ] 늘어나는 textarea 만들기 오늘은 늘어나는 textarea 를 구현해보겠습니다. 즉, 입력한 글자가 늘어남에 따라 textarea 의 높이도 길어지게 하겠습니다. 전체 시연 영상은 다음과 같습니다. 먼저 다음과 같이 textarea 요소를 body 태그 안에 작성합니다. rows="1" 속성으로 인해서 처음 시작 높이는 1줄이 됩니다. 그리고 oninput 이벤트 속성은 사용자가 요소에 정보를 입력하거나 요소의 값이 변경되면 실행됩니다. 즉, textarea 요소에 사용자가 입력을 할 때마다 해당 textarea의 높이는 스크롤높이와 동일하게 되고, 따라서 textarea의 높이는 고정되지 않고 사용자의 줄바꿈에 따라, 혹은 입력값이 늘어나고 줄어들 때마다 달라지게 됩니다. 영상에서 보이는 것처럼 입력 내용의 길이에 따라 text.. 2022. 8. 21.
[HTML/CSS] 사진 로딩 애니메이션 사용하기 블루레이나, 고화질의 이미지를 로딩할 때, 자연스럽게 연출해보세요 0% const loadText = document.querySelector(".loading-text"); const bg = document.querySelector(".bg"); let load = 0; let int = setInterval(blurring, 30); function blurring() { load++; if (load > 99) { clearInterval(int); } loadText.innerText = `${load}%`; loadText.style.opacity = scale(load, 0, 100, 1, 0); bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}.. 2022. 8. 11.

티스토리툴바