웹49 (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. [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. 결과 영상 2. 코드 3. 동작 원리 4. 깃허브 코드 5. 참고 링크 (일반 슬라이드, 3d슬라이드) 결과영상 * 안되시는 분들은 댓글에서 물어보셔도 됩니다 :) * 댓글에 남긴 메일로 압축파일 보내신 후 물어보셔도 됩니다 :) 코드 main.html ⟨ ⟩ JS/slideShow.js let slides = document.querySelector('.slides'); let slideImg = document.querySelectorAll('.slides li'); currentIdx = 0; slideCount = slideImg.length; prev = document.querySelector('.prev'); //이전 버튼 next = document... 2021. 8. 4. (React)리액트 설치 및 실행법 상세하게(window & Mac) 리액트 설치 및 실행법 * 리액트 실행하는 방법이 변경되었습니다. * 현재 포스팅 보다는 업데이트 된 아래 포스팅 참고바랍니다. (링크 걸어놓았습니다 :)) 2022.05.05 - [웹/(React)리액트] - (React) 리액트 설치 및 실행법 상세하게 이미지로 설명 [2022.05.05 기준] (React) 리액트 설치 및 실행법 상세하게 이미지로 설명 [2022.05.05 기준] * 이미 node.js가 설치되어 있으신분들은 3번부터 참고해주세요 ^^ 1.node.js 다운 (기존과 같음) 2. 설치가 잘되었는지 확인하기 3. react 실행하기 - 방법 1: 원하는 폴더 이름으로 react 개 eunhee-programming.tistory.com 포스팅 요약 1. 리액트 설치 방법 2. 리액트.. 2021. 8. 3. 이전 1 ··· 4 5 6 7 8 9 다음
