[CSS] Font, Background

Background

-해당 요소의 배경을 지정한다. 이미지나 색상이 올 수 있다. 설정 가능한 속성은 이쪽: developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders

-이미지를 사용하고 싶은 경우 background-image: url("파일경로");를 쓴다. 여러 이미지를 겹쳐서 사용할 수도 있다. 먼저 설정한 이미지가 앞으로 온다. 아래의 repeat, size 등은 이미지 별로 지정 가능한데, 쉼표로 구분해야 한다.

 

-이미지가 화면 크기보다 작은 경우 background-repeat를 이용해서 채우기를 할 수 있다. 기본값은 repeat이고 화면에 반복 출력된다. 반복하지 않으려면 no-repeat을 쓴다. 가로나 세로로만 채우고 싶다면 repeat-x(가로), repeat-y(세로)를 쓰면 된다.

 

-이미지의 크기를 변경하고 싶은 경우 background-size를 사용하면 된다. width, height값을 줄 수 있고, 값을 하나만 주면 width에 적용되고 height는 auto로 고유 비율에 따라 정해진다. 값은 px, %, cover, contain으로 줄 수 있다. 한 이미지에 값을 줄 때는 100px 100px처럼 쉼표 없이 쓴다. 이미지가 2개인 경우, 100px 50px, 70px 30px이라고 쓰면 첫 번째 이미지는 100x50, 두 번째 이미지는 70x30이 된다.

-contain: 이미지가 잘리거나 찌그러지지 않는 한도 내에서 제일 크게 설정 (repeat인 경우, 가로세로 중 작은 쪽이 채우기된다.)

-cover: 이미지가 찌그러지지 않는 한도 내에서 제일 크게 설정 (가로세로가 1:1이 아니면 남는쪽을 잘라낸다.)

 

-스크롤을 하더라도 배경이미지를 고정하고 싶다면 background-attachment: fixed를 주면 된다. viewport를 기준으로 고정된다. local인 경우 요소의 콘텐츠에 고정되어서, 콘텐츠가 많아서 스크롤되는 경우 배경도 함께 스크롤된다. scroll인 경우 요소 자체의 크기(border 내부)에 고정된다.

 

-background-position으로 이미지 위치를 지정할 수 있다. top, left, center처럼 키워드로 줄 수도 있고, 25% 75%처럼 가로의 25%, 세로의 75% 되는 위치에 둘 수도 있고, bottom 50px right 100px; 처럼 줄 수도 있다. bottom은 위아래 높이이므로 Y축의 아래에서 50px 떨어진 위치, right는 좌우 너비이므로 X축의 오른쪽에서부터 100px 떨어진 위치를 말한다.

 

-background-color는 색을 지정한다.

