즐겁게, 코드

📣 알림 : 이 글은 'HTML블럭' 기능을 활용해 XSS 스크립팅의 위험성을 전달하기 위한 목적으로 작성되었으며,이 글의 정보들은 독자의 노트북에서만 재생될 뿐 서버로 전달되지 않습니다.오랜만에 티스토리에 글을 쓰려 했는데 "HTML블럭" 이라는 새로운 기능이 보였다. 조금 살펴보니 HTML + CSS + JS를 게시물 내에서 실행할 수 있도록 해주는데, 아마 codepen 등 코드 작성 솔루션을 대체할 수 있도록 만들어준 것으로 추측된다. 본래의 목적으로 사용하면 멋진 인터렉션이나 CSS 애니메이션 등의 튜토리얼과 함께 데모를 제공하는 용도로 사용할 수 있다. AAPL 181.16 -1.36 (-0.67%) ..

오랜만에 개츠비 블로그를 보수하던 중, 제목이 너무 길면 모바일에서 못나게 보이던 문제가 있었습니다. text-overflow 속성을 활용하면 저렇게 삐져나오는(overflow) 텍스트를 쉽게 처리할 수 있습니다. 🔨 text-overflow text-overflow는 먼저 단독으로 사용될 수 없습니다. text-overflow는 overflow: hidden을 대체하는 것이 아니라 레이아웃을 삐져나오는 순간 해당 텍스트를 특정 문자열로 교체하는데요, 따라서 항상 삐져나온 텍스트를 숨겨주는 overflow: hidden 과 여러 줄의 텍스트를 한 라인으로 만들어주는 white-space: nowrap 속성이 항상 세트로 필요합니다. (+ 적용할 문자는 항상 display: block 속성이어야 합니다!)..

개인적으로는 색과 "선" 을 잘 사용하는 것이 감각적인 페이지 디자인의 성패를 결정한다고 생각하는데요, 사실 CSS에서 직사각형이 아닌 도형을 다루는게 마냥 쉽지는 않습니다. 😂 예를 들어 한쪽 귀퉁이가 접힌 사각형을 그려야 한다고 하면, 큰 사각형(하늘색)을 그린 후 흰색의 작은 사각형을 회전시켜 위에 포개는 방식으로 구현할 수 있습니다. 하지만 이건 너무 지저분하지 않나요? 모바일에서도 동일하게 보일 것이라는 보장도 없고, CSS의 신이 아닌 이상 몇 도를 회전시켜야 하는지 얼마나 Y축으로 이동시켜야 하는지 등을 한번에 예측하기 어렵습니다. 📎 clip-path 속성 그래서 이런 복잡한 도형을 구현할 때는 clip-path 라는 속성을 사용할 수 있습니다. clip-path 속성은 이미지나 요소를 말..

토스의 첫 개발 컨퍼런스, SLASH21이 막을 올렸습니다! 저는 이런 컨퍼런스 홍보 페이지를 보면 항상 개발자 도구에 먼저 손이 가곤 하는데, 이번에는 특이하게도 페이지가 리액트로 제작되어 있어 컴포넌트를 구경하던 중 처음 보는 forwardRef 성분에 대해 궁금증을 갖게 되었습니다. 🤔 🛠 HTML 노드를 커스텀 컴포넌트로 교체하기 import { useEffect, useRef } from "react"; import Input from "./components/Input"; function App() { const nameRef = useRef(null); const submitRef = useRef(null); useEffect(() => { alert("페이지 로딩됨"); nameRef.cu..

사용자는 주로 클릭이나 스크롤 등의 이벤트를 통해 웹과 상호작용하는데요, 특정 상황에서는 이런 이벤트를 비활성화해야할 때가 있습니다. 버튼의 경우에는 disabled 속성 등을 활용할 수 있지만, 일반적인 div 등의 태그에서는 어떻게 이벤트 실행을 방지할까요? 🖱 pointer-events 활용하기 물론 자바스크립트를 통해 이벤트 수행을 제어할 수도 있겠지만 훨씬 더 간단한 방법이 있습니다. 바로 CSS의 pointer-events라는 속성을 활용하는 것인데요, pointer-events 속성을 none 으로 지정하면 마우스 커서가 이벤트를 발생시킬 수 없게 됩니다. 당연히 리액트의 스타일 객체에서도 사용할 수 있으며, pointer-events 대신 pointerEvents 라는 속성명으로 사용하면 ..

학교에서 한번쯤은 "미니서든" 이라는 게임을 해본 적이 있을 것이다. FPS 게임에서 가장 중요한 요소를 뽑아보자면 모델과 모델의 시야가 되겠는데, 이렇게 사물이 바라볼 수 있는 시야를 처리하는 엔진을 레이캐스트(Raycast) 라 부른다고 한다. 우연히 오늘 깃헙을 돌아다니다 웹(심지어 리액트!) 기반 레이캐스트 엔진을 찾을 수 있었는데, 여기에 socket.io와 이것저것 끼얹으면 웹 기반 FPS 게임 + 관전자 모드까지 구현할 수 있을 것 같았다. 이슈를 읽어보니 이걸로 둠을 구현하겠다는 사람도 나왔는데, 아무튼 상세한 내용은 코드를 조금 까봐야 알겠지만 시도해볼만한게 늘어난 것 같아 즐겁다. (괜찮으면 종설까지 들고 가야겠다...) [깃헙 저장소 링크] ahuth/raycast HTML5 rayc..

CSS의 확장팩 중 하나인 Scss에서는 정말 많은 편의기능을 제공하는데요, 오늘은 여러 기능들 중 다른 Scss 파일을 불러올 수 있는 import 기능에 대해 알아보겠습니다. components │ ├── Button │ ├── Button.jsx │ └── Button.scss ├── Card │ ├── Card.jsx │ └── Card.scss ├── Header │ ├── Header.jsx │ └── Header.scss │ ├── App.scss └── App.jsx ... 위의 폴더 구조는 제가 이전에 애용하던 컴포넌트 폴더 구조입니다. 폴더별로 컴포넌트와 스타일 파일을 관리하는 방식은 나쁘지 않지만, scss를 활용한다면 더 멋지게 폴더 구조를 개선할 수 있습니다. components ..