(Front-end) CSS 레이아웃 제대로 잡기

지난 포스팅에 이어서 front-end에 대해서 포스팅 하려고 합니다.

특히 css부분이 많이 어려워서 css관련 강의 듣고 복습을 하다보니 front-end쪽으로만 포스팅을 진행하게 되었습니다.

저도 css가 참 어렵던데요. 여러가지 이유가 있겠습니다만 잘못돼도 에러가 안나는 것이 가장 css를 어렵게 하는 것 같습니다. 잘못되면 뭘 잘못했는지 알려줘야지 안알려주더라구요 ㅎ;;

여하튼 css를 잘 짜기 위해서는 기본이 탄탄해야겠죠? 탄탄하게 해야할 기본이 바로 레이아웃이라고 합니다. (화면의 구조라고 생각하시면 편할 것 같네요)

css를 짜다 보면 종종 레이아웃이 무너지는 경우가 있는데 이는 박스를 잘못 사용했을 확률이 굉장히 높다고 합니다.

여기서 박스란 html요소를 뜻하고 css에서는 모든 html 요소를 박스로 봅니다.

content box는 내용들의 크기고 border box는 박스 선의 크기입니다. padding box는 border와 content사이의 크기를 뜻하고 margin box는 다른 요소와의 거리를 의미합니다. box는 매우 중요하니까 위 그림을 잘 숙지해야 합니다. 사진 출처: 멋쟁이 사자차럼(유니라이언)

박스의 크기 또한 중요합니다. 

박스의 전체 width, height는 위 그림의 공식대로 정해집니다. box-sizing을 기본값으로 설정해두면 크기가 설계한 대로 안 나오는 경우가 많은데 모두 위 공식 때문입니다. border-box으로 속성값을 변경해주면 원하는 크기의 box를 가질 수 있을 것 입니다.

그 박스의 속성은 block, inline, inline-block, flex가 있고 각각 작동하는 방식이 다릅니다. 나중에는 flexbox만 쓸 것 같습니다.

1. block(길막) : (코드 상) 자신의 아래에 있는 요소들이 (화면 상) 자기 옆으로 올라오지 못하게 길막하는 요소입니다. 쌓기나무처럼 하나하나 쌓입니다.

 -별도의 width값을 주지 않았을 때는 부모의 content-box의 width만큼 늘어난다.

 -별도의 width값이 주어졌을 때는 남은 빈공간을 margin으로 채워버려서 다음 요소가 위로 못 올라오게 한다.

 -별도의 height값을 주지 않았을 때 자신의 자식들의 크기 합만큼 높이를 가진다.

요정도의 특징을 기억하면 될 것 같습니다.

2. inline(흐름) : 블록과 반대로 (코드 상)아래 요소를 막지 않고 (화면 상)옆으로 올라오게 합니다. width가 꽉 차면 다음 줄로 넘어가서 또 다시 흐릅니다.

 -블록:인라인 = 면(영역):선(흐름)

 -width, height, padding-top(bottom), margin-top(bottom)은 인라인 요소에서 적용이 안됩니다.

3. inline-box(짬뽕)

 

 -인라인에서 쓸 수 없었던width, height, padding-top(bottom), margin-top(bottom)사용가능 그러면서도 옆으로 흐르는 성격을 가지고 있습니다.

4. flexbox

 솔직히 초심자의 경우 모든 요소를 flex box로 사용하면 될 것 만 같은 생각이 들 정도로 굉장합니다 ㅎㅎ

 - 부모 요소에 display: flex 선언해주면 모든 자식 요소는 flex box가 됩니다.

 - 정렬할 방향을 정해줍니다.

  자식 요소를 가로로 배치하고 싶으면 부모에게 flex-direction: row(기본값), 세로면 :column을 주면 됩니다.

 - flex-wrap: 로 요소의 크기를 선언한 대로 유지할 것인지 아니면 알아서 조정시킬 것인지 정할 수 있습니다.

기본 값은 nowrap으로 알아서 조정시키는 것이고 wrap을 줘서 크기를 유지시킬 수 있습니다.

사진 출처: 멋쟁이 사자처럼(유니라이언)

-축

main axis를 기준으로 정렬하려면 justyfy-content: ceter,flex-start, flex-end, space-between(간격 똑같이 정렬), space-around(margin값이 같게 정렬)

cross axis를 기준으로 정렬하려면 align-items:  (item들을 통채로 옮김),  align-content: (개별 item을 각각 옮김)를 이용해서 사용할 수 있습니다.

-order : (순서)

order속성을 사용하면 코드 상에 요소 순서를 1,2,3으로 바꿀 수 있습니다. 직접 해보니까 놀랍더군요.

p.s 반응형 웹사이트 만들 때 사용되는 특성들

화면 사이즈가 다른 디바이스별로 각각 다르게 화면을 띄워주는 것

1. viewport meta tag

 head요소 내부에 <meta name="viewport" content="width=device-width, initial-scale=1"> 적어주기

 그리고 요소들 height 크기 줄 때 100vh등 vh(viewport height)로 줌 화면 전체가 100vh

2. media query

  

 *css에서 같은 요소에게 여러줄로 선언을 한다면 맨 나중에 선언된 코드가 앞의 코드들을 덮어버림

3. grid system

---

---

---

---

정렬하는 방법은 여러가지가 있지만 flex box를 안 후에는 다른 방법들은 사용하기 싫더라구요 ㅋㅋ 그래도 강의들은 거 정리에 의미가 있으니까 정리만 해두겠습니다.

\float   float: left(right);

배우는 이유: 가로배치하기 위해서

1. 작동하는 방식

  위에 붕 띄우는 것

2. 특징

 -자식을 float하면 집 나간 자식 취급 - 더 이상 자식이 아님

 -옆에 있던 요소들이 옆으로 이동함

 -float당한 요소는 무조건 block으로 변경됨 but 길막은 하지못함 별도의 width주지 않으면 자식 width가지고 여백에 margin을 가지지 않음

 -인라인 요소는 float된 것이 있어도 알 수 있음

3. float 후 무너진 레이아웃 바로 잡기

 overflow:hidden를 부모에게 입력하면 float한 자식을 다 찾음

 **clearfix: 난 더이상 float의 영향을 받지 않을 것이야 라고 선언하기 => clear: left; 선언해주면 자기 위에 float된 요소 있으면 인식하고 밑으로 내려감 

 가상요소 만들기 부모요소 ::after{ content=''} 선언해주면 가상의 마지막 자식을 생성하고 이 가상의 자식에 clear를 주면 다른 float된 자식들을 다 찾을 수 있음

\position :요소를 위치시키는 기능

float는 쥬르르 옆으로 세워 둔 느낌, position은 꽝 박아두는 느낌???

 -종류

   *position static: 모든 요소들의 기본 position값인 static => top,bottom,left,right값 줘도 변화 없음

   *position relative: 자신의 원래 상태를 기억함, 자기가 있던 곳을 기준으로 이동함

   *position absolute: float가 집나간 자식이라면 absolute는 버린 자식 // 기준점을 새로 정할 수 있음 absolute인 요소는 position이 static이 아닌 부모or조부모 요소를 기준점으로 함

   *position fixed: absolute와 동일 기준점이 viewport(보이는 화면 전체)인 점만 다름

 

   position 속성값을 주고 offset값(left,right중 하나와 top,bottom중 하나를 사용)으로 이동시킴