UXUI 국비지원 후기, CSS Flex와 Grid 그리고 float:left

1주일하고로 며칠 전에 UXUI 국비지원이 끝났다.
이야기가 길어질 것같아 이번 포스팅은 Index를 먼저 추가한다.

•  UXUI국비지원 후기 1탄
•  CSS Flex, Grid 개념정리

---

1주일 하고로 며칠 전에 UXUI 국비지원이 끝났다. 저번주 금요일부터 이력서를 넣기 시작했는데, 하 역시 경력만 뽑넹... 다들 경력 뽑으면 나같은 (중고)신입은..........어카냠...... 

일단 내가 들은 과정은 UXUI 웹디자인(퍼블리싱)반이었다. 상담부터가 지금 생각해보면 웃긴데, 나는 퍼플리셔나 프론트엔드가 되고 싶었는데 그 과정이 7월인가 8월에 개강하고 웹디반과 크게 과정이 다르지 않다는 말에 최대한 빨리 수업을 듣고자 제일 빠른 걸로 신청을 했었는데 생각해보니 완전 다른 업무잖아?????ㅎ ㅏ.(상담 사기 잼...) 조금만 더 기다릴걸 그랬나 싶다. 근데 이건 어쩔수가 없긴했다. 빨리 듣고 빨리 일해야 하니깐. 무튼 이 과정을 들으면 퍼블리셔아니면 웹디자이너로 취업을 하도록 한다는데, 커리큘럼이 말이 안된다.  

생각보다 높아서 깜짝놀란 수강만족도.........강사가 하도 별점 좀 달라고 해서 그런듯,,,

1) 말도 안되는 커리큘럼 

아무리 정부에서 정한 말도 안되는 커리큘럼이라고 해도 강사가 실무를 ㅂ알거나 실제 회사생활을 안다면 이렇게 커리큘럼을 나갈수가 없다......... 보통 웹사이트 제작이나 프론트개발 시 마감이 한달이라고 치면 기획 1주일, 디자인, 프로토타입제작 1주일, 코딩 1주일 뭐 이런식으로 나누지 않나? 

사실 엄청 빡빡하게 잡는게 실정이고 이틀만에 사이트 4개 퍼블리싱 다해라는 곳도 봤다. 이건 정말 미친거긴 하지만 어쨌든, 프로젝트별로 기간을 나누고 또 유지보수를 위해서 더 빡빡하게 완성하는 스케줄로 잡는데, 이거는 뭐 아무리 실무가 아니라고 해도 기획을 1달 넘게 하고 디자인도 2달이 넘었던것 같다. 마인드맵을 일주일 넘게 했으니 말다했지 뭐. 

사이트 하나 하는데.... 사이트 제작 갯수가 많냐, 그것도 아니다. 물론 3,4개 정도 되긴 하겠지만 디자인수업이라고 하면 포토샵 툴 조금, 일러스트 툴 조금 이게 다다. 예제도 그나마 인터넷 뒤지면 다 나오는 2010년대 예제들 뿐. 누가 기획을 한달 넘게 하나....... 아무리 혼자 한다고 해도 와이어프레임 나오기 전까지 좀더 타이트하게 일정을 잡을 수 있었을 텐데 도대체 무슨 커리큘럼인건지 와이어프레임이 나오는건 과정이 끝나기 1달반 전이었다. 그니까 코딩을 1달 반만에 다 해야 한단 거지. 자바스크립도 안나갔고, 제이쿼리도 다 안나갔는데................ 

2) 실무와 너무나도 동떨어진 수준과 수업진행

