inflearn logo
강의

講義

知識共有

CSS FlexとGridを正しく習得する

フレックス レスポンシブ ページ ステップ 4

원래 css 작업하실 때 작은 요소부터 작업하고 큰 레이아웃 작업하시나요?

272

voiddeveloper7723406

投稿した質問数 6

0

원래 css 작업하실 때 강의처럼
작은 요소(헤더,풋터, 네비, 유저, 모달 등등)부터 작업하고 큰 레이아웃 작업하시나요?

그리고 css 파일은 ui는 ui끼리 모으고,
레이아웃을 관리하는 ui-page 를 따로 작성하여서 관리하시나요?

작은 요소부터 css 작업을 하는 이유와
css파일을 하나의 요소 css파일와 레이아웃 css파일을 나눠서 관리하는 이유가 궁금합니다.

flex HTML/CSS

回答 2

2

studiomeal

1. 프로젝트 성격에 따라 다릅니다. 수업처럼 프로젝트에서 각각의 UI 요소들을 먼저 작업하는 경우 그 이유는, 공통적으로 많이 사용하는 UI 라이브러리를 만드는 개념으로 만들어두고 각 페이지의 골격을 만들며 그 안에 조립해나가는 식으로 하는거지요.
그렇게 할 경우 러프한 작업 순서는
UI세트만들기 -> 메인 페이지 골격 -> 서브 페이지 골격 -> 각 페이지 세부 내용
이렇게 됩니다. 페이지 골격을 만들고 내용을 채울 때 미리 만들어 둔 UI 세트에서 가져와서 쓰는 개념으로요.
개발 단계에서 미리 간단한 UI개발 스타일가이드가 만들어지는거지요~ 거기에서 각 페이지에서 필요할 때 가져다 쓰는 것이고요.
그렇게 하면 중복 코드를 줄이고 디자인 일관성을 유지하는 데에도 도움이 됩니다.
"작은 요소"를 먼저 작업한다기보다는, "공통으로 사용되는 UI 세트를 미리 만들어 두고 그걸 조립한다"라고 생각하시면 좋습니다. 작은 요소더라도 그 페이지에만 쓰이는 것들은 미리 만들어두지는 않습니다^^

2. 두번째 질문도 프로젝트 성격에 따라 다릅니다 ㅎㅎ 수업에서 그렇게 한 이유는, 간단한 UI 세트를 만드는 개념으로 그렇게 했어요. 자주 사용하는 UI 요소들의 세트를 따로 만들어두면, 다른 프로젝트에서도 그걸 가져다 쓰기가 용이하니까요~
저도 프로젝트가 간단하거나 귀찮으면 그냥 하기도 하는데, 분리하는 편이 장점이 많다고 생각됩니다^^

0

voiddeveloper7723406

친절한 답변 감사합니다!
한 번도 강사님처럼 안해봤는데, 해보고 느껴봐야겠어요~

가로스크롤 과 margin: 0 -1rem 질문 있습니다

0

119

1

수업자료 다운로드

0

122

1

VS코드에 클래스 이름만 넣으셨는데 선생님이 뭘 누르면 바로 태그로 변하던데...

1

138

1

css grid repeat() 에서 autofit 사용시

0

183

1

menu 아이템 반응형 변경

0

102

1

질문은 아니고.. 오타 발견..

0

121

1

웹에서 위치?값

0

211

1

px, em ,rem을 어떻게 감각적으로 쓸 수 있을까요?

0

510

2

강의에 나오는 html 자동으로 만들어주는 편집기에 대해 알 수 있을까요?

0

309

1

flex-basis auto, 0 차이

0

710

2

padding 대신 gap을 쓰는게 더 편하지 않나요?

2

607

1

animation forwards 관련 질문

0

488

2

auto-fill, auto-fill이 적용되지 않는것 에 대해 질문드립니다.

0

559

1

flex-grow IE 질문드립니다.

0

624

2

Flex-grow가 적용되는 영역에 대해 질문드립니다.

0

437

1

Grid 수직정렬 문의

0

1075

1

card__item에 display:flex를 했을 때..

0

512

1

11vmin

0

417

1

header class 안에 div와 h2

0

576

1

grid 반응형 페이지 step1 질문있습니다~

0

282

1

반응형 페이지 step4 order

0

356

1

미디어쿼리 사이즈

1

286

1

figure + div

0

300

1

CSS Grid를 통한 정렬의 장점

0

247

1