부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 3-5-2 강의 정리

[1] 강의

웹 프로그래밍(풀스택)

3. CSS - FE

5) Element가 배치되는 방법(CSS layout)-2

 

[2] 개념 정리

엘리먼트가 배치되는 방식
엘리먼트를 화면에 배치하는 것을 layout 작업이라고도 하고, Rendering 과정이라고도 합니다.
편의상 우리는 배치라고 할 겁니다.
기본 엘리먼트는 위에서 아래로 배치되는 것이 기본입니다.
하지만 웹사이트의 배치는 다양하게 표현 가능해야 하므로, 이를 다양한 방식으로 배치할 수 있도록 다양한 속성을 활용합니다.
중요하게 이해해야 할 속성은 다음과 같습니다.

display(block, inline, inline-block)
position(static, absolute, relative, fixed)
float(left, right)

이 속성을 중심으로 엘리먼트의 배치를 이해할 겁니다.

 

엘리먼트가 배치되는 방식 - (display:block)
display속성이 block이거나 inline-block인 경우 그 엘리먼트는 벽돌을 쌓든 블록을 가지고 쌓입니다.

<div>block1</div>
<p>block2</p>
<div>block3</div>

 

엘리먼트가 배치되는 방식 - (display:inline)
display 속성이 inline인 경우는 우측으로, 그리고 아래쪽으로 빈자리를 차지하며 흐릅니다.
높이와 넓이를 지정해도 반영이 되지 않습니다.

<div>
  <span>나는 어떻게 배치되나요?</span>
  <span>좌우로 배치되는군요</span>
  <a>링크는요?</a>
  <strong>링크도 강조도 모두 좌우로 흐르는군요</strong>
  모두다 display속성이 inline인 엘리먼트이기 때문입니다.
</div>

 

엘리먼트가 배치되는 방식 (position:static, relative, absolute)
엘리먼트 배치가 순서대로만 위아래로 또는 좌우로 흐르면서 쌓이기만 하면, 다양한 배치를 하기 어렵습니다.
position 속성을 사용하면 상대적/절대적으로 어떤 위치에 엘리먼트를 배치하는 것이 수월합니다.

1. position 속성으로 특별한 배치를 할 수 있습니다.
position 속성은 기본 static입니다.
그냥 순서대로 배치됩니다.

2. absolute는 기준점에 따라서 특별한 위치에 위치합니다.
top / left / right / bottom 으로 설정합니다.
기준점을 상위엘리먼트로 단계적으로 찾아가는데 static이 아닌 position이 기준점입니다.

3. relative는 원래 자신이 위치해야 할 곳을 기준으로 이동합니다.
top / left / right / bottom로 설정합니다.

4 fixed는 viewport(전체화면) 좌측, 맨 위를 기준으로 동작합니다.

 

엘리먼트가 배치되는 방식 (margin:10px)
margin으로 배치가 달라질 수 있습니다.
margin은 위 / 아래 / 좌 / 우 엘리먼트와 본인 간의 간격입니다.
따라서 그 간격만큼 내 위치가 달라집니다.


엘리먼트가 배치되는 방식 (float:left)
float 속성으로 원래 flow에서 벗어날 수 있고 둥둥 떠다닐 수 있습니다.
일반적인 배치에 따라서 배치된 상태에서 float는 벗어난 형태로 특별히 배치됩니다.
따라서 뒤에 block엘리먼트가 float 된 엘리먼트를 의식하지 못하고 중첩돼서 배치됩니다.
float의 속성은 이런 특이성 때문에 웹사이트의 전체 레이아웃 배치에서 유용하게 활용됩니다.

 

엘리먼트가 배치되는 방식 (box-model)
블록 엘리먼트의 경우 box의 크기와 간격에 관한 속성으로 배치를 추가 결정합니다.
margin, padding, border, outline으로 생성되는 것입니다.
box-shadow 속성도 box-model에 포함지어 설명할 수 있습니다.
box-shadow는 border 밖에 테두리를 그릴 수 있는 속성입니다.

