개인공부 (206) 썸네일형 리스트형 css background-size 특징 background-size: 100% auto === contain (가로 크기에 따라 조정) background-size: auto 100% === cover (세로 크기에 따라 조정) React : Hook (2018v) 2018년에 나온 Hook Hook - Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 Reac의 기능을 사용할 수 있습니다. import React, { useState } from 'react'; function Example() { // "count"라는 새로운 상태 값을 정의합니다. const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count + 1)}> Click me ); } - 선택적 사용 : 기존의 코드를 다시 작성할 필요 없이 일부의 컴포넌트들 안에서 Hook을 사용할 수 있습니다. - 100% 이전 버전과의 호환성을 보장합니다. - 현재 사용가능 Hook은 배포 v16.8.0에서.. Javascript , Typescript, NodeJs 입맛정리. Javascript ES2015 모던 Javascript라 한다. 웹 앱의 구성요소 - HTML - CSS - JavaScript 웹서버에서 주도적으로 UI를 만드는 것은 ServerSide 렌더링 클라이언트에서 주도적으로 UI를 만드는 것은 ClientSide 렌더링 파설, 웹팩 번들러 하나의 자바스크립트파일로 만들어주는 기능. 번들러를 사용할수록 파일 사이즈가 작아지고 클라우드 같은 불피요한 비용들을 줄일 수 있다. 트랜스 파일링. - 기계어로 바꾸는 작업. - 인간이 이해할 수 있는 프로그래밍 언어를 기계가 이해하는 프로그래밍 언어로 변경. Babel - 트랜스 파일러의 한 종류. - 최신 버전의 문법을 하위버전의 문법으로 바꾸어준다. JavaScript VS TypeScript TypeScript.. Parcel, Typescript 설치 https://ko.parceljs.org/getting_started.html 🚀 시작하기 ko.parceljs.org Parcel npm install -g parcel-bundler Typescript npm install -g typescript 프론트엔드 추천 https://velog.io/@ansrjsdn/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%B6%94%EC%B2%9C-%EC%9E%90%EB%A3%8C-%EB%AA%A8%EC%9D%8C 프론트엔드 추천 자료 모음 사이트 MDN - 가장 유명한 MDN 모던 javascript 튜토리얼 - JS 튜토리얼로 정말 좋음. 타입스크립트 핸드북 - TS 공식문서 번역 본 웹팩 핸드북 - 캡틴판교님의 웹팩 핸드북 fontawesome - 다양한 ICON을 가져 velog.io CSS transform 그리기 기본 직선 See the Pen rNyOyWK by Redbin (@hongjeongmin) on CodePen. translate 적용 translate(X, Y)는 X축 Y축으로 이동하는 방법이다. %로 접근시 x축 y축 길이의 비율만큼 접근합니다. See the Pen MWpapJV by Redbin (@hongjeongmin) on CodePen. scale scale(x,y) x축 y축으로 확대시키는 방법이다. See the Pen abJvpQG by Redbin (@hongjeongmin) on CodePen. rotate rotate(x deg) x각도만큼 회전 See the Pen abJvpQG by Redbin (@hongjeongmin) on CodePen. skew skewX, ske.. css 커스텀 underLine , 줄바꿈 커스텀 위와 같은 언더라인을 CSS의 linear-gradient를 사용해서 적용시킨다. developer.mozilla.org/ko/docs/Web/CSS/linear-gradient() linear-gradient - CSS: Cascading Style Sheets | MDN CSS linear-gradient() 함수는 두 개 이상의 색이 직선을 따라 점진적으로 변화하는 이미지를 생성합니다. 함수의 결과는 의 특별한 종류인 자료형입니다. developer.mozilla.org CSS linear-gradient() 함수는 두 개 이상의 색이 직선을 따라 점진적으로 변화하는 이미지를 생성합니다. 함수의 결과는 의 특별한 종류인 자료형입니다. strong이라는 태그에서 linear-gradient를 이용해 .. css 클래스명 선정. CLASS명 작성 요령 정리 테스트 내용입니다.테스트 내용입니다.테스트 내용입니다.테스트 내용입니다.테스트 내용입니다. 취소 동의 후 구매하기 Modal 관련 클래스. 제목 내용 버튼 두개로 이루어진 Modal의 클래스명 작성 요령 button같은 경우 buttonArea로 한번 감싸고 button 클래스를 정의하는게 깔끔하다. Tab tab > list > item 순으로 클래스명을 작성. A B C D 이전 1 2 3 4 5 6 7 8 ··· 26 다음
