학습내용

bootstrap agency 반응형 홈페이지 따라하기
github소스코드

flex로 두 줄 이상 x축 정렬

고정 width로 만들기 (강의내용)

1. 전체 요소 담는 태그인 <container>에 고정 넓이값을 주고 margin: 0 auto;로 좌우 중앙정렬을 한다.
2. flex 속성 중 flex-wrap을 이용해 자식 요소들의 width값이 부모 요소의 width값을 넘어갈 경우 줄바꿈을 하도록 한다.
3. 자식의 width값을 적절히 주어 부모의 width값 안에 한 줄 당 3개의 요소가 들어갈 수 있도록 한다.
4. 미디어쿼리 제작 시 부모의 고정 width값을 바꿔서 한 줄 당 2개의 요소가 들어가도록 한다.
5. 줄바꿈이 일어난 것에 알맞게 자식 요소의 margin-bottom값을 조정해준다.

.container {
	width: 1140px;
    margin: 0 auto;
    background-color: silver;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.container .column {
    width: 355px;
    background-color: #ffffff;
    border: solid 2px black;
    margin-bottom: 10px;
}
.container .column:nth-child(4),
.container .column:nth-child(5),
.container .column:nth-child(6) {
    margin-bottom: 0;
}
@media (min-width: 540px) and (max-width:720px) {
    .container {
        width: 720px;
    }
    .container .column:nth-child(4) {
        margin-bottom: 10px;
    }   
}

비율 width값을 이용해 같은 효과 내기

모바일 버전의 경우 width에 비율값을 이용하는 것을 보고 처음부터 width값을 비율로 설정하는 것도 한번 시도해보았다.
1. 부모 태그 <container>의 width를 100%로 설정하고 내부 요소들은 공백을 고려해서 width를 33%로 만들어주었다. 그랬더니 flexwrap:wrap에 의해 의도한 대로 한 줄에 3개씩 요소가 들어갔다.
2. @media로 인해 브라우저 넓이가 줄어들어도 부모 태그는 전체 브라우저 넓이의 100%를 그대로 차지하면 되기에 container의 넓이는 조정하지 않았다. 대신 내부 요소 column의 넓이를 비율값으로 정해주었다.

.container {
	width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.container .column {
    width: 33%;
    border: solid 2px black;
    margin-bottom: 10px;
}
@media (min-width: 540px) and (max-width:720px) {
	.container .column {
    	width: 49%;
    }
    .container .column:nth-child(4) {
        margin-bottom: 10px;
    }   
}
@media (min-width: 320px) and (max-width: 539px) {
    .container {
        box-sizing: border-box;
        width: 100%;
        padding: 0 20px;
    }
    .container .column {
        width: 100%;
    }
    .container .column:nth-child(4),
    .container .column:nth-child(5) {
        margin-bottom: 10px;
    } 
}

어려웠던 내용

1. 저번주 혼자 연습한 tenbyten에서 해결하지 못했던 문제: 이미지 아래쪽 공백 없애는 방법 까먹었었음.

해결방법

1. 이번 주 분량에도 이미지와 아래 문자열 사이 공백 문제가 있었는데 이미지 태그에 vertical-align: middle을 주면 해결된다고 해서 지난주 코드를 수정했다. 이전 영상에서도 나온 적이 있었는데 내가 까먹었던 것이다.ㅠㅠ

소감

오늘은 이전 영상들에서도 배웠던 flexwrap이나 이미지의 아래 공백을 없애는 법 등 실전 팁들을 다시 한 번 상기할 수 있는 시간이었다. 일지를 쓰면서 나름 돌아보긴 하지만, 학문을 공부할 때처럼 실시간으로 필기하는 공부가 아니다보니 일지를 쓸 때도 그날 배운 내용에 대해 빠뜨리는 것이 있었다. 꾸준한 실습을 통해 들은 것을 직접 사용해보는 시간이 많이 필요할 것 같다.