HTML CSS 8일 완성하기 : 3일차 CSS Layout

 

 

 

 

 

 

 

 

 

3일 차! 내가 듣는 강의는 여기

사실 강의는 어제 다 들었는데 ... 일정 때문에 늦게 듣기 시작해서 포스팅을 못하고 잤다 >_<...

 

섹션 4는 CSS 레이아웃에 관한 내용이었다.

얼른 기록하고 다음 강의 듣고 또 기록을 ... 오늘은 바쁘다! 

그럼 시작! 🧑‍💻

 

 

 

 

---

 

 

 

 

CSS Layout ?

텍스트, 이미지, 기타 콘텐츠들이 웹페이지에 정렬되고 배치되는 것을 말한다.

페이지에 시각적인 구조를 부여하고 -> 그 구조에 콘텐츠들을 넣는 것!

 

 

레이아웃을 정하는 세 가지 방법

레이아웃을 정하는 방법은 총 세 가지가 있다.

첫 번째, float

두 번째, flex box

세 번째, grid

로 모두 block box인 요소에 display 속성을 추가하여 사용할 수 있다.

 

css의 레이아웃은 css의 뼈대를 잡는 것과 비슷하다고 느꼈다.

뼈대라면 더더욱 잘 알고 있어야 하는 법 ! 

망각곡선을 다시 끌어올리기 위해 (ㅎㅎ) 세 가지 방법에 대해 기록하고자 한다.

 

 

 

 

---

 

 

 

float

MDN

float는 옛날에 css 레이아웃을 구성할 때 사용하던 방법으로 지금은 flex box, grid에 의해 대체되었다고 봐도 무방하다.

하지만 float로 만들어진 옛 웹페이지들을 마주할 때 당황하지 않기 위해서는 기본은 알아둘 필요가 있다.

 

1. 요소에 float를 적용하면 신기한 일이 벌어진다.

요소가 페이지의 흐름에서 벗어나 버린다.

저번 일차에 공부했던 absolute 처럼!

 

하지만 absolute와 다른 점이 분명히 존재한다.

컨테이너 요소 위에 겹쳐지기도 한다는 점은 같지만,

바로 텍스트 같은 인라인 요소들이 float 상태가 된 요소의 주변을 감싼다는 점이다. 

 

absolute로 position을 설정하면 그 요소는 어디에든 위치할 수 있다. 

어떤 텍스트 위에도, 이미지 위에도, 기준이 되는 부모요소의 밖에도 위치할 수 있다. 겹치더라도 상관없다. 

float 요소는 그렇지 않다 !

 

2. 컨테이너 요소(box)는 float 요소를 인정해주지 않는다.

정확히 말하자면, 컨테이너 요소는 float 요소에 맞춰 높이를 조정해주지 않는다.

인라인 요소들은 float 요소 주변을 떠돌지만 컨테이너 요소는 그렇지 않다.

 

예를 들어보자.

- container 안에는 h1 요소와 p 요소가 있다. 

- h1 요소와 p 요소 모두에게 float 속성을 부여한다.

- container 안의 모든 요소가 float 속성이 부여되었으므로 원래대로라면 높이나 너비를 맞출 요소가 존재하지 않는 것처럼 보인다.

- container는 당황하여 사라진다 ... (정확히는 존재하지만 사라진 것처럼 보인다. 안에 요소가 하나도 없기 때문에!)

 

이 상태를 고치려면 어떻게 해야 할까?

바로 clear 속성을 이용해야 한다 ! MDN

 

clear 속성은 주위를 감싸는 요소들이나 겹쳐진 컨테이너 요소들을 밑으로 내려 정리해 준다.

예로 든 상황을 다시 한번 가져오자.

 

- container 안에는 float 요소들만 남은 상황. 

- 새로운 div 를 만들어 container의 가장 마지막 자식 요소로 두고, clear 속성을 부여할 class name을 clear로 정한다.

- .clear { clear: both; } 를 지정한다.

 

그럼 놀랍게도 ! 

당황해서 사라졌던 container가 돌아온 것을 확인할 수 있다.

 

바로 float 요소들 밑에 자리 잡은 빈 div가 clear 속성을 이용하여 float 요소들 밑으로 내려오고

그 높이와 너비까지 자동으로 계산하여 container가 돌아오기 때문이다.

 

주의할 점은 높이와 너비 모두 빈 div 를 감지하는 것이기 때문에

높이는 결국 float 요소와 같겠지만 (빈 div가 float 요소 바로 밑에 붙어있으므로 0px인 상태로)

너비는 width를 따로 지정하지 않았다면 div 특성상 페이지 한 줄 전체라는 점이다.

 

문제가 모두 해결된 것처럼 보이지만! 이 방법에도 문제가 있다.

html 코드가 이 div 요소들로 인하여 어지러워질 수 있다는 문제 같은 것들. 아주 짧은 html 코드면 모르겠으나 현실은 녹록지 않은 법...

 

그래서 나온 방법이 바로 clearfix hack . 

반가운 얼굴인 의사 요소(가상 요소) ::after가 등장한다.

 

가상 요소를 만들 클래스 이름을 설정하고

