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

[1] 강의

웹 프로그래밍(풀스택)

3. CSS - FE

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

 

[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 엘리먼트가 어떻게 배치되는지 알아보도록 하겠다. 여기서 말하는 엘리먼트는 HTML이다. HTML 태그들이다. 우리가 div, span 이런 것들이 어떻게 배치돼서 화면에 보이는지 그런 것들을 한번 다뤄보도록 할 거다. 웹사이트를 한번 보자. 우리가 아주 유명한 naver.com을 갔다. 여기 보면 화면들이 다양하게 배치되고 있다. 이런 식으로 얘는 여기 있고 이거는 여기 있고 얘는 또 가지런하게 오른쪽에 있고. 굉장히 배치가 가지런하고 보기 좋게 되어 있다. 막 뒤죽박죽 섞여있지 않다. 가리런하게 같은 크기, 같은 간격이다. 이런 식으로 체계적으로 HTML 덩어리들이 하나하나 이렇게 배치가 잘 되어 있다. 보면 간격과 일정한 크기를 유지하면서 잘 배치가 되어 있다. 이런 것들이 어떻게 배치되는지 기본적인 CSS 원리를 이번 시간에 배우도록 할 것이다.

  우리가 엘리먼트를 화면에 배치하는 것을 레이아웃 작업이라고도 한다. 보통 렌더링 과정이라고도 한다. 우리가 이제 앞으로는 편의상 배치라고 할 거다. 엘리먼트는 위에서 아래로 순서대로 블록을 이루면서 배치되는 것이 기본이다. 즉 어떤 div 3개를 만들었을 때 div, div, div 그렇게 위에서 아래로 쌓이게 된다. 하지만 그렇게만 쌓이면 다양하게 표현되는데 제한이 있다. 아까 네이버 사이트르 봤을때 왼쪽에도 있고 오른쪽에도 있고 또 위에서 아래로 흐르는 것도 있다. 다양하게 배치가 된다.

이런 걸 위해서 CSS는 추가적인 여러 속성을 지원한다. 첫번째, display 속성이 있다. CSS display 속성에 값이 block, inline, inline-block 이거 외에도 몇 가지가 더 있다. 크게 중요하게 3가지를 우리가 기억하면 좋다. block은 어떤 영역을 가진 기본 속성들이다. 또 inline 속성을 가지고 inline 속성을 기본으로 가지고 있는 엘리먼트들도 있다. span 태그나 a 태그 이런 것들이다. 이것들은 어떤 블록, 블록 레벨이라고 한다. 이 블록을 가지고 있지 않아서 위에서 아래로 벽돌 쌓듯이 이렇게 생기지가 않는다. 그래서 좌에서 우로 이렇게 흐르게 되어 있다. position은 static, absolute 이런 것들이 있다. 그리고 relative, fixed 그래서 특별한 값들을 가지면서 배치가 되는 그런 속성들이다. float는 어떻게 보면 기본적인 쌓으는 순서에서 벗어나서 좀 다르게 배치되는 그런 특별하게. 마치 기본 엘리먼트 배치에서 벗어나서 하늘에 떠있는 느낌으로. 둥둥 떠다닌다 그래서 float라고 한다. 그런 느낌으로 배치가 되는 특별한 속성이다. 이것 3 가지를 가지고 우리가 기본적으로 배치가 어떻게 되는지 한번 이해를 해볼 거다.

  먼저 display:block이다. 이렇게 div, p, div 이런 게 있다. 두 번째는 paragraph다. 첫 번째는 division이다. 이렇게 쌓이면 어떻게 되냐면 그냥 위에서 아래로 쌓이게 된다. 높이 값을 더 주면 더 높은 크기로 엘리먼트가 쌓이게 되있다. 한번 우리가 살펴보도록 하자. JS Bin 이라는 사이트에서 먼저 div를 3개를 하고 만약에 div, div2, div3 이렇게 줬다. 그 다음에 div 태그에 width:100px 주고 height:100px를 준다. 좀 이렇게 모습이 보이게 할 거다. border도 1px solid gray로 이렇게 줬다. CSS를 어떤 특별한 걸 설정하지 않았다. 지금은 이제 크기와 높이를 했다. 오른쪽으로 흐르지 않고 아래로 쌓였다. 이 div는 display가 block 속성이다. 중간에 p 태그. 또 block 속성을 가진 p 태그를 넣어도 이것도 역시 마찬가지로 p도 똑같이 이렇게 넣어주면 이렇게 가진다. 물론 p 태그는 위아래에 어떤 margin 값을 기본으로 가지고 있는 속성이라 지금 이렇게 떨어져 있지만 위아래로 쭉 나온 걸 알 수 있다. 하지만 이것들을 만약에 기본 속성이 display가 우리가 block이라고 했지만 display를 block 아닌 다른 속성으로 준다. inline으로 변경도 가능하다. 이럴 때는 이렇게 오른쪽으로 흐르는 걸 알 수 있다. inline을 기본으로 갖고 있지 않지만 만약에 block 속성도 inline 속성으로 주면 이렇게 오른쪽으로 흐르게 할 수 있다. 저러다 보니 예를 들어서 위에 여기 보이는 HTML, CSS 탭 있는데 이런 메뉴들을 이렇게 display를 inline을 줘서 배치하는 경우도 가끔씩 있다. 참고하면 좋다.

  display:block 이란 걸 알아봤고 그러면 display:block을 가지고 있는 속성들이 무엇일까. 대부분 다 display:block이라고 생각을 하면 된다. 하지만 display:inline 속성들이 가지고 있는 것이 있다. 그런 것들을 오히려 찾아서 기억하는 편이 좀 더 쉽다. inline 속성을 한번 알아보자. inline인 경우는 우측으로 흐른다. 그리고 꽉차면 오른쪽 아래로 빈자리를 차지하면서 흐르게 되어있다. 예를 들어서 div를 또 하나 만들고 어떤 많은 글자를 넣었을 때 계속 위아래로 흐르게 되어있다. 이런 식으로 태그가 좀 긴 텍스트를 넣었다 그러면 이렇게 위에서 아래로 왼쪽에서 오른쪽으로 흐르면서 위에서 아래로 이렇게 흐르게 되어있다. 당연한 원리다. 여러분들이 아마 CSS를 이해하면서 화면서 보이는 속성들을 직접 만들었다 쳐도 이런 식으로 만들었을 거다. 여기 나와 있는 예제들을 한번 클릭을 해볼테니 여러분들도 들어가서 한번 보기 바란다. 어떤가?

  다양한 태그들이 쓰였다. div 아래 span 태그 그 다음에 a 태그, strong 이런 것들이 여러개 쓰였다. 이런 것들이 다 쓰일 때마다. 흐르는 것들이 모두 다 오른쪽으로만 배치되고 있다. 지금은 CSS에 어떤 것도 설정하지 않았다. 이 span 태그, a 태그, strong 태그는 모두 다 inline 태그이다. 이렇게 배치가 된다. 이런 식으로 배치가 되는 걸 우리가 확인을 했다. display:inline에 대해서 이해를 했다. 그래서 display:block과 inline이 어떻게 화면에 배치되는지 우리가 이걸로 간단하게 살펴봤다. 반대 상황을 한번 만들어 보겠다 지금 예를 들어서 div 아래 모든 것들을, *라면 모든 것들이 된다. display : block으로 바꾸면 어떻게 될까. 위에서 아래로, 블록 형태이기 때문에 위에서 아래로 이렇게 흐르게 돼있다. 이렇게 되는 것을 우리가 이해를 했다. display:block이라는 게 있다. 만약에 이런 배치를 하면 span 태그를 쓰지 않고 그냥 div나 p와 같은 그런 태그들을 배치하는게 맞다. 굳이 span 태그를 써서 display:block 으로 바꿀 이유는 많지 않을 것 같다. 지금은 이제 block과 inline의 차이를 알기 위해서 제가 이렇게 속성을 일부러 바꿔봤다. 좀 다르게 배치시킨다. position 속성이 있다. 엘리먼트 배치가 순서대로만 위아래로 또는 좌우로 흐르면서 쌓이기만하면. 왼쪽에서 오른쪽 또는 위에서 아래로, 이렇게 하면 더 다양한 배치를 하기 어렵다. 예를 들어서 특정 버튼이 또는 회사의 로고가. 오른쪽에서 조금 떨어진 부분에 위치시키고 싶다. 그러기 위해서는 display 속성만으로는 특별한 배치를 하기 어렵다.

  그래서 조금 기본적인 틀에서 벗어난 특별한 배치를 하려면 position 속성을 이용하는 게 좋다. position은 그래서 나왔다. position은 말 그대로 위치라는 이름이다. position 속성으로 특별한 배치를 할 수가 있다. position 속성으로 특별한 배치를 할 수가 있다. position 속성은 기본 값이 있다. 금방 봤던 position 속성들도 모두 다 static이라는 이름을 갖는다. 그냥 순서대로 배치가 된다고 생각을 하면 쉽다. 또 absolute는, position의 absolute는 기준점에 따라서 특별한 위치에 위치시킬 수가 있다. 위치 위치한다고 표현을 했다. 정확한 어떤 위치나 그러면 top, left 왼쪽 기준으로 top, letf 또는 오른쪽을 기준으로 top bottom으로 설정이 가능하다. 그래서 어쨋든 기준점이 있어야 한다. 기준점을 기준으로 배치가 된다. 기준점은 근데 무엇일까 바로 상위 엘리먼트가 기준점일까. 그렇지는 않다.

  이것의 기준점은 상위 엘리먼트들 중에 static이 아닌 position이 기준점이다. 무슨 얘기나면 상위 엘리먼트의 position이 무엇이냐 봐서 static이다. 그러면 기준점으로 삼지 않는다. 그럼 한단계 더 위로 올라가서 그 상위 엘리먼트의 position이 무엇인나. static이나, 그러면 기준점이 안된다. static이 아닌 만약에 또 다른 상위 엘리먼트가 position이 relative다. 그러면 ok, 네가 나의 기준점이야 라고 생각해서 그 기준점으로 top, left 값의 주어진 값만큼 떨어져서 값이 설정이 된다. 그래서 position:absolute를 쓰기 위해서는 바로 상위 엘리먼트. 어떤 기준점의 position을 static이 아닌 relative와 같은 속성을 부여를 많이 한다. relative 그 자체는 또 무엇인가. 원래 자신이 위치해야 할 곳을 기준으로 상대적인 값을 부여할 수가 있다.

  fixed는 좀 다르다. 우리가 스크롤을 할 때마닥 계속 따라다니지 않고 고정된 레이어로 보여주는 게 있다. 보통 광고 같은거. 좀 안 좋은 UX이긴 하지만 그런 것들을 position:fixed를 많이 쓴다. 웹 페이지를 한번 우리가 살펴보도록 하겠다. 코드를, 링크를 따라서 제가 이동을 해보겠다. 이 코드를 이동을 해본다. 왼쪽에 먼저 HTML부터 보자. HTML은 이렇게 div 아래 static, relative, absolute, fixed 속성을 가지는 네 개의 엘리먼트를 제가 만들었다. CSS 코드를 보겠다. 같이 보자. CSS 코드는 relative 클래스에는 position:relative, absolute에는 absolute 그리고 top, left로 특정한 값을 줬다. 참고로 absolute 같은 경우에는 top, left 값을 꼭 주는 것이 좋다. 전혀 다른 부분에 위치하게 된다. 그래서 top, left 값을 0, 0이라도 주는 게 중요하다. fixed 값은 이렇게 position:fixed를 써줬다. position 속성을 이렇게 줬다.

  결과를 보겠다. 어떤가. 순서상으로는 static, relative, absolute, fixed이지만 어떤가. 실제 결과는 static, relative, absolute, fixed이다. absolute가 여기 있다. absolute는 왜 여기 있을까. 왜 여기에 존재하게 될까. 이 absolute는 기준점을 이 부분을 찾기 때문이다. 즉 기준점이, absolute의 기준점은 상위 엘리먼트의 static이 아니다. absolute의 부모를 봤떠니 상위 엘리먼트에 wrap이 있다. wrap을 제가 static이 아닌 relative로 줬다. 그렇기 때문에 이것이 기준점이 됬다. 만약에 이 부분을 주석을 했다면 기준점이 좀 달라졌을 거다. 기준점이 달라져서 이 absolute가 주석이 이게 아니다. 주석을 그냥 해놓고 조금 달라졌다. 조금 움직인다. 1도 주석으로 처리가 된다. CSS는 참고로 신기하다. 1를 할 경우에는 기준점이 body가 되게 돼있다. body가 그래서 부모 중에 position이 static이 아닌게 없다. 그럼 결국 body를 기준점을 찾는다. 지금은 wrap, 바로 상위 엘리먼트의 position이 relative이기 때문에 이렇게 한다. 근데 relative는 그럼 relative를 wrap을 받았다. wrap의 위치가 변경이 되는게 아닐까. 전혀 그렇지 않다. relative에 position:relative를 준거랑 static은 똑같다. 만약에 이것을 top, left를 줬을 때는 이게 바뀐다. 하지만 relative를 줬을 때 wrap은 기본적으로 top, left 값이 없다면 아무런 변화도 없다. 이렇게 absolute가 top, left로 변경되는 걸 확인해봤다.

  여러분들이 JS Bin 사이트에 와서 여기서 이렇게 Clone들 뜰 수가 있다. 그래서 여러분 만의 사이트로 URF을 새로 생성한 다음에 이 CSS를 마음껏 수정하면서 어떻게 변경되는지 이해보시면 좋다. 그 다음에 relative를 보면 relative는 여기서 기본적으로 약간 변경이 됬다. left 값으로 자기가 원래 그냥 위치하는 값에서 조금 벗어난 형태다. 이렇게 top 값을 줘도 마찬가지다. 10 픽셀 좀 더 내려올래 하면 이렇게 내려오게 돼있다. 다시 주석으로 막으면 원래대로 위치가 간다. fixed는 그냥 viewport 즉 쉽게 얘기하면 body를 기준으로 변경이 된다고 생각하면 좋다. 그래서 이것은 화면에 보이는 왼쪽 상단을 기준으로 변경이 되지가 않다. 스크롤이 돼도 항상 이 위치에 있게 돼있다. fixed는 광고같이 계속 따라다는 스클롤 해도 그 위치 그대로 존재하는 걸 fixed라고 쓴다.

  이 네 가지 속성을 간단하게 이해를 했다. 이제 position까지 우리가 이해를 해봤다. 여러분들이 꼭 실습을 하셔서 이해를 하는게 중요하다. margin까지만 이번 영상에서는 좀 더 확인을 해본다. 간격을 다르게 배치하는 거는 margin를 쓸 수 있다. margin은 배치가 달라질 수가 있다. margin은 위아래, 좌우 엘리먼트와 본인의 간격이다. 본인 간의 간격이고 따라서 그 간격만큼 내 위치가 달라진다. 이 부분에 줄 간격이 생겨버렸다. 가격에 마침 또 간이 문서에도 간격이 떨어져 버렸다. 간격만큼 내 위치가 달라지는 거를 한번 확인을 해본다. 아주 쉽다.

  새로 한번 제가 URL을 만들어서 div를 두개를 만들겠다. div를 두개 만들고 left, right를 만들었다. 근데 이것들은 어떤가. border:1px solide gray. 모든 엘리먼트에 지금 제가 border 값을 줬다. 그러면 예를 들어서 클래스를 하나 줬다. right가 아니고 bottom이다. bottom을 이렇게 줬다. bottom이라고 이렇게 표현을 또 했다. bottom이라고 표현을 하고 bottom 할 때는 어떻게 되는가. margin-top, left 말고 top만 필요하다. top을 만약에 10픽셀 떨어뜨리겠다. 그러면 이렇게 떨어진다. 어떤가, 이쪽으로 떨어진다. margin-left:100px 그러면 또 이렇게 떨어진다. 간격이 되게 벌어진 걸 확인할 수 있다. 1200픽셀이다 .그러면 이 아래 존재하는 bottom이. 이런 식으로 margin 값은 이렇게 해서 배치를 또 달리할 수 있다. 이런 식으로 어떤 엘리먼트들의 배치. 상대적인 배치를 다르게 할 수가 있다. 이걸 없애니까 어떤가. 엉뚱한 데 와있는게 딱 보인다. 이런 식으로 margin 값을 이용해서도 간격으로 배치를 할 수가 있다는 것도 기억을 하시기 바란다. 일단은 렌더링 배치의 첫 번째 영상은 여기서 마친다. 여러분들이 지금까지 한 것들을 JS Bin의 Clone을 떠서. 또는 여러분들만의 엘리먼트로 position 그리고 margin, display, block, inline을 이해하면서 배치에 대해서 좀 더 자신감을 얻기를 바라겠다. 꼭 실습을 하기 바란다.