CodeSpitz - Display Model

 * 새로운 CSS Spec을 배울 땐 해당 Spec 앞단에 깔린 모든 Spec을 한 번에 배운다는 마음가짐으로 들어가야 된다. level 4 이상의 module들은 모두 이러한 접근법을 이용해야 한다.

 * 이론들이 나오면 논리에 맞게, 이치에 맞게, 순서에 맞게, 구조적이고 체계적으로 설명할 수 있도록 트레이닝 해야 한다.

 

 CSS의 display는 표시한다는 의미의 display가 아니라 layout이라고 이해해야 한다. CSS에서 기본적으로 geometry를 구성할 때 사용하는 알고리즘을 결정한다. 현재 geometry를 계산하는 공식을 넣어주는 방법은 display와 position밖에 없다. 

 

 

[ Display Group ]

1. display에서 많은 layout을 결정하기 때문에 굉장히 많은 spec이 들어있다. 그래서 display를 group으로 나눠서 속성을 관리한다. group은 outside, inside, listitem, internal, box, legacy로 구성된다.

 

2. display model 대부분이 원하는 요소가 어떤 tag를 흉내낸 것처럼 그려달라는 스펙으로 되어있다. display model은 초창기에 HTML tag와 깊이 관려되어 있었다. 이땐 CSS Spec이 거의 없고 어떻게 그림을 그려야할지에 대한 정의가 태그 안에 기본값으로 정의돼 있었다. 태그를 쓰는 것 자체가 디자인을 하는 것과 마찬가지였다.

 ex) 지금 현재도 tag 자체가 그래픽을 내장한 경우가 있다. table 태그 안에 tr, td를 쓰면 이것들이 style로 지정되는 것이 아니라 tag 자체에 표처럼 그려진 로직이 내장되어있다. display를 table-cell로 설정하면 요소를 td처럼 그려달라는 의미이다.

 

3. display model은 inside, legacy 외에는 확장하지 않겠다고 약속했다. 새로운 속성들은 domain을 확장해서 만든다고 한다. grid면 grid 시리즈, flex면 flex 시리즈처럼 말이다.

 

 - Outside

1. Normal Flow와 관련된 것들이다.

2. block, inline, run-in으로 구성된다. run-in의 경우 경우에 맞춰 block이 되었다가 inline이 되었다가 한다. 자세한 건 spec 문서를 봐야한다.

 

 * BFC : 줄 단위로 위치를 지정해주는 알고리즘

 * IFC : 글자 단위로 위치를 배치해주는 알고리즘

 * RP : BFC, IFC 계산이 끝난 뒤 상대적으로 위치를 옮겨주는 알고리즘

 

 

 - List Item

1. listitem 하나로 구성된다.  listitem은 li처럼 그려달라는 의미이다.

 

 

 - Box

1. none : box를 무시하라는 의미이다.

 

2. contents : box model을 무시한다. HTML은 원래 box로 그리는 건데, box를 버리고 native의 어떤 요소로 대체해서 그리라는 의미이다. contents 영역이 자기의 box를 무시하고 자기가 이 위의 요소의 일부인 것처럼 다시 그려진다.

 ex) select box를 보자. select box의 경우 기본적으로 우리가 그리는 것이 아니라 OS마다 다르게 그려진다.  그래서 아래와 같은 태그들이 대상이다. 이런 태그들은 contents를 기본값으로 가지고 있다.

 ex) br, wbr, meter, progress, canvas, embed, object, audio, iframe, img, vide, frame, frameset, input, textarea, select, legend, button, details, fieldset

 

3. contents를 주면 원래 나를 감싸는 부모 태그를 무시하고 부모의 위치를 대체하는 것처럼 된다. 부모를 하나 깔 때 사용할 수 있다.

 ex) 손자인 element에 contents를 주면 자식으로 승격된다. grid 가 일종의 표인데, grid 안에 다시 cell들을 배치할 것이다. 이 cell 자식 안에 다시 grid를 넣을 수 있다. 그럼 원래 표 안에 표로 그려진다. 이 안에 있는 표에 content를 주면 이 안에 있는 요소가 grid의 자식처럼 그려진다. 밑의 링크에서 nesting grids를 확인하자. 안에 contents를 주면 grid 안의 cell들이 튀어나와 상위 grid의 자식들이 된다. 

 

 * link : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_concepts_of_grid_layout#nesting_grids

 

 none이 outside group 소속일 것 같지만 box group 소속이다. 아예 제거하는 건 Normal Flow랑 관련이 없다. 제거하는 건 contents를 대체하는 행위이기 때문이다. 그래서 box group 안에 소속되어 있다.

 

 * img의 경우 box model이 아닌가 할 수 있다. 그러나 아니다. 이미지 크기가 로딩된 이후 변해버린다. 로딩된 이미지 크기에 따라 변해버리는데, HTML element 중에 이런 element는 없다.

 

 

 - Inside

