개발자 노트 - 강경훈 story
close
프로필 배경
프로필 로고

개발자 노트 - 강경훈 story

  • 분류 전체보기 (582)
    • 설치메뉴얼 (9)
    • Java (273)
      • Java 기초 문법 (24)
      • Java 객체 지향 핵심 (30)
      • Java 유용한 클래스 (51)
      • 자료구조 (20)
      • JSP (28)
      • Swing 프로젝트 (19)
      • 교재 정리 (12)
      • 디자인 패턴 (11)
      • 자바 라이브러리 (6)
      • 알고리즘(코테) (67)
    • Spring Boot (92)
      • Bank App 만들기 (deployment) (30)
      • 추가 개념 (7)
      • Blog 프로젝트 만들기(JPA) (53)
    • My Project (29)
      • 쇼핑몰 (15)
      • Java Swing 멀티 쓰레딩 프로그램 (10)
      • Java 1 : N 양방향 소켓 통신 (스윙) (4)
    • 면접 질의 응답 모음 (5)
    • CS (28)
      • 컴퓨터 구조 (7)
      • 운영체제 (6)
      • 네트워크 (8)
      • 시스템 설계 (7)
    • Vue.js (1)
      • 사전지식 (1)
    • MySQL (47)
      • 정리 (33)
      • 1일 1쿼리 (14)
    • HTML CSS (30)
      • HTML (10)
      • CSS (8)
      • CSS flexbox (9)
      • 블로그 만들기 (3)
    • JS (23)
      • JavaScript 핵심 (6)
      • JS 작업을 위한 코딩 연습 (8)
      • JavaScript 게시판 만들기 (8)
    • Git (9)
      • 강의 정리 (5)
      • 교재 정리 (3)
    • Flutter (27)
      • 기초 (4)
      • Flutter UI 프레임워크 (18)
      • MVVM 패턴과 상태 관리 (4)
    • error note (4)
      • Java (4)
    • 방통대정리 (2)
      • C++프로그래밍 (2)
  • 홈
  • 깃 허브
  • 설정
CSS flexbox 목차

CSS flexbox 목차

CSS flexboxFlexbox 란? flex-direction 속성이란? flex-warp 주축 방향 정렬 justify-content 교차축 정렬 align-items와 align-content FlexItem의 세밀한 제어 flex 속성 Flexbox 중간 점검 - 연습 문제활용 실습웹페이지 레이아웃 구성해보기 - 1

  • format_list_bulleted HTML CSS/CSS flexbox
  • · 2024. 7. 8.
  • textsms
웹페이지 레이아웃 구성해 보기 - 1

웹페이지 레이아웃 구성해 보기 - 1

1. 샘플 연습 홈 소개 서비스 연락처 수평 및 수직 정렬된 아이템 카드 1 카드 내용 1 카드 2 카드 내용 2 카드 3 카드 내용 3 카드 4 카드 내용 4 카드 5 카드 내용 5 카드 6 카드 내용 6

  • format_list_bulleted HTML CSS/CSS flexbox
  • · 2024. 7. 8.
  • textsms
Flexbox 중간 점검 - 연습 문제

Flexbox 중간 점검 - 연습 문제

목차1번 문제 item1 item1 item1 2번 문제 item1 item2 item3 3번 문제 항목1 항목2 ..

  • format_list_bulleted HTML CSS/CSS flexbox
  • · 2024. 7. 4.
  • textsms
FlexItem의 세밀한 제어 flex 속성

FlexItem의 세밀한 제어 flex 속성

1. Flex 아이템 속성 Flex 아이템 속성 사용 목적order: 아이템의 표시 순서를 제어하여 중요도에 따라 배치 순서를 변경하기 위해 사용한다. 즉, 중요도에 따라 순서를 변경하거나 특정 아이템을 맨 앞이나 맨 뒤에 배치할 때 사용할 수 있다.flex-grow: Flex 컨테이너 내의 남은 공간을 아이템들이 비율에 맞게 차지하도록 하기 위해 사용한다. 또는 여러 아이템이 있고, 특정 아이템이 더 많은 공간을 차지해야 할 때 사용할 수도 있다.flex-shrink: 공간이 부족할 때 아이템이 얼마나 줄어들지를 결정하여 반응형 디자인에서 레이아웃을 유지하기 위해 사용한다.flex-basis: 아이템의 기본 크기를 설정하여 초기 크기를 지정하고 나머지 공간을 flex-grow와 flex-shrink로 ..

  • format_list_bulleted HTML CSS/CSS flexbox
  • · 2024. 7. 4.
  • textsms
