CSS 텍스트/배경

1. CSS의 text

CSS에서 텍스트를 꾸미는 방법은 아주 다양합니다.

letter-spacing: 
- 텍스트 내에서 글자 사이의 간격을 설정합니다.
	예) 안녕하세요. 오늘은 화요일!
    	안 녕 하 세 요 .  오 늘 은  화 요 일 !
word-spacing: 
- 텍스트 내에서 단어 사이의 간격을 설정합니다.
	예) 안녕하세요. 오늘은 화요일!
    	안녕하세요.   오늘은   화요일!
text-align: (left, right, center, justify) 
- 텍스트 수평 방향 정렬을 설정합니다.
text-decoration: (none, underline, line-throuth, overline)
- 텍스트의 효과를 설정하거나 제거하는데 사용합니다.
  하이퍼링크 밑줄을 없애거나 리스트의 꾸밈표시를 없앨 수 있습니다.

font-variant: (small-caps)
- 소문자를 소문자 크기의 작은 대문자로 변경할 수 있습니다.

text-shadow: 가로길이 세로길이 번짐정도 색상;
- 텍스트에 그림자 효과를 설정할 수 있습니다. 위의 설정들을 차례대로 적어줍니다.

white-space: (nowrap, pre, pre-wrap, pre-line)
- 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 결정하는 속성입니다.
- 기본적으로 normal;로 자동 줄바꿈이 되도록 설정되어 있습니다.

자동 줄바꿈을 하지 않는 경우
text-overflow: (clip, ellipsis)
- 텍스트를 줄바꿈하지 않았을 때 넘치는 텍스트를 어떻게 처리할지 결정하는 속성입니다.
- clip은 넘치는 텍스트가 그냥 생략되고 ellipsis는 벽을 만나면 ...으로 텍스트 생략합니다.

overflow: (visible, hidden, scroll, auto)
- 요소 내의 컨텐츠가 너무 커서 모두 보여주기 힘들 때 어떻게 보여줄지 결정하는 속성입니다.
- scroll을 사용하면 오른쪽과 아래에 스크롤이 모두 표시됩니다. 넘치지 않는 축의 스크롤은
  .txt4 {height: 150px; overflow-x: hidden; overflow-y: scroll;} 이런식으로 숨길 수 있습니다.

font-size: (px, %, em, rem, ...)
- 텍스트 크기를 설정합니다. em과 rem은 상대적인 크기 설정으로 반응형 웹 등에서 유용합니다.

font-family: 텍스트의 글꼴을 설정합니다.

✔ 글꼴을 선택하는 방법
 - 누구나 설치되어 있는 기본 글꼴을 사용한다.
 - 이미지로 처리한다.
 - 클라이언트에 글꼴을 다운로드 시켜 사용한다.(글꼴을 다운 받겠냐는 동의를 구해야함)
 - 웹 폰트를 사용한다.(기본 글꼴보다 더 다양한 글꼴 사용 가능)

font-weight: (기본 굵기: 400, 범위 100 ~ 900)
- 텍스트의 굵기를 설정합니다.

2. CSS 배경

background-color:
- HTML 요소의 배경색을 설정합니다.

background-image: url(파일경로)
- HTML 요소의 배경으로 나타날 배경 이미지를 설정합니다.
- 배경 이미지는 기본 설정으로 '반복'되어 나타납니다.

background-repeat: (repeat-x, repeat-y, no-repeat)
- 배경 이미지를 수평이나 수직 방향으로 반복하도록 설정할 수 있습니다.
- no-repeat을 설정해야 배경 이미지가 반복되지 않습니다.

background-position
- 반복되지 않는 배경 이미지의 상대 위치를 설정합니다.
- % 나 px를 사용하여 상대위치를 직접 설정할 수 있습니다.
	(background-position: 가로위치 값 세로위치 값;)
	(상대 위치를 결정하는 시작 기준은 왼쪽 상단)
- 위치로 설정도 가능합니다. 예) background-position: center bottom
  left top      center top      right top
  left center   center          right center
  left bottom   center bottom    right bottom


background-attachment: (scroll;기본값, local, fixed)
- fixed : 위치가 설정된 배경 이미지를 원하는 위치에 고정할 때 사용됩니다.
	고정된 배경 이미지는 스크롤과 무관하게 화면 위치에서 이동되지 않습니다.

background-size : ( px, %, contain, cover)
- 반복되지 않는 배경 이미지 크기를 설정합니다.
	- contain 
    배경 이미지의 가로, 세로 모두 요소보다 작다는 전제하에 가능한 설정
    가로, 세로 비율은 유지
    배경 이미지의 크기는 요소의 크기보다 항상 작거나 같음
	- cover
    배경 이미지의 가로, 세로 모두 요소보다 크다는 전제하에 가능한 설정
    가로, 세로 비율은 유지
    배경 이미지의 크기는 요소의 크기보다 항상 크거나 같음

background: 배경 속성을 한꺼번에 적용할 수 있습니다.
    background 색상 파일위치 반복여부 위치(position) 사이즈 ...

✔️ 무료 jpeg 배경 사이트
	https://pixabay.com/ko/

3. 박스 모델(Box Model)

모든 HTML 요소는 박스 모양(사각형)으로 구성되어 있습니다.
박스 모델은 HTML 요소를 내용, 패딩, 테두리, 마진으로 구분합니다.

내용(content)
- 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분

패딩(padding)
- 내용과 테두리 사이의 간격 또는 여백
- padding : 위 오른쪽 아래 왼쪽 순으로 설정

- padding-top, padding-right, padding-bottom, padding-left으로 따로 적용 가능

    div#padding {padding: 20px 50px 30px 10px;}
    위 20px, 오른쪽 50px, 아래 30px, 왼쪽 10px 여백

    div#padding {padding: 20px 50px 30px;}
    위 20px, 오른쪽 왼쪽 50px, 아래 30px 여백

    div#padding {padding: 20px 50px;}
    위 아래 20px, 오른쪽 왼쪽 50px 여백

    div#padding {padding: 20px;}
    위 오른쪽 아래 왼쪽 20px 여백

테두리(border)
- 내용(content)과 패딩(padding) 주변을 감싸는 프레임
- border-style(테두리 모양), border-color(테두리 색상), border-width(테두리 두께), border(한꺼번에 설정)

마진(margin)
- 테두리(border)와 이웃하는 요소들 사이의 간격
- 마진은 눈에 보이지 않음
- 세로 겹침 현상이 일어남

✔ 세로 겹침 현상 
세로로 나열된 두 박스의 간격은 두 마진의 합이 아니라 둘 중 큰 값을 선택하는 현상

✔ 박스 사이징(Box-sizing)
- width, height는 padding, border 영역을 포함하지 않음
- 만약 width가 100%로 설정되는 경우 padding이나 border 속성을 추가하면 안됨
- Box-sizing 속성값을 border-box로 설정하면 width와 height값에 padding과 border를 포함

    (기본값은 Box-sizing: content-box)