레이아웃02
두번째 유형으로 이번에도 단순한 구조입니다.
Float방식 레이아웃
float 방식 레이아웃은 구버전 익스플로어 등과의 호환을 위해 사용한다.
float는 속성이 상속되어 float 속성을 사용한 요소의 다음 요소에게 영향을 미치며,
이전 요소를 밀고 올라오게 되는데 clear: both로 해결 가능하지만, 복잡한 구조의 경우 한계가 있기 때문에
더 나은 방법으로 부모 요소에 overflow :hidden을 주는 방법이 있다.
{
* {
margin: 0;
padding: 0;
}
body {
background-color: #E8F5E9 ;
}
/* 블록구조를 가운데정렬 할때 width값과 같이 margin 0 auto 주면됨. */
#wrap {
width: 1200px;
margin: 0 auto;
}
#header {
width: 100%;
height: 100px;
background-color: #C8E6C9;
}
#nav {
width: 100%;
height: 100px;
background-color: #A5D6A7;
}
#main {
width: 100%;
overflow: hidden;
}
#aside {
width: 30%;
height: 780px;
background-color: #81C784;
float: left;
}
#section{
width: 40%;
height: 780px;
background-color: #66BB6A;
float: left;
}
#article {
width: 30%;
height: 780px;
background-color: #4CAF50;
float: left;
}
#footer {
width: 100%;
height: 100px;
background-color: #43A047;
}
/* 미디어 쿼리 */
/* 오류유형01 미디어 쿼리 할때 자식들도 퍼센트로 바꿔주기 */
@media(max-width : 1300px){
#wrap{
width: 96%;
}
}
@media(max-width : 768px){
#wrap{
width: 100%
}
#aside {
width: 30%;
height: 780px;
}
#section {
width: 70%;
height: 780px;
}
#article {
width: 100%;
height: 150px;
}
}
@media(max-width : 480px){
#wrap{
width: 100%
}
#aside{
width: 100%;
height: 200px;
}
#section {
width: 100%;
height: 430px;
}
}
Flex방식 레이아웃
Flex 방식 레이아웃은 Flex는 레이아웃 배치 전용 기능으로 고안 되었다.
그래서 레이아웃을 만들 때 딱히 사용할게 없어서 쓰던 float나 inline-block 등을 이용한 기존 방식보다 훨씬 강력하고 편리한 기능들이 많은 편이다.
{
* {
margin: 0;
padding: 0;
}
body {
background-color: #E8F5E9 ;
}
/* 블록구조를 가운데정렬 할때 width값과 같이 margin 0 auto 주면됨. */
/* flex시 랩은 width 값 px로냅둠 */
#wrap {
width: 1200px;
margin: 0 auto;
}
#header {
height: 100px;
background-color: #C8E6C9;
}
#nav {
height: 100px;
background-color: #A5D6A7;
}
#main {
display: flex;
}
#aside {
width: 30%;
height: 780px;
background-color: #81C784;
}
#section{
width: 40%;
height: 780px;
background-color: #66BB6A;
}
#article {
width: 30%;
height: 780px;
background-color: #4CAF50;
}
#footer {
height: 100px;
background-color: #43A047;
}
/* 미디어 쿼리 */
/* 오류유형01 미디어 쿼리 할때 자식들도 퍼센트로 바꿔주기 */
@media(max-width : 1300px){
#wrap{
width: 96%;
}
}
@media(max-width : 768px){
#wrap{
width: 100%;
}
/* flex-wrap 사이즈 맞춰서 정렬 */
#main{
flex-wrap: wrap;
}
#aside {
width: 30%;
height: 630px;
}
#section {
width: 70%;
height: 630px;
}
#article {
width: 100%;
height: 150px;
}
}
@media(max-width : 480px){
#aside {
width: 100%;
height: 200px;
}
#section {
width: 100%;
height: 430px;
}
}
Grid방식 레이아웃
레이아웃을 구현할 때 Flex 방식을 사용하면 간단하게 일을 처리할 수 있지만, 복잡한 구조의 레이아웃을 짤때는 그리드방식 레이아웃이 좀 더 유리하다.
그리드 방식의 값들은 부모 요소에서 설정하면 자식요소에 적용된다.
{
* {
margin: 0;
padding: 0;
}
body {
background-color: #E8F5E9 ;
}
/* 블록구조를 가운데정렬 할때 width값과 같이 margin 0 auto 주면됨. */
/* flex시 랩은 width 값 px로냅둠 */
#wrap {
width: 1200px;
margin: 0 auto;
}
#header {
height: 100px;
background-color: #C8E6C9;
}
#nav {
height: 100px;
background-color: #A5D6A7;
}
#main {
display: grid;
grid-template-columns: 30% 40% 30% ;
grid-template-rows: 780px;
}
#aside {
background-color: #81C784;
}
#section{
background-color: #66BB6A;
}
#article {
background-color: #4CAF50;
}
#footer {
height: 100px;
background-color: #43A047;
clear: both;
}
/* 미디어 쿼리 */
/* 오류유형01 미디어 쿼리 할때 자식들도 퍼센트로 바꿔주기 */
@media(max-width : 1300px){
#wrap {
width: 96%;
}
}
@media(max-width : 768px){
#wrap{
width:100%;
}
/* display :grid는 안갖고와도됨 */
#main {
grid-template-areas:
"aside section"
"article article";
grid-template-columns: 30% 70% ;
grid-template-rows: 630px 150px;
}
#aside {
grid-area: aside;
}
#section{
grid-area: section;
}
#article {
grid-area: article ;
}
}
@media(max-width : 480px){
#main {
grid-template-areas:
"aside"
"section"
"article";
grid-template-columns: 100%;
grid-template-rows: 200px 430px 150px;
}
#aside {
grid-area: aside;
}
#section{
grid-area: section;
}
#article {
grid-area: article ;
}
}
댓글