HTML／CSS87 [ HTML / CSS ] ::after, ::before 사용해보기 안녕하세요 오늘은 css 의 가상요소(pseudo-element)인 ::after 과 ::before 에 대해 알아보겠습니다. CSS 가상 요소는 선택자로 선택한 요소의 뒤에 붙여 표기하는 미리 약속된 키워드를 말합니다. 요소의 특정한 부분에 정해진 기능을 하도록 가상 요소 키워드 별로 미리 기능이 정의되어 있으며, 요소에 CSS 속성을 적용하는 것과 같은 방법으로 다양한 CSS 속성을 적용할 수 있기 때문에 마치 하나의 하위 요소처럼 사용할 수 있어서 가상 요소(pseudo-element)라고 합니다. 그리고 ::after, ::before 는 내용의 앞과 뒤에 컨텐츠를 추가할 때 사용하면 유용한 가상요소입니다. 이 컨텐츠는 content 라는 속성에서 정의할 수 있습니다. 바로 예제로 넘어가겠습니다... 2022. 11. 2. [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. 이전 1 ··· 3 4 5 6 7 8 9 10 다음
