CSS3 styled-components란 무엇인가 ? styled-components 는 css in js를 쉽게 해주는 UI라이브러리 이다. 컴포넌트 수준에서 스타일링을 작성하게 해줘며 js문법으로 작성을 한다. 사용 예시를 먼저 보고 특징 및 장점을 살펴보자!! 주요 특징CSS와 컴포넌트의 결합CSS 스타일과 React 컴포넌트를 결합하여 재사용 가능한 스타일링 컴포넌트를 생성합니다. 스타일이 각 컴포넌트에 독립적으로 적용되므로 스타일 충돌을 방지할 수 있습니다.동적 스타일링JavaScript 변수와 props를 활용하여 조건에 따라 스타일을 동적으로 변경할 수 있습니다.자동 벤더 프리픽스styled-components는 브라우저 호환성을 위해 필요한 CSS 벤더 프리픽스를 자동으로 추가합니다.유지보수 및 가독성컴포넌트 단위로 스타일을 관리하기 때문에.. 2025. 1. 27. [css] media쿼리를 이용하여 grid를 반응형으로 구현하기 트러블 슈팅 : 오늘은 개인과제 영화 검색 사이트를 구현하는중 영화 리스트를 grid로 이용하였는데 웹페이지의 화면을 줄이면 그리드가 짤리는 상황이 발생하여 해결해 보았다. 다음은 div 로 display에 grid를 주면서 가로 비율은 80% 상화 마진은 30px 그리드 아이템을 6개를 가로로 일정한 비율로 세로로는자동으로 주고 해당 아이템들을 가운데 배치 하였고 @media를 쓰면서 화면의 크기에 따라 보이는 그리드 형태를 변화 시켜주었다. 개발자 도구에 들어가면 왼쪽 상단에 toggle device toolbar 라는 항목이 있다 여기를 클릭하자 아이콘으로 생겨서 이미지를 넣어두었다.상단을 보면 크기를 조절 할 수 있다. 여기 화면의 크기를 조절하여 그리드의 아이템이 짤릴려 할때마다 그리드.. 2025. 1. 16. css 레이아웃 배치에 대하여 오늘은 어제 와이어프레임 제작을 다하고 기본 틀을 만들었지만 아직 css를 다 하지 못하여 css로 화면을 꾸며 보았다. 우선 헤더를 제작 하여 div에 속성과 요소들을 어떻게 해야되는지 알아보았다. 우선 헤더 div에 대하여 알아보았고 여러가지 속성을 다 사용해봤으나 원하는대로 배치가 되지않앗다. 더 찾아보니 위에속성은 부모에 붙히는 값이엿고 자식에 쓰는 속성값 flex도 있다는걸 알았고 해결을 하였다. 헤더 결과값 회원가입 페이지에 있는 form에 배치를 할려고 하는데 회원목록을 추가하면 값이 div에 겹치는 현상이 발생하여 배치를 안겹치게 하기위해 찾아보다가 justify-content라는 속성이 도움이 된다하여 알아보았다. 하루 회고 1.오늘은 css를 다루면서 공부 . 및 미니프로젝.. 2024. 12. 26. 이전 1 다음
