[ CSS / HTML ] 텍스트 디자인 설정
2024. 4. 19. 21:55ㆍ· FRONT-END/└ CSS
환경: Visual Studio Code
긴 글 텍스트 URL : https://www.lipsum.com/
[ 텍스트 디자인 ]
- word-break 설정을 통해 줄바꿈 기준을 정한다
- 줄바꿈을 윈치 않는 경우도 설정 가능하도록 구현한다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>폰트 설정</title>
<!-- 구글 폰트 -->
<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=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
<!-- 폰트를 먼저 불러온 후 commons.css의 폰트를 찾아야 되는 순서임!!-->
<link rel="stylesheet" type="text/css" href="commons.css">
<link rel="stylesheet" type="text/css" href="test.css">
<!-- font awesome 아이콘 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
.dummy-text {
word-break: break-all;
}
.ellipsis {
/*
텍스트 한줄 + 말줄임표 스타일
다음 세 개의 스타일을 같이 사용해야 말줄임표 처리가 된다.
단, 반드시 영역에 폭이 설정되어 있어야 한다
*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /*말줄임표(...) 표시*/
}
/*
웹 폰트 설정
*/
@font-face {
font-family: IntelOneMono;
src: url("font/IntelOneMono-Medium.ttf");
}
* {
font-family: "Noto Sans KR", sans-serif;
}
</style>
</head>
<body>
<div class="container w-500">
<div class="cell center">
<h1>폰트 디자인</h1>
</div>
<div class="cell">
<h2>Lorem Ipsum</h2>
</div>
<div class="cell"><h2>줄바꿈 기준 변경</h2></div>
<div class="cell dummy-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="cell"><h2>한줄+말줄임표</h2></div>
<div class="cell ellipsis">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</body>
</html>
폰트 설정에는 다양한 방법이 있다.
그 중 말줄임표 설정을 위해서는 아래 코드를 사용해야한다.
/*
텍스트 한줄 + 말줄임표 스타일
다음 세 개의 스타일을 같이 사용해야 말줄임표 처리가 된다.
단, 반드시 영역에 폭이 설정되어 있어야 한다
*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /*말줄임표(...) 표시*/(+) 텍스트가 길어서 부모의 가로폭을 넘어가더라도 자동 줄바꿈이 일어나지 않게 하고자 할 때 nowrap으로 설정을 해줘야 한다. (기본 값 : normal)
(+) 흘러넘치는 텍스트를 안 보이게 (부모 요소 밖으로 튀어나오는 텍스트를) 가려주기 위해 hidden 속성을 사용한다.
(+) 사용자의 입장에서 텍스트가 갑자기 끊기게 되면 당황스러울 수 있다. 따라서 말줄임표 표시를 해주는 것이 좋다
... 과 같은 말줄임 기호를 보여주기 위해 text-overflow의 속성을 ellipsis로 사용한다.
웹 폰트를 설정하기 위해선 다음과 같다.
<!-- 구글 폰트 -->
<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=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">/*
웹 폰트 설정
*/
* {
font-family: "Noto Sans KR", sans-serif;
}(+) 구글의 경우 웹 폰트를 지원한다.
따라서 라이브러리를 링크태그로 불러와 사용하면 된다.
(+) css 코드로 사용하고자 하는 구글 웹 폰트명을 작성해주면 된다.
개인 공부 기록용입니다:)
728x90
'· FRONT-END > └ CSS' 카테고리의 다른 글
| [ CSS / HTML ] menu bar 만들기 (0) | 2024.04.21 |
|---|---|
| [ CSS / HTML ] checkbox 활용한 디자인 (1) | 2024.04.20 |
| [ CSS / HTML ] 아이콘 디자인 (0) | 2024.04.18 |
| [ CSS / HTML ] 전체화면 가리기, overlay를 중앙에 오게하는 방법 (0) | 2024.04.17 |
| [ CSS / HTML ] relative를 이용한 디자인 (0) | 2024.04.15 |