그냥, 일단 써내려가자

안녕하세요 :) 무택입니다🧔 오늘 알아볼 기능은 바로 '::selection' 입니다. 딱 봤을 때는 뭔지 잘 모를 수 있는데 어느 사이트에서 텍스트를 복사해오고 싶을때 텍스트에 드래그를 해본 경험은 누구나 한번쯤 있을 것 같습니다. 바로 드래그했을 때 색상을 설정할 수 있는 기능입니다. 텍스트를 드래그하면 색상을 지정해야 할 곳은 두 곳이 있습니다. 한 가지는 드래그한 텍스트의 컬러, 다른 한 가지는 텍스트의 배경 컬러. 오늘 알아볼 기능은 이 두 가지를 설정할 수 있는 CSS 기능입니다. 처음에 저는 이 기능을 보고 복잡한 코드일줄 알았는데 1초, 아니 0.5초면 알만한 코드여서 놀랄 정도로 간단한 코드이니 한번 훑어보시면 좋을 것 같습니다. # CSS코드 ::selection{ background:..

안녕하세요 :) 무택입니다🧔 오늘 알아볼 내용은 자바스크립트에서 많이 사용되는 classList 메소드에 대한 내용입니다. add, remove, toggle 등 활용 방법이 다양하고 비교적 간단하게 사용할 수 있어 자바스크립트 기능 중에 꼭 알아둬야 할 메소드인 것 같습니다. 목차 가. 코드 나. codepen 예제 다. classList 설명 코드 HTML - add테스트 add 활성화 remove테스트 remove 활성화 contains테스트 contains 활성화 replace테스트 replace 활성화 toggle테스트 toggle 활성화 CSS - * { padding: 0; margin: 0; list-style: none; } li{ margin-block: 20px; } .pink { c..

안녕하세요 :) 무택입니다🧔 오늘 알아볼 내용은 반응형 페이지 작업 시 필요한 미디어쿼리 브레이크 포인트에 대한 내용입니다. 먼저 브레이크 포인트란 사용자들의 스크린 가로 사이즈가 몇 px인지에 따라 보여줄 내용을 변경시키는 지점을 말합니다. 보통 실무에서는 반응형 페이지를 작업한다고 하면 pc, 태블릿, 모바일 세 가지로 나누게 됩니다. 저는 보통 브레이크 포인트를 아래처럼 설정합니다. /* 테블릿 (해상도 768px ~ 1199px)*/ @media all and (min-width:768px) and (max-width:1199px) { ... } /* 모바일 (해상도 360px ~ 767px)*/ @media all and (min-width:360px) and (max-width:767px) {..

안녕하세요 :) 무택입니다🧔 오늘 알아볼 내용은 "YTPlayer" 플러그인입니다. 유튜브 iframe은 모바일에서 자동재생, 자동바 숨김이 안되기 때문에 이런 경우에 활용가능한 라이브러리(플러그인)입니다. 01. 일반 활용 See the Pen [라이브러리]유튜브영상을 배경으로 활용하기(YTPlayer) by TytanLee (@TytanLee) on CodePen. 일반적인 활용을 하면 html파일에서 문서가 지저분해 보여서 html에서 설정한 속성값을 스크립트로 넘겨서 html파일을 깔끔하게 만들 수 있습니다. 깔끔하게 정리한 문서는 아래를 참고해주세요. 02. 코드 간소화 활용 See the Pen [라이브러리]유튜브영상을 배경으로 활용하기(YTPlayer)+코드 간소화 by TytanLee (@..

안녕하세요 :) 무택입니다🧔 오늘 기록할 내용은 웹페이지 nav에 활용하면 좋은 효과입니다. nav에 투명도를 주고 블러효과를 입혀서 아래레이어가 보이는 구성으로 웹페이지에 개방감을 줄 수 있는 장점이 있습니다. See the Pen nav filter effect by TytanLee (@TytanLee) on CodePen.