# styled components

ppby

오늘은 컴포넌트 스타일링을 적어보겠습니다🔥

eassy

3번째 component : Tooltip > 📌 참고하였습니다 https://www.w3schools.com/howto/tryit.asp?filename=tryhowcsstooltip 내 개인 페이지에 넣을 component들을 우선적으로 만들다 보니 프로필 페이

youthfulhps

styled-components

kdo0129

styled-components란? tagged template literals을 이용하여 css,scss 같은 별도의 파일 없이 바로 스타일이 된 컴포넌트를 만들게 해주는 라이브러리이다. 이러한 기술을 CSS in JS 라고 한다.tagged template lite

tiahwang

노마드코더의 무료강의 리액트 스타일? Styled Components! 강의노트 ✏️이미 설정되어 있는 Button css를 가져와서 a component를 붙이는 것스타일 추가도 가능(백틱 안에)

wjdym

처음 배울 때 이건 왜 이러지? 보다는 이렇게 하는구나 라고 생각하면 받아들이기 쉽다.스타일 컴포넌트도 그렇다.스타일 컴포넌트 형식은const 스타일컴포넌트명 = styled.태그명 'color: red; padding: 20px;';벨로그라서 \`\`을 치면 눈

qksud14

반응형 레이아웃을 만들기 위해서는 미디어쿼리를 활용한 css, flexbox를 활용한 css 등 css의 활용이 여러모로 필요하다.이번 포트폴리오에서는 material ui 디자인 프레임 워크를 사용하기로 했는데 예시에서 아래 코드처럼 스타일링 해주는걸 볼 수 있었다.

gandalfzzing

Apollo라는 폴더를 만들어 주고 그 안에 Client와 LocalState라는 JS파일을 만들어 줍니다. Apollo 서버는 Client라는 props를 전달해줘야 하고, Client는 GraphQL 서버 주소가 필요로 합니다. Apollo 서버는 react-ap

hwang-eunji

지난 Styled Components #1 Basic 포스팅에 이어 #2 Advanced를 정리! 1. Nesting styled components 또한 scss 처럼 중첩하여 사용 할 수 있다. scss에서 클래스명이나 태그선택자를 썼다면 styled compon

kimu2370

CSS-in-JS 라이브러리인 styled-components

jayden

내가 처음 리액트를 배울때부터 지난 프로젝트까지는 CSS의 단점을 극복한 SCSS를 사용해왔다. 초창기의 SCSS는 Webpack config을 Eject하는 작업이 필요했지만, 내가 리액트를 처음할 당시에는 이미 CRA V2가 적용되면서 SASS(SCSS)와 CSS

sangminnn

Question전통적인 page load 방식인 href 는 해당 주소에 대한 정보가 서버측에 저장되어 있고, 그 링크를 클릭하여 로드할 때 서버에서 자원이 넘어오는 것인지 ?Answer예전에는 어떤 웹 어플리케이션을 만들때, 여러 페이지로 구성되었다.A.html ,

hwang-eunji

Styled Components? CSS나 SASS같이 class, id, tag name를 가져와 쓰지 않고, 스타일 지정된 컴포넌트 생성하여 Tag 쓰듯 스타일컴포넌트를 쓰는 것을 말한다. 즉, 리액트에서 ui단위를 나누어 컴포넌트화 하듯, 스타일을 컴포넌트화 하

sangminnn

그동안 개인적으로 Notion에만 TIL을 적어왔지만 오늘부터는 Velog에도 한번 적어보기로 함.아직 정해둔 틀은 없어서 오늘은 이렇게 남기지만 앞으로 좋은 방법을 찾아봐야겠다.QuestionURI 와 URL 차이점styled component 벤더 프리픽스 (css

cyranocoding

간만에 포스팅인것 같다. 일을 시작하고 개인 블로그 따위는 저 멀리 내팽겨쳐놓고 원없이 개발만 한 것 같다. 짧으면 짧고 길면 긴 시간인데 이 시간동안 넥스트-리액트 프론트 엔드 개발을 하면서 가장 크게 느꼈던 점을 적으려고 한다. 본 내용은 지극히 개인적인 느낌이므로

bclef25

styled components 란?

pks787

React Sass CSS-moudles styled-components

johnque

styled-components? .js파일에 css를 넣을 수 있도록 해주는 편리한 라이브러리 (CSS-in-JS 라이브러리 라고 부른다고 함) 로 다운받을 수 있음 usage 다음처럼 .js파일에서 import 사용법은 위와 같음. 변수 안에 집어넣는데, .

kimtaeeeny

1. CSS >Cascading Style Sheet : 웹의 디자인을 담당(표준) App.js App.css 해당 js 파일에 css파일을 import 해서 사용. > 특징 : 메뉴얼적인 방법으로 직접 Class , ID 네이밍하며 작성한다. 사용법이 간단함. 하지만 요소들이 많아질수록 관리가 힘들어지고 직관성이 떨어짐. 2. SASS > Synt...

cjy9306

react에서 styled components를 적용하기 시작하였습니다. styled components를 input tag에 적용하여 사용하던 도중 input의 onChange()함수에서 state를 변경하였습니다. 하지만 컴포넌트에서 매 입력시마다 input에서의 focus를 잃어버리는 일이 발생하였는데요. 그 원인과 해결에 대하여 기록합니다. ...