CSS 쉽게 이해하기 (폰트, 배경, 박스모델, 레이아웃)

  • HTML, CSS

웹 문서를 제대로 스타일링 하려면 CSS로 별도의 스타일 시트를 작성해 사용하는 게 좋다. 스타일링 기법은 다양해서 다 다루긴 어려우니 일단 기본 속성들부터 다뤄보자.

대략 아래와 같은 내용.

  • 폰트 관련 속성
  • 배경 관련 속성
  • CSS 박스 모델 (content, padding, border, margin)
  • 레이아웃 배치 (float, position)

이외에 그리드(grid) 같은 내용을 잘 알면 좋은데, 이건 좀 복잡하니 다음 기회에.


폰트 관련 속성

font-family

일단 글꼴을 설정하는 방식은 이렇게

p {
  font-family: Arial, Georgia, "Times New Roman", sans-serif;
}

글꼴을 지정하는 속성은 font-family다. 여기에 값을 여러개(하나 이상) 넣어줄 수 있는데, 이는 해당 글꼴이 없는 경우 사용자 상황에 맞는 글꼴을 사용하도록 해주는 대비책이다. 만약 글꼴 이름에 띄어쓰기가 있다면 따옴표로 글꼴 이름을 감싸줘야 하는데, 공백이 없는 글꼴을 따옴표로 감싸면 에러가 날 수도 있으니 주의하자.

그리고 해당 폰트가 정말 없을 경우를 대비해 기본 스타일 generic family를 지정함으로써, 해당 컴퓨터가 가지고 있는 폰트 중에서 해당 스타일을 알아서 사용하게 하는 방법도 있다. serif, sans-serif, monospace 등을 적어주는 거다. (물론 이외에도 사용자 컴퓨터에 없는 폰트를 사용하는 웹폰트 기법도 있다.)

※ 글꼴의 상속

위 예제에서 p 요소의 글꼴을 지정했지만 이번엔 이런저런 h, p 등 속성을 포함하고 있는 div 영역에다가 글꼴을 지정해보자. <div class=”container> … </div>라는 영역 전체에 지정하려면 이렇게.

.container {
  font-family: Arial, Georgia, "Times New Roman", sans-serif;
}

class 구분자를 지정할 때는 클래스 이름 앞에 점을 찍는다. 아무튼 이렇게 적용하고 나면 그 영역 전체에 이 글꼴이 다 지정되는데, 이런 걸 상속이라고 부른다. 부모 요소의 스타일이 자식 요소들에게도 그대로 다 적용된다는 의미. (단, 원래 지정된 글꼴이 있는 code 요소는 적용이 안 된다. 어떤 건 상속 되고 어떤 건 안 되고 좀 그런 게 있어서 자세히 들어가면 복잡하니 일단 웬만하면 상속이 된다고 이해하고 넘어가자.)

font-size

폰트 사이즈는 font-size로 속성을 지정하면 되는데, “고정값” px을 넣어줄 수도 있고, 부모 요소에 고정 값을 준 후 “상대값” em을 적용하는 방법도 있다. (이때 때 user agent style이 이미 기본값이 설정되어 있어서 내가 적용하는 상대값 적용을 무시하는 경우가 생기기 때문에 inherit 키워드를 통해 부모 요소에서 상속 받도록 명시해주자.)

