[HTML, CSS] CSS 텍스트 꾸미기, 박스 모델

CSS에서는 텍스트를 꾸미기 위한 다양한 속성이 있다.

 

1. 색상

 

color: CSS에서 글자의 색상을 변경하는 속성. RGB가 표현된 값이나 주요 색상의 이름을 사용할 수 있다.

background-color: 배경 색상을 지정하는 속성이다. 

border-color: 박스 테두리 색상을 지정하는 속성이다.

.content {
color: white;
background-color: black;
border-color: #c3e6cb;
}

 

2. 글꼴, 크기

 

font-family: 글꼴을 설정하는 속성이다. 글꼴을 여러 개 설정할 때는 쉼표로 구분하며, 첫번째 글꼴을 찾은 다음 해당 글꼴이 있으면 사용하고 없으면 두번째 글꼴을 사용한다. 전부 없다면 웹브라우저에서 설정한 명조 계열의 글꼴을 사용한다. 글꼴은 접속한 기기에 설치되어 있는 글꼴을 사용하는 것이기 때문에 CSS로 설정한 글꼴이 없을 수도 있다. 그래서 마지막은 generic-family로 정해두는 게 좋다. 다양한 웹폰트도 사용할 수 있는데 HTML의 link 태그를 사용하면 가능하다.

font-size: 글자의 크기를 변경하는 속성

font-weight: 글자의 굵기를 변경하는 속성

text-decoration: 글자에 밑줄, 가로줄 등을 넣을 수 있는 속성 (none, underline, overline, line-through, blink)

letter-spacing: 글자 사이의 간격을 조절할 수 있는 속성. 값에는 음수를 넣을 수 있으나 글자가 겹칠 수 있다.

line-spacing: line-box의 높이를 설정하는 속성이다. 줄사이의 간격을 지정한다.

.content {
font-family: "Verdana", "Malgun Gothic", "Times New Roman" Serif;
font-size: 10px;
font-weight: bold;
text-decoration: underline;
letter-spacing: 5px;
line-height: 20px;
}

 

3. 크기 단위

 

3.1 절대 단위 (px, pt 등)

CSS에서 절대 단위는 보통 px(픽셀),  pt(포인트)를 많이 쓴다. 절대 단위는 국제 규격에 맞는 실제 크기이고,  상위 요소나 화면 크기에 상관없이 동일한 크기를 의마한다. 반응형을 고려하지 않는 작업에 유용하기 때문에 주로 인쇄물에서 많이 사용하는 방법이다. 상속된 다른 CSS로부터 영향을 받지 않는다. 또한 스마트폰 같은 기기에서 해상도는 높은데 글자가 작게 보이는 현상이 생길 수 있다.

 

3.2 상대 단위 (%, em, rem, ch, vw, vh 등)

상대 단위는 다른 요소나 부모 또는 화면 크기에 비례해서 크기가 조절되기 때문에 반응형 사이트의 스타일을 지정하는데 유용하다. 상대 길이에서도 글꼴과 viewport에 따라 유형을 분류할 수 있다.

 

em: 현재의 글꼴 크기(부모 요소)를 기준으로 자식 요소의 폰트 사이즈가 상대적으로 정해진다. font-size 변경 시 같이 변경된다. 1em은 16px이다. 폰트의 대문자 M의 너비를 기준으로 한다. (1em = 16px  = 100%)

rem: root rem이라는 뜻으로 루트 요소의 글꼴 크기이다. 계단식을 사용하지 않고 항상 root 요소에 상대적인 em이다. font-size뿐만 아니라 grid system에도 사용이 가능하다. em과 다른 점은 제일 상위 부모 요소인 HTML을 100%로 보고 그 아래 요소들의 사이즈가 정해진다. HTML의 폰트 사이즈를 변경하면 소용없다.

%: 브라우저 기본 글꼴 크기를 100%하고 상대적인 크기를 나타낸다.

ch: x-height와 유사하고 ch만 x 문자의 높이 대신에 숫자 "0" 문자의 너비를 기준으로 한다. 글꼴 모음이 변경됨에 따라 바뀐다.

 

