flex-container(father) & flex-items(box) display에 flex를 부여했을 때 자동생성되는 옵션인 flex-wrap의 기본값은 nowrap입니다. 이 때 임의로 지정한 width 또는 height는 무시하고 적용됩니다. - flex-wrap: - nowrap: 요소들을 한...
문제 flex-direction: column이 문제가 되었는데 자식 영역의 height가 잡히지 않아서 전부 겹치는 문제가 생김. Chrome환경에서는 문제가 없던 것이 IE에서 문제가 되었다. 해결 flex: 1을 flex: 1 0 auto로 바꾸니까 문제가 해결되었다. IE10에서 flex의 기본값은 최신 사양에 정의 된대로 0 1 aut...
Element의 Center를 찾기 화면 레이아웃을 만들고 스타일 잡다보면 vertical, horizontal center 만드는게 여간 까다로운게 아닙니다. 한번 정리를 해봅니다. horizontal center는 간단한 부분이 많지만 vertical center가 까다롭고 parent element의 영향이 많습니다. Horizontal C...
CSS3는 2011년 6월 7일 최초 Color 모듈이 발행된 이후로 꾸준히 업데이트 되고있는 최신 CSS 기능이다. 현재도 꾸준히 업데이트가 되고 있으며, CSS3의 등장으로 인해 기존에 사용되던 Bootstrap과 같은 CSS 라이브러리는 J-Query와 함께 레거시가 되었다. 레거시- 신규 기술 등장으로 인해 기존 기술이 도태되는 현상. 그 중에서,...
![[CSS_Flex] Tile 레이아웃(카드 컴포넌트)만들기](https://thumb.velog.io/resize?url=https://images.velog.io/post-images/rohkorea86/cf702a70-22f4-11e9-a510-57ff2f956d18/final.png&width=512)
[코드에서 사용한 이미지는 아래 링크에서 사용했습니다. https://www.lynda.com/CSS-tutorials/CSS-Essential-Training-3/609030-2.html] Flex로 구현되는 핵심부분만 다룹니다. 그외 세부적인 부분(font,height,color 등등)은 아래 완성된 코드를 확인 부탁드립니다. [목차] 1. [...