분류 전체보기250 (React) 리액트 인라인 스타일/ React Inline style (React) 리액트 인라인 스타일/ React Inline style DOM요소에 스타일을 적용하는 것을 인라인 스타일이라고 한다. 또한 인라인 스타일에는 카멜 표기법(camelCase)을 사용해야 된다. *카멜 표기법이란 문자 안에서 '-' 기호를 없애고, '-'바로 뒷문자를 대문자로 바꿔주는 것이다. ex) font-size =>fontSize, background-color => backgroundColor src/App.js import React from "react"; const App = () => { const blog = "코드짜는 문과녀"; const style = { background: "pink", color: "gray", fontSize: "48px", fontWeight: .. 2021. 8. 17. (React) 리액트 조건부 렌더링/삼항연산자, AND연산자, OR연산자 (React) 리액트 조건부 렌더링/삼항연산자, AND연산자, OR연산자 1. 삼항연산자 ex) 1 === 1 ? "true일때 들어올 값" : "false일때 들어올 값"; 아래 코드에서 blog ==="코짜문" 이 식은 true이므로 코드짜는 문과녀 입니다.를 화면에 출력하게 됩니다. *아래는 함수형 컴포넌트 입니다. src/App.js import React from "react"; function App() { const blog = "코짜문"; return ( {blog === "코짜문" ? 코드짜는 문과녀 입니다. : 없음} ); } export default App; 하지만 아래와 같이 blog === "아무값" 은 false이므로 없음이 화면에 출력됩니다. src/App.js import .. 2021. 8. 17. scss에서 미디어 쿼리 다루기/ scss 미디어 쿼리 깔끔하게 사용하기 scss에서 미디어 쿼리 다루기 scss 에서 미디어 쿼리는 아래와 같이 사용합니다. @media (max-width: 767px){ /* 브라우저 사이즈 767px 이하일때*/ } @media (min-width: 768px) and (max-width: 1023px){ /* 브라우저 사이즈 768px이상, 1023px이하 일때,*/ } 하지만 코드가 길 경우 위와 같이 사용하면, 코드가 더 길어지고, 보기에 깔끔하지 않습니다. 그래서 아래와 같이 mixin을 사용하여 코드를 정리해봅시다. /*반응형 mixin으로 깔끔하게 사용하기*/ @mixin mobile{ @media (max-width: 767px){ @content; } } @mixin tablet{ @media (min-width: 768p.. 2021. 8. 15. (GitHub)mac OS 깃허브 push 에러/403에러 해결법/토큰번호 생성법 (자세한 설명) (GitHub)mac OS 깃허브 push 에러/403에러 해결법/토큰번호 생성법 이 포스팅은 2021.08.14 기준으로 작성하였으며, 아래와 같은 문구가 나오며 에러가 뜰때의 해결법을 포스팅 했습니다. 토큰번호 생성을 했는데, 생성한 후, 무엇을 어떻게 하라는지 모르겠는 분들은, 2번째 부터 봐주세요~ push를 했을 경우, 이런 문구가 떳을때 해결법 입니다! remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead. remote: Please see https://github.blog/2020-12-15-token-authentication-re.. 2021. 8. 14. (내돈내산/웹)리액트 책추천/Do it! 클론코딩 영화 평점 웹서비스 책 후기/리뷰 Do it! 클론코딩 영화 평점 웹서비스 책 후기 포스팅 요약 1. 책 전체 구성 2. 책의 좋은점 3. 책의 아쉬운점 책 전체 구성 책의 전체적인 흐름은 위 사진과 같습니다. 이 책에서 배울수 있는 부분을 크게 3가지로 나눠보자면 1. 리액트 실행법 2. 리액트 사용법 3. 깃허브를 사용한 사이트 배포법 이렇게 3가지로 나눌 수 있습니다. 책의 좋은점 1. 설명이 매우 친절하여 초보자가 이해하기 쉽고 잘 따라할 수 있도록 되어있습니다. (제가 봤던 책 중에 최고로 잘되어 있습니다.) 2. 리액트 초보자들이 워밍업용도로 한번 쭉 보기에 좋은 책입니다. (5시간 정도면 끝낼수 있습니다!!) 3. 리액트도 배우고, 나만의 프로젝트도 하나 생기는 1석 2조 책입니다. 4. 가독성이 매우 좋고 재미있다. 5. .. 2021. 8. 12. [2021.08]자바스크립트에 미디어쿼리 사용하기+자동 새로고침 자바스크립트에 미디어쿼리 사용하기 css에 사용하는 방법과 비슷합니다. 그런데!!! 자바스크립트에서는 브라우저 사이즈 변경시 새로고침을 안해주면 적용이 안됩니다. ㅠㅠ... 그래서 브라우저 크기를 변경할 때 마다 자동으로 새로고침 해주는 스크립트까지 짜주시는게 좋습니다. 아래는 자바스크립트로 미디어쿼리문을 작성한 코드입니다. if(matchMedia("screen and (max-width: 767px)").matches){ //화면 크기가 767px이하일때 console.log("mobile"); }else if(matchMedia("screen and (max-width: 1023px)").matches){ //화면 크기가 1023px이하일때 console.log("tablet"); }else if.. 2021. 8. 9. 이전 1 ··· 12 13 14 15 16 17 18 ··· 42 다음
