- 분류 전체보기 (337)
삶의 공유
[Mini Project] CSS, HTML 활용하여 Mondrian 그림 그리기 본문
안녕하세요.
예제를 활용하여 CSS, HTML 코드에 대해서 익히기 위한 포스팅으로 미니프로젝트를 준비해보았습니다.
CSS HTML 코드를 활용해서 Mondrian 그림을 한번 그려보려고 하는데요
먼저 몬드리안은 네덜란드 화가의 이름 입니다. 대표적으로 아래와 같은 작품이 있습니다. 아래 작품의 이름은 빨강, 파랑 노랑의 구성이라는 작품 입니다.
이 작품과 비슷한 작품을 한번 그려보려고 합니다.
Layout_ HTML
위 그림와 같은 비슷한 느낌으로 아래와 같은 Layout 구성으로 한번 그려보려고 합니다.
자 처음에 무엇을 해야할까요? 먼저 각각 칸마다의 구성을 위해 div 를 구성해줘야합니다.
왼쪽 상단부터 카운트를 하면 총 9개 입니다.
그럼 이제 9개의 div를 구성하고 각각의 class에 naming을 붙여줍니다.
<body>
<div class="container">
<div class="item red"></div>
<div class="item white1"></div>
<div class="item white2"></div>
<div class="item white3"></div>
<div class="item blue"></div>
<div class="item white4"></div>
<div class="item"></div>
<div class="item yellow"></div>
<div class="item black"></div>
</div>
</body>
사실 HTML 만 고쳐서는 정확히 적용 되었는지 알기 어렵죠?
이제 스타일을 적용하여 하나씩 수정해보도록 하겠습니다.
Style_ CSS
이제 HTML로 뼈대를 세운 뒤에 CSS를 적용하여 Style을 입히도록 하겠습니다.
그림의 색상을 입혀서 변경되는 부분에 대해 우리 눈으로 확인 할 수 있도록 해볼까요? 앞의 Layout 구성과 동일하게 Grid 를 이용하겠습니다. 사용 전에 Grid에 대해서 다른 예시를 통해서 알아보겠습니다.
.container {
width: 400px;
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 1fr);
}
위의 코드로 row, column들을 만들면 아래와 같이 Layout이 배치가 됩니다. 쉽죠 ? ㅎㅎ
이제 Column과 Row를 구성하고 블랙 색상을 배경으로 적용 하겠습니다. 그리고 가장 상위 카테고리인 item 부분에 하얀색 배경을 적용하여 눈으로 구분 할 수 있게 하겠습니다.
.container {
height: 748px;
width: 748px;
display: grid;
background-color: #000;
grid-template-columns: 320px 198px 153px 50px;
grid-template-rows: 414px 130px 155px 22px;
gap: 9px
}
.item {
background-color: #F0F1EC;
}
그럼 아래와 같이 구성 됨을 알 수 있습니다.
자 이제 두번째로는 Flex 를 이용하여 그림을 가운데에 배치하도록 하겠습니다.
Flex에 대해서 간략하게 설명하면 Flex는 레이아웃 배치 전용 기능으로 고안되었습니다. 그래서 레이아웃을 만들 때 딱히 사용할게 없어서 쓰던 float나 inline-block 등을 이용한 기존 방식보다 훨씬 강력하고 편리한 기능들이 많이 있습니다.
부모 요소인 div.container를 Flex Container(플렉스 컨테이너)라고 부르고, 자식 요소인 div.item들을 Flex Item(플렉스 아이템)이라고 부릅니다. 이때 “컨테이너가 Flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것”이라고 생각하시면 됩니다.
전체를 옮길거기 때문에 body 부분에 css적용하여 배치를 옮길것 입니다. 아래와 같이 코드를 작성해주면 정 가운데에 배치가 됩니다.
justify 는 수평을 기준으로 Center로 적용한다는 의미이고 / align은 수직을 기준으로 Center로 적용한다는 의미 입니다.
하지만 align이 적용되기 위해서는 height가 있어야하는데요 여기서 100vh는 부모 태그와는 상관없이 보이는 Viewport Height의 100%를 다 쓰겠다는 의미입니다.
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
padding: 0;
}
자 아래와 같이 가운데에 잘 정렬된것을 볼 수 있습니다.
자 이게 각 div에 색을 하나씩 입혀볼까요. 먼저 Red 색상을 입히고 White1 영역의 나눠진 컬럼을 Span을 이용해 합치도록 하겠습니다.
.red {
background-color: #E72F24;
}
.white1 {
grid-column: span 3;
}
그런 다음 아래의 white2 영역의 row2개를 span기능을 이용하여 합치고 white3영역을 grid-area이용하여 확장하도록 하겠습니다.
.white2 {
grid-row: span 2;
}
.white3 {
grid-area: 2 / 2/ 4 / 4 /* grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end> */
}
자 이제 다왔습니다. 각 영역의 색상을 입혀주고 white4 영역에 2개의 Row를 합치면 끝입니다.
blue {
background-color: #004592;
border-bottom: 10px solid #000;
}
.white4 {
grid-row: span 2;
}
.yellow {
background-color: #F9D01E;
}
.black {
background-color: #232629;
}
잘 적용이 되었다면 아래와 같이 멋진 몬드리안 작품을 재현할 수 있습니다.
고생하였습니다.
전체 Source Code
아래는 전체 미니 프로젝트 Source Code 입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mondrian Project</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
padding: 0;
}
.container {
height: 748px;
width: 748px;
display: grid;
background-color: #000;
grid-template-columns: 320px 198px 153px 50px;
grid-template-rows: 414px 130px 155px 22px;
gap: 9px
}
.item {
background-color: #F0F1EC;
}
.red {
background-color: #E72F24;
}
.white1 {
grid-column: span 3;
}
.white2 {
grid-row: span 2;
}
.white3 {
grid-area: 2 / 2/ 4 / 4
}
.blue {
background-color: #004592;
border-bottom: 10px solid #000;
}
.white4 {
grid-row: span 2;
}
.yellow {
background-color: #F9D01E;
}
.black {
background-color: #232629;
}
</style>
</head>
<body>
<div class="container">
<div class="item red"></div>
<div class="item white1"></div>
<div class="item white2"></div>
<div class="item white3"></div>
<div class="item blue"></div>
<div class="item white4"></div>
<div class="item"></div>
<div class="item yellow"></div>
<div class="item black"></div>
</div>
</body>
</html>
'Web Dev > HTML&CSS' 카테고리의 다른 글
| [Project] HTML & CSS 이용하여 Web page만들기 1편 [Icon, bootstrap, font 설정] (0) | 2024.03.22 |
|---|---|
| [HTML예제] 간단한 Website Project를 만들면서 HTML 익히기-2 (0) | 2024.02.03 |
| [HTML예제] 간단한 Website Project를 만들면서 HTML 익히기 (0) | 2024.02.03 |
