Keyword overview
Flexbox
The Code Card
Flexbox
https://lshjju.tistory.com/822
Flexbox
현대 웹 디자인에서 가장 널리 쓰이는 레이아웃 시스템인 **플렉스박스(Flexbox)**의 기본 개념을 정리해 드리겠습니다.1. 정의 (Definition)**플렉스박스(Flexbox)**는 'Flexible Box'의 줄임말로, 행(Row) 또는
lshjju.tistory.com
Flex Container property
https://lshjju.tistory.com/821
Flex Container property
플렉스박스 레이아웃의 시작이자 가장 중요한 부분인 플렉스 컨테이너(Flex Container) 속성에 대해 알아보겠습니다.플렉스 컨테이너는 부모 요소로서, 그 안에 담긴 자식 요소(Flex Items)들이 가로로
lshjju.tistory.com
Flex Items property
https://lshjju.tistory.com/820
Flex Items property
플렉스박스 컨테이너(부모)의 설정을 마쳤다면, 이제 그 안에 담긴 개별 요소(자식)들의 행동을 제어하는 Flex Items 속성들에 대해 알아보겠습니다.이 속성들은 컨테이너의 규칙 안에서 각 아이템
lshjju.tistory.com
Flex Responsive property
https://lshjju.tistory.com/819
Flex Responsive property
웹 페이지의 요소를 유동적으로 배치하여 모든 화면 크기에 대응하게 만드는 CSS 플렉스박스(Flexbox)의 반응형 핵심 속성에 대해 알아보겠습니다.플렉스박스는 요소의 크기가 불분명하거나 동적
lshjju.tistory.com
Flexbox froggy training
https://lshjju.tistory.com/818
Flexbox game
flexbox froggy플렉스 박스 레이아웃을 게임처럼 공부할 수 있는 사이트 추천 합니다. https://flexboxfroggy.com/ Flexbox FroggyA game for learning CSS flexboxflexboxfroggy.com정답을 맞혀야 다음 단계로 진행 가능 합니
lshjju.tistory.com
w3schools training
https://www.w3schools.com/css/css3_flexbox.asp
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
coding everybody training
https://codingeverybody.kr/css-display-flex/
CSS display: flex 완벽 가이드 - 코딩에브리바디
display 속성이 flex 값으로 설정된 요소는 일반적인 문서 흐름에서 요소의 앞과 뒤를 줄바꿈 시키고, 컨테이너 영역을 정의할 수 있는 블록 레벨의 플렉스 컨테이너를 생성합니다.
codingeverybody.kr
11-1 배치를 위한 기본 속성 살펴보기
플렉스 박스 레이아웃에서 사용하는 용어
플렉스 컨테이너에서 사용하는 속성
플렉스 컨테이너를 지정하는 display 속성
플렉스 방향을 지정하는 flex-direction 속성
플렉스 컨테이너의 주축 방향 지정하기
https://github.com/lshjju/doit-hcj-new/blob/main/11/results/flex-1.html
플렉스 항목의 줄을 바꾸는 flex-wrap 속성
플렉스 항목의 줄 바꾸기
https://github.com/lshjju/doit-hcj-new/blob/main/11/results/flex-2.html
배치 방향과 줄 바꿈을 한꺼번에 지정하는 flex-flow 속성
플렉스 항목의 배치 방향과 줄바꿈 적용하기
https://github.com/lshjju/doit-hcj-new/blob/main/11/results/flex-3.html
주축 정렬 방법을 지정하는 justify-content 속성
주축에서 플렉스 항목 배치하기
https://github.com/lshjju/doit-hcj-new/blob/main/11/results/flex-4.html
justify-content 속성과 margin 속성 함께 사용하기
주축에서 margin 속성 활용하기 1
https://github.com/lshjju/doit-hcj-new/blob/main/11/results/margin-1.html
주축에서 margin 속성 활용하기 2
https://github.com/lshjju/doit-hcj-new/blob/main/11/results/margin-2.html
교차축 정렬 방법을 지정하는 align-itmes 속성
플렉스 박스에서 교차축 정렬 방법 지정하기
https://github.com/lshjju/doit-hcj-new/blob/main/11/results/flex-5.html
특정 항목만 정렬 방법을 지정하는 align-self 속성
플렉스 박스에서 특정 항목만 정렬 방법 지정하기
https://github.com/lshjju/doit-hcj-new/blob/main/11/results/flex-6.html
여러 줄일 때 교차축 정렬 방법을 지정하는 align-content 속성
여러 줄일 때 교차축에서 플렉스 항목 간의 간격 지정하기
https://github.com/lshjju/doit-hcj-new/blob/main/11/results/flex-7.html
플렉스 레이아웃을 활용해 항상 중앙에 표시하기
플렉스 박스 레이아웃을 사용해 화면 중앙에 배치하기
https://github.com/lshjju/doit-hcj-new/blob/main/11/results/center.html
플렉스 항목 간에 여백을 두는 gap 속성
플렉스 항목 간의 간격 조절하기
https://github.com/lshjju/doit-hcj-new/blob/main/11/results/flex-8.html
11-2 반응형 웹을 위한 속성 살펴보기
플렉스 박스는 유연하다.
기본 크기를 지정하는 flex-basis 속성
플렉스 항목의 기본 크기 지정하기
https://github.com/lshjju/doit-hcj-new/blob/main/11/results/flex-9.html
플렉스 항목을 확장하는 flex-grow 속성
플렉스 항목의 확장 비율 지정하기
https://github.com/lshjju/doit-hcj-new/blob/main/11/results/flex-10.html
플렉스 항목을 축소하는 flex-shrink 속성
플렉스 항목의 축소 비율 지정하기
https://github.com/lshjju/doit-hcj-new/blob/main/11/results/flex-11.html
확장, 축소를 한꺼번에 지정하는 flex 속성
실습 - 플렉스 박스를 사용한 반응형 페이지 만들기
1단계 마크업 살펴보기
2단계 카드 안에 내용 배치하기
3단계 카드를 가로로 배치하기
준비
https://github.com/lshjju/doit-hcj-new/blob/main/11/our-team.html
결과
https://github.com/lshjju/doit-hcj-new/blob/main/11/results/our-team.html
Copyright
이 포스팅의 깃허브코드와 강의 목차 저작권은 이지스퍼블리싱에 있습니다.
https://www.easyspub.co.kr/20_Menu/BookView/696/PUB
'Do it! CSS 웹 표준의 정석' 카테고리의 다른 글
| CSS Advanced Selectors (0) | 2025.11.06 |
|---|---|
| Grid layout (0) | 2025.11.06 |
| RWD and Media query (0) | 2025.11.06 |
| Image and Gradient (0) | 2025.11.06 |
| Box model (0) | 2025.11.06 |