CSS

[CSS] 카드 뒤집기(플립) 효과

코드 CSS를 이용하여 입체효과가 적용된 카드를 뒤집어 앞면, 뒷면 구분을 할 수 있습니다. .flip { width: 200px; height: 250px; perspective: 1100px; } .card { width: 100%; height: 100%; position: relative; transition: .4s; transform-style: preserve-3d; } .front, .back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; } .front { background: red; } // 뒷면은 사전에 미리 뒤집기 .back { background: royalblue; transform: ..

[CSS] text에 테두리(border) 넣기

Text Border Test 위의 HTML 코드를 기준으로 CSS를 이용한 텍스트에 외곽선 효과를 주는 방법을 소개하겠습니다. -webikit-text-stroke h2 { -webkit-text-stroke: 2px red; } 해당 방법은 표준적인 방법이 아니기에 지원하지 않는 브라우저가 존재할 수 있습니다. 하지만 text-stroke라는 속성을 이용해 단순한 width, color 지정으로 테두리를 넣을 수 있습니다. text-stroke는 width가 커질수록 바깥쪽으로 두꺼워지는 것이 아니기에 특정 수치에서는 글자를 먹어버립니다. text-shadow h2 { text-shadow: -1px 0 red, 0 1px red, 1px 0 red, 0 -1px red; } 해당 방법은 text-s..

[CSS] checkbox, radio, range 색상 바꾸기

기존의 CSS로 체크박스, 라디오 등의 색상을 바꾸기 위해서는 appearance 속성을 사용하여 네이티브로 지원되는 모양들을 해제한 후 색상을 입혀야 했습니다. 기존에는 appearance 속성으로 인해서 체크박스, 라디오 같은 상호작용 요소도 사라져 버려, 번거로운 추가 작업이 필요했습니다. 이번에 accent-color 속성이 CSS에 추가됨으로 input의 체크박스(checkbox), 라디오(radio), 레인지(range), 프로그레스(progress) 타입에 손쉬운 색상 변경이 가능해졌습니다. 코드 input, progress { accent-color: red; } appearance 같은 속성을 사용하지 않고, 단순히 accent-color 속성을 사용하여 색을 지정해 주면 됩니다. 그럴 ..

[JS] 페이지 상단(하단)으로 이동하는 버튼 구현하기

버튼 클릭 하나만으로 웹 페이지의 상단으로 이동하는 기능을 구현해보겠습니다. 코드 맨 위로 .moveTopBtn { position: fixed; bottom: 1rem; right: 1rem; width: 4rem; height: 4rem; background: #000; color: #fff; } 간단한 HTML 코드로 버튼을 만들어 줍니다. 대부분의 해당 버튼은 페이지 오른쪽 하단에 위치하기에 fixed 속성을 통해 고정시켜주었습니다. const $topBtn = document.querySelector(".moveTopBtn"); // 버튼 클릭 시 맨 위로 이동 $topBtn.onclick = () => { window.scrollTo({ top: 0, behavior: "smooth" }); ..

[CSS] 스크롤바 스타일 커스텀하기

코드 각 아래에 대한 CSS 코드를 추가해 주면 커스텀을 할 수 있습니다. ::-webkit-scrollbar : 스크롤바 영역에 대한 설정 ::-webkit-scrollbar-thumb : 스크롤바 막대에 대한 설정 ::-webkit-scrollbar-track : 스크롤바 뒷 배경에 대한 설정 영역::코드로 적용 대상을 제한하여 사용할 수 있습니다. body::-webkit-scrollbar { width: 8px; /* 스크롤바의 너비 */ } body::-webkit-scrollbar-thumb { height: 30%; /* 스크롤바의 길이 */ background: #217af4; /* 스크롤바의 색상 */ border-radius: 10px; } body::-webkit-scrollbar-t..

[CSS] checkbox 둥글게 만들기

코드 input[type="checkbox"] { width: 1rem; height: 1rem; border-radius: 50%; border: 1px solid #999; appearance: none; cursor: pointer; transition: background 0.2s; } input[type="checkbox"]:checked { background: #32e732; border: none; } 코드 풀이 해당 코드의 핵심은 appearance 속성입니다. 그냥 border-radius 속성을 적용할 시 checkbox 타입을 가진 input은 모양이 바뀌지 않습니다. 위 속성은 네이티브로 지원되는 모양들을 해제하거나 추가할 때 이용할 수 있으며 라디오처럼 둥글게 만들거나 커스텀 시..

[CSS] 요소 좌우반전

코드 .class { transform: scaleX(-1); } 위 코드를 좌우반전 시킬 요소에 스타일을 적용시키면 됩니다.

[JS] 별점 드래그 구현

완성본 코드 See the Pen Drag Star by hyukson (@hyukson) on CodePen. 코드 풀이 ★★★★★ ★★★★★ // JAVASCRIPT CODE const drawStar = (target) => { document.querySelector(`.star span`).style.width = `${target.value * 10}%`; } // JQUERY CODE const drawStar = (target) => { $(`.star span`).css({ width: `${target.value * 10}%` }); } 별점 뒤에 숨겨진 input range의 값을 드래그로 조절할 수 있습니다. 해당하는 value값만큼 별 width를 늘려주는 방식입니다. 먼저 이미지..

[JS] 틱택토 (Tic-Tac-Toe)

완성본 See the Pen Untitled by hyukson (@hyukson) on CodePen. Result 화면만을 띄워놓고 테스트를 해보실 수 있습니다. 코드 풀이 틱택토는 가로, 세로, 대각선 중 1 라인을 채우는 사람이 이기는 게임입니다. 즉 승리 조건은 가로, 세로, 대각선 중 1 라인을 다 채운 플레이어를 찾으면 됩니다. 이제 틱택토 게임을 구현하기 전 필요한 기능들을 생각해 보았습니다. 필요 기능 새 게임판 만들기 네모판을 클릭 시 현재 턴인 유저에 따른 표시 게임판에 가로, 세로, 대각선 중 1 라인을 채웠는지 확인 만약 승리 조건이 일치하지 않을 시 다음 턴 넘기기 위 기능 구현을 목표로 구현해 보았습니다. 1. 새 게임판 만들기 newMake() { let html = ''; ..

[JS] 달력 만들기

CSS의 display의 grid 속성을 이용해서 제작한 달력입니다. 완성 코드 See the Pen Untitled by hyukson (@hyukson) on CodePen. 전체 코드 const makeCalendar = (date) => { const currentYear = new Date(date).getFullYear(); const currentMonth = new Date(date).getMonth() + 1; const firstDay = new Date(date.setDate(1)).getDay(); const lastDay = new Date(currentYear, currentMonth, 0).getDate(); const limitDay = firstDay + lastDay; c..