float 요소가 담긴 container에 이 클래스를 추가하는 방법이다.

 

당연히 이 css 클래스에는 의사 요소를 사용하고, clear 속성을 사용한다.

.clearfix::after {
  content: "";
  clear: both;
  display: block;
}

의사 요소(가상 요소)는 content가 필수이고, float 속성 해제를 위해 clear속성을 사용했으며, 이 요소는 div와 같은 block요소여야 한다. 

이렇게 만들어두고 원하는 container 요소마다 클래스 이름을 추가해 주면 된다! 

하면 할수록 의사 요소는 정말 편리한 것 같다 🧐

 

 

 

 

---

 

 

 

Flexbox 

MDN

1차원 구조를 짜는 데에 안성맞춤이다.

간단한 구조를 만들 때 정말 효과적!

 

먼저 기준이 되는 공간 flex container 를 찾고

그 안의 item 들 즉, flex items 를 찾고 나면 그다음은 정말 일이 쉬워진다.

 

container에 사용하는 속성, item에 사용하는 속성은 정말 여러 가지가 있는데

그중 수평, 수직 정렬을 담당하는 justify-content / align-items, alingn-self ... 같은 것들은 몇 번 사용해 봤기 때문에 넘어가고

많이 사용되지만 나는 별로 사용해 본 적이 없는 속성을 위주로 기록해두려 한다.

 

1. gap 

container 안의 item 들 간의 gap(간격) 을 만들어준다. 

 

2. flex

item 들에 쓰는 속성으로,

- flex-grow
- flex-shrink
- flex-basis

이 세 개를 모두 함께 사용할 수 있는 축약형으로 flex를 사용한다.

 

flex-grow (MDN) 기본값 0

item 이 container 안 공간에서 어느 정도의 공간을 할당받을 것인지 정하는 속성.

item 들을 합친 너비 혹은 높이보다 container가 커다래서 공간이 남을 때 유용하게 사용할 수 있는 속성이다.

이 속성을 사용하지 않으면 빈 공간이 그냥 텅 .. 하고 보이는데 (기본값인 상태)

사용한다면 빈공간 없이 알아서 계산해 주고 그에 따라 채워진다! 

더 이상 하나하나 width 계산을 하지 않아도 된다는 사실 ^_____^v

 

flex-shrink (MDN) 기본값 1

grow 가 자라나게 했다면 shrink는 반대로 줄어들게 한다.

container 보다 item의 크기가 커서 삐져나오는 걸 경험한 적 있을 것이다.

이걸 방지해 주는 게 바로 flex-shrink!

 

기본값은 1로 삐져나오지 않도록 기본적으로 설정되어 있다.

반대로 삐져나오게 하고 싶다면? 0으로 설정하면 된다.

혹은 더 작게 축소하고 싶다면 더 큰 수로 설정해 주면 된다!

 

flex-basis (MDN) 기본값 auto

이 속성은 item 의 초기 크기를 지정한다.

width 를 쓰면 되는 거 아닌가? 싶지만 이 속성의 짱인 점은 유연한 박스를 만들어준다는 데에 있다.

width 를 지정했을 때 콘텐츠가 width보다 크면 다음줄로 넘어가거나 하면서 원하는 대로 스타일링이 어려워지곤 한다.

하지만 flex-basis 속성은 유연하게 박스 크기를 변경한다. 안의 요소가 더 커지면 그만큼 크기도 자동 변경!

 

이 셋을 축약형 flex에 다 같이 쓴다.

그중에서도 flex: 1;이라고 하면 이..이게 뭐야 라는 상황이 자주 나와서 따로 적어둔다.

flex: 1; /* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */

 

으아악 솔직히 다른 속성들은 그렇구나 그렇구나 하겠는데 이 세 속성 이해가 참 어렵다.

역시 많이 만들어보는 수밖에는 없을 것 같다.

 

 

 

---

 

 

 

Grid

MDN

flexbox가 간단한 구조, 1차원 구조에 적합했다면

grid는 보다 복잡한 구조, 2차원 구조에 적합한 레이아웃 방법이다.

 

강의를 보며 몇 번 따라 만들어보니 커다란 박스 구조에는 grid를 

박스 안 작은 콘텐츠들 구조에는 flexbox를 쓰는 게 좋을 듯싶다... 물론 더 만들어봐야 확실해지겠지만.

강의자도 강조하는 부분은 flexbox만 쓴다!!!! grid만 쓴다!!! 라고 고집하는 게 아니라 

flexbox랑 grid를 적절히 섞어가며 쓰는 게 best 라고 한다. 

 

flexbox와 마찬가지로 기준이 되는 공간인 grid container와 grid item을 구분해야 한다.

그리고 모든 열과 행 - 2차원적인 배치를 정해주면 된다.

 

1. grid-template-columns👉 / grid-template-rows👇

column

row

column과 row.

grid 아이템의 기본적인 열과 행 크기를 정해주는 속성이다.

줄마다 ~px 식으로 정해주거나 fr을 사용하면 된다.

물론 px 값과 fr을 섞어서 사용할 수도 있다. 

