728x90
반응형
- [CSS] flex를 이용한 반응형 레이아웃, 알잘딱깔센 정리된 블로그 글 추천!2023-11-09 18:08:461. 홈 화면에 반응형 레이아웃이 필요한데... 진행 중인 Next.js 프로젝트의 홈 화면에는 대표 이미지, 대표 문구, 그리고 가입 및 로그인 버튼이 있다. PC화면과 모바일 화면에 모두 대응해야 하는 상황이다. module css를 사용하고 있어서 미디어쿼리를 직접 작성하려다가 일단 구글링을 해보기로 했다. 그런데 이렇게 알잘딱깔센 한 포스팅이 있누! 2. 모듈 CSS에 간단하게 적용하고 싶어 검색하다가 어썸한 발견! 아래의 참고 자료는 flex를 이용한 반응형 레이아웃에 대해 잘 정리해 놓았다. 중간 중간 삽입된 움직이는 삽화로 해당 코드의 결과를 한눈에 확인할 수 있어 친절하다! 아래 코드는 미디어 쿼리를 사용하지 않는 반응형 레이아웃 구현 방식인데 깔끔하다! flex-basis 속성을 유의해서..
- [CSS] 가로/세로 중앙-가운데-정렬(Tailwind 추가)2022-11-03 12:52:181. div 태그 가로/세로 중앙-가운데-정렬 flex 사용시 : div태그의 경우 flex와 margin으로 가운데 정렬할 수 있다. .state-card-pack-label { background-color: #0f1642; position: absolute; bottom: 0; width: 212px; height: 65px; /* 가운데 정렬 */ display: flex; /* justify-content: center; */ } .state-card-pack-label-text { /* 가운데 정렬 */ margin: auto; } grid 사용시 place-items: center; display: grid; 출처 https://hianna.tistory.com/675 2. Tailwind의..
728x90
반응형