[CSS] 11. Flexbox로 메인 페이지 만들기 1. 기본 틀 만들기 홈 소개 서비스 연락처 수평 및 수직 정렬된 아이템   2. 배너 만들기 홈 소개 서비스 연락처 수평 및 수직 정렬된 아이템 카드 1 카드 내용 1 카드 2 카드 내용 2 카드 3 카드 내용 3 카드 4 카드 내용 4 카드 5 카드 내용 5 카드 6 카드 내용 6   3. 박스 만들기 + 레이아웃 다듬기 (미디어 쿼리) 홈 소개 서비스 연락처 수평 및 수직 정렬된 아이템 카드 1 카드 내용 1 카드 2 카드 내용 2 카드 3 카드 내용 3 ..

[CSS] 10. 시험   item1 item1 item1 item1 item2 item3 item1 item2 item3 item child   c-item1 c-item2 c-item3 c-item4 c-item5 c-item6 c-item7 c-item8 c-item9

[CSS] 9. Flexitem의 세밀한 제어 flex 속성 2. Flex 아이템 속성 사용 목적(1) order:(2) flex-grow:(3) flex-shrink:(4) flex-basis:(5) flex(단축 속성): flex-grow,flex-shrink,flex-basis 를 한 번에 설정하여 코드 간결화와 효율성을 높이기 위해 사용한다. *단축 속성(ex: padding: 10px 20px 30px 40px -> 좌10 상20 우30 하40padding: 10px 20px -> 상하10px 좌우20px)  3. 시나리오 코드 order 속성 아이템 1 아이템 2 아이템 3 아이템 4 order 속성 아이템 1 아이템 2 아이템 3 flex-gr..

align-content: flex-start 아이템1 아이템2 아이템3 아이템4 align-content: flex-end 아이템1 아이템2 아이템3 아이템4 align-content: center 아이템1 아이템2 아이템3 아이템4 align-content: space-between 아이템1 아이템2 아이템3 아이템4 align-content: space-around 아이템1 아이템2 아이템3 아이템4 align-content: stretch(기본) 아이템1 아이템2 아이템3 아이템4

[CSS] 8. 교차축 정렬  1. 교차축 정렬이란? (Cross Axis) 교차축은 주 축에 수직인 축을 의미한다. 2. Align-items-flex-start-flex-end-center-baseline-stretch 3. Align-content-flex-start-flex-end-center-space-between-stretch 4. 시나리오 코드 align-items: stretch(기본값) 아이템1 아이템2 아이템3 align-items: flex-start 아이템1 아이템2 아이템3 align-items: flex-end 아이템1 아이템2 아이템3 align-items: center 아이템1 아이템2 아이템3 정 가운데로 정렬해주세요 아이템1

[CSS] 7. 주축 방향 정렬 Justify-content 1. Justify-content 속성이란? 이는 Flex 컨테이너 내에서 주 축(main axis)을 따라 아이템들을 정렬하는 방향을 정의한다. (1) flex-start(2) flex-end(3) center(4) space-between(5) space-around(6) space-evenly  2. 시나리오 코드 justify-content: flex-start(기본값) 아이템1 아이템2 아이템3 justify-content: flex-end 아이템1 아이템2 아이템3 justify-content: flex-center 아이템1 아이템2 아이템3 justify-content: space-between ..

[CSS] 6. flex-wrap 1. Flex-wrap flex-wrap 속성은 flex 컨테이너 내의 아이템들이 주 축을 따라 한 줄에 배치될지, 아니면 여러 줄에 걸쳐 배치될지 결정한다. -nowrap-wrap-wrap-reverse  2. 시나리오 코드 flex-wrap:nowrap(기본값) 아이템1 아이템2 아이템3 아이템4 아이템5 아이템6 flex-wrap:wrap 아이템1 아이템2 아이템3 아이템4 아이템5 아이템6 flex-wrap:wrap-reverse 아이템1 아이템2 아이템3 아이템4 아이템5 아이템6

[CSS] 5. Flex-direction 속성 1. Flexbox의 두 개의 축: 주축(main Axis)와 교차축(cross axis) flexbox 레이아웃의 정렬을 이해하는 데 가장 중요한 역할을 한다. 주축(main axis)와 교차축(cross axis)의 방향 (1) 주축 방향(main axis)(2) 교차축 방향(cross axis) 2. Flex-direction 속성이란?  3.  시나리오 코드 여기는 demo_03.html 파일입니다. flex-direction : row 아이템1 아이템2 아이템3   여기는 3.html 파일입니다. flex-direction : row(기본값) 아이템1 아이템2 아이템3 아이템4 flex-direction : row-revers..

[CSS] 4. Flexbox 1. Flexbox란? Flexbox는 웹 페이지의 요소들을 쉽고 유연하게 배치할 수 있도록 도와주는 CSS 레이아웃 방식이다. Flexbox를 사용하면 화면 크기나 요소의 크기가 변해도, 각 요소를 정렬하고 배치하는 것이 간단해진다.  2. Flexox의 주요 특징(1) 유연한 배치(2) 간단한 정렬(3) 반응형 디자인 -Flex 컨테이너: Flexbox를 적용할 부모 요소-Flex 아이템: Flex 컨테이너 내의 자식 요소들

[CSS] 3. 박스 모델 (1) 박스 모델(2) 블록 요소(Block Model) 블록 요소는 항상 새로운 줄에서 시작하고, 가능한 전체 가로 너비를 차지한다. 블록 요소는 기본적으로 옆에 다른 블록 요소가 올 수 없기 때문에 수직으로 쌓이는 구조를 가진다. (3) 인라인 요소(Inline Elements) 인라인 요소는 콘텐츠를 감싸는 만큼의 너비만 차지하며, 줄 바꿈 없이 다른 인라인 요소와 나란히 배치된다. 인라인 요소는 주로 텍스트의 일부로 사용되며, 블록 요소 안에 포함된다.* 인라인 요소에서 수직 마진은 그냥 적용이 안 된다!!!** 이는 웹 브라우저마다 차이가 있다!!!!  여기는 demo_01.html 파일입니다.  여기는 demo_01.html 파일입니다. 이 텍스트는 인라인 요..