문제 /* SCSS */ @mixin box-sizing { & > div { width: 100px; height: 100px; border-radius: 1px solid #000; } } .box-wrap { @include box-sizing; } /* CSS */ .box-wrap > div { width: 100px; height: 100px; border-radius: 1px solid #000; } HTML 구조는 큰 틀인 .box-wrap안에 작은 div가 여러 개 있다고 가정하겠다. 우리는 작은 div들의 공통된 속성을 @mixin을 이용하여 주려고 한다. 전에 배웠듯이 @mixin 안에 div 요소들에게 줄 스타일 속성들을 묶어 선언하였고, .box-wrap에 @include 해주었다..

문제 // SCSS $box-color: red; .box { background-color: $box-color; } 클래스 이름이 box인 div 요소가 100개 있다고 하자. 100개의 박스 색상을 한 번에 컨트롤하기 위해서 나는 box-color라는 변수를 만들어서 100개의 박스의 background-color에 해당 변수의 값을 넣어 주었다. 따라서, 색상을 바꾸고 싶을 때는 box-color라는 변수에 값만 딱 바꿔주면서 간단히 수정할 수 있었다. 그런데 만약에 50개는 0.3의 투명도를 가지게 하고, 나머지 50개는 0.7의 투명도를 갖게 하라는 요청이 들어온다면 우리는 이 box-color라는 하나의 변수를 가지고 어떻게 대응할 수 있을까? 방법 // SCSS $box-color: red..

문제 태그를 이용할 경우 우리가 가로와 높이 길이를 고정된 값으로 설정했는데도 불구하고, 우측 하단을 마우스로 잡고 드래그할 경우 사용자 임의로 텍스트 박스의 사이즈 조절을 할 수 있다. 물론, 일반적인 사용자의 경우 텍스트 박스를 잡고 끌 생각을 하지는 않겠지만 간혹 일부 호기심 강한 사용자들의 UI 파괴술(?)을 방지하고자 아무리 마우스로 잡고 끌어도 사이즈가 바뀌지 않는 방법을 소개하려 한다. 방법 textarea { resize: none; /* 변경 불가능 */ resize: both; /* 변경 가능 */ resize: vertical; /* 높이만 변경 가능 */ resize: horizontal; /* 너비만 변경 가능 */ } 방법은 간단하다. 바로 resize 속성을 사용하면 된다. 사..

문제 우리가 웹에 이미지를 넣을 때, 이런 식으로 이미지 태그를 사용하는 게 일반적이다. 하지만, 리액트에서는 간혹 상대 경로로 이미지를 불러올 때 이미지가 불러와지지 않는 문제가 생길 수 있다. 이럴 때는 절대경로를 이용해서 이미지를 쉽게 넣어주면 해결이 가능하다. 방법 const Home = () => { return } export default Home; process.env.PUBLIC_URL은 리액트의 public 폴더의 절대 경로를 잡아주는 역할을 한다. '+' 뒤로 public 폴더의 경로를 입력하기만 하면 해당 이미지의 절대 경로를 이용해서 쉽게 이미지를 불러올 수 있다. (한 가지 주의할 점은 불러오는 이미지의 경로가 반드시 public 폴더 안에 존재해야 한다는 점이다.) 응용 con..

준비 const App = () => { return } const Home = () => { return } 우선 이 글에서 다룰 목표는 컴포넌트끼리 데이터를 주고받는 과정에서, 그 데이터를 특정 기준에 맞춰서 정렬시키는 기능을 구현하는 것이다. 그 전에 이 프로젝트가 어떤 식으로 컴포넌트가 구성되는지 알 필요가 있다. 가장 큰 App 컴포넌트 안에 Home이라는 컴포넌트가 있고 그 안에 정렬 컴포넌트인 SortMenu와 정렬된 리스트를 출력할 DataList 컴포넌트가 구성되어 있다. (DataList 컴포넌트는 map() 함수를 통해 출력할 예정이다.) 방법 더미(dummy) 데이터 만들기 import { useState } from 'react'; import Home from './Home'; ..