[웹 프로그래밍(풀스택)] CSS-FE(2)

4) CSS 기본 Style 변경하기

font, background 관련된 속성을 배워보자.

<style>
    .myspan {
      color : rgba(255, 0, 0, 0.5);
    }

색깔은 rgb(빨간, 초록, 파랑)으로 각 0~255까지의 값을 줘서 설정할 수도 있다. 또한 rgba(0, 0, 0, 투명도)로 색의 투명도 또한 조절할 수 있다. 또한 16진수로 변환하여 색을 정할 수도 있다.

<style>
    .myspan {
      color : rgba(255, 0, 0, 0.5);
      font-size : 15px;
    }
  </style>

font-size로 글크기를 정할 수도 있다. px단위로도 설정할 수 있지만 1em으로 설정 할 수도 있다(1이 아니라 다른 양수도 가능하다). em은 기본값의 몇 배라는 뜻인데, 여기서 기본값은 항상 16이 아닐 수도 있다. 다음 예를 보자

  <style>
    body > div {
      font-size : 32px;
    }
    .myspan {
      color : rgba(255, 0, 0, 0.5);
      font-size : 2em;
    }
  </style>

myspan class는 위의 body > div 부모 노드로부터 font-size 32px을 상속받았기 때문에 나오는 값은 32*2인 64px이다.

백그라운드 색은 background-color : 색;으로 설정할 수 있다.

font-family

이미 정해진 글꼴(맑음, 굴림 등)으로 설정할 수도 있다. font-family : Gulim;이런식으로 설정하면 된다.

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

엘리먼트(html tag)가 배치되는 방식

엘리먼트를 화면에 배치하는 것을 layout 작업이라고도 하고, Rendering 과정이라고 함. 편의상 배치라고 하겠다. 엘리먼트는 위에서 아래로 순서대로 블럭이 이루며 배치되는 것이 기본이다.(div 3개면 div div div이렇게 위에서 아래로 쌓이게 된다) 

이해해야할 속성

1. display(block, inline, inline-block)

블록:  어떤 영역을 가지는 기본 속성

inline: 블록 레벨을 가지고 있지 않아서 위에서 아래로 쌓이지 않고 좌에서 우로 쌓임

2. position(static, absolute, relative, fixed)

특별한 값들을 가지며 배치가 되는 속성

3. float(left, right)

기본적으로 쌓이는 순서에서 벗어나서 기본 엘리먼트 배치에서 벗어나서 둥둥 떠다니는 느낌을 줌

블록으로 쌓이는 엘리먼트(display: block)

display 속성이 block이거나 inline-block인 경우 엘리먼트는 벽돌을 쌓는 것처럼 블록을 가지고 쌓임

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

css 파일 안에서 display: inline으로 inline 디스플레이로 바꿀수도 있다.

div {
  width:100px;
  height:100px;
  border:1px solid gray;
  display: inline;
}

속성:

대부분 display:block속성이다.

옆에서 흐르는 엘리먼트(display:inline)

오른쪽으로 흐른다. 꽉차면 아래쪽으로 빈자리를 차지하게 된다. inline 속성의 엘리먼트는 높이와 넓이를 지정해도 반영이 되지 않는다.

좀 다르게 배치시키기(position 속성)

엘리먼트가 순서대로만 위아래 또는 좌우로 흐르듯 쌓이기만 하면 다양한 배치를 하기 어렵다. position 속성을 사용하면 상대적/절대적인 어떤 위치에 엘리먼트를 배치하는 것이 수월하다.

1. position 속성 기본값은 static이다. 순서대로 배치된다는 뜻이다.

2. absolute는 기준점(상위 position 중에서 static이 아닌 element)에 따라서 특별한 위치(top left, top right)에 위치한다.

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

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

다음 예를 보자: http://jsbin.com/vegowut/edit?html,css,output 

JS Bin

CSS파일을 보면 position:relative, absolute가 주어지는데 absolute 같은 경우에는 top, left값을 꼭 주는 것이 좋다.

먼저 wrap 클래스에 position relative 값을 줬다. top left를 아무 값도 주지 않았기 때문에 사실 값은 static이랑 다를게 없다. 그러나 밑에 absolute가 참조해야 할 부모가 필요하기에 선언한 것이다.

margin

margin으로 배치가 달라질 수 있다. margin은 위 아래 좌 우 엘리먼트와 본인 간의 간격이다.