레이아웃 연습하기 / Z 레이아웃

 

# 사람의 눈이 많이 가는데 컨텐츠를 배치:)

: F레이아웃

 

# F레이아웃을 가지고있는 web site많음~

 

요즘 트렌드는 메인에 큰 이미지라던지 큰 동영상이라던지.. 그런것들 배치하는 구조+_+

: Z레이아웃

 

F보다 최근들어 더 많이 만들어지고 있다.

웬만한 트렌드를 반영하는 웹사이트 (특히, 반응형 웹)들은

carousel을 쓰면서 이미지를 크게 배치하고 있다.

 

사람들의 시선을 끌기위해.

 

# 그런데 하나만 배치하기에는 그 공간이 아까우니까...

여러개를 배치할 수 있는 방법으로 버튼형식 -> indicator button.

 

주력하는 아이템 or 프로모션을 할때

최대한 많은 참여를 끌기위해(창출되는 이익을 위해)

상단에 carousel로 배치하고있는것:)

 

 

 

레이아웃을 짤 때,

어떤 레이아웃을 짤건지도 생각해봐야하는데

 

구조를 넣는 방법을 배워보도록 할것!!

 

 

# 이미지포맷중에 유일하게 움직일수잇는 포맷은 gif.

 

 

# GNB

(항상 고정)

 

스크롤을 내려도 항상 보이는

global한 네비게이션 바.

 

# LNB

 

 

[ 레이아웃 연습 ] 

 

# 코딩할때 *전체적으로 구조를 그려놓고 짤것

모니터 화면을기준으로해서 크기를 몇을 잡을지 생각해볼것.

 

 

# 코딩 작업할때, 한번에 가시적으로 보이기 위해서

별표를 많이 넣어서 주석처리하기도 한다.

>>주석처리를 잘할것!(:

 

 

# li직속부모인 ul에 해도 되고 nav에다가 overflow:hidden줘도 상관없다.

-> li의 직속부모는 ul이고 조상은 nav지만 둘중 아무거나 잡아도 상관없다는 것~~

 

# 속성선택값은 대가로로~

# 퍼센트지와 픽셀은 계산이 안되기 때문에 어쩔수 없이

대략적으로 38%정두..!

 

 

# border-radius라는 값은 여기서 75px이 모서리마다 각각 반복되는 것. (즉 4번)

padding이나 margin을 줄때도 네군데를 주는 것처럼 말이다(:

 

하지만, border-radius는 왼쪽 상단 부터 시작해서 시계방향으로

top-left -> top-right -> bottom-right -> bottom-left

순으로 돌아간다.

 

한번에 속기법으로 주는건 한 칸 씩 띄어서 주면 된다.

반지름을 설정할 때에는 왼쪽 상단부터 시작해서 시계방향으로 회전!!

기억할것~ :)

 

# 어떤 수치든, 50%를 주면 정방형 원형!

+ 여기서는 반지름 값이 75px이상만 되면 무조건 원형~

 

 

# margin은 box-sizing에 포함 x

box-sizing에 포함되는 건 보더값이랑 패딩값.

 

여기선 padding값이 총 8퍼센트가 있기때문에

width값을 100%-8%: 92%

91%를 li 4개로 나누면, 23%.

고런식으로 계산해서 넣어주면 된다...!

화면크기에 따라서 길이 가 달라진다.

퍼센트니까.

# 그런데 글씨같은 경우에도 화면크기에따라서 글씨크기가 달라지는 단위가 있다.

(같이 커졌다가 같이 작아졌다가...그리고 height를 여기선 지정하지 않았기 때문에 height도 같이 커졌다가 작아졌다가 함.)

vw : viewport of width 의 약자.

 

# 네비게이션을 이미지로 넣을 경우, 이미지의 크기가 정해진 것을 가지고 배치를 하기 때문에 고정값을 주고 많이 사용하고, 코딩만을 가지고 네비게이션을 짤 경우, 줄었을 경우 안 보이니까 속상.. 그래서 여기서는 픽셀보다는 퍼센트지를 쓰는게 낫다.

 

 

 

# 소수점이 많이 나오면 4자리까지 해주는게 좋다.

 

 

# 고정값이다보니 이미지사이즈는 고정되어있고 걔를 감싸는건 퍼센트지다보니까 화면을 줄이면 이미지가 잘림.

그래서, 우선 첫번째 웹페이지 만들땐 반응형을 안 할거다ㅏㅏㅏ

 

반응형은 간단히 얘기해서, 스타일을 device사이즈에 따라 만든다.

모니터화면에 따라서 스타일을 계속 짜줘야 한다.

스타일을 결국엔 모니터 사이즈에 따라 계속 짜주는게 반응형.

즉, 단순히 얘기하면 노가다❤︎