inflearn logo
강의

Khóa học

Chia sẻ kiến thức

Tạo kiểu UI web tuyệt vời với Tailwind CSS

Thiết kế cấu trúc Wireframe HTML (web đáp ứng)

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

123

yilee

9 câu hỏi đã được viết

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

Câu trả lời 2

1

codingworks

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

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

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

 

0

communityai8509

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

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

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

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

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

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

6-6

0

14

1

Json 플러그인 사용시 variable collection 없음

0

15

1

배리어블 목록 없음

0

23

3

Token 등록 방법 문의

0

21

1

쿠폰 문의 드립니다.

0

21

2

6-6 실습 문의

0

25

2

섹션5 노션링크 는 따로 없나요?

0

32

2

Part 4에서 강의 연관 노션 정보들이 워드파일에 없습니다.

0

33

2

첨부자료 Part 4 코드 확인 부탁드리겠습니다.

0

29

2

선생님 각 강좌마다 예시로 보여주시는 웹페이지들은 어디서

0

24

1

퍼플렉시티 최소 결제단위 50달러로 바뀐 것 같습니다.

0

54

2

claude plugin 방법 자세히 부탁드려요

0

40

2

강의에 적용한 스크립트를 받아 볼수 있을까요?

0

40

2

28강 프롬프트가 없습니다.

0

39

2

최근 코테, 과제 테스트 트렌드

0

69

2

유틸리티 클래스 외부 링크

1

150

2

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

1

121

2

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

1

176

2

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

1

195

2

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

1

173

1

단축키 질문입니다!

1

214

1

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

1

269

1

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

1

361

2

첨부파일 누락확인

1

458

2