whatisthis?

Typography 설정 타이포그래피 - 활자의 서체나 글자 배치 등의 구성 및 표현. = 텍스트를 예쁘게 디자인. 정보(information)의 가독성을 위해서. 📌 font-size = 글자 크기 px 절대 단위 em 상대 단위 실제로 적용된 폰트 사이즈 (부모의 font-size) 의 N배 rem html 태그 기준 N배 보통은 px을 많이 사용함. 📌 line-height = 줄 간격 마찬가지로 px, em, rem 단위 사용. 여기서는 em을 많이 사용함. (해당 폰트사이즈의 N배만큼) (그냥 1.5라고 적는것이 관례. 1.5em 이라고 쓰지 X) line-height가 얼마가 되든간에 font-size에 해당하는 부분은 정 중앙에 위치하게 된다! 📌 letter-spacing = 자간 간격 p..

미디어쿼리 (Media Query) - 반응형 웹(Responsive Web) 을 만들기 위해 반드시 알아야함. 🔻 반응형 웹을 위한 충족조건 HTML viewport meta CSS media query ▪ [HTML] viewport meta 모바일에서와 pc에서의 viewport가 다르다. meta태그로 width=device-width (너비를 디바이스 너비로 설정함) 을 선언해야 반응형 웹이 정상적으로 작동 가능. ▪ [CSS] media query @media screen and (min-width: 768px) { /* 변경사항 * / } atRule을 사용해야함. (at media) 최소 가로가 768px 일때 /* 변경사항 */ 이 적용되게 해줌. >> 즉, 768 이상일때 적용됨. ❗ ..

CSS At-rules - 자주 사용하는것만 정리. - 나머지 at-rules는 아래 인덱스 참조! 1 . @charset @charset CSS at-규칙은 스타일 시트에 쓰이는 문자 인코딩을 지정한다. 스타일 시트의 첫 번째 요소여야 하며 어떤 문자가 선행되지 않아야 한다. >> 즉, 맨 처음에 나와야함. @charset "utf-8"; 2. @font-face @font-face 를 사용하여 웹페이지의 텍스트에 온라인폰트(online fonts)를 적용할 수 있다. @font-face 를 사용하여 웹페이지 제작자가 원하는 폰트를 사용할 수 있게함으로써, 컴퓨터에 설치된 폰트만을 사용해야했던 제약이 없어지게되었다. @font-face at-rule 은 CSS의 top-level에서 뿐 아니라, CSS..

FlexBox css. FlexBox (display: flex) - (上) FlexBox 💡 key points dispaly: flex 선언 가로정렬? 세로정렬? (flex-direction) 무조건 한줄안에 다 정렬? (flex-wrap) 아이템 정렬(align-items, justify-contents) 1 / 플렉스박스 사용 선언 - 정렬하고자 하.. mywebproject.tistory.com 💡 key points dispaly: flex 선언 가로정렬? 세로정렬? (flex-direction) 무조건 한줄안에 다 정렬? (flex-wrap) 아이템 정렬(align-items, justify-contents) flex를 하면 두개의 축이 자동으로 생김. (눈에 보이지는 x) flex-dire..

FlexBox 💡 key points dispaly: flex 선언 가로정렬? 세로정렬? (flex-direction) 무조건 한줄안에 다 정렬? (flex-wrap) 아이템 정렬(align-items, justify-contents) 1 / 플렉스박스 사용 선언 - 정렬하고자 하는 요소를 감싸는 부모(=container)에게 선언함. display: flex; 혹은 display: inline-flex; flex도 우선은 'box'의 타입이다. inline-flex는 인라인블럭과 비슷하게 동작함. 2 / 가로 or 세로 정렬 (flex-direction) 가로 row(default) 세로 column +) 그 외에도 row-reverse와 column-reverse가 있다. flex를 하면 두개의 축이..

1 / gh-pages 패키지 설치 npm i gh-pages 2 / package.json 수정 , "homepage": "https://thisisyjin.github.io/ReactJSPractice" 끝부분에 이렇게 추가하고, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "deploy": "gh-pages -d build", ❗❗ "predeploy": "npm run build" ❗❗ }, scripts 부분에 deploy와 predeploy 를 추가함. 3 / 터미널에 npm run deplo..

참고 - 자주 사용하진 않는다. import { useState } from "react"; function App() { const [showing, setShowing] = useState(false); const onClick = () => { setShowing(prev => !prev); }; return ( {showing ? "Hide" : "Show"} ); } export default App; 자세한 설명은 이제 생략하겠음.. (단순 useState를 이용한 것) 이제 숨김 버튼을 만들었으니 숨길 대상(주로 다른 컴포넌트를 숨기고 나타낸다)을 만들어보자. function Hello() { return Hello; } 단순하게 h1 jsx를 리턴하는 Hello 컴포넌트를 만든 후 func..

React. React JS - Effects (1) React JS State Props Effects App.js const [counter, setValue] = useState(); import { useState } from "react"; 자동으로 import문이 생긴다. 이전처럼 React.useState()라고 안하고 그냥 useState()만 하면.. mywebproject.tistory.com 지난 포스팅의 내용에 이어서 진행됨. 📌 useEffect useEffect는 두개의 argument를 가지는 함수이다. arg1 > effect: EffectCallback (한번만 실행할 코드를 담은 콜백) arg2 > deps?DependencyList const [keyword, setKe..

React JS State Props Effects App.js const [counter, setValue] = useState(); import { useState } from "react"; 자동으로 import문이 생긴다. 이전처럼 React.useState()라고 안하고 그냥 useState()만 하면 된다! 여기에 이전에 배웠던대로 onClick함수를 만들어 버튼의 onClick prop에 연결해주자. 🔻 App.js 전체코드 import { useState } from "react"; function App() { const [counter, setValue] = useState(0); const onClick = () => setValue(prev => prev + 1); return ( ..

우선, 버튼에 해당하는 컴포넌트를 담은 Button.js를 만듬 >> 각각의 컴포넌트를 하나의 js파일로 따로 관리! Button.js function Button({ text }) { return {text}; } export default Button; App.js 수정 - import Button - Button 사용 App.js import Button from "./Button"; function App() { return ( Welcome back! ); } export default App; ** prop-types 패키지 설치 🔻 터미널창에 아래와 같이 입력 npm i prop-types Button.js import PropTypes from "prop-types"; function Bu..