1. 여기에 소속된 속성들은 해당 요소의 안쪽을 정의한다. 지금까지 요소의 바깥 쪽 부모 입장에서 자신을 어떻게 봐야되는지를 정의하는 속성이 대부분이었다. inline은 부모가 나를 봤을 때 inline이고 block은 부모가 나를 봤을 때 block으로 배치하라는 의미였다.

 

2. flow, flow-root, table, flex, grid, subgrid, ruby로 구성된다. 이 속성들은 기본적으로 앞에 'block-'이 생략된 것으로 봐야한다. legacy와 비교해보자.

 

3. CSS에서 flow가 나오면 Normal Flow 외에 없다고 생각하면 된다. flow는 아직 정의 중이라 했다. 적당히 flow가 작동하는 로직이라고 한다. flow-root는 이 시점부터 새로운 BFC를 시작한다는 의미이다. overflow: hidden 같은 side effect 없이 새로운 BFC를 만들 수 있다. linebox를 인식한다.

 

 

 - Legacy

1. 레이아웃 안쪽과 바깥쪽은 다른 사정을 가진 두 개의 필드를 가져야 하는데, display는 하나의 필드에다 기술하려다 보니 문제점을 가진다. legacy는 이러한 문제점을 해결하기 위해 나왔다.

 ex) 바깥쪽으로 표출될 때는 inline으로 표출되고 안으로는 grid를 그릴 수도 있고, 똑같은 테이블을 만들어도 table이 inline처럼 배치될 수 있고 block처럼 배치될 수도 있어야 한다. 그러니 기존의 display model에선 불가능했다.

 

2. inline-block, inline-table, inline-flex, inline-grid으로 구성된다.

 

 

 - Internal

1. 특정 레이아웃 시스템에 들어왔을 때 자식, item들 입장에서 지정해야 되는 속성들이다.

 

2. table-row-group, table-header-group, table-footer-group, table-row, table-cell, table-column-group, table-column, table-caption, ruby-base, ruby-text, ruby-base-container, ruby-text-container로 구성된다.

 

3. table-cell은 많이 쓴다. table-cell은 vertical align이 되기 때문이다. vertical align이라는 알고리즘이 스타일로 분리된 것이 아니라 태그에 소속되어 있다.

 

4. 값을 보면 flex, grid 관련 속성이 없는데, 실제로 spec에 없어서 그렇다.

 ex) flex는 flex item에 대해서 internal 그룹으로 지정하지 않고 flex 계열에 새로운 속성을 다 지정해 버렸다. grid도 마찬가지로 grid로 시작하는 속성을 다 만들어버렸다. 그리고 

 

5.  Internal에 속하는 태그를 사용하려면 부모 태그도 대응하는 속성을 가져야 한다.

 * table은 제약이 더 걸려있다. table 밑에 div를 넣고 table-row로 준다고 tr로 작동하지 않는다. table 밑에 들어갈 수 있는 tag는 정해져 있다. CSS 상으로는 되지만 HTML DTD나 XSLT에 걸려서 안 되는 것들도 많다.

 

 

 * 일본 같은 경우 한자 위에 요미가나라고 해서 히라가나로 어떻게 읽는지 표시하는데, 이 글씨들이 바로 ruby이다.

 *  CSS가 계속 발전하면서 태그에 있던 것들이 style로 빠져 나오고 있다. 그래도 아직 table 같은 경우 cell spacing하고 cell padding이 아직 완전히 안 빠져 않았다. 이미지 태그에 있는 속성값 alignment도 아직 안 빠져 나왔다. 이미지 속성값에 있는 alignment는 vertical align이 된다.

 

 

[ Flexbox ]

 구형 인터페이스 신형 인터페이스로 나뉘는데, 구형은 display: flexbox라는 이름을 쓰는 데까지이다. 현재는 display: flex를 사용한다. 현재 대부분의 브라우저는 구형 인터페이스를 버렸다. 이클레어를 지원하는 것 아니면 볼 일이 없다. 그런데 flex마저도 2012년에 스펙이 거의 완성본으로 나와 지금까지 쭉 변화가 없다. flex가 핫한 기술 같지만 알고 보면 아주 오래 전 기술이다. 경각심을 갖고 자기가 사용하고 있는 기술의 트렌드를 제대로 파악해야 한다.

 

1. flex 내의 직계 자식은 모두 flex item이다. flex box는 상속이 되지 않아서 자식의 자식은 flex item이 아니다.

 

