본문 바로가기

HTML/CSS95

[HTML/CSS] FAQ 페이지 만들어보기 오늘은 HTML 과 CSS 그리고 Javascript 를 통해 FAQ 페이지를 만들어보겠습니다. 자주 묻는 질문 자주 묻는 질문 1 대답 1 자주 묻는 질문 2 대답 2 자주 묻는 질문 3 대답 3 자주 묻는 질문 4 대답 4 const toggles = document.querySelectorAll(".faq-toggle"); toggles.forEach((toggle) => { toggle.addEventListener("click", () => { toggle.parentNode.classList.toggle("active"); }); }); @import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); * { box-sizing.. 2022. 10. 25.
[JavaScript] 현재시각 표시하기 안녕하세요, 오늘은 자바스크립트의 toLocaleTimeString() 메소드를 사용해서 현재 시각을 표시해보겠습니다. toLocaleTimeString() 은 Date 객체의 날짜의 시간 부분을 지역에 맞는 언어 포맷으로 반환하는 메소드입니다. 구현된 예제 시연 화면은 다음과 같습니다. 다음은 예제 전체 코드입니다. 2022. 10. 18.
[HTML/CSS] 로그인 페이지 만들어보기 밋밋하지 않게 움직이는 로그인 페이지를 만들어보겠습니다. Please Login Email Password Login Don't have an account? Register const labels = document.querySelectorAll(".form-control label"); labels.forEach((label) => { label.innerHTML = label.innerText .split("") .map( (letter, idx) => `${letter}` ) .join(""); }); @import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); * { box-sizing: border-box; } body {.. 2022. 10. 10.
[ 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.