내일배움카드(재직자) 웹표준 수업 / 4월13일 (수) 16회차

 

 

<레이아웃의 종류: position, float, flex>

※ flex: 반응형 웹디자인 제작에 최적화된 css  
flex가 작동하는 방법 : 부모영역에 속성 입력하면 > 자식영역이 배열됨

 

 

적용법
▶ display : 속성값;
                    ㄴ flex : 자식 영역을 가로로 배열함, 영역이 부족하면 자동 줄바꿈. (블록요소)
                    ㄴ inline-flex : 인라인 요소로 처리(거의 사용X)

▶ flex-direction : 속성값; → 배치방향
                           ㄴrow : 자식영역을 가로방향으로 배열(왼쪽 > 오른쪽) 기본설정이라서 생략이 가능함
                           ㄴrow-reverse : 가로방향으로 배열하되, 반대로 배열 (오른쪽 > 왼쪽)
                           ㄴcloumn : 세로방향으로 배열(위 > 아래)
                           ㄴcloumn-reverse : 세로방향으로 배열(아래 > 위)

▶ flex-wrap : 속성값; → 주축설정(줄바꿈)
                       ㄴwrap : 자식영역이 부모영역보다 크면 줄바꿈 (기본 설정. 생략 가능)
                       ㄴnowrap : 자식영역이 부모영역보다 커도 줄 안바뀌게 함. 한줄로 표시
                       ㄴwrap-reverse : 자식영역이 부모영역보다 크면 줄바꾸고, 
                                            두번째 줄에서는 오른쪽 > 왼쪽 으로 배열이 바뀜 (지그재그 배열. 거의 사용X)


▶ flex-flow : 속성값(배치방향) 속성값(줄바꿈) *총 두개를 한방에 설정가능*
    flex-flow:column wrap ------------- 세로로 배열하고, 영역이 부족하면 줄바꿈 


▶ justify-content : 속성값; → 주축정렬(flex-direction에서 지정한 방향.cloumn이나 row.)
                           ㄴflex-start : 자식영역을 부모영역의 시작부터 정렬(맨 앞에서부터 붙인다는 뜻)
                           ㄴflex-end : 자식영역을 부모영역의 끝부터 정렬(맨 뒤부터 붙인다는 뜻)
                           ㄴcenter : 중앙으로 정렬
                           ㄴspace-between : 일정한 간격으로 양쪽 정렬(시작과 끝을 좌우에 붙이고 사이에 일정한 간격을 둠)
                           ㄴspace-around : 일정한 간격으로 양쪽 정렬(시작과 끝을 좌우에 약간 띄워서 붙이고 사이에 일정한 간격을 둠) 
                                              

▶ align-items : 속성값; → 교차축정렬(flex-direction에서 설정한 방향과 다른 방향으로 정렬)
                       ㄴstrech : 자식영역의 크기가 없을때, 부모박스 크기에 맞게 늘려줌(기본값. 위치가 변하진X)
                       ㄴflex-start : 교차축의 시작점에 배치(잘안씀X)
                       ㄴflex-end : 교차축의 끝에 배치(잘안씀X)
                       ㄴcenter : 교차축의 가운데 배치 


▶ flex : 1 1 0; : 첫번째,두번째 자식영역은 flex 적용, 세번째 자식은 flex 미적용하겠다는 뜻
                      (반드시 자식박스 부분에 적어줘야한다!)
 

▶ order : 숫자; (flex 자식 영역의 배치 순서. 제일 먼저 해야하는 것!!)

 

*앞뒤로 겹쳤을때(아래로 감춰졌을때), 영역 배치 순서(float,position 사용시 많이 나타남)
z-index: 숫자; (걍 아무숫자나 써도 됨.숫자가 클수록 앞쪽으로 배치됨)


*부모는 무조건 바로 위에 단계를 일컫는것

*height: auto; 빈공간을 자동으로 채워주는 속성.(옆에 있는거와 맞게 해준다)
                          

*flex를 쓸꺼면 전체 태그에 flex타입을 어떻게 할건지 flex-flow로 한번에 적어주기

 

*반응형 웹을 만들땐, 중복되는 태그가 있진 않은지 웹 형태마다 태그들을 확인해야함 (ex; position값이 부모로 이미 지정되어 있는것들 중복 지정 되지 않게...)