교차축 정렬 align-items와 align-content

교차축 정렬 align-items와 align-content

1. 교차축 정렬이란? Flexbox 레이아웃에서 교차축(cross axis)은 주 축(main axis)에 수직인 축을 의미한다. 교차축 정렬은 이 축을 따라 Flex 아이템들을 배치하는 방법이다. 주 축이 수평 방향일 때 교차축은 수직 방향이 되고, 주 축이 수직 방향일 때 교차축은 수평 방향이 된다. 교차축 정렬을 위해 두 가지 주요 align-items와 align-content 속성을 사용한다.1. align-itemsalign-items 속성은 Flex 컨테이너 내의 개별 Flex 아이템들을 교차축을 따라 정렬한다. Flex 컨테이너의 높이와 관계없이 각 아이템의 위치를 지정할 수 있다.flex-start: 아이템들을 교차축의 시작 부분에 정렬한다.flex-end: 아이템들을 교차축의 끝 부분..

  • format_list_bulleted HTML CSS/CSS flexbox
  • · 2024. 7. 2.
  • textsms
주축 방향 정렬 justify-content

주축 방향 정렬 justify-content

1. justify-content 속성이란justify-content 속성은 Flex 컨테이너 내에서 주 축(main axis)을 따라 아이템들을 정렬하는 방법을 정의한다.flex-start: 아이템들을 주 축의 시작 부분에 정렬한다 (기본값).flex-end: 아이템들을 주 축의 끝 부분에 정렬한다.center: 아이템들을 주 축의 가운데에 정렬한다.space-between: 첫 번째 아이템은 시작 부분에, 마지막 아이템은 끝 부분에 정렬하고, 나머지 아이템들은 사이에 고르게 분포시킨다.space-around: 아이템들 주위에 고르게 여백을 분포시킵니다. 아이템 간의 여백은 동일하지만, 첫 번째 아이템과 마지막 아이템의 바깥 여백은 내부 여백의 절반이다.space-evenly: 모든 아이템들을 사이의 ..

  • format_list_bulleted HTML CSS/CSS flexbox
  • · 2024. 7. 2.
  • textsms
  • navigate_before
  • 1
  • 2
  • navigate_next
공지사항
  • 목차 목록
전체 카테고리
  • 분류 전체보기 (582)
    • 설치메뉴얼 (9)
    • Java (273)
      • Java 기초 문법 (24)
      • Java 객체 지향 핵심 (30)
      • Java 유용한 클래스 (51)
      • 자료구조 (20)
      • JSP (28)
      • Swing 프로젝트 (19)
      • 교재 정리 (12)
      • 디자인 패턴 (11)
      • 자바 라이브러리 (6)
      • 알고리즘(코테) (67)
    • Spring Boot (92)
      • Bank App 만들기 (deployment) (30)
      • 추가 개념 (7)
      • Blog 프로젝트 만들기(JPA) (53)
    • My Project (29)
      • 쇼핑몰 (15)
      • Java Swing 멀티 쓰레딩 프로그램 (10)
      • Java 1 : N 양방향 소켓 통신 (스윙) (4)
    • 면접 질의 응답 모음 (5)
    • CS (28)
      • 컴퓨터 구조 (7)
      • 운영체제 (6)
      • 네트워크 (8)
      • 시스템 설계 (7)
    • Vue.js (1)
      • 사전지식 (1)
    • MySQL (47)
      • 정리 (33)
      • 1일 1쿼리 (14)
    • HTML CSS (30)
      • HTML (10)
      • CSS (8)
      • CSS flexbox (9)
      • 블로그 만들기 (3)
    • JS (23)
      • JavaScript 핵심 (6)
      • JS 작업을 위한 코딩 연습 (8)
      • JavaScript 게시판 만들기 (8)
    • Git (9)
      • 강의 정리 (5)
      • 교재 정리 (3)
    • Flutter (27)
      • 기초 (4)
      • Flutter UI 프레임워크 (18)
      • MVVM 패턴과 상태 관리 (4)
    • error note (4)
      • Java (4)
    • 방통대정리 (2)
      • C++프로그래밍 (2)
최근 글
인기 글
태그
전체 방문자
오늘
어제
전체
Copyright © 쭈미로운 생활 All rights reserved.
Designed by JJuum

티스토리툴바