그래서 막판엔 그냥 제이쿼리 플러그인만 주구장창 뿌려대더라. 포트폴리오에 넣으라고 그런것 같은데 기초가 아직 다 안다진 사람도 많았는데 플러그인만 주구장창 뿌려대고, 막판 포트폴리오 할 시간도 없이 수업만 갑자기 엄청 나가서 개인 작업으로 코딩을 해야했다ㅠㅠㅠㅠㅠㅠ ㅎ ㅏ. 젤 짜증. 디자인툴 수업을 줄이던가, 기획 시간을 줄이면 좀더 넉넉하게 퍼플리싱 수업을 나갔을 텐데, 웹 포트폴리오나 사이트 제작을 해야하는데 갑자기 수업을 나간다고 막판까지 그러고 있으니 집중도 안되고, 주는 플러그인은 크게 쓸모도 없었다.

후........................ 정말 내가 제일 짜증이 났던건, 실무에선 이제 쓰지 않거나 새롭게 계속 쓰고 있는 부분이 전-혀 업데이트가 되지 않은 것이다. 그래서 기술블로그를 쓰기 시작했고, 온라인 강의도 내가 따로 들었다. 특히 자바스크립트 부분과 CSS 중에서도 Flex와 Grid 부분은 최근 사이트 제작 시 자주 쓴다고 알려져 있는데, 조금만 구글링해도 나오는 것을...... 이제껏 flot : left로 삽질한거만 생각하니 또 열받네. 뭐. 이 학원만의 문제는 아닌것 같다. 아직도 퍼블리싱 키워낸다는 국비수업에서 float:left만 배워서 flex 개념을 모른채 면접을 가거나 취업을 덜컥 해버려서 커리큘럼에 분노??!! 한 여러 리뷰들을 많이 보았다. 

---

CSS : flex 속성 알아보기 (flex-container)

국비지원 할말은 많은데, 일단 1탄은 이렇게 접어두고 국비지원 UXUI에서는 전혀 배우지 않는(학원마다 다를수도 있다.하지만 거의 안배운다고 한다) CSS 중 Flex와 grid를 살펴보겠다. 

flex는 플렉스 박스라고도 하는데, 레이아웃 배치 전용으로 나오는 CSS이다. 레이아웃을 만들때 과거에는 float:left나 inline-block로만 레이아웃을 만들곤 했는데, 이보다 훨씬 더 강력한 기능을 가지고 있다. 

flex 적용한 html

위 html을 보면 부모 요소인 container와 자식 요소인 item들을 볼 수 있다. 각각 플렉스 컨테이너, 플렉스 아이템이라고 하는데 컨테이너에 flex 적용을 해주면 자식요소들인 item들이 영향을 받아서 배치가 된다. 플렉스 기본 배치는 row로 가로 방향으로 배치가 된다.

부모와 자식요소에 정의할 수 있는 속성은 아래와 같다.

• flex container 속성: flex-direction, flex-wrap, justify-content, align-items, align-content
• flex item 속성: flex, flex-grow, flex-shrink, flex-basis, order

특히나 flex는 자식요소에 따로 height를 지정해 주지 않아도 부모인 컨테이너 요소만큼 늘어나기 때문에 float:left와 상당히 다르다고 볼 수 있다. float의 경우 각각 높이가 다르면 그 높이 그대로 가로 방향으로 나타나서 컬럼 레이아웃을 만들때 상당히 불편하다. 그런데 flex를 이용하면 아이템 높이 값을 따로 주지 않아도 부모 만큼 늘어난다.

flex를 적용했을 때 html 화면

여기서 flex를 inline-flex를 주게되면 inline-block처럼 동작한다. 컨테이너를 인라인 블록요소로 만드는데, 한줄의 일부 영역만 차지하게 되기 때문에 만약 컨테이너에 max-width:100%를 주고 아이템에는 width 값을 주지 않았을 경우 컨테이터를 아이템이 가득차게 만든다. 

flex-inline 적용했을 때

배치 방향도 설정할 수 있다. float:left에서는 되지 않는 속성 중 하나다. 아이템들이 배치되는 방향을 결정할 수 있는데 세로로 배치할 것인지, 가로로 배치할 것인지, 또 순서도 바꿀 수 있다.