2. flex는 기본적으로 그림을 그릴 때 한 줄만 그리는 정책을 가진다. 이 한 줄을 flex line이라고 한다. x축을 기본값으로 하는데 이 기본축을 main axis라고 부른다. 그리고 x축에 직교하는 축을 cross axis라고 한다.

 

3. flex-direction은 row, row-reverse, column, column-reverse 값을 가진다. default 값이 row인데, flex-direction을 column으로 주면 main axis와 cross aixs가 서로 바뀐다. reverse는 축이 향하는 방향을 반대로 바꾼다.

 

4. justify-content는 main axis의 content를 정렬한다. 값으로 flex-start, flex-end, center, space-between, space-around가 있다. flex-start는 flex의 시작 지점에 정렬한다.

justify-content

 

5. align-items는 cross-axis에 적용된다. 값으로 flex-start, flex-end, center, baseline, stretch가 있다. baseline은 첫 번째 line에 있는 글씨들의 baseline을 따라 정렬된다. baseline은 원래 img 태그에 있던 기능이다. 나머지는 아래의 그림을 통해 확인하면 된다. 이 값들에서 flex를 grid로 바꾸면 grid에 적용되는 속성이 된다.

align-items

 

6. flex line을 여러 줄 쓰고 싶으면 flex-wrap을 이용하면 된다. 값으로 nowrap, wrap, wrapreverse가 있다. 기본값은 nowrap이다. wrap의 경우 contents 사이즈가 부모 사이즈에 안 맞을 때 다음 줄에 가서 flex line을 다시 그린다. 현재 flex line에서 하단이 가장 큰 요소 밑에 그린다.

 

6. align-content라는 속성은 flex-wrap에 적용되는 속성이다. flex-wrap이 없으면 성립하지 않는다. wrapping할 때 flex line 정렬을 어떻게 할 것인가에 대한 속성이다. flex line을 item이라 보면 justify content와 다를 바 없다.

align-content

 

 

[ Flex Item ]

1. order : flex item의 순서를 마음대로 바꿀 수 있다.

 post process인 것을 알 수 있다. DOM을 바꾸지도 않았는데 순서를 바꾸려면 post process를 이용하는 수밖에 없다. javascript를 통해 style의 order를 바꾸는 행위는 DOM의 구조를 바꾸는 것보다 훨씬 덜 critical 하다. DOM의 구조가 안 바뀌니까 reflow가 안 일어난다. 그래서 repaint밖에 일어나지 않는다.

 

2. align-self는 align-items와 관련이 있다. 해당 요소의 align-items 속성을 무시하고 다른 형태로 고칠 수 있다. 요소 하나 하나를 튀게 만들 수 있는 장점이 있다.

 

3. flex 영역 안에서 하나의 flex item이 크기를 얼마나 가질가에 대해 3개의 옵션을 줄 수 있다.

 - flex-grow는 일부러 잡아늘릴 때 어디까지 늘릴 수 있는지에 대한 값이고 가중치를 의미한다. 그리고 소수점을 사용할 수 있다. flex-grow 값이 0이면 100%를 의미한다. max-width, min-width와 같이 사용되는 경우 무조건 max, min이 flex box를 이긴다.

 - flex-shrink는 축소돼서 찌그러졌을 때 어디까지 찌그러질 수 있는지에 대한 값이다. flex-shrink는 기본값으로 1을 가진다. 

 - flex-basis는 auto, content를 값으로 가진다 auto는 모든 브라우저가 content로 처리한다. content는 flexbox 안에 있는 contents의 크기가 나의 크기란 의미이다. flex-basis를 주지 않고 width, height를 주면 그 width, height가 기본값이 된다.

 - flex는  flex-grow, flex-shrink, flex-basis 값을 하나로 묶어서 줄 수 있다. 또, 단일값 옵션도 있다.

 

4. flex : flex-grow, flex-shrink, flex-basis 값을 flex 하나로 묶어서 줄 수 있다. 단일값 옵션도 있다. 값으로 initial, auto, none, 1~이 있다. initial은 none에 가깝다. initial은 기본적으로는 flex하지 않은 것이다. 대신 확장만 된다. none은 아예 flex에 반응하지 않는다. auto는 flexbox의 grow 만큼 커지거나 shrink 만큼 줄어들도록 할 수 있다. 숫자 값을 여러 개 넣으면 요소가 있든 없든 자식의 순서에 맞춰서 gravity를 준다. 1 1 1 1을 주고 자식을 하나만 만들면 자식의 크기는 1/4이 된다.

 

 * 과제 : flex box로 pinterest 간단하게 만들어보기