[FE] 01. HTML & CSS (2)

<1. 웹 프로그래밍 기초 - CSS>

 

 

* float 기반 샘플 화면 레이아웃

 

[참고] http://flexboxfroggy.com/#ko

 

기본 배치를 한 후 필요한 부분에 float를 사용해서 좌, 우로 배치하는 것이 일반적이다.

 

clear: left, clear: both는 float를 인식해서 겹치지 않게 해준다.

float인 경우에는 자식으로 생각하지 않기 때문에 wrap에 설정한 배경색이 적용되지 않았다. 이 경우에는 wrap안에 overflow 속성을 줘서 인식하게끔 할 수 있다.

 

%로 주는 경우 고정 폭이 아닌 가변폭으로 적용되어 페이지 크기에 따라 반응한다.

 

 

- 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입니다.</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;
}

 

 

- 실습 결과

 

text-align: center //텍스트 가운데 정렬

clear: left //footer가 float와 겹치지 않게 하기 위해

list-style: none //li에 점 없애기

overflow: auto //부모 입장에서 float 인식하게 하기

 

.right > h2 {

position: relative;

}

해주는 이유는 absolute가 static이면 위치를 잡지 못하기 때문이다.

(top, right값을 설정해주지 않으면 변화가 없기 때문에 relative로 설정해서 h2를 기준점으로 잡아준다.)

 

---

 

* Element가 배치되는 방법 (CSS Layout)

 

 

element: HTML 태그들, 이러한 element들을 화면에 배치하는 것을 layout 작업, 렌더링 과정, 배치라고 한다.

기본 element는 위애서 아래로 배치되나 다양한 방색으로 배치할 수 있게 여러가지 속성을 사용할 수 있다.

 

- 엘리먼트가 배치되는 방식 (display: block)

display속성이 block이거나 inline-block인 경우 그 엘리먼트는 벽돌을 쌓듯 블록을 가지고 쌓인다.

위에서 아래로 쌓이는 형태 (p 태그는 위아래 마진값을 가지고 있다.)

 

- 엘리먼트가 배치되는 방식 (display: inline)

display 속성이 inline인 경우는 우측으로, 그리고 아래쪽으로 빈자리를 차지하며 흐른다. (오른쪽으로 점점 쌓인다.)

높이와 넓이를 지정해도 반영이 되지 않는다.

span, a, strong 태그들은 모두 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이 기준점

기준점이 필수, static은 기준점이 될 수 없다. 따라서 어떤 기준점의 position을 static이 아닌 relative와 같은 속성으로 설정해야 한다.

top, left값을 꼭 주는것이 좋다. (전혀 다른 부분에 위치할 수 있기 때문에)

 

3. relative는 원래 자신이 위치해야 할 곳을 기준으로 이동

top / left / right / bottom로 설정 

 

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

광고와 같이 계속해서 고정적인 자리에 있어야 하는 경우에 적합 (스크롤 해도 계속 따라다니며 그 자리에 있어야 하는 경우)

 

- 엘리먼트가 배치되는 방식 (margin: 10px)

margin으로 배치가 달라질 수 있다.

margin은 위 / 아래 / 좌 / 우 엘리먼트와 본인 간의 간격, 간격만큼 위치가 달라진다. (공간 간격을 주는 것)

 

- 엘리먼트가 배치되는 방식 (float: left) code 바로가기

원래 flow에서 벗어날 수 있고 둥둥 떠다닐 수도 있다. (겹쳐서 놓는 것이 가능)

뒤에 block 엘리먼트가 float 된 엘리먼트를 의식하지 못하고 중첩돼서 배치된다.

이런 특이성 때문에 웹사이트의 전체 레이아웃 배치에서 유용하게 활용된다.

 

- 엘리먼트가 배치되는 방식 (box-model) code 바로가기

블록 엘리먼트의 경우 box의 크기와 간격에 관한 속성으로 배치 추가 결정

margin, padding, border, outline으로 생성되는 것을 말함

box-shadow 속성도 box-model에 포함, box-shadow는 border 밖에 테두리를 그릴 수 있는 속성 (그림자가 있게 떠있는 것처럼 보이게 함)

padding: 25px 0px 0px 25px ==> 이와 같이 시계순으로 값을 적는다. (모두 같은 값을 줄떄는 하나만 적으면 된다.)

- 엘리먼트의 크기

block 엘리먼트의 크기(자식의 크기)는 기본적으로는 부모의 크기만큼을 가진다.

ex) width: 100%는 부모 크기만큼을 다 갖는 것과 같다.

 

- box-sizing과 padding code 바로가기

padding 속성을 늘리면 엘리먼트의 크기가 달라질 수 있다. (내부 margin이 커지면 전체 div 크기도 커지게 된다.)

이를 box-sizing 속성으로 이를 컨트롤 할 수 있다. nbox-sizing 속성을 border-box로 설정하면 엘리먼트의 크기를 고정하면서 padding 값만 늘릴 수 있다. (크기를 최대한 유지할 수 있게 되는 것)

 

- layout 구현방법은?

전체 레이아웃은 float를 잘 사용해서 2단, 3단 컬럼 배치를 구현한다.

특별한 위치에 배치하기 위해서는 position absolute를 사용하고, 기준점을 relative로 설정한다.

네비게이션과 같은 엘리먼트는 block 엘리먼트를 inline-block으로 변경해서 가로로 배치하기도 한다. (주로 간단한 메뉴나 홈버튼에 사용)

엘리먼트안의 텍스트의 간격과 다른 엘리먼트간의 간격은 padding과 margin 속성을 잘 활용해서 위치시킨다.

 

 

위에서 absolute는 static을 기준점으로 삼지 못하기 때문에 wrap을 기준으로 위치하게 된다.

그 위에도 기준점으로 삼을 것이 없다면 body가 기준점이 된다.