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

[1] 강의

웹 프로그래밍(풀스택)

3. CSS - FE

6) float 기반 샘플 화면 레이아웃 구성

 

[2] 개념 정리

float : 원래 ‘뜨다’ 라는 의미이며, 원래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다. 복잡한 형태의 레이아웃을 구성하는데 필요한 핵심 속성으로 특정 요소를 떠있게, 흐르도록, 부유하게 하도록 하는 속성입니다

다시 말해, float 속성을 사용해 박스를 왼쪽(left) 또는 오른쪽(right)으로 "부유"시키는 레이아웃 기법입니다.

여기서 '부유하다' 라는 의미는 요소가 기본적인 문서 배치의 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽으로 이동하는 것을 말합니다.

 

[3] 강의 정리

  안녕하세요. 이번 시간은 레이아웃 만들기를 한번 시도해보도록 하겠다. 여러분들도 영상을 보면서 중간중간 레이아웃 만들기를 멈춰놓고 따라 해보고 알 거 같으면 다음 단계로 조금씩 만들어보면 좋을 것 같다. 제가 이번에 할 페이지는 codepen.io 라는 웹사이트에 들어가서 회원가입을 해서 new pen이라는 버튼을 눌러서 나온 웹사이트다. 그래서 온라인으로 간단하게 HTML, CSS를 만들고 그거를 공유하고 저장하고 다른 사람에게 공유할 수 있다. 한번 저장한 링크는 영구히 쓸 수 있다. 여기서 이 사이트를 여러 사람들에게 공유하기 좋다. 간단한 대표적인 레이어를 만들 것 이다.

  결과를 보여주기 전에 크게 3가지로 구성된 그런 웹사이트를 만들어 보겠다. 대충 이런 중간 바디 영역은 이거다. HTML5 semantic 태그, footer라고 나와있다. 코드스쿼드(주) 이런 것들을 이제 footer에 넣었다. body에는 중간에 있는 내용은 없다. 중간에 내용을 넣자. h 태그를 하나 쓰고, 코드스쿼드 반가워요!라고 한다. crong, 임의의 이런 이름들을 저희 회사에 있는 멤버들이다. pobi 이렇게 썼다. 여기 header는 너무 심심하다. 부스트코스는 정말 유익하다. 라고 내용을 써놨다. 반가워요! 코드스쿼드 이런 게 있다. 배경색으로 우리가 내용들을 좀 바꿔볼까. CSS를 짜본다. background-color : #aaa 이렇게 하고. copy를 해서 보자. #aaa, background-color. #aaa 하니까 어둡다. 어두우니까 444 이런 색깔로, 조금 밝은 색으로 바꾸면 될거 같다. 444를 했다. 그 다음에 header는 여기도 777 이걸로 한다. color를 줘도 되는데, header가 아니다. wrap이라는 id를 중간에 주고 footer는 444를 주겠다. 더 어두워졌다. 밝은 색으로 해야겠다. 제가 eee 엄청 밝은 색으로 했다. 여기도 eee, 얘는 ccc 이렇게 조금 더 어둡게 했다. 이렇게 표현을 했다.

  footer, header는 그냥 기본적인 레이아웃을 이렇게 만들 수 있다. 우리가 어떻게 한거지 반가워요! 라고 되어 있는 이 중간 영역을 또 다른 navigation을 하나 만들려고 한다. 그래서 이것을 먼저 div.right로 만들고 이 right로 만든 것들을 이렇게 감싸서 아래로 옮기고 left를 또 하나 만들려고 한다. nav.left 이렇게 했다. 그래서 이렇게 해본다. menu, home, name 이런 임의의 이름으로 마치 navigation이 되는 항목들을 왼쪽으로 뒀다. 이게 left니까 이 navigation 되는 것들을 왼쪽으로 옮기고 이것을 오른쪽으로 옮기고 싶다. 우리는 이럴 때 대표적으로 어떤 걸 쓰는 게 좋을까. 여러분들이 한번 생각해봐라. float를 쓰려고 한다. left 메뉴가 있고 right가 있다. 지금은 둘 다 float를 쓸 거기 때문에 right 이렇게 하나 해보자. float:left로 하면 어떻게 될까. 이렇게 나왔다. 이렇게 하다 보니 많은 문제가 나왔다. left, right에 해당하는 이 메뉴와 본문에 해당하는 내용들이 float이다 보니 footer가 float를 떠있다고 생각해서 밀고 자기가 그 자리를 차지하러 올라왔다. 이걸 어떻게 해결할까.

  clear라는 걸로 인식을 해서 네 위에 있는 float나 이런 것들을 인식해봐라. float:left 속성은 인식해서 올라가지 말라는 것이다. both를 해도 마찬가지다. 만약에 상위 엘리먼트가 right로 돼있거나 left로 돼있거나. 모두 인식해서 위로 올라가지 않는다. 우리는 여기서 left로 표시를 하겠다. left로 표시를 해서. 이렇게 되면 footer가 올라가지 않는 문제는 해결했다. 이것들의 폭인 width 값이 달라졌다. width 값이 변경이 됐다. 그래서 left를 width를 한 20%로 가변폭으로 주고 싶어라고 한다. left에 근데 지금 배경 색도 없어졌다. right에 width를 이번에는 80%로 해보겠다. 80%로 했다. text-align:center로 해본다. 가운데로 했다. 지금 리스트가, li가 너무 list-style:none으로 해서 ...을 없게 했다. 이렇게 했더니 뭔가 좌우에 배치 잘 된거 같다고 생각할 수 있다. 근데 배경으로 줬던 wrap의 background-color가 안 나타났다.

  그 원인을 찾고 샆다. 개발자도구를 열고 한번 찾아보자. 그런데 이것의 Computed 항목을 봤더니 높이 값이 0이다. 즉, 자식이 float인 경우에는 자기의 자식으로 생각하지 않는다. 왜, 둥 떠있기 때문에 float 속성을 자식으로 해서 높이 값으로 생각하지 않는다. 그런 것들은 또 어떻게 하는가. overflow라는 속성을 줘서 float를 인식하게 할 수가 있다. 그래서 사실은 float랑 overflow와 관계는 굉장히 이해하기 어려울 수 있다. overflow 속성을 줬을 때는 부모 입장에서 float를 인식을 하게 돼있다. 우리가 처음에는 낯선 항목이다. 그런 부모 즉 wrap, 너 자식이 overflow:auto 또는 hidden을 줘도 된다. 이 방법 말고도 여러 방법들이 있다. 이렇게 해서 나눌 수가 있다. left, right를 주고 float를 주고 다음에 wrap에다가 이런 식으로 overflow를 줘서 자식으로 인식을 시키고. 지금은 배경색이 먹었다. 그래서 이런 처리가 됐다. 이제 margin 값으로 서로 간에 간격을 조금 띄면 어떨까. 먼저 박스 모델로 들어간다. header에 간격을 주고 싶다. margin-bottom 이렇게 줘도 되는데 큰일 날뻔했다. 이렇게 온라인으로 사이트로 만들다가 가끔씩 날아가는 경우가 있다. 저장을 수시로 해라. 우리가 이제 가운데 영역에 margin을 위아래로 주는 게 좀 좋을 거 같다. wrap에다가 margin-top:10px 이렇게 주고. 저장을 좀해보자. 여기 썼는데 그 내용이 빨리 반영이 안됐다. 새로 고침을 해서 온라인으로 개발하다 보니 이런 문제가 생겼다. 그러면 margin 값을 bottom도 주고 싶다. 그러면, 우리가 단축 표기법으로 top, left 이런 식으로 쓸 수 있다. 0 픽셀로 좌우는 margin 값을 주지 않고 위아래만 margin을 줘서 간격이 떨어졌다. 눈에 띄게하려고 좀더 주자. 20픽셀을 줬다. 그 다음 left, right도 메뉴를 주고 싶다. 그럴 경우에는 left에 margin-right를 나는 한 3% 주고 싶다. 이렇게 할 수도 있다. 이렇게 줄 수도 있고 그러다 보면 얘가 가진 걸 가변폭이니까 17% 정도로 바꿀 수 있다. margin-right 이거다.

  배경색이 문제가 되고 있다. 그래서 배경색을 이번에는 이걸 자르고 여기다가 left의 배경색을 좀 다른 색으로 주고 색상을 고른 게 저런게 나왔다. 이 right에도 배경색을 주면 좋을 거 같다. right에도 배경색을 이번에는 a 정도 준다. red 색깔이 너무 강하니까 이걸 4 정도로 바꿔주고 여기도 4 정도로 바꿔져서 조금 blue 계통으로 바꿨다. 높이 값이 다르다. 높이 값을 지정해줘야 높이 값은 자동으로 채워지지 않는다. left나 right에 있는 높이 값을 우리가 조금더 이렇게 height:500px라고 본문에서 달라질 수 있지만 너무 크다. 100픽셀이다. 200픽셀이다. 이런 식으로 좀 주면. 좌우에 메유가 이렇게 나오는 걸 확인할 수 있다. 그래서 이렇게 가변폭을 유지하면서 할 수 있다. 이제 고정폭이다 그러면 픽셀 단위로 정확한 숫자를 줘서 width 값 17%, 3%가 아니고 정확한 값을 줄 수 있다. 이런 식으로 높이 값도 줬다. 좌우에 기본 형태를 만드는 것은 아주 쉽다. 이렇게 해서 좀 확인을 했다. 그 다음부터는 이제 똑같은 반복 작업이다.

  예를 들어서 right에 있는 것중에 우리가 어떤 내용을 넣겠다. 그러면 이 안에서 또 float를 써서 왼쪽, 오른쪽으로 나눌 수도 있다. 여러 가지 엘리먼트의 position 값이나 이런 걸 줘가지고 위치를 시킬 수도 있다. 예를 들어 position까지만 조금 더 확인을 하면 좋을 것 같다. position의 반가워요! 오른쪽에 어떤 작은 웃음 이모티콘을 오른쪽에다가 붙이고 싶다. 그럼 어떻할까. 이 HTML right에 보면 반가워요!라고 되어 있다. 이제 이걸 좀 내려서 우리가 확인을 해보려고 한다. 반가워요! 오른쪽에다가 h 태그로 되어있다. 반가워요! h 태그 안에 내용을 어색하지만 한번 넣어보도록 하자. 반가워요! span 태그 안에 내용을 넣는 걸로 한다. 이렇게 넣어놓기로 하고. 우리가 h 태그 안이지만 여기다가 div.motion이라고 해서 그냥 여기다 뭔가를 넣으려 한다. 그래서 이렇게 넣는다. 내용이 나오는지 한번 보자. 이거를 오른쪽으로 쭉 밀고 싶다.

  그럼 float로 해가지고 오른쪽으로 밀고 할 수 있지만 그러고 보니 display가 inline이고 또 block 태그고 뭔가 float. float 해도 될까. 배치가 잘 안될 거라는 생각이 든다. emotion이라고 돼있는 부분을 우리가 이걸 기준으로 해서 오른쪽을 붙이고 싶다. 그러면 어떻게 될까. 예를 들어서 지금 보면 h 태그다. 이게 h 태그다. h 태그가 이렇게 길게 돼있다. 그렇기 때문에 오른쪽 이 부분에 위치시키려면 이걸 기준으로 해도 될 거 같다. 그런 점을 보면 h 태그에 먼저 position이 static이기 때문에 absolute의 기준이 안된다. 먼저 기준점을 찾기 위해서 h 태그에다가. 즉 right 부분에 있는, right 하위니까 이쯤에다가 짜본다. .right 아래 h 태그니까 셀렉터를 표현해서 position:relative라고 relative를 표시해주고 아무런 변화가 없다. 원래 top, left를 주지 않으면 그대로이다. 주고 이번에는 다르게.

  아래에는 또 right 태그에 .emoticon 이라고 해서 이 부분을 주고 position:absolute를 주고 top:0px. 이렇게 줬다. 그러고 나서 저장을 했다. 저장을 하고 .right에, 이게 바로 자손이기 때문에 이렇게 해야 되겠다. 왼쪽으로 가있다. 이번에는 right를 주자. 오른쪽으로 갔다. right인데 오른쪽으로 5% 떨어져라고 표시할 수 있다. color도 이번에는 좀 색깔을 눈에 띄게 흰색으로 바꿨다. 이런 식으로 떨어뜨려서 한번 만들어 봤다. 이게 기본 레이아웃이다. 여러분들이 여기서 3단으로 만들겠다. 이럴때는 쉽다. left, right가 있는데 우리가 이거를 right가 아니고 div.realright로 했다. oh~ right 이렇게 했다. 그러면 또 어떻게 해야할까. realright 그럼 그냥 오른쪽으로 배치시키는 것이다. 그럼 float를 또 추가하는 것이다. realright라는 거를 읽는다. 그래서 이걸 또 float:left를 시키고 이미 right가 80%였다. right에서 20%를 줘서 60%를 하고. realright에다가 width를 이번에는 17%를 줬다. 이것도 똑같이 17%를 주고 margin-left:3%를 이렇게 줄 수가 없다.

  0배경색이 좀 없다. 67c 정도로 줬다.이랬더니 17%인 레이어들이 좌우로 배치되면서 가운데 갈 수도 있다. 여기서 조금 응용하면 얘를 왼쪽을 고정으로 하고 오른쪽을 상대적인 비율로 하고 이런 것들도 여러분들이 찾아서 만들 수가 잇다. 기본적인 레이아웃 배치에 대해서 알아봤다. 여러분들도 이런 속성을 float, position. 이런 것들을 잘 이용해서 자유롭게 배치를 해보길 바란다. 이런 예제들이 웹사이트에 많이 있다. 여러분들도 찾아서 더 실습을 많이 했으면 좋겠다.

 

