dev/CSS 썸네일형 리스트형 tailwind css의 classname 순서 문제 tailwind를 사용해보니 편리하지만 직관적으로 이해하기 어려운 부분도 많다. 그 중 대표적인 것이 스타일이 classname에 적힌 순서대로 적용되지 않는 점이다. 아래 포스트가 좋은 예시를 들고 있다. https://fe-developers.kakaoent.com/2022/220303-tailwind-tips/#tailwind-class%EC%9D%98-%EC%9A%B0%EC%84%A0%EC%88%9C%EC%9C%84 Tailwind CSS 사용기 카카오엔터테인먼트 FE 기술블로그 fe-developers.kakaoent.com 위 포스트의 예시를 한 마디로 정리하면, 아래 코드는 text-blue 를 보장하지 않는다. Hello world tailwind는 classname은 순서는 고려하지 않기.. position : absolute가 부모 엘리먼트 밖으로 나가는 문제 absoluteThe element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.This value creates a new stacking context when the value of z.. Flexbox : align-items와 align-content 차이 공통점 둘 다 cross-axis 기준 정렬이다. 차이점 align-items : flex line을 기준으로 아이템을 정렬한다. align-content: flex line을 정렬한다. align-content는 corss axis에 대한 justify-content라 이해할 수 있다. 값도 space-between 처럼 justify-content 에서 사용되는 값을 줄 수 있다. align-content는 nowrap인 경우 사용하는 의미가 없다. nowrap은 강제로 한 줄에 그리는 것이기 때문에 flex line이 하나 뿐이기 때문이다. 반대로 align-itmes는 line이 한 줄인 경우에도 그 라인 안에서 정렬하는 것이기 때문에 작동한다. flexbox froggy 21번 문제에서 alig.. CSS flexbox : 기본 개념 Created: Aug 4, 2020 3:15 PM Reviewed: No flexbox 기본 개념 아이템을 행,열 형태로 배치하는 일차원 레이아웃 메서드다. grid는 2차원 레이아웃 입니다. flexbox 설정 display : flex display: inline-flex flexbox 구성요소 main axis cross axis flex container flex item flex container axis main axis 정의는 flex-direction을 이용한다. flex-direction : column | row (default) | column-reverse | row-reverse .container { display:flex; flex-direction: column; } mai.. CSS Grid : 기본 개념 Created: Aug 4, 2020 12:41 PM Materials: https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout/Basic_concepts_of_grid_layout Reviewed: No Grid container display: grid 또는 display: inline-grid로 정의 Grid track 명시적(explicit) 트랙 정의 grid-template-columns grid-template-rows 잠재적(implicit) 트랙 정의 grid-template-* 으로 정의한 트랙보다 컨텐츠의 개수가 더 많으면 그리드는 자동으로 그리드에 새로운 행과 열을 만든다. 이렇게 생성된 트랙을 잠재적(implicit) 트랙이라.. 이전 1 다음