fr이란 비율로 이해하면 쉽다!

 

예를 들어,

grid-template-columns: 1fr 2fr; 이렇게 정했다면 첫 번째 열은 1의 비율 두 번째 열은 두 배인 2의 비율로 정한다는 뜻.

 

2. column-gap / row-gap 

MDN

flexbox에서 봤던 gap과 같다.

2차원 구조에 특화된 방법이라 그런지 열 / 행 각각 나눠서 gap 을 지정할 수 있다.

이해는 쉽다! 그저 flexbox는 그냥 gap. grid는 열 / 행 각각의 gap 이 있다는 걸 기억하자.

 

3. grid-column / grid-row

column

row

display: grid; 후 각각의 template 설정을 끝내면 각각의 박스 요소들이 n x n 형태로 정갈하게 모인다.

하지만 어떤 박스는 한 줄을 다 차지하게 만들고 싶고,

어떤 박스는 한 줄의 반을 차지하게 만들고 싶다면?

혹은 세로로 처음부터 끝까지를 차지하게 하고 싶다면 ?

그럴 때 사용하는 게 바로 이 두 속성이다.

 

grid item들에 부여하는 속성으로 열과 행 각각 사용하면 된다.

 

예를 들어 

1. 너비가 3인 박스에 너비가 1인 아이템들이 한 줄로 모여있다.

2. 그럼 한 줄에 박스가 세 개 같은 크기로 존재할 것이다.

3. 그런데 갑자기 첫 번째 박스를 두 번째 박스 너비가 끝나는 곳까지 늘리고 싶다.

4. grid-column: 1 / 3; 을 했더니 멋지게 바뀌었다!

 

여기서 헷갈리는 건 저 안에 어떤 숫자를 넣어야 내가 원하는 스타일이 만들어질까? 인데

이때 크롬의 검사 기능을 켜서 확인하면 좋다.

조금 응용해서 박스의 끝까지 꽉 차게 만들고 싶다면 -1 을 넣는다. 같은 것도! 검사 기능을 켜서 확인하면 아주 좋다. 크롬 짱.

 

지금까지 제대로 공부했다고 생각한 게 flexbox 뿐이라 flexbox로 모든 것을 구현하려고 했었는데

이번기회를 통해 grid의 엄청남을 알고 써먹을 수 있게 되어 기쁘다 >_< 마구마구 써먹어줘야지 .. 껄껄 

 

 

 

 

---

 

 

 

 

📌 html 초기화 팁!

저번에는 *(범용 선택자)를 이용해 margin:0; padding:0; 으로 css를 초기화하고 시작하는 팁을 적어두었다.

이번에는 똑같이 * 선택자 안에 넣어 초기화를 돕는 box-sizing을 기록해 둔다. 

 

box-sizing (MDN)

box model의 특징은 기본적으로 구성 요소의 너비와 높이를 자동 계산하여 공간을 알맞게 짜준다는 점이다.

우리가 어떤 요소의 width를 정해준다 해도 최종 width와는 다를 수 있다.

왜냐하면 padding, border 때문이다.

 

기본적으로 최종 너비는 content(내가 설정한 width 값) + padding + border 의 값이다.

그래서 요소가 컨테이너 요소를 비집고 나오는 등 원하는 스타일링이 안 나와 곤욕을 치를 때가 있다.

그럴 때 사용하는 게 바로 box-sizing 이라는 속성이다.

 

box-sizing: border-box; 를 설정하면

content 뿐만 아니라 padding, border 까지 모두 합쳐진 상태가 기본 값이 된다(더이상 설정한 width보다 커지지 않는다는 뜻!!)

꼭 초기화 때 같이 사용해서 생각지도 못한 상황을 줄이도록 해보자! 👏

 

 

 

 

 

 

---

 

 

 

 

 

3일 차 후기 🍔

1. float가 ... 솔직히 말해서 정말 어려웠다. 

무슨 말인지도 잘 이해가 되지 않았고 ... flex box, grid를 만든 사람에게 감사함에 절을 하고 싶을 정도 ... 😩

근데 정말 놀랍게도 ... 어제 뭐라는 거야??라고 들었는데 정리하면서 이거 저거 찾아보고 내 언어(?)로 정리해 두니까 강의에서 설명해 준 기초상식(?) 정도까지는 무난하게 이해가 된다는 점 !!!!! 정말 신기하고 좋은 경험이다. 👏

매번 적고 있지만 역시 기록의 중요성!! 그리고 그냥 따라 적는 게 아니라 내가 이해하기 가장 쉽게 정리하는 게 중요하다는 것!

 

2. 시간 분배

시간이 오래 걸릴 것 같으면 당연히 더 빨리 시작하거나 더 빨리 시작할 수 없다면 그전에 조금이라도 더 해두려는... 그런 마음가짐. 실행력. 아주 중요하구나 새삼 느꼈다. 오늘은 그래도 나름 빨리빨리 시작했는데 벌써 두 시가 가까워진다는 게 믿을 수가 없다. 블로그에 정리하는 게 생각보다 시간이 많이 걸리니까 그걸 잘 생각해서 하루 일정을 짜야겠다.