Study_Cat

꾸준히 공부하는 고양이가 될게요.

끊임없는 노력은 천재를 이긴다.

CSS 2

[웹 개발] CSS-Module 을 왜 사용해야 할까?

1. CSS 는 전역이다.위의 그림처럼 다른 component 파일을 정의하고 각각의 파일마다 다른 css 파일을 import하여 사용했습니다. 그리고 각각의 css파일들은 아래와 같습니다. 예상대로라면 빨/파/주/하 서로 다른 4개의 div가 생성되여야 합니다. 과연 결과는 어떨까요? 어라? 분명 각각의 파일마다 다른 css 파일을 import 했는데 Container1, Container2 의 색깔이 파란색으로 같습니다! css파일 경로로 import 한다고 해서 지역 scope라고 단정지을 수 없습니다. 사실 css파일은 전역으로 적용되기 때문에 className이 같다면 다른 파일을 import해도 위와 같은 결과가 나오게 됩니다. 하지만 코드를 짜다보면 ClassName이 중복될 수 밖에 없는데..

코딩/웹 개발 2024.07.10

[CSS] FlexBox의 기본과 햇갈리는 개념 정리

해당 포스팅에선 FlexBox의 기본적이고 햇갈리는 개념을 중심으로 작성하였습니다.  FlexBox는 무엇일까? FlexBox란 유동적으로 배치하기 위한 layout 이라고 생각합니다. 이는 "유동적" 이기에 짧고 간단한 코드로 나타낼 수 있으며 정렬에 용이합니다. 그렇다면 Grid 보다 안 좋은 것 아닌가? 라고 생각하실 수 있지만, 이는 상황에 따라 다릅니다. 여기서 유심히 봐야할 것은 "유동적" 이라는 사실입니다. 해당 개념은 아래 예시들을 통해 알아보겠습니다.  출처 : https://www.acmicpc.net/problemset 제가 좋아하는 백준 사이트로 예시를 들어보겠습니다. (해당 예시는 "100% 맞다, 이렇다." 가 아니라 그저 "유동적" 이라는 느낌으로 받아드리면 될 것 같습니다.)..

코딩/웹 개발 2024.05.26