[4] 코드 정리

html

<header>부스트코스는 정말 유익합니다.</header>
<div id="wrap">
   <nav class="left">
      <ul>
         <li>menu</li>
         <li>home</li>
         <li>name</li>
      </ul>
   </nav>
   <div class="right">
      <h2>
         <span>반가워요!</span>
         <div class="emoticon">:-)</div>
      </h2>
   <ul>
      <li>crong</li>
      <li>jk</li>
      <li>honux</li>
      <li>pobi</li>
   </ul>
   </div>
   <div class="realright">
      oh~ right
   </div>
</div>
<footer>코드스쿼드(주)</footer>

 

CSS

li {
   list-style:none;
}

header {
   background-color : #eee;
}

#wrap {
   overflow:auto;
   margin:20px 0px;
}

.left, .right, .realright {
   float:left;
   height: 200px;
}

.left {
   width:17%;
   margin-right:3%;
   background-color : #47c;
}

.right {
   width : 60%;
   text-align:center;
   background-color : #47c;
}

.realright {
   width: 17%;
   margin-left:3%;
   background-color : #67c;
}

.right > h2 {
   position:relative;
}

.right .emoticon {
   position:absolute;
   top:0px;
   right:5%;
   color:#fff;
}

footer {
   background-color : #eee;
   clear:left;
}