Ho Jung

@media란 무엇인가? @media는 CSS에서 미디어 쿼리(Media Query)를 정의하기 위한 규칙입니다.사용자의 화면 크기, 디바이스 종류, 해상도 등 다양한 조건에 따라 다른 스타일을 적용할 수 있도록 도와줍니다. 이를 통해 반응형 웹 디자인(Responsive Web Design)을 구현할 수 있습니다. [기본 문법]@media (조건) { /* 적용할 스타일 */} ex) 화면 너비가 600px 이하로 줄어들면 배경색이 파란색 → 분홍색으로 바뀝니다. /* 기본 스타일 */body { background-color: lightblue;}/* 화면 너비가 600px 이하일 때 */@media (max-width: 600px) { body { background-color: ligh..

1. z-index CSS에서 요소의 쌓임 순서를 제어하기 위해 사용되는 속성입니다. 화면에 여러 요소가 겹칠 때, 어떤 요소가 위로 올라오고 어떤 요소가 아래로 내려가는지를 결정합니다. - 기본값 : auto양수값이 클수록 위로 올라갑니다.음수값이 작을수록 아래로 내려갑니다.auto부모 요소의 쌓임 맥락(stack context)을 따릅니다. 2. z-index의 작동 방식 1) 쌓임 맥락(Stacking Context)- 요소는 브라우저 화면에서 서로 겹칠 수 있는 "쌓임 맥락" 안에 존재합니다. - 새로운 쌓임 맥락은 특정 CSS 속성(예: position과 z-index)에 의해 생성됩니다. - 쌓임 맥락 안의 요소들은 그 안에서만 서로의 z-index를 비교합니다 2) 기본 쌓임 순서쌓임 순서는..

Toggle(토글)이란?  토글은 두 가지 상태 또는 옵션 사이를 전환할 수 있는 기능 또는 기능을 말합니다. 일반적으로 기술, 컴퓨팅, 프로그래밍 및 통신 분야에서 사용자에게 서로 다른 설정이나 모드를 전환할 수 있는 방법을 제공하기 위해 사용됩니다. ▶ 아이콘 클릭 시 세부 내용이 보일 수 있도록 구현할 예정 [html]  ▶ 자주 묻는 질문 견뎌야 합니다 ㅎㅎㅎ 수정하기 삭제하기  ▶클릭 후 보일 내용은 display:none으로 보이지 않게 설정 [js] document.querySelectorAll(".faq-item .question-r..

Pagination이란? 페이지네이션은 콘텐츠를 여러 페이지로 나누어 다음 또는 이전 페이지로 이동하거나 특정 페이지로 이동할 수 있는 요소리스트가 많아 한 화면에 과도한 스크롤 발생이 예상되는 경우 적용 [html]   [js]1. 페이지 항목 수 설정 및 요소 가져오기// 한 페이지에 표시할 항목 수 설정const itemsPerPage = 4;// 현재 페이지를 추적하는 변수 초기화let currentPage = 1;// 콘텐츠 카드가 담긴 컨테이너 요소 선택const contentGrid = document.getElementById("contentGrid");// 페이지네이션 버튼이 표시될 컨테이너 요소..

1. React State 하나의 컴포넌트 안에서 전역 변수처럼 사용되는 변수로 컴포넌트의 상태를 관리함 Hook함수형 컴포넌트에서 React에서 제공하는 기능을 사용할 수 있게 해주는 기능 (클래스형 컴포넌트는 자체적으로 생명주기 관리, 상태 변화 관리가 가능하지만 함수형은 불가능하기 때문에 Hook 이라는 별도 기능을 제공) **대표적인 Hook 사용 기능으로 useState, useContext, useEffect. useReducer 등이 있음 useState컴포넌트의 상태 값이 변하게 되면 컴포넌트를 다시 렌더링 (리랜더링) 시키는 함수 React 라이브러리에서 제공 import React, {useState} from ‘react’;  #예제 1 1. src/components/R06_Stat..

1. React Props- React에서 컴포넌트에 데이터를 전달하는 방법 중 하나 - 부모 컴포넌트 → 자식 컴포넌트로 전달 - props로 전달 받은 값은 컴포넌트에서 변경할 수 없음(읽기 전용) - 컴포넌트간의 데이터 전달이 간단해지고 유지보수성, 재사용성이 증가됨. #예제11. src/components/R03_Props1.js 생성 후 작성import React from 'react';// props : 부모 컴포넌트가 자식 컴포넌트에 데이더 전달 시 사용하는 객체// * props는 자식 컴포넌트에서 수정 불가능 *const PropsEx1 = (props) => {// 부모 컴포넌트(App.jsdml Function App())로 부터 전달 받은 값(props) 확인console.log('..

1. React app 실행 원리 - yarn start를 통해 서버가 켜짐- public/index.html(메인 페이지)가 열림- index.js에서 index.html 중 id가 "root"인 요소를 찾아- App.js에서 반환된 컴포넌트(요소)를 렌더링(화면에 출력)(App.js에 작성된 내용으로 화면이 만들어진다!) 2. JSX - JavaScript Xml의 줄인말- React에서 UI를 작성하기 위한 문법으로 JS 코드 내에 HTML 코드 작성 가능- JavaScript와 HTML형태로 작성이 쉽고, 가독성 증가- JSX 주석 : {/* 주석 내용 */}  3. Component(컴포넌트)  - React App의 구성 요소- UI(HTML 요소)를 작은 조각으로 나누어 관리- 재사용이 가능..

- Node.js 설치하기 - LTS 버전 설치하기 - C드라이브 tools에 설치 후 설치파일 더블클릭하여 설치 진행하기- C드라이브 workspace에 react 폴더 만들고 Git bash (터미널) 열기 (Bash는 Unix 기반 시스템의 셸이므로 npm과 yarn을 설치 및 이용하는데 효율적임)  1. Node.js 설치 및 버전 확인하기$ node -v 2. Yarn 설치 및 React 앱 생성- yarn 설치 및 버전 설정$ npm install -g yarn$ yarn --version- react 앱(프로젝트) 생성하기$ yarn create react-app {앱이름} - 아래와 같이 Happy hacking! 이라는 문구가 뜨고 명령이 종료되면 정상적으로 프로젝트 생성됨- VSCode..