치악산 복숭아

1. 리액트와 사용하기 좋은 Styling 도구 종류 1) CSS Module CSS 파일의 확장자를 .module.css 로 지정해서 사용 장점 단점 class, id 등에 random string을 달아주기 때문에 선택자가 겹치지 않음 스타일 충돌을 방지하고 코드를 격리하여 CSS 설계가 가능 스타일링을 일일히 직접 해야함 //App.jsx import styles from "./app.module.css" export default function App() { return ( Pink Hello world Normal Hello world ); } /* app.module.css */ h1 { font-size: 1.5rem; } .title { font-size: 2.5rem; color: pa..

css가 .vue 파일에 적용이 안되는 오류 style 태그에 직접 값을 입력하거나 import를 해도 적용이 안됐다 template 태그 안에서 인라인으로 태그들에 직접 css를 적용하면 되긴 했었지만 유지보수가 힘들다는 단점이 있기 때문에...😭 해결 방법: vue-style-loader 대신 style-loader를 이용 내가 썼던 패키지 버전 "vue-style-loader": "^4.1.2” "style-loader": "^2.0.0"

1. display(block, inline, inline-block) block 또는 inline-block의 경우 이 엘리먼트들은 블록 형식으로 위쪽에서 아래쪽으로 쌓인다 inline인 경우는 왼쪽에서 오른쪽, 다 찼다면 아래쪽으로 빈 자리를 차지하며 흐르며 높이와 넓이를 지정해도 반영되지 않는다 2.position(static, absolute, relative, fixed) static: 기본 속성값 absolute: top, left, right, bottom으로 설정하며, 기준점은 static이 아닌 상위 엘리먼트가 기준점이다 relative: top, left, right, bottom으로 설정하며 원래 자신이 위치해야 할 곳을 기준으로 이동한다 fixed: top, left, right, ..

상속을 하게 되면 상위에서 설정한 스타일이 하위에서도 반영된다 width, height, margin, padding, border와 같은 box-model과 같이 크기, 배치와 관련된 속성들은 하위 엘리먼트로 상속이 되지 않는다. 우선순위는 inline > internal = external이지만, 일반적으로 CSS 위치는 css파일(external)에 두고 그 아래에 style 태그를 사용해서(internal) 표현하기 때문에 이런 경우엔 internal > external로 볼 수 있다. (뒤에 선언된 css의 내용이 최종적으로 반영) cascading -> element보다 class, class보다 id가 우선적으로 css가 적용된다 같은 선택자(selector)라면 나중에 선언한 것이 반영된다..