본문 바로가기

HTML／CSS87

[ 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.
[ HTML / CSS ] :root를 통해 선언한 css 변수 사용해보기 안녕하세요~ 오늘은 :root를 이용하여 변수를 선언하고 사용해보려고 합니다. * 결과 * 전체 코드 버튼입니다. [ CSS ] :root 변수 선언 :root{ --white: #fff; --blue : #045fd4; --padding:8px; --padding2:16px; } [ CSS ] :root 변수 사용 button{ background-color: var(--blue); padding: var(--padding); } button:hover{ background-color: var(--white); padding: var(--padding2); } 2022. 8. 8.
[HTML/CSS] 움직이는 검색창 만들기 클릭하면 열리는 방식의 검색창입니다. 매번 같은 검색창말고 새로운 형태의 검색창을 활용해보세요!. const search = document.querySelector(".search"); const btn = document.querySelector(".btn"); const input = document.querySelector(".input"); btn.addEventListener("click", () => { search.classList.toggle("active"); input.focus(); }); @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); * { box-sizing: bor.. 2022. 7. 27.
[HTML/CSS] 체크박스 토글 버튼 만들기 안녕하세요. 오늘은 toggle 버튼을 한번 만들어보도록 하겠습니다. 소스코드 index.html toggle_btn.css /* 멘토링 상태변경 토글 */ /* 멘토 상태변경 토글 */ .toggle_box { display: flex; align-items: center; z-index: -1; margin-top: 20px; } #custom_input { display: none; } #custom_input + label.toggle_btn_label { position: relative; width: 12rem; height: 3rem; } #custom_input + label.toggle_btn_label > span { position: absolute; cursor: pointer; t.. 2022. 7. 11.
[HTML] Expanding Cards 만들기 오늘은 메인화면 등 다양한 곳에서 사용 될 수 있는 Expanding Cards 을 구현해보도록 하겠습니다. index.html Explore The World Wild Forest Sunny Beach City on Winter Mountains - Clouds script.js const panels = document.querySelectorAll(".panel"); panels.forEach((panel) => { panel.addEventListener("click", () => { removeActiveClasses(); panel.classList.add("active"); }); }); function removeActiveClasses() { panels.forEach((panel) =>.. 2022. 7. 4.
[HTML/CSS] 아코디언 만들기 안녕하세요. 오늘은 부트스트랩에서 제공하는 컴포넌트 중에서 Accordion을 한번 따라서 만들어보겠습니다. 부트스트랩을 사용하면 Accordion을 빠르게 사용할 수 있지만, 제가 원하는 대로 동작하지 않아서 한번 새로 만들어봤습니다. 부트스트랩으로 구현하는 방법이 궁금하면 다음 링크로 들어가서 확인하시면 됩니다. https://getbootstrap.com/docs/5.2/components/accordion/ Accordion Build vertically collapsing accordions in combination with our Collapse JavaScript plugin. getbootstrap.com 소스코드 index.html + js script 첫번째 아코디언 리스트 아이템1 .. 2022. 6. 26.

티스토리툴바