inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

그리드(Grid) 핵심이론 및 실전 활용

풀스크린 반응형 레이아웃(2) - 모바일 & 태블릿 레이아웃

holly grail layout에 대한 질문 입니다.

319

서병식

작성한 질문수 12

1

안녕하세요 그리드 수강생입니다.
항상 좋은 강의에 감사 드립니다.

그리드로 메인화면을 레이아웃 할때 어떤 것이 효율적인지 한번 봐주셨으면 합니다.
제가 두개를 코딩해 보았는데요.

http://soopsok.dothome.co.kr/grid/index6_1.html
위의 링크에 있는 레이아웃은
row 3개를 잡고 컨텐츠 부분은 1200px/가운데 정렬로 해서 레이아웃 한 다음에 메인컨텐츠 부분만 그리드로 처리 한거구요.

http://soopsok.dothome.co.kr/grid/index6_2.html
위의 링크는 bg 부분도 모두 그리드로 잡아 보았습니다.

현재 모바일 변환은 안된 상태구요.
모바일로 변환 할때 문제점도 있을 것 같기도 합니다만.
최근에는 메인화면에서도 배경 처리가 함께 되어야 하기 때문에 어떤 식으로 레이아웃을 하는 것이 좋을까? 고민이 되어서요.

한번 보신후에 조언 부탁 드립니다^^
감사합니다!

반응형-웹 HTML/CSS

답변 1

0

코딩웍스(Coding Works)

굉장히 복잡한 레이아웃을 그리드로 잘 만드셨네요.
사실 지금 만드신 복잡한 레이아웃이 현실적으로 사용될 일은 거의 없습니다.
지금과 같은 레이아웃을 그리드로 만드실 수 있으면 앞으로 못만드실 레이아웃은 없다고 봅니다.
잘 만드셨습니다!!

part3. spy 쪽 / part3,part4 강의자료

0

32

2

최종 코드

0

40

2

Open AI 결제

0

40

2

figma 파일을 받을 수가 없어요

0

48

1

다운로드 연결이 되지 않을 때는 어떻게 해야할까요?

0

37

1

Visual Studio Code 대신 Pycharm 써도 되나요?

0

42

2

커서, 클로드, 피그마는 모두 유료버전을 사용해야하나요?

0

56

1

구글 서치콘솔 도메인 소유권 확인 실패

0

40

2

antigravity로 하던 작업 이제 visual code로 하면 되는 거죠?

0

59

1

다음 강의 얼른 올려주세요

0

44

2

일반 강의와 차이점?

1

53

1

중요하진 않지만 설명하신부분에서 안된부분..

1

37

1

안녕하세요, 강좌 5의 피그마 파일은 어디서 볼 수 있나요?

0

65

2

stopPropagation()에 대해서 질문 있습니다.

0

50

2

뉴스페이퍼 싱글템플릿 모바일 화면 디자인 질문

0

41

2

grid-row, grid-column span에 관한 질문

1

86

2

창 높이가 작을 때 레이아웃 깨짐현상

0

103

1

안녕하세요 두 가지 고민이 있어서 질문 합니다^^

1

349

1

grid-gap에 대해서 질문드립니다!

1

1518

1

div*6{$} 가 먹히지 않습니다!

2

288

2

에밋 단축키 관련해서 질문 있어요

1

302

2

영상에는 없지만,

1

276

2

PC버전,모바일 버전 다 이상없이 되는데

1

372

4

10:50초경 질문입니다

1

176

1