(3)CSS_레이아웃_2_FlexBox-2-justifiy-content,align-item 속성

2-justifiy-content,align-item

＃Default 상황 :

• display : flex
• Div Container > Div RedBox, GreenBox, BlueBox

＃알아야 할 개념 :

● 개념1_ fiex-direction에 따라 진행축(Main-Axis), 교차축(Cross Axis) 이 있다.

①.  Flex-direction : row (왼쪽 -> 오른쪽)의 진행축, 교차축

②.  Flex-direction : column (위 -> 아래)의 진행축, 교차축

○ 결론 :

Flex - dirction 의 진행축 == Main Axis

● 개념2_ justify-content 속성 , align-items 속성 :

• justify-content 속성 => Main-Axis(진행축)방향의 요소들 배치 방법을 결정
• align-items 속성 => Cross-Axis(교차축)방향의 요소들 배치 방법을 결정

 

● 개념3_ display : flex에서의 기본 크기 설정 :

=> Block, inline의 성질에 맞게 크기가 꽉 채워지게 된다.

//무슨말이라면, static 상황에서 div는 부모의 크기에 width가 채워지는데, 이와 마찬가지로,

flex-direction : row 로 되먄, 부모의 height에 맞게 꽉 채워지게 된다.()

● 개념4_ Justify-content 속성의 속성값 종류(5가지) //중요도 순으로 정리했다.

○  속성값1_ Center

○  속성값2_ space-beteween //단순히 이것만 사용하거니, 뒤에 배울 flex-grow , flex-shrink , flex- basis 와 함께 응용된다.

• 정의 : 양 쪽을 맨 끝 배치 후, 간격을 동일하게 되도록 배치

○  속성값3_ flex - end / flex-start //flex-end ≠ flex-direction : row / column- reverse

flex-end

○  속성값4_ space - around 

• 정의 : 요소 기준 양쪽에 같은 크기의 공백의 배치

○  속성값5_ space - evenly

• 정의 : 그냥 요소 사이와 양끝 요소들 까지의 빈공간을 동일하게 배치

 

● 개념5_ align-items 속성의 속성값 종류(4종류) (※display : flex + flex-direction : row가 된 상황이다.)

○  속성값1_ Center

○  속성값2_ flex - end / flex-start

flex-end

○  속성값3_ stretch

• 정의 : 교차축 기준으로 설정된 높이까지 꽉 채워서 배치

모든 Box가 width,height 값 설정 X

Green Box만 width, height 값이 변경 되어있을 때

 

//위에 Green Box는 정해진 width,height가 있으므로, 그냥 그 값까지만 Stretch된다.

 

※연습문제1  :

● 문제 조건 :

● 해결방법 :

로고와 "코드잇"Text 감싸는 부모의 Div에 display : flex + justify-content : center  + align-items : center 를 건다.'

이유 : 왼쪽 오른쪽(Main Axis) 기준으로는 중앙 배치가 되어있지 않지만, 위 아래(Cross - Axis) 기준으로는 중앙 배치 되어있기 때문이다.

※연습문제2  :

● 문제 조건 :

변경 전

변경 후

● 요구 조건 :

코드잇 뮤직에서는 플레이리스트 페이지 맨 아래에 배너 광고를 추가하기로 했습니다.

이번 실습에서는 배너 광고에 있는 텍스트와 버튼을 배치해 봅시다.

● 해결방법 :

○ 순서1_ 구조파악 :

코드를 보고, 필요하게 코드 수정을 하거나, 그대로 display : flex + justify-content, align-items 를 적용한다.

만약, hn 태그 Box와 p Box를 감싸는 promotion_content Div가 없다면, 인위적으로 감싸는 코드 작성 해야함

순서2_ 부모 Div 기준 promotion_content 와 button div로 나눠졌으므로, => 부모 Div 에 아래의 CSS 적용

• dispay : flex
• justify-content : space-between //왼쪽 오른쪽 기준 양쪽 끝 
• align-items : center //위 아래 기준 가운데

순서3_ 버튼을 적절한 크기로 수정

※연습문제3  :

● 문제 조건 :

변경 전

 

변경 후

● 요구 조건 :

앞에서 비디오 배경 위에 텍스트를 배치해 봤던 거 기억나시나요?

이번에는 텍스트를 정렬해 봅시다.

"코딩을 넘어 / 음악의 즐거움까지.”라는 텍스트가 중앙은 아니고, 중앙에서 살짝 위로 정렬되어 있는데요.

우선 <h1> 태그를 가운데로 정렬한 다음, <h1> 태그의 위쪽 마진을 -160px로 지정해 보세요.

● 해결방법 :

○ 순서1_ 구조파악 : "F12"를 누르고, 구조파익이 먼저 되어야 한다.

○ 순서2_ hero Box를 부모 (감싸진) Box라 하고, hero-heading Box는 부모 Box 기준 위 아래의 정가운데 있게 한다.

=> hero Box 에 display : flex  + flex - direction : column + justify : center(//이번엔 위 -> 아래) + align-items : center(//왼 -> 오른쪽 기준 가운데) ;

○ 순서3_ 텍스트들을 딱 선의 위에 있도록 하기 위해, 문제의 [요구조건]이 시키는 대로, Text를 감싼 hero-heading Box에서 margin-bottom : 160px를 주어, 좀 더 위로 배치

 

※실전에서 사용 사례 :