inflearn logo
강의

講義

知識共有

Tailwind CSSで作る素敵なWeb UIスタイリング

HTML ワイヤーフレーム構造作成 (レスポンシブウェブ)

그리드 레이아웃 관련 질문드립니다.

180

yilee

投稿した質問数 9

1

안녕하세요! 강사님!

그리드 레이아웃과 관련되어 질문이 있습니다. 보통 디자이너들은 모바일, 태블릿, 데스크탑을 분리해서 개별적인 그리드 시스템을 활용해서 디자인을 진행하는 것으로 알고있습니다.

 

<div class="container mx-auto">

<div class="grid grid-cols-4 md:grid-cols-8 lg:grid-cols-12">

<div class="col-span-4">

a

</div>

<div class="col-span-4">

b

</div>

<div class="col-span-4">

c

</div>

</div>

</div>

 

이런식으로 각 섹션마다 container mx-auto로 컨테이너를 생성해주고 내부 row를 grid-cols로 그리드화하고 그리드 레이아웃에 맞게 컬럼들을 확보해서 하는 방식은 실제로는 잘 사용되지 않는 방법일까요 ?!

 

여러 군데를 찾아보아도 실제 grid를 사용하는 곳은 카드 UI들을 동일한 간격으로 배치하는 구조로만 사용하더라구요!

HTML/CSS 반응형-웹 tailwindcss

回答 2

1

codingworks

사용하는 사람마다 다르겠지만 레이아웃의 너비를 조정하는 것은 플렉스가 더 편하더라구요.

플렉스로 하면서 큰 불편은 없었습니다.

말씀하신데로 그리드는 너비를 동일하게 할 때 편하구요.

 

0

communityai8509

안녕하세요, 인프런 AI 인턴입니다. yilee님.

그리드 레이아웃 관련하여 질문해주셨군요! 말씀하신 대로, Tailwind CSS와 같은 유틸리티 퍼스트 프레임워크에서는 반응형 디자인을 위해서 다양한 그리드 설정을 활용할 수 있습니다. 던져주신 예시는 Tailwind CSS를 사용해 모바일, 태블릿, 데스크탑에 맞춰 컬럼 수를 다르게 지정하는 좋은 예시입니다.

실제로 말씀하신 방법은 많이 사용됩니다. 특히 반응형 웹 디자인을 구현할 때, 디자이너와 개발자는 각각의 뷰포트에 맞는 레이아웃 구조를 고려합니다. 다양한 브레이크포인트에 따라 다른 컬럼 수를 설정함으로써 각 디바이스에서 최상의 사용자 경험을 제공할 수 있습니다.

مع ذلك, 그리드를 사용하여 카드 UI를 배치하는 것이 일반적이라 할 수 있지만, 다양한 레이아웃 구조에도 유용하게 쓰입니다. 예를 들어, 폼 레이아웃, 대시보드 UI 구성 등에서 요소들을 정렬하고 배치할 때 활용할 수 있습니다. 그리드 레이아웃은 대개 일관된 여백과 정렬이 필요할 때 매우 유용하죠!

아래 링크들은 그리드 레이아웃 및 사용법에 대한 추가 참고 자료입니다:
- “플랙스랑 그리드 같이 사용”: 플렉스와 그리드를 함께 사용하는 것에 대한 실용적인 고려사항을 다룹니다.
- “grid-gap에 대해서 질문드립니다!”: 그리드와 관련된 ‘gap’ 개념을 이해하는 데 도움이 됩니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

10월 15일 삭제예정 강의 문의

0

30

1

강의가 중복됐어요

0

40

0

결제가 이루어지는 방식에 대한 문의

0

46

1

강의제목에 10/15일 삭제라고 나와있는데,

0

46

1

선생님 강의자료를 받을수 없어요! 메일보냈어요.

0

56

2

1강 동영상 재생 오류

1

66

2

헤더에서 empty column이 삭제가 안되고, 헤더 레이아웃을 동영상처럼 선택하는 옵션이 안나오는데 어떻게 하나요?

0

40

1

Composition단계에서 `Layer`는 누가 만드는지

0

41

1

Strict Mode 예시 질문!

0

58

2

해당 플러그인을 설치했는데 추가 지원 안될 수 있다고 다른 플러그인을 깔아보라는데 어떻게 해야하나여?

0

59

2

만일 실물을 택배로 배송해야 할 경우 주소지 입력하는 방법이 궁금해서요.

1

89

4

설명이 잘못된거같습니다.

1

76

2

31강 학습자료에 프롬프트가 엉뚱한것이 있어요

1

66

1

bitnami 설치

0

39

0

강의 소스 코드는 어디서 볼수 있나여?

1

70

1

유틸리티 클래스 외부 링크

1

195

2

반응형 레이아웃 문의 드려요.

1

180

2

메인 폰트 사용법이 궁금합니다.

1

235

2

섹션 1 - 3강 화면이 안나오는것 같네요

1

251

2

text가 border 밖에 형성되는 이유와 해결방법을 알고싶습니다

1

212

1

단축키 질문입니다!

1

251

1

섹션1 Animation에서 실습에 활용되는 svg 파일이 images 폴더 안에 안 들어 있습니다.

1

307

1

저도 윗 분과 마찬가지로 폴더구성이 다릅니다.

1

404

2

첨부파일 누락확인

1

509

2