웹 페이지를 만들다 보면 분명히 CSS 코드를 작성했는데, "왜 내가 원하는 대로 적용이 안 될까?" 하고 답답했던 경험이 있을 겁니다. 여러 스타일이 엉키면서 우선순위 싸움이 벌어지기 때문이죠! 이때 등장하는 궁극의 필살기가 바로 !important 입니다.하지만 이 !important는 강력한 만큼 신중하게 사용해야 하는 옵션입니다. 지금부터 그림과 쉬운 예시로 !important가 무엇인지, 왜 필요한지, 그리고 언제 조심해야 하는지 자세히 알아볼까요? CSS, 왜 원하는 대로 안 될까? (CSS 우선순위)CSS는 여러 규칙이 동시에 적용될 때, 어떤 스타일을 최종적으로 보여줄지 결정하는 우선순위(Specificity) 규칙이 있습니다. 마치 학교에서 반장, 부반장, 조장 등 역할마다 권한이 다른 ..
CSS
MUI를 사용하는 유저의 경우, 반응형 웹을 구현하는 방식에는 미디어 쿼리(Media Query)를 JavaScript에서 활용하는 방법과 CSS만을 사용하는 방법이 있습니다. 특히 React 환경에서 useMediaQuery와 같은 훅을 사용하는 방식과 CSS-only 방식을 비교하여 그 차이점을 분석합니다. 1. 렌더링 시점과 사용자 경험분류미디어 쿼리 (예: useMediaQuery)CSS-only 방식 (예: MUI sx prop)코드 예시const isMobile = useMediaQuery(theme.breakpoints.down('sm')); return isMobile ? : ;모바일 데스크탑서버/클라이언트 렌더링서버: 기본값(주로 데스크탑) 렌더링 클라이언트: 실제 화면 크기 감지 후 ..
.logo img { width: 5rem; height: 5rem; object-fit: contain; filter: drop-shadow(0 0 0.75rem rgba(0, 0, 0, 0.5)); } 상기와 같이 filter를 넣으면 아래의 이미지와 같이 이미지에 음영이 들어간다.
positon 속성과 배치방법 position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. static : 요소를 일반적인 문서 흐름에 따라 배치합니다. relative : static + 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. absolute : 요소를 일반적인 문서 흐름에서 제거하고, 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치합니다. fixed : 요소를 일반적인 문서 흐름에서 제거하고, 뷰포트의 초기 컨테이닝블록을 기준으로 삼아 배치합니다. (바뀌지 않는 위치에 지정) sticky : static + fixed 특징을 동시에 가집니다. 용어 공부 오프셋(offset) : top, left, right, bottom 값을 ..
