티스토리

작은기린우리

검색하기

블로그 홈

작은기린우리

lamarck009.tistory.com/m

lamarck009 님의 블로그 입니다.

구독자: 0

방명록 방문하기

주요 글 목록

멀티 환경 프로젝트(프론트와 백 폴더를 분리해서 실행) 프론트엔드 + 백엔드 통합 개발 환경 가이드1. 개발 환경 구성프론트엔드 개발 환경Vite 개발 서버 (Development Server)실제 서버가 아닌 개발 편의를 위한 도구Hot Module Replacement(HMR), 실시간 코드 반영 등 지원백엔드 서버Node.js 기반 실제 서버API 엔드포인트 제공데이터 처리 및 비즈니스 로직 수행개발 vs 운영 환경 차이개발 환경클라이언트 Vite 개발 서버 (localhost:3000) ↕ 백엔드 서버 (localhost:4000)프로덕션 환경클라이언트 웹 서버(Nginx 등) 2. 프로젝트 구조 및 목적프로젝트 구조프로젝트 루트/├── package.json (메인)├── react-shop.. 공감수 0 댓글수 0 2025. 4. 26.
env 파일이란? env 파일은 "environment"의 약자로, 환경 변수를 저장하는 파일입니다. 주로 다음과 같은 목적으로 사용됩니다:민감한 정보 보호API 키데이터베이스 비밀번호비밀 토큰환경별 설정 관리개발 환경테스트 환경운영 환경예시# .env 파일API_KEY=your_api_key_hereDATABASE_URL=mongodb://localhost:27017SECRET_KEY=your_secret_key // Node.js에서 사용할 경우require('dotenv').config();const apiKey = process.env.API_KEY;// React에서 사용할 경우// .env 파일명은 REACT_APP_으로 시작해야 함const apiKey = process.env.REACT_APP_API_KEY.. 공감수 0 댓글수 0 2025. 4. 11.
✨ 파라미터(Parameter)와 API 키 사용법 📌 파라미터(Parameter)란?컴퓨터 과학 및 프로그래밍에서 파라미터(Parameter) 또는 매개변수는 함수, 명령어, 프로그램 또는 시스템 등에 값을 전달하여 그 동작을 변경하거나 특정 입력을 제공하는 데 사용되는 변수나 값이다. 어떤 동작을 수행할 때 필요한 추가 정보 또는 설정 값이라고 생각할 수 있다.💾 URL에서의 파라미터 (쿼리 파라미터)웹 개발 및 API 통신에서 "파라미터"는 주로 URL의 쿼리 파라미터(Query Parameter) 또는 쿼리 스트링(Query String) 을 의미하는 경우가 많다.위치: URL 주소에서 ? 문자 뒤에 위치한다.형식: 키(Key)=값(Value) 형태의 쌍으로 구성된다.구분: 여러 개의 파라미터는 & 문자로 구분하여 나열한다.목적: 웹 서버나 웹.. 공감수 0 댓글수 0 2025. 4. 11.
백틱에 대해서 백틱(backtick) `은 키보드의 물결(~) 키 왼쪽에 있는 문자입니다. 주요 용도는: 1. 코드에서: - 템플릿 리터럴(Template Literal) 작성 ```javascript let name = "John"; let greeting = `Hello ${name}!`; // 문자열 내 변수 삽입 가능 ``` 2. 마크다운에서: - 인라인 코드 표시 - 코드 블록 생성 (```로 시작) 3. 명령줄에서: - 명령어 실행 결과를 다른 명령어의 입력으로 사용 4. 데이터베이스에서: - MySQL 등에서 테이블명이나 컬럼명을 구분할 때 사용 백틱은 작은따옴표(')나 큰따옴표(")와 비슷한 역할을 하지만, 더 다양한 기능을 제공합니다. 숫자 1 왼쪽의 ` 모양 키보드로 입력할 수 있다 공감수 1 댓글수 0 2025. 4. 9.
fixed된 헤더(header)가 형제 요소의 margin에 영향을 받는 이유 position : fixed가 적용된 대상이 top:0 left:0 같이 명시적인 위치가 정해지지 않았을때 형제 요소의 margin에 영향을 받는 경우가 있다. headercontainer01와 continer-header-under는 형제요소이다. 그런데 아래와 같은 상황에서는 형제 요소의 margin만큼 아래로 밀려버린다.#container-header-under{margin-top: 50px;}#headercontainer01{position: fixed;}원인: #headercontainer01가 문서의 원래 위치를 유지하려 하기 때문position: fixed;를 적용하면 요소는 문서의 일반적인 흐름에서 제거되지만, 원래 위치(문서 내에서 배치되던 자리)를 기준으로 배치되려는 성질이 있습니다.. 공감수 0 댓글수 0 2025. 4. 1.
node server.js 관련 명령어: 서버 끄기 등 node server.js는 작성하신 Node.js 서버 코드를 실행하여 서버를 시작하는 명령어입니다. (현재 시간 2025년 4월 1일 오후 1:37 KST, 천안시 위치)서버를 시작하는 것 외에 관련하여 알아두면 좋은 기본적인 명령어/방법은 다음과 같습니다.1. 서버 끄기 (종료하기): Ctrl + C방법: node server.js를 실행했던 바로 그 터미널 창 (서버 로그 메시지가 계속 올라오거나 커서가 멈춰있는 창)을 활성화하고 키보드에서 Ctrl 키와 C 키를 동시에 누릅니다.동작: 이 키 조합은 현재 실행 중인 프로세스(여기서는 Node.js 서버)에게 중지 신호(Interrupt Signal) 를 보냅니다. 대부분의 경우 서버 프로세스는 이 신호를 받고 실행을 멈추게 됩니다. 터미널에는 다.. 공감수 0 댓글수 0 2025. 4. 1.
무한스크롤 웹페이지에서 페이지란 무엇일까? 우리가 인터넷 사이트를 웹페이지라고 부르는 것은 일반적으로 사이트의 구조가 마치 책과 같은 형식이기 때문이다.1page 즉 1면이다.그런데 막상 웹사이트를 보면 물리적인 책과 다르게 다양한 구조를 하고 있다.포탈처럼 다양한 글들로 넘어가는 페이지가 있는 반면 아예 컨텐츠가 무한해서 스크롤도 무한하게 길어지고 페이지도 세로로 쭉 이어지는 유튜브같은 사이트가 있다. 그리고 API에서도 페이지 개념을 사용한다. 그런데 무한스크롤에선 스크롤이 무한히 길어지는데 왜 페이지 개념을 사용하는 걸까? 📄 API에서의 '페이지(Page)'란 무엇일까? (무한 스크롤)페이지(page)라는 용어가 웹 API, 특히 무한 스크롤 맥락에서는 책 페이지와는 다른 의미로 사용되어 헷갈릴 수 있습니다. 여기서 '페이지'는 눈에 보.. 공감수 1 댓글수 0 2025. 4. 1.
✨ 비트 연산자 (Bitwise Operators)란 무엇인가? 비트 연산자(Bitwise Operators)는 컴퓨터 프로그래밍에서 숫자를 우리가 일상적으로 사용하는 10진수가 아닌, 컴퓨터가 내부적으로 데이터를 처리하는 방식인 2진수(Binary)의 비트(Bit) 단위로 직접 조작하고 연산하는 데 사용되는 특별한 종류의 연산자(Operator)들을 의미한다.⚙️ 핵심 원리: 비트(Bit) 수준에서의 연산2진 표현: 비트 연산자는 피연산자(연산 대상이 되는 값, 주로 숫자)를 먼저 2진수 형태(0과 1로 이루어진 시퀀스, JavaScript에서는 보통 부호 있는 32비트 정수로 간주)로 변환한다.비트 단위 조작: 그런 다음, 이 2진수의 각 자리에 있는 비트(0 또는 1)들을 직접 다루어 연산을 수행한다.& (AND), | (OR), ^ (XOR) 등은 두 피연산자.. 공감수 0 댓글수 0 2025. 3. 29.
✨ JavaScript에서 짝수, 홀수 판별 방법 JavaScript에서 어떤 숫자가 홀수인지 판별하는 가장 일반적이고 간단한 방법은 나머지 연산자(Modulo Operator) % 를 사용하는 것이다. 정수를 2로 나누었을 때 나머지가 0이 아니면 홀수이다.🧮 방법 1: 나머지 연산자 (%) 사용원리: 홀수/짝수 판별의 핵심 원리는 수학적인 정의에 있다.짝수(even number)는 어떤 정수를 2로 나누었을 때 나누어 떨어지는 정수, 즉 나머지(remainder)가 0인 수이다.홀수(odd number)는 2로 나누어 떨어지지 않는 정수이다. 즉 나머지(remainder)가 1 혹은 -1인 수이다.JavaScript의 나머지 연산자 (%)는 바로 이 나머지 값을 계산해주는 연산자이다.숫자(number) % 2 를 계산하면 'number를 2로 나눈.. 공감수 0 댓글수 0 2025. 3. 29.
✨ 평가(Evaluation)란 무엇인가? 프로그래밍, 특히 표현식(Expression)의 맥락에서 **평가(Evaluation)**란, 작성된 코드(주로 표현식)를 컴퓨터(JavaScript 엔진과 같은 인터프리터 또는 컴파일러)가 해석하고 실행하여 최종적인 **하나의 값(Value)**으로 도출해내는 과정을 의미한다.❓평가라는 말 자체가 감정평가와 같이 어떤 대상의 가치를 확인하는 어감이 있어서 헷갈릴 수 있지만 프로그래밍에서의 평가는 결과의 도출, 값의 산출같은 의미로 사용된다.⚙️ 평가 과정 이해하기간단히 말해, "평가한다"는 것은 "계산해서 결과를 낸다"와 비슷하다.해석(Parsing): 엔진은 먼저 코드 조각의 의미를 이해한다. 예를 들어 x + 5라는 코드를 보면, 'x라는 변수의 값과 숫자 5를 더하라'는 의미로 해석한다.실행(Ex.. 공감수 0 댓글수 0 2025. 3. 29.
✨ 표현식(Expression) 개념, 목적, 예시 🎯 표현식의 개념 (Concept)표현식(Expression)이란, JavaScript 엔진에 의해 평가(Evaluate)되어 하나의 값(Value)을 만들어내는 코드의 단위를 의미한다.여기서 값이란 숫자, 문자열, 불리언(true/false), 객체, 함수, null, undefined 등 모든 종류의 데이터를 포함한다.표현식은 그 자체로 하나의 값으로 귀결되기 때문에, 값이 위치할 수 있는 코드의 거의 모든 곳에 사용될 수 있다.이는 **문(Statement)**과 대조된다. 문은 특정 동작을 수행하는 코드의 단위(예: 변수 선언, 조건 분기, 반복)이며, 종종 내부에서 표현식을 사용하여 동작에 필요한 값을 결정한다.표현식은 말하자면 명확한 값이 정해진 질문 혹은 계산식이라고 할 수 있다.일반적으로.. 공감수 0 댓글수 0 2025. 3. 29.
인스턴스란 무엇인가? ✨ 인스턴스(Instance)란 무엇일까? (쉬운 설명 + 상세 설명)인스턴스(Instance)라는 말, 처음 들으면 조금 헷갈릴 수 있다. 가장 쉽게 비유하자면, 붕어빵 틀과 실제 붕어빵의 관계를 생각하면 된다!🍞🚗 쉬운 비유로 이해하기클래스 (Class): 붕어빵을 만드는 '틀' 또는 자동차를 만드는 **'설계도'**와 같다. 어떤 모양(속성)을 가질지, 어떤 기능(행동)을 할 수 있는지 정의해 놓은 템플릿(Template)이다. 이 자체는 실제 붕어빵이나 자동차가 아니다. 그냥 '틀'이나 '설계도'일 뿐이다.인스턴스 (Instance): 그 '틀'을 사용해서 실제로 만들어낸 '붕어빵' 또는 '설계도'를 보고 실제로 조립하여 만들어낸 '자동차'를 말한다. 즉, 클래스라는 설계도를 바탕으로 메모리에.. 공감수 0 댓글수 0 2025. 3. 29.
Set 생성자 및 add 메서드 동작에 대한 의문사항 📌 Set 생성자의 동작 방식자바스크립트의 Set 생성자(new Set())는 다음과 같이 동작한다.인수 없음: new Set()처럼 인수를 전달하지 않으면 빈(Empty) Set 객체가 생성된다.하나의 이터러블 인수: new Set(iterable)처럼 하나의 이터러블(Iterable) 객체(예: 배열 Array, 문자열 String, 다른 Set 등)를 인수로 전달하면, 해당 이터러블의 요소들을 순회하면서 고유한 값들만 추출하여 새로운 Set 객체를 생성한다.⚠️ 여러 개의 인수 또는 이터러블이 아닌 인수: Set 생성자는 오직 첫 번째 인수만 확인한다.만약 첫 번째 인수가 이터러블이면, 그 이터러블의 요소들로 Set을 만든다. 두 번째 이후의 인수들은 모두 무시된다.만약 첫 번째 인수가 이터러블이.. 공감수 1 댓글수 0 2025. 3. 28.
문자열 선택자 "문자열 선택자"라는 용어는 CSS에서 특정 문자열을 기반으로 요소를 선택하는 다양한 선택자들을 통칭하는 넓은 의미입니다. 말씀하신 "비슷한 이름을 가진 모든 요소를 선택하는 것"은 문자열 선택자의 한 종류인 속성 값의 시작 문자열 선택자에 해당합니다.문자열 선택자의 종류CSS에서 문자열을 기반으로 요소를 선택하는 선택자는 다음과 같이 다양하게 존재합니다.속성 값의 시작 문자열 선택자 ([attribute^="value"]):지정된 속성 값이 특정 문자열로 시작하는 요소를 선택합니다.예시: [class^="slid-item"]속성 값의 끝 문자열 선택자 ([attribute$="value"]):지정된 속성 값이 특정 문자열로 끝나는 요소를 선택합니다.예시: [class$="-last"]속성 값의 부분 문.. 공감수 0 댓글수 0 2025. 3. 22.
CSS 사용자 지정 속성 CSS 사용자 지정 속성이란?웹페이지를 만들다보면 CSS 내에서 반복적으로 사용되는 스타일 속성이 생겨난다. 그럴때마다 Class에 속성을 적용하는 것은 번거롭고 코드도 길어진다.그런 것을 방지하기 위해서 CSS 코드 안에서 변수처럼 값을 저장해두고 필요할 때마다 불러서 사용할 수 있게 해주는 기능을 사용하는데 그게 바로 CSS 사용자 지정 속성이다. 정의 및 사용사용자 지정 속성은 --로 시작하는 이름을 사용하여 정의한다.예를 들어 --main-color: blue;와 같이 정의할 수 있다.정의된 속성 값은 var() 함수를 사용하여 불러와 적용할 수 있다.예를 들어 color: var(--main-color);와 같이 사용할 수 있다.범위(Scope)사용자 지정 속성은 정의된 요소와 그 하위 요소에서.. 공감수 0 댓글수 0 2025. 3. 17.
CSS 심화 공부(18) - 박스 사이징(box-sizing) box-sizing이란?요소의 크기를 계산하는 방식을 결정하는 방식이다.즉, 요소의 width(너비)와 height(높이)를 어떤 기준으로 계산할지를 정하는 방식이다. 박스 사이징이라는 말처럼 요소의 콘텐츠 영역을 비롯해서 패딩(내부 여백)과 보더(테두리)를 기준으로 요소의 크기를 결정하게 된다.단 마진(외부 여백)은 계산에 포함되지 않는다.계산 포함 (O)콘텐츠 크기, 패딩, 테두리계산 제외 (X)마진box-sizing 속성content-box (기본값)요소의 width와 height 속성은 콘텐츠 영역의 크기를 나타낸다.padding과 border는 요소의 전체 크기에 추가된다.예를 들어, width: 100px; padding: 20px; border: 10px;인 요소의 실제 너비는 160px(1.. 공감수 0 댓글수 0 2025. 3. 16.
컨텐츠간 여백 : vw와 vh 컨텐츠간 여백 : vw, vhvw와 vh는 CSS에서 뷰포트(viewport)를 기준으로 하는 상대적인 길이 단위이다.뷰포트는 웹 페이지가 표시되는 브라우저 창의 보이는 영역을 의미한다. vw (Viewport Width)vw는 뷰포트 너비의 1%에 해당하는 단위입니다.예를 들어, 뷰포트 너비가 1000px이라면 1vw는 10px입니다.vw는 주로 가로 방향의 여백, 간격, 요소의 너비 등을 설정할 때 사용됩니다.화면 너비에 따라 요소의 크기가 유동적으로 변해야 하는 반응형 디자인에 유용합니다.vh (Viewport Height)vh는 뷰포트 높이의 1%에 해당하는 단위입니다.예를 들어, 뷰포트 높이가 800px이라면 1vh는 8px입니다.vh는 주로 세로 방향의 여백, 간격, 요소의 높이 등을 설정할 .. 공감수 0 댓글수 0 2025. 3. 16.
선택자(.) 입력의 실수 가능성 body{ display: flex; font-family: Arial, Helvetica, sans-serif; margin: 0; padding-top: 80px; padding-left: 96px; padding-right: 24px; background-color: black; color: white;}.body{ display: flex; font-family: Arial, Helvetica, sans-serif; margin: 0; padding-top: 80px; padding-left: 96px; padding-right: 24px; background-color: black; color: white;}선.. 공감수 0 댓글수 0 2025. 3. 15.
CSS 적용 우선순위 CSS 디자인을 하다보면 스타일 규칙이 충돌할 때가 있다. 그렇게 되면 웹 브라우저는 어떤 스타일이 요소에 적용되는지를 결정하는데 그 기준이 우선순위라고 할 수 있다. CSS 우선순위 결정 요소웹 브라우저는 다음 요소들을 종합적으로 고려하여 CSS 우선순위를 결정한다. 1. 중요도 (!important 규칙)!important 규칙은 가장 높은 우선순위를 가지며, 다른 모든 규칙보다 우선하여 적용된다.하지만 !important를 남용하면 스타일 관리가 어려워지므로, 가능한 한 사용을 자제하는 것이 좋다.2. 명시도 (Specificity)명시도는 스타일 규칙이 얼마나 구체적으로 요소를 선택하는지를 나타낸다. 명시도가 높은 규칙이 낮은 규칙보다 우선하는데 다음과 같은 순서로 계산된다.인라인 스타일 (HT.. 공감수 0 댓글수 0 2025. 3. 14.
CSS 심화 공부(17) - 미디어 쿼리(Media Queries) 미디어 쿼리(Media Queries)란?앞서 플렉스 박스나 그리드는 레이아웃을 설계하 속성이라고 설명했다. 그렇다면 그런 레이아웃을 꾸며줄 기능 또한 필요한데 그것이 바로 미디어 쿼리이다. 우리는 웹페이지를 볼때 반드시 스마트폰으로만 보는 것이 아니라 PC로도 보고 태블릿으로도 보고 심지어는 TV에 연결해서 대화면에서 보기도 한다.사람으로 치자면 키가 큰 사람, 마른 사람, 뚱뚱한 사람처럼 다양한 체형이 있는 것이다. 미디어 쿼리는 그런 다양한 체형에 적응할 수 있는 고무줄이 달린 옷이라고도 할 수 있을 것이다.미디어 쿼리의 주요 기능 반응형 웹 디자인 구현 : 다양한 화면 크기와 해상도를 가진 기기(데스크톱, 태블릿, 스마트폰 등)에서 웹 페이지가 최적의 모습으로 보이도록 스타일을 조정한다.미디어 유.. 공감수 1 댓글수 0 2025. 3. 14.
CSS 심화 공부(16) - z-index z-index란?CSS 레이아웃을 만들다보면 동일한 위치에 여러 레이아웃이 겹치는 경우가 발생한다.이럴 때 사용하는 것이 바로 z-index 속성이다. z-index는 겹치는 요소가 있을 때 어떤 요소가 위에 표시되고 어떤 요소가 아래에 표시될지 제어할 수 있다. 음식으로 예를 들자 샌드위치의 재료를 어떤 순서로 쌓을 지 정하는 방법이라고 할 수 있다.샌드위치는 빵, 햄, 치즈, 야채 등을 순서대로 쌓는데 만약에 빵 대신 야채를 가장 밑에 둔다면 어떻게 되겠는가?이처럼 z-index는 각각의 레이아웃들을 적정한 위치에 배치해서 제작자가 의도한 대로 웹페이지가 동작하도록 만드는데 도움을 준다. 그림을 예로 들면 레이어를 쌓는 순서이다. 디지털 프로그램을 사용해서 그림을 그릴 때 여러개의 레이어를 쌓아 올려.. 공감수 0 댓글수 0 2025. 3. 14.
CSS 심화 공부(15) - position position위치, 자리CSS position이란?css에서 포지션이란 HTML 요소의 위치를 결정하는 데 사용되는 속성이다. 포지션은 요소가 문서 내에서 어떻게 배치될지 정의한다.position 속성의 주요 값static (기본값):요소가 일반적인 문서 흐름에 따라 배치됩니다.top, right, bottom, left 속성이 적용되지 않습니다.특별한 위치 조절이 필요 없는 경우에 사용됩니다.relative:요소가 원래 위치를 기준으로 상대적으로 이동합니다.top, right, bottom, left 속성을 사용하여 이동 거리를 지정할 수 있습니다.다른 요소와의 상대적인 위치 조절에 유용합니다.absolute:요소가 가장 가까운 위치가 지정된(positioned) 조상 요소를 기준으로 절대적으로 배치.. 공감수 0 댓글수 0 2025. 3. 14.
비전공자 프로그래밍 배우기 필자는 흔히 말하는 문과 출신 비전공자이다. 이번에 프로그래밍에대해 배우게 되었는데 비전공자의 시선으로 프로그래밍을 기초부터 배우면서 한단계 한단계 나아가고자 한다. 학습 과정에서 어려움을 겪는 부분은 어디쯤일까. 글을 작성하면서 표시해보고자 한다. 공감수 0 댓글수 0 2025. 3. 14.
CSS 심화 공부(14) - grid(3) : row-start, end / column-start, end 플렉스 박스에서 플렉스 컨테이너와 플렉스 아이템으로 나뉜 것처럼그리드 또한 컨테이너와 아이템이 있다. 그중 아이템의 위치와 크기를 정밀하게 제어하는 방법이 있는데 그것이 바로 grid-row-start, grid-row-end, grid-column-start, grid-column-end 속성이다. grid-row-start, grid-row-end, grid-column-start, grid-column-end 그리드 컨테이너에 위치할 아이템의 위치를 정하는 속성이다. 예를 들어 그리드 컨테이너가 체스 판이라고 한다면 그리드 아이템은 체스 말이다.해당 속성은 체스 말을 체스판의 어느 위치에, 어떤 크기로 놓을지 결정하는 역할을 한다. 때문에 해당 속성을 사용할 경우 좀 더 유연하게 레이아웃을 배치할 .. 공감수 0 댓글수 0 2025. 3. 14.
CSS 심화 공부(13) - grid(2) : gap, template-rows / columns 1. gap그리드 셀 사이의 간격을 설정하는 데 사용된다.gap 속성은 row-gap과 column-gap의 단축 속성으로, 행과 열 사이의 간격을 한 번에 설정할 수 있다.더보기 1 2 3 4 5 6 7 8 9 .grid-container { display: grid; grid-template-columns: repeat(3, 100px); gap: 20px 10px; /* 행 간격: 20px, 열 간격: 10px */ } .grid-item { background-color: #eee; padding: 20px; text-align: .. 공감수 0 댓글수 0 2025. 3. 13.
CSS 심화 공부(12) - grid(1) 플렉스 박스 VS 그리드 플렉스 박스의 경우 주축(행 혹은 열)을 기준으로 아이템을 배치하고 정렬하는 1차원 레이아웃 시스템이었다.그리드는 행과 열을 사용해서 아이템을 배치하고 정렬하는 2차원 레이아웃 시스템이다. 말하자면 그리드 CSS는 행렬(matrix)과 유사한 구조를 사용하여 레이아웃을 구성한다고 할 수 있다. 플렉스 박스가 방을 1자로 늘어놓는다고 치면그리드는 ㄱ자 ㄴ자 ㄷ자 식으로 좀 더 자유롭게 구성이 가능하다. 그리드의 주요 특징2차원 레이아웃행(row)과 열(column)을 사용하여 콘텐츠를 배치한다.플렉스박스가 1차원 레이아웃에 특화된 것과 달리, 그리드는 2차원 레이아웃을 자유롭게 구성할 수 있다.유연한 레이아웃 구성다양한 단위(픽셀, 퍼센트, fr 등)를 사용하여 행과 열의 크기를 .. 공감수 0 댓글수 0 2025. 3. 13.
CSS 심화 공부(11) - flex item 속성(5) : flex flex 속성flex 속성은 플렉스 아이템의 크기 조절 방식을 한 번에 설정하는 축약 속성이다.flex-grow, flex-shrink, flex-basis 세 가지 속성을 결합하여 사용한다.flex 속성의 구성 요소flex-grow:플렉스 컨테이너 안에 남는 공간이 있을 때 플렉스 아이템이 얼마나 늘어날지를 결정합니다.값이 0이면 아이템이 늘어나지 않고, 양수이면 해당 비율만큼 늘어납니다.flex-shrink:플렉스 컨테이너 안에 공간이 부족할 때 플렉스 아이템이 얼마나 줄어들지를 결정합니다.값이 0이면 아이템이 줄어들지 않고, 양수이면 해당 비율만큼 줄어듭니다.flex-basis:플렉스 아이템의 초기 크기를 설정합니다.auto 또는 길이 단위(px, %, em 등)를 사용하여 설정할 수 있습니다.fl.. 공감수 0 댓글수 0 2025. 3. 13.
CSS 심화 공부(10) - flex item 속성(4) : flex basis basis기준 (단위), 기반, 기초flex-basis란?이름에서 알 수 있듯이 CSS 플렉스 박스 레이아웃에서 플렉스 아이템의 초기(기초) 크기를 설정하는 속성이다.즉 아이템의 기본 크기를 결정한다. flex-basis의 기본 개념기본값: flex-basis의 기본값은 auto이다. 즉 아이템의 크기가 내용물의 크기에 따라 자동으로 결정된다는 의미이다.주축 방향 크기flex-direction 속성에 따라 주축(main axis) 방향의 크기를 설정한다.flex-direction: row; (기본값)에서는 아이템의 너비를 설정한다.flex-direction: column;에서는 아이템의 높이를 설정한다.flex-basis의 속성 값auto : 아이템의 크기가 내용물의 크기에 따라 자동으로 결정된다.con.. 공감수 0 댓글수 0 2025. 3. 13.
CSS 심화 공부(9) - flex item 속성(3) : flex shrink shrink(규모·양이[을]) 줄어들다[줄어들게 하다]플렉스 컨테이너에 담겨있는 아이템의 크기가 컨테이너를 초과할 경우 아이템이 컨테이너 밖으로 삐져나온다. flex-shrink는 플렉스 아이템들의 크기를 조정해서 이렇게 삐져나온 것들을 컨테이너 안으로 밀어 넣는 방법이다. 인테리어로 비유 하자면 가구를 여유롭게 배치했더니 방 밖으로까지 가구가 삐져나온 상황인데이렇게 이렇게 삐져나온 가구를 방 안으로 넣기 위해서 가구가 차지하는 공간을 줄이는 방법이라고 할 수 있다. flex-shrinkflex-grow가 남는 공간을 분배하는 것과 반대로, flex-shrink는 부족한 공간을 분배하는 속성이다.즉, flex-shrink는 플렉스 컨테이너의 공간이 부족할 때 플렉스 아이템의 크기가 얼마나 줄어들지를 결.. 공감수 0 댓글수 0 2025. 3. 13.
CSS 심화 공부(8) - flex item 속성(2) : flex grow 플렉스 박스를 사용하다 보면 콘테이너의 크기 대비 아이템의 크기가 작아서 여유 공간이 많이 남는 경우가 있다.이럴 경우 플렉스 아이템의 크기를 컨테이너에 맞게 채우고 싶을 수가 있는데 그럴 경우 사용하는 것이 바로 flex-grow이다.flex-grow CSS Flexbox 레이아웃에서 사용되는 속성으로, 플렉스 컨테이너 내에서 플렉스 아이템이 사용 가능한 공간을 어떻게 분배할지 결정한다. flex-grow에 할당된 값은 플렉스 아이템이 얼마나 늘어날 수 있는지를 나타내는 비율이다.인테리어로 비유하자면 가구가 차지하는 공간을 여유 공간 만큼 더 늘리는 것이다. flex-grow의 속성기본값 : flex-grow의 기본값은 0이다. 즉, 기본적으로 플렉스 아이템은 컨테이너 내에서 남는 공간을 채우기 위해 .. 공감수 0 댓글수 0 2025. 3. 13.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.