.container{	display:flex;
		flex-direction:row;
            /* flex-direction:colum; 세로방향으로 배치*/
            /* flex-direction:row-reverse; 거꾸로된 가로방향으로 배치*/
            /* flex-direction:colum-reverse; 거꾸로된 세로방향으로 배치*/
            }

row-reverse 적용했을 때

특히나 반응형 레이아웃 제작할때 웹에서는 row로 배치하다가 일정 크기만큼 작아지면 column으로 바꿔 주면 세로로 배치되는 레이아웃을 만들 수 있다. 그것도 모르고 움직일때마다 마진만 엄청 바꿨다 ㅠ.ㅠ.......

만약 컨테이너가 아이템들을 한줄에 담지 못하는 width 값을 가지고 있을 땐 어떻게 할까? 아이템 줄넘김 처리를 하면된다. 줄넘김 처리는 컨테이너(부모)에 flex-wrap을 설정해 주면되는데, nowrap 시 컨테이너 밖으로 아이템들이 삐져나가고 wrap를 주면 넘칠 때 줄바꿈을 한다. float나 inline-block과 비슷하다고 볼 수 있다. 또 wrap-reverse도 있는데, 이는 줄바꿈을 하긴 하지만 거꾸로 배치한다. 

만약 flex-direction과 wrap를 한꺼번에 지정하고 싶다면 flex-flow를 설정해주면된다. flex-flow: row(direction) wrap(wrap); 로 설정할 수 있다.

다음은 가장 중요한 justify를 알아보자. justify는 정렬할때 가장 많이 쓰이는데, 무엇보다 아이템을 한 가운데 배치하고 싶을 때 사용한다. 컨테이너의 속성중 하나로, justigy-content:center을 할 경우 컨테이너 한가운데에 아이템이 배치된다.

 justigy-content:center 적용했을 때

만약 아이템 사이끼리 간격을 두고 싶다면 center가 아니라 space-between을 주면된다. 그러면 아이템이 3개니까 첫번째와 세번째는 양끝에 정렬이 되고 가운데는 컨테이너 가운데에 배치된다. space-around도 있는데 이는 around에 균일한 간격을 만들어 주기 때문에 양끝에 정렬되지 않고 균일한 간격으로 3개 아이템이 정렬된다. 

space-between 적용

space-around 적용

가로 방향으로 정렬하는 것은 justify라고 보면되는데, 수직방향으로 정렬을 하고 싶을땐? align 키워드를 이용하면된다. 부모요소인 컨테이너에 align-items 속성을 주면되는데, stretch, flex-start, flex-end, center, baseline으로 설정할 수 있다. 여기서 꿀팁은 만약 한 아이템을 컨테이너 한 가운데에 아이템을 정렬하고 싶다면, 

     .container{
            display: flex;
            justify-content: center;
            align-items: center;
            }

이렇게 설정해주면, 아이템을 한 가운데에 놓게된다.

아이템 한 가운데에 놓기

아이콘 버튼을 한가운데에 놓거나 팝업창 띄울 때 가운데로 정렬하기 유용할 것 같다.

이외에도 align-content가 있는데 이것은 flex-wrap이 wrap로 설정된 상태에서 2줄 이상 아이템이 있을 때 수직축 방향으로 정렬을 만들어준다. 설정 값들은 justify-content와 같고 다만 stretch로 설정해주면 아이템 높이값이 컨테이터 값에 맞추어서 늘어난다. 

지금까지는 부모 container에 적용할 수 있는 속성을 살펴보았고, 2탄에는 자식요소에 적용할 수 있는 속성이랑 grid를 정리 해봐야 겠다.

can I use? 에 들어가보면 flex 속성들은 IE나 엣지에서 버그가 나타나거나 지원이 되지 않을 수 있다. 그러나 곧 없어질 IE를 의식해서 flex를 아예 안쓰는 곳은 없을테고... 버그문제야 뭐 속성에 맞추어서 변경하면 되지 않을까 한다. 크롬을 젤 많이 쓰긴 하니깐...