악덕고용주의 개발 일기

[    float 속성    ]

float 속성은 본래 이미지 태그와 글단락이 같이 있을 때 한 줄에 같이 나오기 위해 주로 사용되었는데

그뿐만 아니라 레이아웃을 잡을때도 많이 이용되게 되었다. 하지만 최근에는 flex가 도입되면서 점차 float를 이용한

레이아웃을 잡는 방식은 줄어들고 있는 추세이다.

float:left

float:right

처럼 사용해서 태그가 배치될 위치를 지정하게 된다.

아래의 예제에서는 본래 이미지 태그와 p태그는 block 속성에 의해 이미지 태그가 오고 그 아래에 문단 태그가 와야 정상이지만

이미지에 float:right를 줌으로서 img는 오른쪽으로 배치가 되고 문단이 왼쪽으로 배치되었다.

하지만 그 이후에 또 나오는 p태그(id="clearAdjustP")의 경우는 이러한 float의 영향을 배제시키고 싶기 때문에

float를 해제하는 clear 속성을 이용해서 clear:both해주면 float:left든 float:right든 다 해제한다는 의미가 되기 때문에

정상적으로 이미지 태그 아래에 출력되게 되는 것을 알 수 있다.

[    반응형 웹을 만드는 Media Query    ]

화면 크기에 따라 반응하는 웹을 만드는데 필요한 media query에 대해 학습합니다.

@media (){

} 라는 구조를 가지고 있는대요

- @media(width:500px){

width가 500px일 때 지정할 속성을 지정하게 됨.

}

- @media(max-width:500px){

최대 500px까지 즉 0~500px까지를 의미

}

- @media(min-width:500px){

최소 500px 즉 500px 이상을 의미한다.

}

만약 500 ~ 600을 지정하고 싶다면?

cascading을 주의해야한다. 나중에 쓴 것이 우선순위가 더 높다는 것에 유의!

@media(max-width:600px){

background-color:red;

}

@media(max-width:500px){

background-color:blue;

}

이렇게하면 500 ~ 600 px까지는 red가 적용되고 500이하가 되면 blue가 적용된다.

만약 두개의 순서를 바꿔서 쓰면? 600px이하면 0픽셀이 될때까지 red가 나오게 된다. cascading에 의한 우선순위때문에

이점을 유의해서 작성하자.

또한, 모바일 기기에서도 반응형이 잘 적용될 수 있도록 다음의 meta 태그를 넣도록 하자.

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

Flex로 만든 layout에 Media Query를 적용해 보기

아래는 모바일 화면(500px 보다 작아졌을 때) section 영역이 수직으로 main nav aside 순으로 보이고

기존에 nav와 aside가 가지고 있었던 border를 없애는걸 적용한 것이다.

따라서, section의 flex-direction:column으로 바꾸고 nav와 aside의 border를 border:none으로 한 다음에

flex의 order 속성을 이용해서 순서를 지정해주면 된다.

[    Flex    ]

기존의 table이나 div를 쓰고 position Float를 사용하던 방식에서 벗어나 Flex를 이용한 레이아웃을 구성하는 방법에 대해서알아봅시다.

1. flex 기본(display:flex, flex-direction, flex-basis) & flex-grow, flex-shrink 속성

2. 위에서 공부한 속성을 활용해서 대표적인 레이아웃 디자인인 Holy Grail Layout을 구성해보도록 하자.

이러한 구조를 만들어 볼 건데

먼저, (Header), (Nav, Main, AD), (Footer)로 구성되어 있다.

크게 태그로

1) header, section, footer 시멘틱 태그로 구성하고 section에는 nav, main, aside(광고부분) 시멘틱 태그를 배치한다.

<div class="container">

<header>헤더</header>

<section>

<nav></nav>

<main></main>

<aside></asdie>

</section>

<footer>푸터</footer>

</div>

2) 먼저 Flex를 사용하기 위해 가장 부모인 container에 플렉스를 사용하겠다고 display:flex를 지정한다.

그리고, 그 자식들은 수직으로 배치되어야 함으로 flex-direction:column을 지정해 준다.

3) 헌데 section 태그 내의 자식들(nav,main,aside)는 가로로 배치되어야한다.

따라서, 그들의 부모인 section에 flex를 사용하기 위해 display:flex를 지정하고, flex-direction:row를 지정한다.

4) 마지막으로, 화면을 줄여도 nav부분과 aside부분은 줄어들지 않기 위해서 flex-shrink를 지정할 건데

지정하지 않을 경우 flex-shrink:1 로 되어있다. 따라서 나머지 부분은 그대로 두고 

nav와 aside만 flex-shrink:0 을 지정해 창을 줄여도 그 크기는 줄어들지 않도록 설정하도록 한다.

또한 nav와 aside는 일정 크기를 가지도록 flex-basis:150px; 정도를 할당하도록 하자.

5) 기타사항

만약, section 태그 내에서 지금은 nav, main, aside 순으로 되어 있는데 이 순서를 main nav aside로 바꾸고 싶은 경우는 어떻게 할까

태그의 위치를 바꿀 수도 있지만 order라는 속성을 사용하면 된다.

main{

order:0;

}

nav{

order:1;

}

aside{

order:2;

}

로 지정하면 된다.

Ex)