즐겁게, 코드

귀여운 고양이들이 지그재그로 위치한 모습입니다! flexbox가 적용된 컨테이너 안에 left-, right- 요소가 있고, 각 요소 안에 사진과 설명이 적절히 들어간 레이아웃입니다. 1번 고양이입니다. 2번 고양이입니다. 3번 고양이입니다. img { width: 200px; } .flex-container { display: flex; align-items: center; justify-content: space-between; padding: 10px; border: 1px solid #cdcdcd; } @media (max-width: 768px) { .flex-container { display: flex; flex-direction: column; } } css는 컨테이너에 flex 속성을 적..

오랜만에 개츠비 블로그를 보수하던 중, 제목이 너무 길면 모바일에서 못나게 보이던 문제가 있었습니다. 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 속성은 이미지나 요소를 말..

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

변수명을 잘 짓는 것이 좋은 코드와 나쁜 코드를 판가름하는 중요한 요소라는 점에는 이견이 없을 것입니다! const a = "chanmin"; // BAD const userName = "chanmin"; // GOOD 그런데 CSS를 적용하기 위해 클래스명을 지을 때도 좋은 이름을 붙이고 계신가요? 저는 최근까지 그러지 못하고 있었다고 느껴서, 이번 기회에 CSS 클래스명 컨벤션을 정리해보고자 합니다. 😄 🙆🏻‍♂️ BEM (Block - Element - Modifier) 회사와 팀에 따라 컨벤션이 다를 수 있겠지만 가장 범용적으로 사용되는 규칙 중 하나가 바로 BEM으로, BEM의 Block, Element, Modifier는 각각 다음과 같은 의미를 가집니다. Block : 재사용 가능한 컴포넌트..