본문 바로가기
728x90

분류 전체보기530

새로운 프로젝트 생성 & Bootstrap 사용하기 오늘부터 쇼핑몰 프로젝트를 새로 만들어봅시다.그래서 새로운 리액트 프로젝트 생성부터 하면 되는데 CSS짜기 귀찮으니 react-bootstrap 라이브러리를 설치해서 레이아웃을 좀 쉽게 복사붙여넣기 식으로 만들어봅시다.   새로운 프로젝트 생성은 ▲ 1. 작업폴더에 shift + 우클릭해서 powershell/터미널 열고   2. 터미널에 리액트 프로젝트 생성 명령어 입력합니다.npx create-react-app shop그럼 shop이라는 프로젝트가 하나 하위폴더로 생성됩니다.  3. shop이라는 폴더를 VScode 에디터로 오픈한 뒤에 코드짭시다.4. App.js에 필요없는 html들은 지우고 div 하나만 남겨두고 시작합시다.import logo from "./logo.svg";import "./.. 2024. 5. 16.
만든 리액트 사이트 build & Github Pages로 배포해보기 보호되어 있는 글 입니다. 2024. 5. 15.
class를 이용한 옛날 React 문법 보호되어 있는 글 입니다. 2024. 5. 15.
[리액트] 암기할 것 = state / props / 컴포넌트 / UI State 만드는 방법 useState('보관할 자료') State 만드는 방법 예시 >> let [a,b] = useState('남자 코트 추천'); a = state 에 보관했던 자료, 변수처럼 사용. {a}b = state 변경 함수. 함수이기 때문에 소괄호랑 같이 사용 . 어레이(배열 = Array)로 [ 남자코트추천, 함수 ] 이렇게 남음  let [글제목, set글제목] = useState([ "남자코트 추천", "강남 우동맛집", "파이썬 독학", ]);여러 개 사용한 예시State 변경 하는 방법= State 변경함수 사용= state 변경함수(새로운state)let [ 따봉, 따봉변경 ] = useState(0);지금 state 에 0이 담긴 상태state를 변경하려면.. 2024. 5. 15.
입문자를 위한 CSS 기초 강의 #12 position 2편, fixed sticky 입문자를 위한 CSS 기초 강의 #12 position 2편, fixed sticky (youtube.com) fixed예제포지션 fixed 부여 나머지 속성도 부여해줌.왼쪽과 위쪽에서 50px 떨어져 있는 것 확인 가능.stickysticky 적용sticky 는 일반적인 문서 흐름에 따라 배치함.저 위치가 자기 자리인 것.스크롤 되는 상위 요소에 대해서 오프셋을 적용근데 적용 안한 것처럼 보여짐.- 스크롤 이동이 이뤄질 때 그 속성을 발휘. 세부사항 top 수정문서 배치에는 정상적으로 위치해있는 걸 확인 가능스크롤 이동이 되다가 박스가 위에 붙어짐.top:0그리고 스크롤 내려도 고정이 됨.다시 스크롤 내리지말고 올라가게되면원래 문서 흐름대로 그 위치로 다시 되돌아감. 속성을 바꿔봄.bottom : 0스.. 2024. 5. 13.
[CSS] position의 사용법 #12 위치를 내맘대로! CSS Position 이해하기 - 웹 코딩 강좌 (youtube.com)고윤서 강의 참고 (콜로소) position 속성(5 가지 속성)toprightbottomleftz-index속성 같이 쓰임기본 값 - static포지션과 쓰이는 5가지 속성은static 일 때는 적용되지 않음.속성들이 적용되기 위해서는relative를 함께 써야함.fixed = 브라우저의 "뷰포트" 기준으로 절대 위치로 이동.sticky = 평소에는 static 처럼 자리.컨테이너가 스크롤 되면서 요소가 사라질 무렵에는 위치 속성이 지정한 위치에서 고정되어 멈춤.psoition: relative원래 위치에서 상대적인 값을 추가해서 가짐position을 다주고 (기본적으로 띄우는 속성)z-index (더 띄.. 2024. 5. 13.
728x90