HTML

[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: ..

[JS] 이미지 src 변경하는 방법

자바스크립트에서 이미지의 src를 바꾸는 방법을 소개하겠습니다. 위와 같은 예시 html에서 이미지에 접근하는 간단한 방법은 querySelector 메서드를 이용하는 것입니다. // JavaScript $img = document.querySelector(".imgbox > img"); $img.src = `change.png`; 해당 메서드를 사용하여 img DOM 객체를 가져올 수 있으며, 해당 DOM 객체에서 src를 바꾸는 방법은 아래와 같습니다. Jquery를 사용하면 아래와 같은 한 줄로 끝낼 수 있습니다. $(`.imgBox > img`).attr({ src: "change.png" });

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

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

[JS] 클릭한 요소의 index 구하기

1 2 3 4 5 6 위와 같은 HTML 코드에서 div를 클릭, 클릭한 요소의 index (순서)를 구하는 방법입니다. JS const boxs = document.querySelectorAll(".boxList > div"); boxs.forEach((el, index) => { el.onclick = () => { console.log(index); } }); 가장 쉬운 방법은 다수의 이벤트를 걸어주는 반복문에서 index를 가져오는 방법입니다. 하지만 다수의 이벤트를 걸어주지 못하는 상황에서는 아래와 같은 방법으로 index를 가져올 수 있습니다. const $box = document.querySelector(".boxList"); $box.onclick = (e) => { const nodes..

[React] 동적으로 HTML 코드 추가하기

html 태그를 유동적으로 사용하기 위해서 기존 JavaScript에서는 innerHTML을 사용하여 바꿔주었지만, React에서는 해당 방법을 사용하는 것은 엄청나게 비효율적입니다. 텍스트로 구성된 HTML 태그를 추가하기 위해서는 React에서 정한 특정 규칙을 사용해야 합니다. 코드 React에서 dangerouslySetInnerHTML={{ __html: Code }} 와 같은 형식으로 사용하면 됩니다. const html = "가나다라"; const Main = () => { return ( ); } export default Main;

[JS] 정규식으로 모든 HTML 태그 제거하기

코드 const reg = /]*>?/g String.replace(/]*>?/g, ''); HTML 태그의 형식( )에서 에 싸여있는 태그를 모두 감지할 수 있는 정규식입니다. 해당 정규식을 사용하여 HTML 태그를 매치, 제거할 수 있습니다. 예시 가나다라 위와 같은 HTML 태그를 텍스트로 받아와 아래와 같은 코드로 태그를 제거해주면, 태그가 제거된 가나다라 텍스트만 남게 됩니다. // JavaScript const $el = document.querySelector(".box"); const newText = $el.innerHTML.replace(/]*>?/g, ''); console.log(newText);

[HTML] SVG안에 이미지 넣기

SVG 안에 이미지 넣기 흔히 SVG 태그 안에 이미지를 넣는 방법은 평소에 사용하던 태그를 SVG안에 넣어서 사용하면 해결될 것 같지만, SVG 태그 안에서는 태그를 사용할 수 없습니다. SVG 태그 안에 이미지를 넣는 방법은 태그를 사용하는 것입니다. 태그는 SVG 요소 안에 이미지를 포함시킬 수 있게 해주는 태그입니다. 사용할 수 있는 이미지 형식은 PNG, JPEG, SVG 형식이며, 아래 속성으로 이미지를 조정할 수 있습니다. x : 이미지의 x축 좌표 위치 지정 y : 이미지의 y축 좌표 위치 지정 width : 이미지의 너비 height : 이미지의 높이 href : 이미지 파일의 URL을 가리킵니다. PreservAspectRatio : 이미지의 크기 배율 조정. 코드 태그에서는 src 속..

[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] 체크박스 하나만 선택

코드 first second third // Javascript function clickCheck(target) { document.querySelectorAll(`input[type=checkbox]`) .forEach(el => el.checked = false); target.checked = true; } 코드 풀이 3개의 체크박스 각각에 클릭 이벤트를 걸어주며 클릭 시 clickCheck 함수를 호출합니다. 체크 박스를 체크 시 자기 자신 element를 같이 넘겨줍니다. checkbox 타입을 가진 모든 input의 checked 속성을 false로 바꿔 선택 상태를 해제시켜줍니다.그 후 매게변수로 받아온 체크한 elmeent의 checked 속성만을 true로 바꿔줍니다.

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

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