CSS3 React Style 적용 방법 | 12주차 (2) 왜 React는 기존 방식이 아닌 다음과 같은 새로운 방법으로 스타일을 적용하는지 알아보자: 1. CSS module2. Styled components 라이브러리3. SASS 0. 기존의 방식# 기존 방식인라인 스타일: 자바스크립트 문법이라서 속성 이름 camelCase 이용해서 작성 css 파일 import 방식: 반드시 src 폴더 내부에 생성. 보통 컴포넌트와 같은 이름의 css 파일 생성 # 기존 방식을 사용하지 않는 이유:css 클래스 이름 중복 가능성이 높음app.js에 적용하면 전역적으로 적용되어 컴포넌트 기반 react에는 적합하지 않은 방식 1. CSS module# 특징리액트 내장 기능`이름.module.css` 확장자로 css 파일 생성자동으로 클래스명이 생성됨 # 클래스 여러 개 .. 2025. 1. 14. [SeSACx코딩온] CSS media query 반응형 웹 css media querycss 선택자 우선순위와 cascading 📱 CSS media query 속성 이름때문에 헷갈릴 수 있으니 기준점을 잘 기억해두록 하자.`max-width: 000px`은 000px 이하일 때를 의미하며, 가장 큰 화면부터 제작하자.`min-width: 000px`은 000px 이상일 때를 의미하며, 가장 작은 화면 사이즈부터 제작하자. 예를 들어 500px을 기준으로 Mobile 환경에서는 mobile 글자만 보이고, PC 환경에서는 PC라는 글자만 보이도록 만들고 싶다면, Hello world mobile pc CSS media query를 쓰면된다. screen and는 생략 가능함. 500p.. 2024. 11. 19. [SeSACx코딩온] CSS 선택자 과제 📌 2주차 과제 복습과제 해결하면서 헷갈렸던 선택자가 다 정리된 게 너무 좋아서, 기억해둘만한 내용이 있는 선택자 과제를 풀이와 함께 정리해보았다.문제 1 줄무늬 만들기 (방법 2가지)2, 6, 10 줄만 노란색으로 색칠하기. [방법1] nth-child 선택자nth-of-type 또는 nth-child 같은 선택자를 이용해서, 주어진 HTML의 li요소의 특정위치(2, 6, 10번째)를 선택할 수 있다..zoo li:nth-child(2),.zoo li:nth-child(6),.zoo li:nth-child(10) { background-color: orange;} [방법2] 등차수열의 일반항 구해서 더 깔끔하게등차수열의 일반항을 구해서 첫번째 방법보다 더 깔끔하고 예쁘게 작성한 코드 ✨.zoo.. 2024. 10. 31. 이전 1 다음