정해진 색상명(red, blue) 이나 HEX 코드 (#000000), rgb, rgba(alpha/투명도), hsl(Hue/색상, Saturation/채도, Lightness/명도), hsla 등 여러 방법으로 표현할 수 있다.

색상 리스트는 이쪽: www.w3.org/TR/css-color-3/

 

-한번에 지정할 수도 있다. background: color || image || repeat || attachment || position처럼 주면 된다.

 

---

Font

-font-size: px, em %, small large, .. 등으로 값을 지정할 수 있다.

-font-family: 폰트를 지정한다. 여러 개를 지정한 경우, 설치되어 있는 폰트 중 먼저 지정된 폰트가 적용된다. 보통 마지막 폰트는 기본폰트인 Serif, Sans-serif 등을 지정한다. 폰트명에 띄어쓰기가 있는 경우 따옴표("")를 이용해서 적고, 각 폰트는 쉼표로 구분한다.

font-family: "Gill Sans", sans-serif;

-font-style: normal, italic, oblique(기울임꼴), oblique (각도)를 이용해서 글꼴을 기울인다. 각도는 -90도부터 90도(90deg)까지 쓸 수 있다. 기본값은 14deg.

font-style: oblique 20deg

-font-weight: 굵기를 지정한다. normal, bold, lighter처럼 키워드로 쓰기도 하고, 100, 200, 400(=normal), 700(=bold), 900처럼 숫자 키워드를 사용하기도 한다.

-font-variant: 텍스트를 대문자로 표시하거나(small-caps), 0을 O와 구분하기 위해 다르게 표시하거나(slashed-zero) 등 다양한 글자를 표시하기 위해 사용한다.

-line-height: 줄 간격을 지정한다. normal인 경우, 파이어폭스라면 기본값인 1.2가 적용된다. 단위 없이 표시하면 요소의 font-size의 몇 배인지로 적용된다. %를 사용하면 폰트사이즈 대비 %로 적용되고, em을 주면 상속 받은 글꼴크기의 배로 적용되므로, 의도치않은 결과가 나올 수도 있다. 해당 요소의 line-height과 부모 요소의 height 값을 일치시키면 수직 정렬할 때도 쓴다.

 

-한번에 지정하려면 font: font-style font-variant font-weight font-size(필수) line-height font-family(필수).

 

-letter-spacing: 자간을 조정한다. normal이나 px, em 값 등을 받는다. 음수 값도 입력할 수 있다.

-text-align: 블록 요소, 표의 cell box의 정렬을 지정한다. left, right, center, justify(양쪽 정렬 or 배분 정렬) 등이 있다. inline 요소는 width 개념이 없기 때문에 text-align을 지정하더라도 적용되지 않는다. inline에 정렬을 주고 싶다면 display: block;을 먼저 설정하면 된다.

-text-decoratoin: 으로 강조선을 표시할 수 있다. 밑줄, 취소선, 윗줄 등 선의 위치와, 색, 선 스타일, 선 두께 등을 조정할 수 있다. 밑줄을 없애고 싶다면 text-decoration: none;을 쓰면 된다. 상세는 이쪽: developer.mozilla.org/ko/docs/Web/CSS/text-decoration

-white-space: 띄어쓰기( ), 들여쓰기(\t), 줄바꿈(\n)를 조정한다. 기본값은 연속된 공백문자를 하나로 합치고, 콘텐츠크기가 해당 요소의 박스 너비를 넘어서면 자동으로 줄바꿈 되도록 되어있다.

nowrap: 줄바꿈은 무시되고 띄어쓰기와 탭은 여러 번 쳐도 1번만 적용된다. (넘치는 분량은 화면 밖으로 나간다. overflow에 스크롤 설정이 되어있다면 스크롤이 생긴다.)

pre: 줄바꿈, 띄어쓰기, 탭 모두 타이핑한대로 적용되지만, 자동 줄바꿈은 없다. 넘치는 분량은 화면 밖으로 나간다.

pre-wrap: pre + 자동 줄바꿈

pre-line: nowrap + 줄바꿈 반영 + 자동 줄바꿈

break-spaces: pre-wrap + 줄 마지막에 있는 공백도 살림

이쪽에 가면 표로 정리되어 있으니 필요한 걸 찾아서 쓰면 되겠다. developer.mozilla.org/ko/docs/Web/CSS/white-space

HTML

<h2>pre-wrap</h2>
<p class="pre-wrap">Lorem ipsum dolor
sit amet, consectetur adipisicing elit,
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.                                                                                                
 
 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<hr>
<h2>break-spaces</h2>
<p class="break-spaces">Lorem ipsum dolor
sit amet, consectetur adipisicing elit,
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.                                                                                                
 
 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

CSS

.pre-wrap {
  white-space: pre-wrap;
}
.break-spaces {
  white-space: break-spaces;
}
p {
  font: oblique 20deg lighter 1em/0.9 "Fira Sans", San-serif;
  letter-spacing: 2px;
  text-decoration: coral wavy underline 1px;
}
body {
  font-size: 16px;
}
h2 {
  text-align: center;
  line-weight: 100%;
}

3번째 줄의 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 뒤에는 띄어쓰기가 여러번 반복되어 있다. break-spaces에서는 그 띄어쓰기를 다 살려주고, pre-wrap은 문장 마지막 띄어쓰기는 삭제한다.

 

-위에서 nowrap이나 pre 등을 택해서 넘치는 텍스트가 줄 밖으로 나간다면, text-overflow에서 처리 방법을 지정해줄 수 있다. block 컨테이너 밖으로 overflow된 텍스트에 대해 적용된다.

clip: 해당 블럭에 보이는 부분까지만 보여준다.

ellipsis: 잘리는 경우 텍스트 대신 ...가 표시된다. ...를 표시할 공간이 없는 경우 생략된다.

" - "와 같이 string을 주면 해당 텍스트가 표시된다. 이 기능은 파이어폭스에서만 지원된다.

-줄이 아니라 단어가 박스 영역을 넘어갔다면 word-wrap을 쓸 수 있다. link 표기에 유용하다. normal, break-word, anywhere을 값으로 받는다. normal은 부모영역을 넘어가고, break-word는 임의의 지점에서 줄을 바꿔준다.

-word-break는 단어가 박스영역을 넘어가면 어떻게 할지를 정해줄 수 있다. 한중일어는 keep-all이 아닌 한 행 넘어가는 부분에서 자동줄바꿈이 되고, 나머지 언어, 영어 등의 언어는 기본값은 박스 넘어가기, break-all을 하면 행 넘어가는 부분에서 자동줄바꿈, break-word-break: normal and overflow-wrap: anywhere과 똑같다고 한다.