3.2.1 viewport 상대 길이

viewport는 현재 화면에 보이는 다각형(보통 직사각형)의 영역을 뜻하고 웹 브라우저에서는 현재 창에서 문서를 볼 수 있는 부분을 말한다. viewport 바깥의 콘텐츠는 스크롤하기 전에는 보이지 않는다. viewport 중에서도 지금 볼 수 있는 부분을 visual viewport라고 한다. 

 

vh: viewport 높이의 1%이고 vw 단위와 동일하지만 viewport 높이를 기반으로 한다.

vw: viewport 너비의 1%. 부모 요소 또는 부모 요소 너비에 상관없이 모든 요소에 대해 값이 일관적으로 유지된다. rem이 항상 루트에 상대적인 것과 비슷하다.

 

4. 박스 모델

 

박스의 종류는 줄바꿈이 되느냐 안되느냐로 구분할 수 있다. 줄바꿈이 되는 박스는 block 박스이고 줄바꿈이 안되고 크기 지정이 불가능한 박스는 inline 박스라고 한다. 또한 줄바꿈이 일어나지 않으면서 block 박스의 특징을 가지는 inline-block 박스도 있다. 

block 요소 종류: <div>, <article>, <form>, <li>, <ul>, <section>, <p>, <main>, <header>, <footer> 등

inline 요소 종류: <a>, <button>, <img>, <input>, <span>, <textarea> 등

 

	block	inline-block	inline
줄바꿈	가능	불가능	불가능
width, height 사용 가능 여부	100%	글자가 차지하는 만큼	글자가 차지하는 만큼
기본으로 갖는 width	가능	가능	불가능

 

5. 박스를 구성하는 요소

CSS 박스 모델

위의 그림을 보면 CSS 박스 모델이 어떻게 구성되는지 이해하기 쉽다. 가장 안쪽 숫자 써있는 부분이 content 부분이다. border는 테두리이고 테두리를 기준으로 안쪽 여백이 padding이고 바깥쪽 여백이 margin이다. 

 

border(테두리) 속성 예시

.container {
border: 1px solid black; /*순서대로 테두리 두께, 테두리 스타일, 테두리 색상을 의미*/
border-radius: 10px; /*테두리 모서리를 둥글게 만드는 것*/
}

margin 속성 사용 예시

header {
  margin: 10px 20px 30px 10px; /*순서대로 상하좌우를 의미*/
}

header {
  margin: 10px 15px; /*두 개의 값만 넣으면 위아래가 10px, 좌우가 15px의 여백을 의미*/
}

header {
  margin: 10px; /*값을 하나만 넣으면 모든 방향에 적용됨*/
}

header {
  margin-top: 10px; /*상하좌우 별개로 설정할 수도 있다.*/
  margin-right: 150px;
  margin-bottom: 20px;
  margin-left: -1rem; /*margin은 마이너스 값도 지정 가능하다. */
}

 

padding 속성 사용 예시

header {
  padding: 10px 15px 2px 25px; /*순서대로 상하좌우를 의미*/
}

header {
  padding: 10px 15px; /*두 개의 값만 넣으면 위아래가 10px, 좌우가 15px의 여백을 의미*/
}

header {
  padding: 10px; /*값을 하나만 넣으면 모든 방향에 적용됨*/
}

header {
  padding-top: 10px; /*상하좌우 별개로 설정할 수도 있다.*/
  padding-right: 150px;
  padding-bottom: 20px;
  padding-left: 25px; 
}

 

6. 박스 크기 측정 방법

전체 셀렉터인 *를 사용해서 box-sizing 속성을 추가하고 border-box 값을 추가하면 레이아웃 디자인을 위한 여백과 테두리 두께를 포함한 박스 크기를 쉽게 계산할 수 있다.  box-sizing을 일부 요소에만 적용하면 혼란을 가중시킬 수 있어서 안좋다.  border-box 말고 박스의 content-box를  사용할 수도 있지만 border-box를 대부분 쓴다고 한다.

* {
  box-sizing: border-box;
}