엘리먼트의 크기
block엘리먼트의 크기는 기본적으로는 부모의 크기만큼을 가집니다.
예를 들어, width:100%는 부모의 크기만큼을 다 갖는 것과 같습니다.

 

box-sizing과 padding
padding 속성을 늘리면 엘리먼트의 크기가 달라질 수 있습니다.
box-sizing 속성으로 이를 컨트롤 할 수 있습니다.
box-sizing 속성을 border-box로 설정하면 엘리먼트의 크기를 고정하면서 padding 값만 늘릴 수 있습니다.

layout 구현방법은?
전체 레이아웃은 float를 잘 사용해서 2단, 3단 컬럼 배치를 구현합니다.
최근에는 css-grid나 flex 속성 등 layout을 위한 속성을 사용하기 시작했으며 브라우저 지원범위를 확인해서 사용하도록 합니다.
특별한 위치에 배치하기 위해서는 position absolute를 사용하고, 기준점을 relative로 설정합니다.
네비게이션과 같은 엘리먼트는 block 엘리먼트를 inline-block으로 변경해서 가로로 배치하기도 합니다.
엘리먼트안의 텍스트의 간격과 다른 엘리먼트간의 간격은 padding과 margin 속성을 잘 활용해서 위치시킵니다.

[3] 강의 정리

  CSS 레이아웃 배치에 대해서 오늘은 float. 그리고 그 외에 다른 것들 몇 가지를 한번 알아보도록 하겠다. float 속성은 기본적인 엘리먼트 배치. 예를 들어서 display:block이나 inline도 마찬가지다. 또는 position:static인 경우에는 그냥 순서대로 쌓이게 된다. 우리가 정해둔 엘리먼트들이 순서대로 쌓이고 오른쪽으로도 inline에 배치가 되고 일반적인 flow로 이렇게 흐르면서 그것들이 쌓이게 된다. float는 특별히 좀 벗어난다. 예를 들어서 position:absolute처럼 특별한 위치에 배치시키는 것은 아니지만 이것의 조절이 가능하다. 기본의 배치에서 예외적으로 둥둥 떠있다. 예를 들어서 2차원 평면에 엘리먼트들이 배치된다. 이것은 그 위에 풍선처럼 떠오르는 느낌으로 생각을 하면 된다. 그래서 어떤 독특한 성질을 가지고 있는데 우리가 그런 성질을 이용해서 엘리먼트 배치를 조금 더 할 수 있다. 한번 예제로 알아보도록 하겠다. HTML 코드는 div 태그, division 태그 세개가 있다. 구별을 하기 위해서 blue, green, red로 이렇게 색깔을 칠했다. blue, green, red 보면 blue가 맨 위에 그 다음에 green이 그 다음 빨간색이 아래 있다. 지금은 실제로는 순서대로 다르게 되어있다. 겹쳐져 있다. 제가 겹친 부분을 주석으로 처리를 하고 여러분에게 어떻게 보이는지 한번 알아보겠다. float 속성을 한번 없애보겠다. 주석 1를 표시했다. 이렇게 보면 어떤가. blue, green, red 순서대로 잘 배치가 된걸 확인할 수 있다. 지금 만약에 green에다가 float 속성을 줬다. float:left, right 이렇게 줄 수 있다. left로, 왼쪽으로 둥 떠라 할 경우는 그렇다. 근데 오히려 red가 안 보인다. red는 어디로 갔을까. red를 보기 위해서 red의 위치를 조금 바꿔보겠다. red가 지금 green 살짝 뒤에 깔려있다. red가 지금 green이랑 겹쳐저 있다. red가 움직이게 한건 아니다. green을 float 하니까 red가, green은 위로 떠있다. red가 이제 빈자리가 생겼다. 그리고 자기가 올라온다. 그래서 blue, red가 쌓이고 그 다음 green은 float로 둥둥 떠있는 모습이다. 만약에 이거를 우리가 position:relative를 주지 않고. float를 준 green을 역시 margin-left:10px를 주면 이게 여기 있었다는 걸 우리가 알 수 있다. red가 green 뒤에 있다는 걸 또 알 수가 있다.

  이런 식으로 float 속성을 잘 이용하면 배치를 좀 더 다양하게 할 수 있다. 예를 들어서 이렇게, 마침 제가 만약에 120픽셀이다 이러면 어떤가. 예를 들어서 blue는 위에 있고 아래쪽에 빨간색과 녹색을 이렇게 배치를 할 수가 있는 거다. 좌우로. 벌써 float 속성을 이용하다 보니. float 속성을 잘 이용하니까 이런 배치가 가능하다. 물론 이것은 float 속성으로 뭔가 떠있는 느낌이지만 2차원에서 보면 z축을 가지고 어떻게 떠있는가 아닌가는 알 수가 없다. 그냥 왼쪽 오른쪽으로 배치됐다는 걸 알 수가 있다. 이런 속성으로 좀 더 배치를 다양하게 할 수가 있다. 이 float 속성에 대한 예제들을 한번 살펴보면. 예를 들어서 네이버에 이런 속성들이 있다. 오른쪽으로 좀 옮겨놓겠다.

  개발자 도구는 굉장히 중요하다. 크롬 개발자 도구를 잘 익혀두는게 항상 중요하다. 이런 속성들이 있는데 한 번 찾아보자. 내가 이거를 넓게해서 한번 확인을 해보겠다. 좀 더 보면은 지금 좀 더 접어놓고 확인을 해보겠다. 왼쪽, 이 영역이 두 가지로 나눠지는데 이거와 이거로 나눠진다. 왼쪽, 오른쪽 하이라이트가 되어 있다. 좌우로 어떤 커다란 division 태그가 즉 블록 엘리먼트가 배치됐다. 어떻게 했을까? width를 50%로 두고 float를 left로 줬다. 이것 둘 다 float를 left로 줬다. 그럼 float를 해제하면 어떻게 될까. div 태그니까 위에서 아래로 쌓인다. 금방 오른쪽에 있는 내용이 아래로 내려와서 이런 UI를 보이게 된다. 이런 식으로 float를 써서 좌우 배치를 할 때. 실제로 레이아웃을 구성 할 때 좌우 영역으로 많이 쓰이게 된다. float를 좀 이해했으니 이제 다음 부분을 한번 알아보자. 하나의 블록 엘리먼트는 박스 형태이다. 그래서 box-model이라는게 있다. 이제 배치를 좀 벗어나서 지금 네이버 본 화면을 가지고 좀 더 이용을 해보자. 내가 이쪽 영역을 클릭을 했다. 이 영역은 뭘까. 지금 연예면에 어떤 텍스트로 다섯 줄 짜리가 있다.

  크롬 개발자 도구에 Styles라는 탭에 Elements 탭 안에 Elements 패널에 Styles 탭에 보면 오른쪽에 이런 모형이 나온다. 이 영역은 margin이 있고 border가 있고 padding이 있다. 다른 영역을 클릭해보자. 이 영역을 클릭해보자. 이 a 태그가 가지고 있는 영역을 클릭해봤다. 이 녀석은 padding이라는게 5픽셀이 있다. border가 있고 margin이 있다. 이렇게 어떤 간격이 있다. 이 영역을 클릭했다. 이 영역을 클릭했더니 이 영역에 대한 어떤 정보들이 나오고, 이 하위에 보면 이게 나온다. 이 영역도 padding이 있다. padding. 즉, 여기 왼쪽 화면을 보면 지금 녹색이 나왔다 안 나왔다 그런다. 이게 바로 이 영역이 가해주고 있는 거에서 이 안에 간격을 조정한 거다. 즉 이 cc_tcell이라는 class를 가진 엘리먼트가 어떤 간격을 가지고 좌우에 padding이라는 값을 가지고 있다. 이런 식으로 padding 값을 우리가 줄 수도 있고 엘리먼트 간에 또 margind으로 서로 간에 간격을 줄 수도 있다.

  이제 이 사이트를 들어가서 한번 확인을 해보자. 엘리먼트 간에는 margin으로 간격을 주고. border가 굉장히 두껍게 되어있는 테두리이다. 테두리 정보로 두께를 조절할 수 있다. 엘리먼트 안에 콘텐츠와 그 엘리먼트가 가지고 있는 원래 크기 사이는 padding을 줄 수가 있다. 그래서 엘리먼트의 배치가 실제로 이거에 의해서 다르게 배치된다. CSS 렌더링의 이거에 의해서 조금 더 다르게 나올 수가 있다. 지금 보면 border 값을 25픽셀을 주고. 그 다음에 padding, margin을 25 픽셀을 줬다. 이 회색 안에는 padding이고 border 값이 25 픽셀이라 굉장히 두껍다. 또 margin이라고 해가지고 다른 거의 영역에 사이를. 예를 들어서 25를 2로 바꿨다. 그 다음에 Run을 하면 왼쪽으로 붙는다. 즉 엘리먼트 간격이 굉장히 좁아졌다. 그러면 margin을 100으로 줬다. 그럴 경우에는 100을 준거는 top, left, right, bottom. 시계 순서대로 top, right, bottom, left 순서이다. 그 때 마다의 간격을 얘가 100 픽셀씩 다 가지게 된다. 이런 식으로 줄 수가 있다. padding도 마찬가지로 모든 위, 오른쪽, 아래, 왼쪽이 모두 25픽셀이다. 위아래는 25픽셀이고 좌우는 0픽셀이다 그러면 이렇게 할 수도 있다. 위아래는 padding이 띄어졌지만 좌우는 딱 붙었다. 단축 표기법이라고 한다. 그 다음에 10픽셀, 3픽셀 이러면 위에는 25픽셀, 오른쪽은 0픽셀, 아래는 10픽셀, 왼쪽은 3픽셀. 이런 결과가 나온다. 이제 단축 표기법으로 똑같은 경우에는 100을 네 번 쓰지 말고 하나만 쓰자 이렇게 표현이 되고 있다. 이런 식으로 박스 모델을 표현을 한다.

  박스 모델은 결국에는 여기서 border, padding, margin 이런 것들로 구성이 된다고 생각을 하면 된다. box-shadow라 그래가지고 그림자를 살짝 줘서 이렇게 떠있는 것처럼 표현을 하는 경우가 많이 있다. 그런 것도 일종의 박스 모델에 포함돼서 표현하는 경우가 있으니 여러분들이 추가적으로 box-shadow 속성도 한번 알아보면 좋다. 그 다음에 엘리먼트의 크기라는 게 CSS 엘리먼트 배치할 때 중요한 요소중에 하나이다. 엘리먼트 크기라는 거는 자식은 기본적으로 부모의 크기만큼을 가진다. 그래서 여러분들이 div 태그 부모에다가 100픽셀을 주고 div 하위에 자식 태그를 줬을 때 자식이 가지는 기본 width 값. 폭은 부모의 크기만큼 100%를 가진다. 그걸 한번 실험을 해보자. 그 다음에 box-sizing이 있다. 이게 padding 값을 한번 늘리면 어떤 일이 일어나는지 한번 알아보자. 예를 들어서 왼쪽에 div 태그가 하나 있고 div 태그가 또 하나 있다. 첫 번째 것의 class는 box-content고 아래는 box-border이다. 이 box-content라는 거는 기본값이다. 그래서 만약에 box-content에는 아무런 CSS 속성을 주지 않고 이 두가지 div에 width, height, border, padding, font-size만 줬다. 그냥 일반적인 것이다. 그런데 내가 20, 30으로 padding 값을 늘렸다고 치면 어떤가? 이 안에 내부 간격을 늘렸는데 이 div가 점점 커졌다. 이 div는 분명 내가 100 픽셀이라고 지정을 했다. 나는 어떤 글자의 간격을 위해서 padding 값을 줬는데 왜 이 div가 커질까. box-content라고 돼있는 게 왜 커질까. 이게 원하는게 아닐 수도 있다. padding 안에 간격을 늘렸는데 왜 커지지라고 생각할 수 있다. 기본적인 그런 속성이 있다. 그런 특징이 있다.

  레이아웃을 할 때. 그럴 경우를 막으려면 box-sizing을 border-box로 바꿔주면 된다. 박스의 크기를 이 테두리라고 우리가 지정을 해준다. 그럴 경우에는 한번 이 box-sizing이 border-box인 경우는 어떤가. padding 값을 늘력도 이 div 태그에 반영을 해서 둘 다 커진다. padding 값을 늘려도 아래는 그대로 유지하고 있다. 이렇게 유지가 되는 걸 확인 할 수 있다. 물론 padding 값이 너무 크다 그러면 얘도 늘어날 수밖에 없다. 하지만 콘텐츠를 표현할 수 있는 범위 내에서는 이 값이 늘어나도 전체 width 100 크기를 얘가 유지하려고 한다. 그래서 box-sizing이 여러분들이 어떤 것들을 표현할 때는 유용학게 쓰일 수가 있다. 이런 식으로 50픽셀이라고 했을 때도 글자가 삐져나왔지만 어쨋든 이 크기를 최대한 유지하려고 하는 성질이 있다. box-sizing 이런 문제가 있을 때는 이런 것들을 잘 이용하는 게 중요하다. 이제 정리를 좀 해보도록 하겠다.

  제가 화면을 좀 슬라이드 쇼로 바꿔놓고 해본다. 그래서 레이아웃 구현 방법을 어떻게 하는가. 중요한 결론인데 전체 레이아웃은 float를 잘 사용해서 2단, 3단 컬럼 배치를 구현하는게 중요하다. 최근에는 css-grid나 flex라는 속성들이 나와서 사실은 position, float로 레이아웃 즉, 화면의 좌우 배치 , 위아래 이런 배치를 하는 게 어떠헤 보면 어색하다. float는 기본적으로 제공되는 그런 레이아웃을 위한 속성들은 아니다. 그래서 레이아웃 배치가 굉장히 다양하다. 그런 것들을 CSS의 어떤 선언적인 방법으로 하는게 어렵다. 그래서 지금까지 표준 방법들이 많이 나오지 못했다. css-grid나 flex라는 속성들이 또 추가로 있다. 이런 것들을 이용을 잘 하면 레이아웃을 위한 속성을 사용해서 css-grid나 flex를 잘 쓸 수가 있다. 그전에는 여러분들이 현재 2018년 기준으로 유명한 포털 사이트도 float로 배치하고 있는 걸 여러분들이 확인할 수 있다. 앞으로도 기본 배치를 계속 그렇게 배치를 할 수도 있다.

  좀 특별한 배치를 위해서는 어떤 걸 알아봤나. position absolute를 사용해서 relative나 position absolute를 이용해서 배치할 수 있다는 것도 배웠다. fixed라는 것도 있다. fixed로 고정된 영역을 viewport 기준으로 하는 것도 있다. 주로 간단한 메뉴들을 block 엘리먼트를 inline-block으로 변경해서 가로로 배치하기도 한다. 웹 사이트의 상단에 보면 홈버튼, 어떤 추가적인 버튼들이 우측 상단에 나타나고 그렇다. 그런 것들은 block을 inline-block으로 해서 어떤 크기를 지정할 수도 있다. 좌우로 배치될 수도 있게 하는 경우도 좀 있다. 또 엘리먼트 안의 텍스트의 간격 다른 엘리먼트 간의 간격은 padding과 margin 속성을 잘 활용해서 위치시키면. 엘리먼트 서로 간의 상대적인 간격과 엘리먼트 안의 콘텐츠의 간격을 박스 모델에 있는 속성들을 이용해서 예쁘고 간결하고 일관되게 배치를 할 수가 있다. 이런 것들을 잘 기억을 하면서 여러분들이 실험을 하고 작은 웹사이트를 한번 만들어보면서 레이아웃을 이해를 잘하기를 바라겠다. 레이아웃에 대한 설명은 여기서 마치겠다.