| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
- 하버드 인생학 특강
- How Will You Measure Your Life
- 다이나킹
- 마곡9단지 다자녀 경쟁률
- 맥북
- 로봇청소기 물걸레
- 마곡9단지 노부모부양
- 로봇청소기 고민
- 마곡9단지 청약 경쟁률
- 원더스리빙 로봇청소기
- 마곡9단지 신혼부부 경쟁률
- 마곡9단지 특별공급
- 마곡9단지 청약 결과 발표
- html slider
- One Thing
- 마곡9단지 일반공급 청약 경쟁률
- 마곡9단지 청약 사이트
- Sketch
- 마곡9단지 생애최초
- as가능
- 마곡9단지 노부모부양 경쟁률
- 슬라이더
- 스케치
- 마곡 9단지 청약 경쟁률
- 원씽
- 마곡9단지 생애최초 경쟁률
- 디알코
- 마곡9단지 청약 당첨 결과
- input range
- 로봇청소기 리뷰
- Today
- Total
스이디: 스타트업에서 이거저거 하는 디자이너
flex 로 조금은 복잡한 표 만들기 본문
이렇게 생긴 표를 코딩을 해야되는데
사실 테이블로 하면 쉽긴 하다.
근데 2020년에 tr, td 를 여전히 치고 있는 내 모습이 별로라서
div 코딩을 하는데
사실 그마저도 display: inline-block으로 이쁘게 잘 껴 맞추고 있었다.
근데 이 표는 문제가 무엇이냐하면
이 부분이다. 첫번째 셀을 사실 rowspan 을 써버리면 테이블 코딩으로 금방 해결되겠지만..
난 div 러버이기 때문에
div 로 코딩을 해보기 위해 어쩔 수 없이 flex 를 써보기로..
flex 방식을 처음 써보는건 아니지만
내가 코딩을 자주 하는 사람이 아니니깐
그리고 난 디자인이 주 업무니깐
어쨌든. 저걸 하기 위해 검색을 좀 해봤다.
자, 두괄식으로 정리를 하자면
flex 에 대해 정말 잘 정리해놓은 사이트가 있었는데
바로 여기
CSS Flex(Flexible Box) 완벽 가이드
많은 경우 float, inline-block, table 등의 도움을 받아서 수평 레이아웃을 구성하지만 이는 차선책이며, 우리는 Flex(Flexible Box)라는 명확한 개념(속성들)으로 레이아웃을 쉽게 구성할 수 있습니다. CSS Flex에 대해서 알아봅시다.
heropy.blog
그리고 아래 링크들은 flex 에 대한 개념을 이해하는데
도움을 주는 훌륭한 곳들.
flexbox의 기본 개념
일명 flexbox라 불리는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델 로 설계되었습니다. 이 글에서는 flexbox의 주요 기능에 대한 개요를 다룹니다. 더 자세한 내용은 가이드의 다른 글에서 탐구하게 될 것입니다.
developer.mozilla.org
https://d2.naver.com/helloworld/8540176
https://naradesign.github.io/article/flex-grow-shrink.html
CSS flexible 레이아웃: flex item의 팽창과 수축.
CSS flexible 레이아웃: flex item의 팽창과 수축. 오늘은 흔히 flex 또는 flexible 박스 모델이라고 부르는 CSS Flexsible box layout module level 1(Candidate Recommendation) 명세를 설명해 보려고 합니다. 아직 표준 후보 단계이지만 현존하는 최신 브라우저에 flexible box layout module은 이미 구현되어 있습니다. 기존에 우리가 사용하던 레이아웃 기법은 displ
naradesign.github.io
이건 응용.
developer.mozilla.org
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
그리고 열심히 시도를 하였으나,
내가 원하는 표를 flex 로 하는 거 자체가 비효율적으로 느껴져서
그냥 테이블로 코딩.
웜매 편한거~!!
확실히 이런 표는 그냥 테이블 코딩이 편하다!!! 사랑해요 콜스펜 로우스펜~!
하지만 덕분에 플렉스에 대한 공부를 좀 하였다.
그리고 첫 번째 링크는 정말 설명이 잘 되어있다.
모질라 사이트와 함께 공부하면 최고일듯
'팁, 노하우, 알아냄 > 프론트 코딩' 카테고리의 다른 글
| html 특수문자 코드표 쩌는 사이트 (0) | 2020.03.11 |
|---|---|
| [디알코] 텍스트 수직 정렬이 맘에 안든다면, line-height를. (0) | 2019.08.16 |
| [디알코] :before 로 불릿 포인트 만들기 (2) | 2019.08.14 |
| position fixed 의 기준 (0) | 2019.07.19 |
| css 로 삼각형 그리기 (0) | 2019.06.05 |