html {
  font-size: 10px;

.container {
  font-family: Arial, Georgia, "Times New Roman", sans-serif;
  font-size: 1.5em
}

h1, h2, h3 {
  font-size: inherit;
}

※ 상대값 합성 이슈를 해결하기 위한 rem

상대값 em을 조정할 때는 주의해야 할 게 있는데, 부모 요소의 폰트 크기에 비례하기 때문에 li 태그를 중첩해서 사용하면 배율도 중복 적용되는 합성 이슈가 생기기 때문이다. 그래서 이 문제를 해결하기 위해 부모 요소 기준이 아니라 최상단 html 요소 기준으로 상대값을 적용하는 rem이 생겨났다. 웬만하면 rem 쓰면 된다.

font-weight, font-style

폰트 두께는 font-weight 속성을 통해 bold, normal와 같은 키워드로 나타낼 수도 있고, 100~900 사이의 숫자도 적용 가능하다. 그리고 폰트 스타일은 italic, normal 같은 거.

※ font 속성의 단축표기법

속성을 여러줄 쓰면 가독성은 좋지만 문서 길이가 길어지니까 필요에 따라 단축표기법을 쓸 수도 있다. 당연히 규칙이 있다. 일단 font라는 속성을 지정하고, 그 안에 값들을 순서에 따라 넣어주는 건데, 일단 font-style, font-weight이 먼저 나오고 그 다음 font-size, 그리고 font-family는 맨 뒤에 와야 한다.

.container {
  font: normal, 500, 1.5rem Arial, Georgia, "Times New Roman", sans-serif;
}

color

폰트 색상을 지정하는 건 font-color나 text-color가 아니다. 그냥 color.

지정하는 방법이 여러가지 있는데 일단 색 이름을 키워드로 바로 넣는 것이다. 키워드는 120개나 있다. 여기를 참고하자.

p {
  color: blue;
}

그 다음 16진수 색상 코드를 사용하는 방법. 앞에 샵을 붙여 표현한다.

p {
  color: #0000ff;
}

아니면 RGB 값을 직접 쓰는 방법. 0~255사이의 값을 입력한다. 여기서 rgb로 해도 되는데 예제에서 rgba를 넣어준 건 alpha값(투명도)를 직접 넣어줄 수도 있기 때문이다. 0~1 사이의 숫자 혹은 퍼센트를 넣어주면 된다.

p {
  color: rgb(0, 0, 250, 1);
}

이외에도 색상/채도/명도를 가지고 표현하는 HSL 값도 있는데 널리 쓰이진 않으니 일단 넘어가자.

text-align, line-height

일단 정렬은 text-align 속성으로 가운데정렬(center), 왼쪽정렬(left), 오른쪽정렬(right), 양쪽정렬(justify) 등을 써주면 된다.

줄 간격은 line-height 속성으로 지정하는데 ‘단위가 없는 숫자’를 사용한다. 그냥 이 숫자 자체가 폰트 사이즈의 배율이다. (브라우저 기본값은 보통 1 또는 1.2인데 가독성 높이려면 1.5 정도는 넣어주는 게 좋다.)

p {
  text-align: right;
  line-height: 1.5;
}

배경 관련 속성

배경 색상을 지정하는 건 backgroung-color, 그리고 배경 이미지를 지정하는 background-image 속성을 사용할 수도 있다. 그리고 여기서 다루는 배경, 즉 색이 칠해지거나 이미지가 적용되는 영역은 “패딩” 영역이라는 걸 기억하자.

CSS 박스 모델

콘텐트(content)를 둘러싼 패딩(padding), 보더(border), 마진(margin) 개념을 이해하려면 CSS 박스모델을 한 번 읽어주면 된다. 참고는 여기.

  • content: 요소가 실제로 포함되는 부분으로, 그 영역의 크기를 직접 지정할 수 있다. width와 height 속성 등을 사용. 고정값 px 외에도 %, em 등 상대값 지정도 가능하다. (참고로 이건 블록 요소에만 적용되는 거고 span 같은 인라인 요소들에는 적용이 안 된다. 그런데 이미지나 비디오 같은 멀티미디어에는 예외적으로 적용이 된다.)
  • border: 테두리, padding과 margin 사이 부분이다. 당연히 padding처럼 상하좌우 적용이 가능하다. 그리고 스타일 값(solid, dotted 등)과 색상을 넣어줄 수도 있다.
  • padding: 박스 안쪽 여백이다. content와 border 사이. 상하좌우 적용이 가능하고, 필요한 부분만 padding-top, padding-right, padding-bottom, padding-right으로 골라 지정할 수도 있다.
  • margin: 바깥 여백이다. border를 기준으로 다른 요소와의 간격을 의미합니다. margin 또한 상하좌우에 적용할 수 있다.

패딩이나 마진은 상, 우, 하, 좌 순서로 (시계 방향으로) 4개를 일일이 적어줄 수도 있고, 두 개만 적어서 상하, 좌우 값을 명시할 수도 있다.

참고로 좌우 마진의 경우 값으로 auto라고 넣으면 가운데 정렬이 된다…!

.box {
  box-sizing: content-box;
  background: yellow;
  width: 300px;
  height: 150px;
  border: 5px solid black;
  padding: 50px 70px 20px 100px;
  margin: 30px;
}

그런데 이 박스 요소의 크기는 어떻게 결정되느냐를 잘 계산하는 게 중요하다. 단순히 콘텐트의 크기 외에도 패딩, 보더, 마진이 있기 때문이다. 그래서 box-sizing 속성을 content-box가 아니라 border-box로 지정하면 좀 더 편하게 계산할 수 있다. 콘텐트+패딩+보더까지 합산된 값으로 원하는 width와 height를 적어주면 된다.

그리고 마진(margin)의 경우 약간 특이한 점이 있어서 주의해야 하는데, 세로 방향으로 서로 다른 요소들이 수직으로 만나면 (어떤 요소의 margin-bottom과 다른 요소의 margin-top이 만나는 경우) 두 요소 사이의 마진 간격은 각각의 margin 크기를 합친 것이 아니라 두 요소 가운데 큰 margin 값으로 적용된다. 이를 margin-collapsing(마진 통합/상쇄)이라고 부른다.

레이아웃 배치 (float, position)

block과 inline으로 콘텐트를 배치한 상태를 normal flow라고 부른다. 각 요소가 block이냐 inline이냐에 따라서 줄바꿈이 일어날지 연이어 배치될지 결정되는 거다. 물론 display 속성에 block, inline 외에도 inline-block 값을 주면 줄바꿈이 일어나지 않는 상태로 width나 height 값을 가질 수도 있다. (그래서 네비게이션 같은 걸 만들 때 li 요소를 inline-block으로 많이들 사용하는 편이다.)

그런데 이렇게 display 속성을 바꾼다고 해도 normal flow로 배치된다는 사실 자체는 달라지지가 않는다. 이 방식만으로는 복잡한 형태의 레이아웃을 구성하기 힘들기 때문에 좀 더 정교한 레이아웃도 가능하게 하는 float와 position 속성을 알아두는 게 좋다.

float

float 속성은 말 그대로 떠 있는 상태로 배치하는 거다. 예를 들면 글 왼쪽 상단에 이미지 삽입할 때 쓰는 거. 이미지를 왼쪽 위에 놓고 글이 흘러내리는 방식으로 전개된다. float 속성에는 left 혹은 right 값을 줄 수 있다. float와 width를 동시에 사용하면 3단 컬럼도 만들 수 있다. 이렇게.

.column1 {
  float: left;
  width: 30%;
}
.column2 {
  float: left;
  width: 30%;
}
.column3 {
  float: left;
  width: 30%;
}

.footer {
  clear: both;
}

맨 아래 footer로 영역을 주고 싶을 때, 이게 나머지 10% 영역에 따라 흘러 배치되기 때문에 clear 속성에 both라고 주었다. (left나 right를 줄 수도 있다.)

position

position 속성은 각 박스 요소를 정교하게 배치할 때 사용한다. 일단 position 속성의 기본값은 static이다. 노멀 플로우를 따라가는 거다. 그런데 static이 아닌 relative, absolute, fixed 같은 값을 줘서 특정 기준에 따라 배치를 할 수 있다. 이런 식으로.

img {
  position: relative;
  top: 100px;
  left: 100px;
}
  • relative: 원래 있어야 할 위치를 기준으로 움직인다. 그래서 문서 흐름 자체에는 변화가 없다.
  • absolute: 애초에 자기 자리가 없고, 문서의 흐름과는 별도로 배치가 된다. static이 아닌(relative, absolute, fixed 속성을 가진) 부모 요소가 배치의 기준이 된다. 그래서 어떤 요소의 position 속성에 absolute 값을 주고 싶다면, 적절한 요소에 relative 값을 주는 것이 일반적이다. (아니면 그냥 문서 가장 좌측 상단을 기준으로 나타나는 것처럼 보인다.)
  • fixed: 브라우저 창을 기준으로 움직인다. 그래서 스크롤을 움직여도 그 창에 고정된 것처럼 나타난다.

그리고 이렇게 요소들을 겹쳐서 배치하다 보면 서로 가리기 때문에 어떤 요소가 위로 와야 할지 결정해야할 때가 있는데, 이 때 사용하는 속성이 바로 z-index다. z-index는 임의의 정수를 넣어줄 수 있는데, 숫자가 클수록 더 우선 순위가 높아져서 다른 요소를 덮게 된다.

각각 잘 맞는 역할이 있으니 실제로 개발을 해보면서 노하우가 쌓이는 게 중요하다.

추천 글

댓글 남기기