TIL - CSS (상속 / 웹폰트 / 폰트 속성 / 단위)

CSS 상속

HTML 요소의 부모, 자식 관계

CSS의 상속?

기본적으로 CSS는 부모 요소에 지정한 속성값을 자식 요소에게도 상속해서 적용합니다.

• 상속되는 속성
  - color
  - font-family
  - font-size 등
• 상속되지 않는 속성
  - padding
  - margin
  - border 등

  ---

웹폰트

font-family

HTML 요소의 글씨체를 바꾸고 싶다면 font-family 라는 속성을 이용하면 됩니다.

.선택자{
	/* 폰트이름에 공백이 있는 경우 */
	font-family:"폰트 이름","폰트 이름2","폰트 이름3"
	/* 폰트이름에 공백이 없는 경우 */
	font-family:폰트이름,폰트이름2,폰트이름3
	/* 혼용해서 사용할 경우 */
	font-family:폰트이름,"폰트 이름2"
}

❗ 여기서 잠깐!
font-family 를 적용할 때 “해당 폰트가 없으면 다음으로 넘어간다.”
즉, 해당 폰트 파일이 유저의 컴퓨터에 설치되어 있어야 HTML 문서에 적용이 가능하다는 뜻
하지만, 폰트를 적용하기 위해 해당 웹사이트에 접속하는 모든 유저에게
“폰트를 설치 후 이용해주세요!” 라는 메시지를 띄운다면,
유저 편의성이 너무 떨어진다! 그래서 나온 것이 웹폰트!

웹폰트

• 위와 같은 단점을 보완하고자 만들어진 것이 바로 웹폰트

• 웹폰트는 웹 전용 폰트, 사용자가 본인의 컴퓨터에 폰트를 직접 설치하지 않아도
  특정 서버에 위치한 폰트를 다운받아 웹페이지에 표시 할 수 있게 해준다.

• 웹 폰트 적용 방법
  1. 폰트 파일을 직접 다운로드 받아서 적용하는 방법 @font-face 이용
  2. 외부 서비스에서 제공하는 링크를 이용하는 방법 @imfort 혹은 <link> 이용

1. 폰트 파일을 직접 다운로드 받아서 적용하는 방법

• @font-face
  1. 웹 폰트 파일을 준비 (확장자 명 : woff / woff2 / ttf / eot )
  

  2. css 문서에서 @font-face를 이용해 폰트 파일을 불러옴

  3. @font-face 안에서 해당 폰트 파일을 어떤 이름의 font-family로 지정할 것인지 설정
     
     

  4. 만든 font-family를 사용한다.

     

  2. 외부 서비스에서 제공하는 링크를 이용하는 방법

• @import

  1. google fonts 사이트에 접속 후 , 원하는 폰트 옆에 있는 select this style를 클릭
     

  2. use on web 항목에서 import를 선택하고, 해당 import 구문을 css파일 내에 입력
     

  3. css rules to specify families를 참고하여 font-family를 적용해주시면 된다.
     

---

폰트

• font-size 텍스트의 크기 지정
  • 속성 값에는 px, rem, em 등의 단위 사용 가능
• font-weight 텍스트의 두께 지정
  • 100단위의 수치를 직접 입력하거나 regular, bold 등의 키워드를 속성 값으로 줄 수 있다.
• text-decoration 텍스트에 장식용 선 추가
  • none / underline / overline / line-through
• color 텍스트 색상 지정
  • 헥스코드: #000000 / RGB컬러: rgb(0,0,0) / 키워드: red
• line-height 텍스트 행간 설정 (단위 입력 필수, 안 할 경우 당연하게 배율로 인지함)
• letter-spacing 텍스트 자간 설정
• word-spacing 텍스트의 단어 간 간격 지정
• text-align 블록요소나 표 안에서 텍스트의 가로 정렬 방식 지정
  • center / left / right / justify
• vertical-align 인라인 요소나 표 안에서 텍스트의 세로 정렬 장식 지정
  • top / middle / bottom
• text-indent 텍스트의 들여쓰기
• text-transform 영문 텍스트의 대소문자를 바꿔줌
  • cpaitalize / none / uppercase / lowercase
• word-break 텍스트가 콘텐츠 박스 영역 밖으로 넘쳤을 때, 어떻게 줄을 바꿀지 설정
  • keep-all / break-all
• overflow-wrap 단어가 콘텐츠 박스 영역 밖으로 넘쳤을 때, 줄 바꿈의 여부 설정
  • normal / break-word

❗ overflow-wrap vs word-break

word-break: break-all은 모든 단어를 음절 단위로 쪼개게 된다.
→ 따라서 오히려 문단을 읽기가 불편해집니다.
overflow-wrap: break-word는
사용자가 문장을 읽기 편하도록 띄어쓰기 기준으로 줄바꿈을 한다.
단어가 길어서 영역 밖으로 넘칠 때에만 단어 중간에 줄바꿈을 하기 때문에 가독성 Good

• overflow 콘텐츠가 커서 요소 안에서 내용을 다 보여주기 힘들 때, 어떤 방식으로 보여줄 지 설정

  • visible / hidden / scroll / auto

• text-overflow 줄바꿈을 하지 않을 때, 요소 밖으로 넘치는 text를 어떻게 표기 할 것인지 설정

  • clip / ellipsis
    • text-overflow를 적용하기 전 선행 조건
      1. white-space : nowrap;
      2. overflow : hidden;

  ---

  단위

  절대단위 / 상대단위

• 절대단위

  • 외부 요인의 영향을 받지 않고 절대적인 값을 지니는 단위
    ex) cm, m, kg, g… etc

• 상대단위

  • 외부 요인의 영향을 받아 유동적인 값을 지니는 단위
    ex) %

절대 단위

• px = pixel = 화소
  • 화면을 구성하는 가장 기본이 되는 단위
  • px은 웹에서 가장 많이 사용되는 절대 단위
  • 디지털 화면은 수많은 작은 네모들로 구성이 되어있다
  • 네모 한 칸이 1px
• pt(포인트) = 1/72 inch(인치)
  • 인쇄를 위한 단위
  • 인쇄를 위한 단위이기 때문에 웹에서는 잘 사용하지 않는다.
    보통 워드 프로세서 등 문서 편집 프로그램에서 pt를 많이 사용함

상대 단위

• %
  • 부모 요소의 해당 속성 값에 비례하여 지정한 비율의 값을 적용
  • 기준: 부모 요소
• em
  • 스타일 지정 요소의 font-size 속성 값에 비례하여 값을 결정
  • 기준: 폰트 당사자

💡 /* font-size : 16px 인 경우 */
1em => 16 * 1 = 16px
0.8em => 16 * 0.8 = 12.8px
3em => 16 * 3 = 48px

• rem
  • 최상위 HTML 요소의 font-size속성 값에 비례하여 값을 결정
  • 기준: HTML 요소의 font-size속성 값

💡 /* font-size : 16px 인 경우 */ 
1rem => 16 * 1 = 16px
0.8rem => 16 * 0.8 = 12.8px
3rem => 16 * 3 = 48px

참고

[인프런x코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
https://inf.run/uzui