-
CSS Flexbox : 간단한 홈페이지 레이아웃 꾸며보기컴퓨터 알아가기/HTML CSS 2021. 5. 13. 19:30728x90반응형
이제 HTML도 CSS도 전문가 수준은 아니지만 어느정도 개념을 잡았으니 홈페이지 화면(Main Page)을 한번 꾸며 볼까 합니다. 우선 다음과 같은 순서로 진행해 볼까 합니다.
① 어떤 주제로 할건가
② Main Page의 <div> 태그는 어떤 구성으로 할 건가
③ 필요 이미지가 있는가
▒ Main Page 만들기
저는 과일가게에서 판매되는 과일을 홍보해 보고자 합니다. 과일에 대한 이미지도 필요할 거고 이름 가격 등등이 필요할 건데 이번 시간에는 레이아웃에 중점을 두기 위하여 Main Page의 큰 틀만 만들어 보는 것으로 목표를 두겠습니다.
구성은 다음과 같이 해 보겠습니다.
다른 HTML을 사용한 적이 없기때문에 <body>태그안에 4개의 Division으로 나눴습니다. 다음과 같이 HTML로 구성해 보았습니다.
<div 1> 태그
보통 HTML을 작성할 때 향후 CSS를 적용하기 위해서 최소 Class 이름을 구분하기 쉽게 지정해 주는게 필요합니다.
일단 과일을 수입하는 가게로 가정하고 가게소개, 서비스 내역, 연락처 등을 <a>태그를 이용하여 링크를 시켜 놓았습니다.
<div 2> 태그
간단하게 어떤 가게인지 설명을 해 놓았습니다.
<div 3> 태그
구체적인 취급 상품에 대한 개요와 사진을 연결 했습니다.
<div 4> 태그
마지막으로 연락처를 표시하는 Division을 만들었습니다.
그러면 다음과 같이 브라우저에 나타납니다. (일단 순서대로 표시됩니다.)
여기에 Flexbox 개념을 응용하여 CSS를 꾸며 보겠습니다. 글씨 색깔 폰트 등을 바꾸고 사진 크기도 줄이고 가운데로 배치하는 정도로 가 보겠습니다.
▶ html과 body : margin과 padding을 0으로 하고 Font는 Times New Roman (Serif 계통)으로 설정
※ VS Code의 Go live를 이용하시면 코딩과 동시에 브라우저 변환을 바로 확인하실 수 있습니다.
▶ 사이즈 설정
사이즈는 각 Section별로 수정이 가능하지만 전체적으로 지정하고자 하는 사이즈를 미리 설정해 놓는 것도 괜찮은 방법입니다.
<h1> 태그 사이즈를 지정하고 그림이 들어가는 Class명에 색을 지정해 줍니다. 사진 자체가 크기 때문에 최대 넓이와 높이를 지정해 봅니다.
※ 사실 처음부터 완벽하게 사이즈를 지정할 수 있는게 아니고 저같은 초보자들은 계속적으로 사이즈를 수정해 보면서 만족한 결과를 도출해야 합니다.
▶ Header Section CSS
Header에는 글씨 크기 수정과 링크가 연결된 리스트를 우측으로 배치 하겠습니다.
▶ Explain Section
폰트 사이즈와 강조하고자 하는 내용에 색을 달리 지정 하겠습니다.
▶ Banner Section
이 곳은 과일 사진을 설명하기 위한 문장이 들어가는 곳입니다. 여백과 색을 맞추겠습니다.
▶ Image Section
이 곳이 우리가 그동안 연습했던 Flexbox 속성을 이용해야 합니다. 배경안에 들어가야 하고 브라우저 크기 변화에 따라 반응해야 합니다.
Flex-direction은 수직으로 정하겠습니다.
▶ Footer Section
적당하게 꾸며 줍니다.
위 CSS를 적용해서 브라우저에 어떻게 나왔는지 한번 볼게요.
HTML로만 작성되었던 홈페이지가 조금은 나아졌네요. 한번 브라우저를 줄여 볼게요.
잘 반응하는 것 같습니다.
조금씩 연습하면 발전할 것 같습니다.
반응형'컴퓨터 알아가기 > HTML CSS' 카테고리의 다른 글
CSS Grid : Repeat함수, Minimax함수, Grid gap, Grid items, Grid area (0) 2021.05.17 CSS Grid : Grid-template-columns, Grid-template-rows, Grid-template, Fraction 속성 (0) 2021.05.14 CSS Flexbox : Flex-direction, Flex-flow, Nested Flexbox (0) 2021.04.22 CSS Flexbox : Flex 속성축약, Flex-wrap, Align-content (0) 2021.04.21 CSS Flexbox : Flex-grow, Flex-basis (0) 2021.04.20