Flexbox는 웹사이트 레이아웃을 구축하고 반응형으로 만드는 비교적 새로운 프론트엔드 기능으로 예전보다 훨씬 더 쉽게 만들었습니다.
과거에는 웹사이트를 구축하기 위해 플로트 그리드 또는 테이블을 사용하여 레이아웃이 제대로 보이도록 해야 했습니다. 그리고 이러한 방법은 반응형 디자인에 가장 적합하지 않습니다. 즉, 웹사이트가 데스크톱, 태블릿 및 휴대기기에서 보기 좋게 보이도록 하는 것입니다.
최신 웹 개발 동향을 파악하고 싶다면 flexbox 사용법을 알고 싶을 것입니다.
플로트 그리드가 빠르게 과거의 일이 되고 있기 때문입니다.
이 단계별 가이드는 간단한 반응형 웹사이트 레이아웃을 구축하는 과정을 안내합니다.
다음은 이 튜토리얼에서 예상할 수 있는 내용을 간략하게 살펴보겠습니다.
간단한 웹사이트 레이아웃을 구축하는 단계
- 모바일, 태블릿 및 데스크톱에서 레이아웃이 어떻게 보일지 스케치합니다.
- 시맨틱 HTML 및 CSS를 사용하여 기본 레이아웃 코딩을 시작합니다.
- 섹션별로 이동하여 나머지 레이아웃을 구성합니다.
- CSS에서 모바일 우선 접근 방식을 따르고 가장 작은 너비의 스타일을 만든 다음 점차적으로 더 큰 너비로 스타일을 만듭니다.
진행하면서 내 사고 과정을 설명하고 내가 찾은 좋은 사례를 공유하겠습니다.
좋은 소리? 시작하겠습니다!
웹사이트 레이아웃 재구성
와이어프레임은 웹사이트의 모든 조직적 부분에 대한 다이어그램입니다. 거의 디자인처럼 매우 상세할 수도 있고 기본적이고 주요 측면만 문서화할 수도 있습니다.
여기에서 우리는 매우 기본적인 와이어프레임을 갖게 될 것입니다. 웹사이트를 핵심 섹션으로 나누고 각 섹션이 모바일, 태블릿 및 데스크톱에서 어떻게 보일지 결정할 것입니다.
우리가 만들 섹션에는 머리글, 영웅, 콘텐츠 섹션, 사이드바 및 바닥글이 포함됩니다.
저는 MockFlow라는 온라인 도구를 사용하여 기본 와이어프레임을 만듭니다.
모바일 레이아웃은 다음과 같습니다.
기본적으로 모든 섹션이 사이드바를 포함하여 하나의 긴 열에 서로 겹쳐져 있는 것을 볼 수 있습니다.
스태킹은 휴대폰과 같은 좁은 장치에 콘텐츠를 효율적으로 맞추는 가장 기본적인 방법입니다.
일반 콘텐츠 옆에 사이드바를 만들려고 하는 것은 의미가 없습니다. 휴대전화가 양쪽을 나란히 놓을 수 있을 만큼 너비가 충분하지 않기 때문입니다.
이제 너비를 늘리십시오. 태블릿 레이아웃은 다음과 같습니다.
여기서 가장 큰 차이점은 태블릿이 휴대폰보다 훨씬 넓기 때문에 이제 기본 콘텐츠 섹션 옆에 사이드바를 맞출 수 있다는 것입니다. 그리고 모든 섹션이 태블릿의 전체 너비를 차지합니다.
그리고 가장 넓은 장치의 경우 바탕 화면 레이아웃은 다음과 같습니다.
데스크탑의 경우 매우 넓은 모니터에서 웹사이트가 어떻게 보일지 고려하기 시작해야 합니다. 특히 요즘은 울트라와이드 스크린이 인기를 얻고 있습니다.
대형 모니터에서 웹사이트 콘텐츠를 전체 너비로 확장하면 콘텐츠를 읽고 스캔하기가 더 어려워집니다.
눈이 왼쪽에서 오른쪽 끝까지 계속 움직인다고 상상해 보십시오. 너무 많은 작업이 필요하고 사용자를 멀리하게 됩니다.
웹사이트를 와이드 스크린에서 여전히 읽을 수 있도록 하기 위해 콘텐츠를 특정 너비로 제한하고 중앙에 배치했습니다. 이렇게 하면 모니터의 크기에 관계없이 훨씬 더 쉽고 직관적으로 읽을 수 있습니다.
이제 웹사이트의 모양을 알았으므로 HTML과 CSS로 모든 것을 구축하는 재미있는 부분을 시작하겠습니다!
기본 구조 및 스타일 구축
HTML 요소로 레이아웃 매핑
우리가 만든 와이어프레임에서 작업하여 와이어프레임에 있던 각 섹션에 대한 HTML 요소를 만듭니다.
<body>의 마크업은 다음과 같습니다. 시작하기:
<!-- Main Content -->
<main>
Main
<!-- Header -->
<header>
Header
</header>
<!-- Hero -->
<section>
Hero
</section>
<!-- Content -->
<section>
Content
</section>
<!-- Sidebar -->
<aside>
Sidebar
</aside>
<!-- Footer -->
<footer>
Footer
</footer>
</main>이제 와이어프레임의 각 요소가 HTML에서 해당 요소를 갖는 방법을 볼 수 있습니다. 실제 내용이 아닌 간단한 자리 표시자 텍스트만 넣었습니다.
기본 CSS 속성 추가 시작
이제 이 레이아웃을 보기 좋게 만들 수 있도록 아주 기본적인 CSS를 덤프해 보겠습니다.
main, header, section, aside, footer {
margin: 0;
padding: 20px;
border: 1px solid #000000;
color: #ffffff;
}
main {
background: #000000;
}
.header {
background: #03a9f4;
}
.hero {
background: #d22b1f;
}
.content {
background: #129a22;
}
.sidebar {
border: 1px solid #000000;
background: #673ab7;
}
.footer {
border: 1px solid #000000;
background: #616161;
}상자 크기 설정:테두리 상자 및 글꼴 스타일과 같은 몇 가지 매우 일반적인 스타일은 표시되지 않습니다. 그러나 이 기사의 목적을 위해 걱정할 필요가 있는 유일한 스타일입니다.
저는 각 요소의 위치를 쉽게 식별하고 이상한 문제를 해결할 수 있도록 요소에 테두리를 추가하는 것을 좋아합니다. 그리고 이전에 했던 와이어프레임 모형과 일치하도록 배경색도 추가했습니다.
브라우저에서 HTML 파일을 열면 다음과 같이 표시됩니다!
이미 눈치채셨겠지만 웹사이트는 모바일 와이어프레임과 거의 동일하게 보입니다. 기본적으로 모든 항목이 서로 겹쳐집니다.
일부 자리 표시자 콘텐츠 추가
HTML 요소를 만든 후에는 자리 표시자 콘텐츠를 추가하는 것도 좋은 생각입니다. 이렇게 하면 웹사이트가 완성되었을 때와 더 비슷하게 보일 것입니다.
너무 멋질 필요는 없습니다. 각 요소에 lorem ipsum 필러 텍스트를 복사하여 붙여넣으면 됩니다. 예를 들어 Hero 요소에 있는 내용은 다음과 같습니다.
<section class="hero">
Hero
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sumenda potius quam expetenda. Nihil opus est exemplis hoc facere longius.
</p>
</section>모든 요소에 lorem ipsum을 추가하면 웹사이트에서 다음과 같이 표시됩니다.
잘 생겼어요!
최종 콘텐츠가 어떻게 보이는지 반영하기 위해 각 요소에 다른 길이의 자리 표시자 텍스트를 추가했음을 알 수 있습니다.
모바일용 CSS 최적화
좋습니다. 기본적으로 모바일용 레이아웃 구축이 완료되었습니다!
모바일에서 웹사이트를 보기 좋게 만들기 위한 또 다른 팁은 측면에 균일한 패딩을 추가하는 것입니다. (원하는 경우 상단과 하단).
이것은 사용자에게 약간의 호흡 공간을 제공합니다. 여백이 없고 여백이 0이면 콘텐츠가 화면 가장자리에 딱 맞게 표시되어 비좁은 느낌이 들 것입니다.
내용을 읽을 수 있도록 유지하기 위해 너무 많은 공간을 추가하고 싶지 않습니다. 이 경우에는 전역 패딩이 20px이지만 10px, 15px 또는 가장 보기에 좋다고 생각되는 패딩을 추가할 수 있습니다.
태블릿 보기에 대한 스타일 추가로 넘어갑시다.
태블릿용 2열 레이아웃 만들기
태블릿 와이어프레임을 다시 참조하면 콘텐츠 및 사이드바 요소가 나란히 있는 것을 볼 수 있습니다. 나머지는 모바일처럼 세로로 쌓입니다.
콘텐츠와 사이드바가 두 개의 열로 형식이 지정되도록 몇 가지 스타일을 추가해야 합니다. 이를 위해 CSS 그리드가 아닌 flexbox를 사용할 것입니다.
먼저 HTML을 변경하고 Content 및 Sidebar 요소를 상위 <div>로 래핑합니다. "flex-container" 클래스를 제공할 것입니다. (지금은 별로 중요하지 않은 추가 마크업을 나타내기 위해 줄임표를 사용)
<div class="flex-container">
<!-- Content -->
<section class="content">
Content
...
</section>
<!-- Sidebar -->
<aside class="sidebar">
Sidebar
...
</aside>
</div>CSS를 작성하기 전에 2열 레이아웃에 있을 때 콘텐츠와 사이드바가 어떻게 작동할지 결정해야 합니다. 몇 가지 다른 옵션이 있으며 "정답"은 자신의 상황에 따라 다릅니다.
내가 원하는 것은 사이드바의 너비가 항상 300픽셀이고 콘텐츠가 나머지 공간을 차지하는 것입니다.
이를 위해 CSS에 flexbox 스타일을 추가합니다(추가 코드 대신 줄임표를 사용).
@media screen and (min-width: 640px){
.flex-container {
display: flex;
}
}미디어 쿼리를 사용하여 장치 너비가 640px 이상일 때 flexbox를 켭니다. 즉, 전화기의 더 작은 너비에서는 스택 상태로 유지됩니다. 640 표시에 도달하면 플렉스박스 레이아웃으로 전환됩니다.
.content {
flex: 1;
...
}
.sidebar {
flex: 0 1 300px;
...
}Content 및 Sidebar 요소의 경우 flex 속성을 추가했습니다.
콘텐츠 너비가 flexbox에 의해 계산되기를 원하므로 flex: 1로 설정합니다. , 이는 flex-grow: 1의 약어입니다. , flex-shrink: 1 및 flex-basis: 0% .
이것은 "기본" flexbox 설정입니다. 모든 자식 요소가 flex: 1을 갖도록 설정한 경우 , 너비가 계산되고 가능한 한 고르게 분포됩니다.
사이드바에서 너비를 300px로 설정하려면 flex: 0 1 300px를 사용합니다. . CSS-Tricks에 따르면 마지막 속성인 flex-basis는 "나머지 공간이 분산되기 전에 요소의 기본 크기를 정의합니다."
이렇게 하면 사이드바가 항상 300픽셀이 되고 나머지 공간이 콘텐츠 섹션에 분배됩니다.
그 결과입니다!
이제 데스크탑용 스타일을 추가해 보겠습니다.
데스크톱의 콘텐츠 너비 제한
태블릿과 데스크톱 와이어프레임을 다시 보면 상당히 비슷해 보입니다. 둘 다 사이드바 옆에 콘텐츠가 있습니다.
앞서 언급한 것처럼 데스크탑의 주요 차이점은 기본 콘텐츠의 최대 너비를 설정하는 것입니다. 이렇게 하면 울트라와이드 모니터에서도 웹사이트를 읽을 수 있습니다.
CSS의 도우미 클래스
여러 요소에 대해 이 스타일 세트가 필요할 수 있으므로 쉽게 재사용할 수 있는 도우미 클래스를 만들어 보겠습니다.
다음과 같이 CSS에 새 클래스와 동반 스타일을 추가합니다.
.wrapper {
margin: auto;
max-width: 75rem;
}이렇게 하면 요소의 최대 너비가 1200px(rem 단위로 변환됨)로 설정되고 1200px보다 큰 너비의 중앙에 배치됩니다.
HTML에서는 Content 및 Sidebar 컨테이너의 너비를 제한하고 싶기 때문에 flex-container 래퍼에 래퍼 클래스를 추가합니다.
그러면 마크업이 다음과 같이 표시됩니다.
<div class="flex-container wrapper">
…
</div>그리고 더 큰 너비로 웹 사이트를 확인하면 원하는 대로 Content/Sidebar 래퍼 주위에 추가 공간이 있음을 알 수 있습니다. 😁
결론
이제 끝입니다. 모바일, 태블릿 및 데스크톱에서 보기 좋은 간단한 반응형 레이아웃을 만들었습니다!
웹사이트가 작동하는 모습을 보려면 여기에서 데모를 확인하세요.
여기 내 GitHub에서 이 프로젝트의 모든 코드를 다운로드할 수 있습니다.
*참고:프로젝트는 Gulp와 Sass를 사용합니다. Gulp 설치에 도움이 필요하면 여기에서 내 Simple Gulp Tutorial을 확인하십시오.
읽어 주셔서 감사합니다! 아래 댓글에서 이 튜토리얼에 대해 어떻게 생각하는지 알려주세요 😊