Language/HTML, CSS, SCSS

normalize와 modern-normalize 차이점normalize.css와 modern-normalize는 모두 브라우저 간의 기본 스타일 차이를 최소화하기 위한 CSS 파일입니다. 1. normalize.css목적 : 모든 브라우저에서 일관된 스타일을 보장하기 위해 브라우저의 기본 스타일을 재설정하는 것을 목표로 합니다.포함된 스타일 : 보다 포괄적으로 다양한 HTML 요소에 대한 기본 스타일을 재설정합니다. 폼 요소, 리스트, 테이블 등 다양한 요소에 대한 스타일이 포함됩니다.유지보수 : 프로젝트가 비교적 오래되었으며, 브라우저 호환성을 위해 자주 업데이트 되지 않지만 여전히 널리 사용됩니다. 2. modern-normalize목적: normalize.css의 최신 버전으로, 최신 브라우저와의..

Angular에서 React로 변경하면서 원본 페이지의 CSS가 새 페이지에 영향을 미치지 않도록 하기 위한 방법이 필요했습니다. CSS Reset (Normalize)CSS Reset은 브라우저마다 다르게 적용되는 기본 스타일을 초기화하여 일관된 스타일을 보장하는 기술입니다. 이를 통해 원본 페이지의 글로벌 스타일이 위젯에 영향을 미치지 않도록 할 수 있습니다. CSS Reset 라이브러리 사용: Normalize.css와 같은 라이브러리를 사용하여 스타일을 초기화합니다.위젯의 최상위 클래스에 CSS Reset 적용: 위젯의 최상위 클래스에 CSS Reset을 적용하여 원본 페이지의 스타일을 무효화합니다./* normalize.css 또는 reset.css 파일을 프로젝트에 추가 */.container..

위 toggle 버튼을 radio 버튼으로 변경해야 해서 커스텀을 해야하는데내가 원하는 모양은 다음과 같았다 아래 코드를 작성해서 커스텀을 시도했지만 결과는 생각처럼 잘나오지 않았다🤔.radio-button { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; font-size: 14px; font-weight: 400; input[type="radio"] { width: 20px; height: 20px; margin: 0; border: 1px solid #d1d6db; cursor: pointer; } input[type="radio"]:checked { background-color: #3182f6; // 체크 시 ..

static 모든 태그들의 defalut 상태 왼쪽에서 오른쪽, 위에서 아래로 쌓임 See the Pen static by 쓰링 (@nqdjmwpc-the-sasster) on CodePen. relative top, right, bottom, left 속성을 사용해 위치 조절이 가능 See the Pen Untitled by 쓰링 (@nqdjmwpc-the-sasster) on CodePen. absolute position: static 속성을 가지고 있지 않은 부모를 기준으로 움직임 fixed 항상 특정 위치에 고정

영문만 자동 줄바꿈이 안되는 현상 한글은 줄바꿈이 잘되지만, 영문일때만 자동 줄바꿈이 안되는 현상이 발생 해결 방법 #content { ... word-break: break-all; }