이야기 정리

:has 특정 요소를 가진 태그를 선택한다. :not 특정 요소가 없는 태그를 선택한다. 설명만 봐서는 어디에 써야할지 난해한 가상 클래스지만, 실제 활용된 사례를 보면 무긍무진한 가능성을 확인할 수 있다. 지원브라우저가 사파리와 크롬밖에 없다는 단점이 있지만, 사용하기에 따라서는 자바스크립트 없이 CSS만으로 재밌는 것들을 만들 수 있어 간단히 다뤄보려고 한다. 활용 1 : 디자인이 비슷하나, 특정 요소가 없거나/더해질 때 See the Pen CSS :has, :not (1) by beren-105 (@beren-105) on CodePen. 두개의 카드 디자인이 있다. 하나는 이미지가 있고, 하나는 이미지가 없는 대신 상단에 border의 색상이 변경됐다. 본래라면 각각 클래스를 다르게 설정하며 따..

자바스크립트 없이 input의 radio 기능을 사용해 간단하게 클릭 애니메이션을 구현할 것이다. 만들어볼 애니메이션은 총 4종류다. 완성 코드는 아래와 같으며, 스크롤을 내리면 나머지 3종도 볼 수 있다. See the Pen Navigation CSS by beren-105 (@beren-105) on CodePen. 0. 기본 레이아웃 기본 레이아웃을 기반으로 4가지를 모두 만들 것이기 때문에 span 태그는 기본적으로 display:none로 두고, 필요할 때만 block으로 사용했다. 보통이라면 label 안에 input을 넣어 코드를 간결하게 적었겠지만, 애니메이션 효과를 만들기 위해 둘을 따로 분리해서 작성했다. 색상 통일을 위해 :root로 기본 색상과 자주 쓰는 transition을 넣어..

eval 함수는 왜 사용하면 안될까? 계산기를 만들기 위해 코드들을 참고하다보면 자주보는 코드가 있다. 바로 eval 함수다. eval 함수는 전달된 문자열을 JS코드로 해석해 해석된 코드를 실행한다. 얼핏 편리해보이는 이 함수를 어째서 사용해선 안될까? 이유는 크게 3가지로 나눌 수 있다. 성능 : 어떤 문자열이 함수에 전달될지 예측하기 어렵다. 보안 : 텍스트 필드에 악성 코드를 입력하면, eval 함수로 실행되어 보안에 위험이 생긴다. 디버깅 : eval 함수에 전달되는 값은 문자열이기 때문에 ‘,’를 제대로 명시 하지 않을 시 문제가 발생한다. 참고 : https://developer-talk.tistory.com/271 위와 같은 이유로 eval함수를 사용하지 않고, 간단한 계산기를 만들었다. ..

HTML 삽입 미리보기할 수 없는 소스 발생한 문제점 타이머에서 index가 서로 공유되는 현상이 발생했다. 해결 하나의 index를 사용해 두 곳에 적용해 발생한 문제로, 각각 index를 따로 선언해주었다. 우선 스톱워치와 타이머를 오갈 수 있는 탭버튼 이벤트를 만들어주었다. // tap 버튼 이벤트 const tapBtn = document.querySelectorAll('.tap') const tapCont = document.querySelectorAll('.tapcon') tapBtn.forEach((tapBtns)=> { tapBtns.addEventListener('click', (e)=> { let id = e.currentTarget.dataset.id if (id) { for (let..

HTML 삽입 미리보기할 수 없는 소스 현대인에게 한시도 떼어놓을 수 없는 물건은 무엇일까? 당연히 핸드폰이다. 핸드폰 배터리가 10% 이하로 내려가면 점점 초조해지는건 많은 사람들이 공감할 것이다. 사람들에게 중요한 핸드폰에 꼭 들어가는 초기 어플들이 몇가지 있다. 캘린더, 사진, 메모, 카메라, 그리고 시계다. 어떤 핸드폰도 시계에 알람과 스톱워치, 타이머 기능이 탑재되어 있다. 그만큼 시간은 사람들에게 중요한 요소이다. 때문에 두번째 프로젝트로는 스톱워치와 타이머를 선택했다. 두개의 기능을 동시에 만드는 만큼 각각 필요한 요소들을 적어보았다. 어떤 기능이 필요할까? : 스톱워치 현재 초를 표기하는 화면 시작 버튼 리셋 버튼 중간에 시간을 저장할 수 있는 랩 버튼 랩을 하단 리스트로 보기 어떤 기능이..

개발공부를 시작하면 DOM이란 단어를 쉽게 볼 수 있다. 그렇다면 DOM이란 무엇이고 무슨 뜻일까? DOM과 브라우저를 비롯해 웹 사이트의 간단한 개념에 대해 알아볼 것이다. 웹사이트 웹 사이트란? 일반 URL을 통해 보이는 웹 페이지를 의미한다. HTML, CSS JavaScript로 이뤄져있다. HTML, CSS JavaScript의 차이 HTML : HyperText Markup Language 브러우저에게 웹 사이트의 요소들이 어떻게 구성되어 있는지 알려주는 역할, 사람으로 치자면 뼈대에 해당한다. CSS : Cascading Style Sheets 웹 사이트의 요소들을 꾸며주는 역할로, 사람의 외관이라 생각하면 된다. JavaScript 브라우저에 다양한 일을 수행하고, 웹 사이트의 요소를 생성..

HTML 삽입 미리보기할 수 없는 소스 1. 클릭 이벤트 (체크박스, 삭제버튼) 코드를 확인 하기 전, 코드를 작성하며 맞닥들인 문제점과 해결방안에 대해 정리했다. 체크박스에서 발생한 문제점 체크박스를 클릭했으나, 클릭 이벤트가 발생하지 않았다. 체크박스는 일정이 새로 생성 된 후 만들어지고, 각각 다른 인덱스를 갖는다. 때문에 처음 querySelector로 선언해도 맨 처음 것만 선택될 뿐, 나머지는 해당되지 않는 것이었다. 이를 해결하기 위해 카우셀을 만들 때처럼 반복문을 사용했으나, 새로운 리스트를 생성할 때 마다 반복문이 따로 놀기만 했다. 체크박스 문제점의 해결 // 체크박스 클릭 이벤트 listCon.addEventListener('click', (e)=> { const btn = e.cur..

HTML 삽입 미리보기할 수 없는 소스 쉽게 봤다가는 생고생하기 쉽다. 첫 프로젝트에서 배운 유익한 결과다. 대부분 자바스크립트 첫 프로젝트는 to do list를 추천한다. 처음으로 추천하는데에는 이유가 있겠지. 뭐 그리 어렵겠어? 하고 가벼운 마음으로 시작한 프로젝트는 하루를 홀랑 날려버렸다. 머릿속에서 구현한 코드와 실제 실행되는 코드는 달랐기에 내가 처음에 대충 이렇게 하면 되겠지~ 싶었으나, 그리 쉽지 않았다. 결국 그대로 하루가 끝나며 겨우 마무리 지었다. 아직 기초가 부족하단 의미이며, 동시에 자잘한 실수가 많았다. 그래도 간단하게 만든다면, 하루면 끝낼 수 있는 프로젝트다. 필자와 같은 자잘한 실수를 하지 않도록, 오늘은 기획 내용 및 날짜와 관련된 간단한 코드를 살펴볼 것이다. 어떻게 만..