그럼에도 불구하고

layout 만들기 Ver_5 소스코드 더보기 화면 너비 1220px 초과 section { clear: both; width: 100%; height: 200px; background-color: #bebee8; display: flex; justify-content: space-around; align-items: center; } section>div { width: 15%; margin: 5%; height: 80%; background-color: #9090ed; border-radius: 20px; } 화면 너비 1220px 이하 /* 화면 너비 0 ~ 1200px */ @media (max-width: 1220px) { #wrap { width: 100%; } .bottom-article {..

layout 만들기 Ver_4 width 1220px 초과 width 1220px 이하 /* 화면 너비 0 ~ 1200px */ @media (max-width: 1220px) { #wrap { width: 100%;} section > div { width: 23%;} section > div:nth-child(5n) { display: none;} } section 안에 div 5번째와 10번째를 display: none;으로 만들어 한 줄에 4개씩 표시 width 768px 이하 /* 화면 너비 0 ~ 768px */ @media (max-width: 768px) { #wrap { width: 100%;} section > div { width: 31.333333%;} section > div:nt..

layout 만들기 Ver_3 ※ 화면너비 1260px 초과 ※ 화면너비 1260px 이하 /* 화면 너비 0 ~ 1240px */ @media (max-width: 1260px){ #wrap{ width: 100%;} section:nth-of-type(1) { height: 300px;} section:nth-of-type(2) { height: 300px;} section:nth-of-type(3) { width: 100%; height: 300px;} article { width: 100%; height: 300px;} } 첫 번째 section과 두 번째 section의 높이를 300px로 수정 => aside의 높이가 600px이기 때문에 기존에 section의 높이가 200px 일 때는 se..

layout 만들기 Ver_2 ※ 화면 너비 1220px 초과 width 100%, 전체 영역 차지 ※ 화면 너비 1220px 이하 /* 화면 너비 0 ~ 1200px */ @media (max-width: 1220px){ aside { width: 40%; } section { width: 60%;} article { width: 100%; height: 300px; float: none; clear: both;} } aside 영역이 전체 너비의 40%, section 영역이 전체 너비의 60%를 차지하며, article은 아래로 내려간다. ※ 화면 너비 768px 이하 /* 화면 너비 0 ~ 768px */ @media (max-width: 788px){ aside { width: 100%; } s..