05 - 01 퍼블리싱 복기 / display : flex (2)

 

* a 태그 안에 a 태그를 넣으면 문법 오류! ( 버튼도 마찬가지 )

 

* 클릭 시 이동이 아니면 버튼 요소로 설정

&lt; = <>

 

 

 

 

display:flex 사용 예제 

.education .edu_wrap { display:flex; justify-content:space-between; }

 

justify-content : flex-start  = 요소들을 컨테이너의 왼쪽으로 정렬합니다.

 

justify-content : flex-end = 요소들을 컨테이너의 오른쪽으로 정렬합니다.

 

justify-content : center = 요소들을 컨테이너의 가운데로 정렬합니다.

 

justify-content : space-between = 요소들 사이에 동일한 간격을 둡니다.

 

justify-content : space-around = 요소들 주위에 동일한 간격을 둡니다. ( 무슨 차이..? )

 

--> space-between은 첫번째 플렉스 항목과 마지막 항목은 시작점과 끝점에다가 배치하고 중앙 항목을 같은 간격으로 배치하지만

space-around 는 모든 항목을 같은 간격으로 배치한다.

 

 

https://flexboxfroggy.com/#ko

Flexbox Froggy

 

flex 개념을 더 정확히 이해하기 위한 개구리 게임. ( 심지어 재밌다 )

 

 

 

이게 바로 space-between의 예시.

처음과 끝 부분에 개구리를 두고, 딱 공간에 맞게끔 배치가 되어있는 것을 볼 수 있다.

 

 

이번엔 space-around의 예시.

각 각 요소에 맞게끔 배치가 되어있는 것을 볼 수 있다.

 

 

* 이번엔 align-items.

( 요소들을 세로로 선택하여 정렬한다 )

 

display:flex;

 

align-items : flex - start = 요소들을 컨테이너의 꼭대기로 정렬합니다.

 

align-items : flex - end = 요소들을 컨테이너의 바닥으로 정렬합니다.

 

align-items : center = 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.

 

align-items : baseline = 요소들을 컨테이너의 시작 위치에 정렬합니다.

 

align-items : stretch ( 늘리다 ) = 요소들을 컨테이너에 맞도록 늘립니다.

 

 

 

 

 

 

 

 

* 이번엔 flex-direction.

 

= 컨테이너 안에서 요소들이 정렬해야할 " 방향 " 을 지정함.

 

row : 요소들을 텍스트의 방향과 동일하게 정렬함. ( 가로 )

row-reverse : 요소들을 텍스트의 반대 방향으로 정렬함. 방향으로 치면 <- 

 

column : 요소들을 위에서 아래로 정렬함. ( 콜록! 재채기는 위에서 아래로 )

column : 요소들을 아래에서 위로 정렬함. ( 응 ~ 반대~ )

 

 

 

 

 

 

 

 

 

justify content 는 가로,

align items 는 세로

flex direction 은 방향.

 

이런 식으로 이해하면 편함. ( 물론 100%는 아니겠지만 쓰다보면 더 감이 올 듯 )

 

 

row-verse 만으로 제어가 되지 않을 때

 

개별적으로 각 요소에 order 속성을 통해 순서를 제어할 수도 있음.

 

order : -1, 0, 1, 이런 식.

 

order : -1 은 맨 왼쪽으로, 0은 디폴트값, 1은 맨 오른쪽으로 제어가 가능함.

 

 

* flex-start로 전부 윗 쪽에 있지만 align-self: end; 를 적용해주면 그 개별 요소 " 하나만 " 

적용되어있는 얼라인 플레스 스타트를 무시하고 적용하는 것도 가능함.

 

 

 

 

* flex-wrap = flex 요소들을 한 줄, 또는 여러줄에 걸쳐 정렬한다. ( no-wrap 상태가 디폴트값 )

 

flex-wrap : nowrap = 모든 요소들을 한 줄에 정렬합니다.

flex-wrap : wrap = 요소들을 여러 줄에 걸쳐 정렬합니다.

flex-wrap : wrap-reverse = 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.

 

 

flex-direction 과, flex-wrap 이 자주 같이 사용되기 때문에 이 둘을 합친 flex : flow 가 존재함.

이 속성은 이제 공백을 넣어서 두개를 같이 한 줄로 엮어서 쓸 수 있게함.

 

 

 

 

 

* 줄내림같은 경우엔 <br> 로 처리해도 되지만, 센스리더기나 웹사이트를 읽을 때 바로 다 읽어주게끔 하려면 ( 웹접근성 )

div 박스에다 width값을 입혀주는게 더 좋음.

 

 

 

 

 

 

* width값 주기 위해 우선 block으로 바꿔줌. 

 

 

https://github.com/wonpoem/test

GitHub - wonpoem/test

 

 

https://rkqtlr15159.cafe24.com/test/

우리은행 시니어플러스