그럼에도 불구하고

max-( width / height )과 min-( width / height )의 여러 쓰임새에 대해 알아보자 [ max- width / height ] max-width와 max-height는 어떤 요소의 최대 너비와 높이값을 설정하는 속성이다. 반응형 웹 디자인에서 화면에 따라 스타일을 적용할 때 자주 사용한다. ※ max-width 속성 어떤 요소의 최대 너비를 지정하며, 요소의 너비값이 max-width 너비값보다 커지는 것을 방지한다. 즉, max-width는 width 속성값을 무효화시킨다. 예를 들어 이미지 가로 너비가 500px 일 때, max-width: 400px으로 설정하면 400px 이하로만 이미지가 보인다. ※ max-height 속성 요소의 최대 높이를 지정한다. max-he..

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..