dev/HTML + CSS

HTML / CSS - 텍스트 꾸미기

꼿모 2023. 3. 5. 17:40

 

HTML / CSS로 텍스트 꾸미기 

 

 * 텍스트 색상 

 color: 

- 키워드(red,blue,...) / HEX(#16진수표기법,색상코드) / rgb(), rgba(), hsl(), hsla() 등 다양한 방법으로 표기할 수 있다. 

- 보통 헥스(HEX)를 많이 사용하며, 투명값은 rgba()에서 설정 가능하다. (투명도는 0~1)

- transparent는 투명한 색을 의미한다. 

p { 
	color: red; 
 }
 
/* font-color: red; 는 잘못된 코드! 
 글자 색을 변경할 때는 'font-'가 붙지않는다. */

 

※ rgb : Red, Green, Blue 값을 10진수 형식으로 표기한 것으로 색상 범위는 0~255이며 쉼표로 구분한다. 

hsl : Hue(색조)는 색상환의 각도로, Saturation(채도)와 Lightness(명도)는 백분율로 표현한 것이다. 

rgba, hsla : a는 알파채널(alpha channel), 즉 투명도를 의미한다. 

 

 

 currentColor 

- 부모 요소에 color 값이 있다면 상속으로 처리된다. 

div {	color: sandybrown;}
p {	
	border: 1px solid currentColor;
}

/* 
div가 부모요소, p가 자식요소라면 p의 border 색상은 부모요소의 색상인 sandybrown으로 표시된다.
*/

✏ 저시력 시각장애를 위해 폰트의 색상과 배경의 명도 대비도 중요하다. 최소한 4.5:1이 되어야 좋다! 

 

 

 

 

 

 * 글씨체(글꼴) 변경

 font-family

- 하나의 폰트만 지정했을 때 사용자의 컴퓨터에 해당 폰트 파일이 없다면 기본값으로 보여지게 된다. 이때 폰트 집합 코드인 font-family를 사용하여 대체할 폰트를 지정할 수 있다.

- 부모요소에서 자식요소로 상속된다.

- 하나 이상의 글꼴을 나열할 때 쉼표로 구분한다. 

- 글꼴 이름에 공백이 들어갈 경우 따옴표로 묶어준다.

- 한글 폰트인 경우 한글과 영문명을 같이 작성하는 것이 좋다. 

- 항상 시작은 family-name으로, 마지막은 generic family로 설정해야 한다.

- family-name : 글꼴 이름 

- generic family : 모양이 비슷한 글꼴들의 그룹

- 웹 폰트가 다운로드되지 않는 환경을 대비하여 기본 글꼴도 함께 명시해 주는 것이 좋다. 

p {
    font-family: 'Pretendard-Regular', Verdana, sans-serif;
}

 

✏ 원하는 글꼴을 대부분의 사용자와 브라우저에 적용하기 위해서 해당 사이트를 참고하자.  

https://www.thoughtco.com/web-safe-font-stacks-3467429

✏ 한글은 한글 폰트로, 영문은 영문 폰트로 나오길 원한다면 영문폰트명, 한글폰트명 순으로 적어준다.

 

 

 * 폰트 적용 방법 

※ 구글폰트 (https://fonts.google.com/)

눈누 (https://noonnu.cc/)

 

 

 link 

- HTML 문서에 <link> 태그를 추가하여 적용한다. 

💭 영어 폰트 적용을 위해 '구글폰트'에서 <link>와 font-family 값을 가져왔다.

<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Rubik+Iso&display=swap" rel="stylesheet">
    <style>
    body {
        font-family: 'Rubik Iso', cursive;
    }
    </style>
</head>

적용 결과

※  preconnect : 현재 페이지에서 외부 도메인의 리소스를 참고하는 것을 브라우저에게 알려 미리 외부 도메인과 연결을 설정할 수 있게 한다. 

 

 

 

 

 @font-face 

- 브라우저 사용자의 컴퓨터에 특정 폰트가 설치되어 있지 않아도 사용할 수 있도록 해준다.

- font-face 속성에 연결해 놓은 폰트 경로를 통해 폰트를 받아온다. 

✏ 링크로 삽입된 폰트를 브라우저로 열어보면, 결국 많은 @font-face로 이루어져 있다. 

💭 한글 폰트 적용을 위해  '눈누'에서 @font-face 값을 가져왔다.

    <style>
    @font-face {
        font-family: 'RixMomsBlanketR';
        src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/RixMomsBlanketR.woff2') format('woff2');
        font-weight: normal;
        font-style: normal;
    }
    body {
        font-family: 'RixMomsBlanketR', "돋움", sans-serif;
    }
    </style>

적용 결과

 

 

 

 @import 

- 렌더링 속도를 느리게 하기 때문에 성능 저하가 주의된다. 

- @import 태그는 <style> 태그 최상단에 위치한다. 

💭 '구글폰트'에서 @import와 font-family 값을 가져왔다.

  <style>
    @import url('https://fonts.googleapis.com/css2?family=Rampart+One&display=swap');

    body {
        font-family: 'Rampart One', cursive;
    }
    </style>

적용 결과

 

 

 

 로컬에 install 해서 적용하기 

@font-face {
    font-family: "Pretendard-Regular";
    src: url("font/font/Pretendard-Regular.woff") format("woff");
    
   /* src : url("로컬 파일이 다운로드 되어있는 경로" format("확장자"); */

※ 폰트 포맷 

  • TTF : Mac 및 Windows 운영 체제에서 가장 일반적인 글꼴이다. 파일 크기가 큰 편이다. 
  • OTF : Mac 및 Windows 운영 체제에서 사용 가능하며, 확장된 문자 집합에 대한 지원을 포함한다. 최대 65,000 자의 저장 공간을 허용하고 파일 크기가 큰 편이다. 
  • EOT : Microsoft 웹에서 사용하는 글꼴로 IE에서만 지원한다. 
  • WOFF : 주요 브라우저에서 지원하는 메타 데이터 및 압축 기능을 갖추고 있으며 글꼴이 압축되어 있어 로드 속도가 빠르다. 성능 최적화에 도움을 준다. 

✏ Can I use ? (https://caniuse.com/) 사이트를 통해 브라우저 지원 여부를 확인할 수 있다.

 

 

 

 

 

 * 글꼴 크기 

 font-size: 

- px : 절대 단위, 고정된 값 

- em : 현재 요소의 부모 요소에 설정된 글꼴 크기에 대한 상대 단위 

- rem : <html>(root)에 설정된 글꼴 크기에 대한 상대 단위

✏ em, rem 단위는 반응형 웹페이지 개발 및 유지보수에 용이하다. 

p {
	font-size: 60px;
 }

 

 

 

 * 텍스트 굵기 

 font-weight: 

  • normal : 기본 
  • bold : 굵게 
  • lighter : 현재 요소의 굵기를 부모 요소 굵기보다 한 단계 얇게  
  • border : 현재 요소의 굵기를 부모 요소 굵기보다 한 단계 두껍게
  • 고정값 (100 - 900)으로도 설정 가능하다. 
p {
	text-weight: bold;	
}

 

 

 

 * 텍스트 변형 

 text-transform 

  • none : 변형 방지 
  • uppercase : 모든 텍스트를 대문자로 표시한다. 
  • lowercase : 모든 텍스트를 소문자로 표시한다. 
  • capitalize : 모든 단어의 첫 글자를 대문자로 표시한다. 
p {
	text-transform: uppercase;	
}

 

 

 

 

 * 텍스트 데코레이션 

 text-decoration-line 

  • underline : 밑줄 긋기 
  • overline : 위 쪽 줄 긋기 
  • line-through : 취소선 

 

 text-decoration-style 

  • solid : 실선
  • wavy : 물결 모양 선 
  • dashed : 점선

 

 text-decoration-color 

- 색상 설정

 

 

 text-decorationg-thickness 

- 굵기 설정

 

 

 text-decoration 단축 속성 

- color | line | style | thickness 

.dashed {
  text-decoration: lime underline overline dashed auto;
}

.wavy{
	text-decoration-color: royalblue;
  	text-decoration-line: line-through underline overline;
  	text-decoration-style: wavy;
	text-decoration-thickness:5px;
}

 

 

 

 

 * 텍스트 그림자 

 text-shadow 

- 축약형 : offset-x | offset-y | blur-radius | color

- 여러 개 적용이 가능하다.

- box-shadow: 박스 그림자를 나타낸다. 

p {
	text-shadow: 1px 1px 2px red
}

 

 

 

 * 텍스트 정렬 

 text-align 

- 텍스트의 가로 정렬을 설정한다. 

  • left : 왼쪽 정렬 
  • right : 오른쪽 정렬 
  • center : 중앙 정렬
  • justify : 양쪽 정렬 
  • justify-all : 양쪽 정렬 (마지막 줄 적용)

✏ 양쪽 정렬 적용 시 생기는 불규칙한 여백(흰 강 현상-River of white)은 가독성이 떨어지게 한다. word-break:break-all 속성을 적용해서 해결 가능하며, 한글에서는 흰 강 현상이 일어나지 않는다. 

흰 강 현상

 

 

 * 세로 정렬 

 vertical-align 

- 인라인, 인라인 블록 및 테이블 셀 요소에만 적용된다. 

- 텍스트를 수직으로 정렬하지는 않는다. 

- 기본값은 baseline이다.

vertical-align

✏ 가로로 쓰인 텍스트를 link-height에 맞추어 정렬해 준다. 수직 정렬이 아니다!  

 

 

 

 

 

 * 텍스트 간격 

 line-height 

- 행간을 설정한다. 

- 단위, 배수, % 등의 값으로 설정할 수 있다.

✏ 고정값(px, em)보다 단위, 배수, % 등의 값으로 설정하는 것이 좋다. 

 

 

 letter-spacing 

- 글자 간의 간격을 설정한다. 

- 단위 값으로 설정할 수 있다. 

 

 

 word-spacing 

- 단어와 단어 사이의 간격을 설정한다. 

- 단위 값으로 설정할 수 있다. 

 

 

 text-indent 

- 문단 첫째줄 들여 쓰기의 길이를 설정한다. 

 

 

 word-break 

- 텍스트가 자신의 콘텐츠 박스 밖으로 넘칠 경우 줄 바꿈 여부를 설정한다. 

  • normal : 기본 줄 바꿈 
  • break-all : 글 넘침을 방지하기 위해서 어떤 두 문자 사이에서도 줄 바꿈이 발생할 수 있게 한다. (한중일 텍스트 제외) 
  • keep-all : 한중일 텍스트에서 줄을 바꿀 때 단어를 끊지 않는다. 비 한중일 텍스트에서는 normal과 동일한 효과를 준다. 
    p {
        word-break:normal;
    }
    
    .en{
        word-break:break-all;
    }
    
    .ko{
        word-break:keep-all;
    }

 

 

 text-overflow 

- 텍스트가 넘칠 경우 어떻게 표시할 것인지 설정할 수 있다. 

- 말 줄임 처리할 때 주로 사용한다. 

  • ellipsis : 말 줄임 '...'
  • white-space:nowrap : 줄 바꿈 하지 않고 한 줄로 보여준다.
p {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

 

 

 * font (단축 속성) 

 font:  font-style | font-variant | font-weight | font-stretch | font-size/line-height | font-family 

- 순서대로 작성해야 한다! 

- line-heigh는 font-size를 꼭 적고 사용해야 한다. 

p {
	font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
}

 

💭 단축 속성이 익숙해지도록 공부하자! 그래도 헷갈릴 땐 개별요소로 풀어서 쓰기..ㅎ

 

 

 

 

 

 

 

 

 

 

 

잘못된 정보에 대한 피드백은 언제든지 환영입니다!