오늘은 HTML과 CSS를 활용하여 특정 포스터를 만들어보았다.
mini project(1)
Poster 만들 때 던졌던 질문
1. 구획 설정하기
flex개념을 활용해 페이지를 어떻게 큼지막하게 구획을 나눌지 먼저 생각한다.
위의 포스터의 경우 body 태그 안에 하나의 div를 만든 뒤 그 안에 4개의 div를 넣어서 구성하였다.
- Paris 06.
- uderline
- texts
- circles
2. flex container에 들어가는 items를 어떻게 정렬할지 생각하기
Q. 4개의 flex container 내 아이템 정렬에 대해 생각해보기
q. Paris 와 06을 어떻게 띄울까?
q. COUNTRY, COLOURS, SITE_LINK 간 간격을 어떻게 조정할까?
q. 3개의 동그라미를 flex의 어떤 특징을 써서 간격을 조정 할 것인가?
CSS PART
flex-flow
flex-flow 는 한번에 2가지를 설정할 수 있다.
1. 축을 결정
2. 한 줄에 표현 or 여러 줄에 표현
flex-flow: row-reverse wrap;
주 축은 수평축이다
items 순서는 거꾸로 표현 되며
items 개수가 여러개이면서 특정 크기로 한 줄에 표현되지 못 할 경우 여러 줄에 걸쳐 표현한다.
flex-flow: column no-wrap;
주 축은 수직축이다
items 순서는 순서대로 표현된다.
items 개수가 여러개여서 줄을 벗어나는 크기라 할 지라도 세로 한 줄 안에서 배열된다.
Grid Basic
**grid-template-columns**
grid-template-columns: 100px 200px 300px;
위와 같이 크기의 단위를 3개 적어주면 3개의 행과 각 각 크기가 결정되어 생성된다.
**grid-template-rows**
grid-template-rows: 100px 200px 300px
위와 같이 크기의 단위를 3개 3개의 열과 그 크기가 결정되어 생성된다.
column-gap
열 간의 간격을 주고 싶을 때 사용한다.
row-gap
행 간의 간격을 주고 싶을 때 사용한다.
gap
행과 열 간격을 동시에 주고 싶을 때 사용한다.
아래의 코드를 통해 위의 개념을 이해해보기로 하자.
<!--html code-->
<div class ="father">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>/*css code*/
.father {
display: grid;
grid-template-columns: 100px 200px 300px;
grid-template-rows: 100px 200px 300px;
column-gap: 20px;
row-gap: 10px;
}
.child{
background: peru;
}