html/css - 텍스트 관련 스타일
업데이트:
1. 글꼴 관련 스타일
font-family 속성 - 글꼴 지정하기
웹 문서에서 사용할 글꼴은 font - family 속성으로 지정한다. 예를 들어 텍스트 문단의 글꼴을 “굴림”으로 하고 싶다면 다음과 같이 정의한다.
p {font-family:굴림;}
속성 값은 주로 큰따움표를 사용한다. “맑은 고딕” 처럼 두 단어 이상으로 된 글꼴 이름이라면 따옴표로 묶어 표시한다.
웹 문서에 포함된 텍스트는 사용자 컴퓨터에 설치된 글꼴을 이용해 웹 브라우저 화면에 표시된다. 만약 웹 문서에 “맑은 고딕”을 사용했다면 그 글꼴을 설치한 컴퓨터에서는 제작자가 의도한 모습으로 텍스트가 표시되지만 글꼴이 설치되지 않은 시스템인 경우, 브라우저의 기본 값이 나타나 각각 다른 글꼴로 표시된다.
따라서 웹문서에서 글꼴을 지정할 때는 한 가지 글꼴만 지정하기도 하지만 지정한 글꼴이 없을 경우 두 번째, 세 번째 글꼴까지 지정한다.
body {font-family:"맑은 고딕", 돋움, 굴림}
font-family 속성은 상속되기 때문에 <body>태그 스타일에서 일단 한번 정의하면 문서 전체에 적용되고 문서 안의 모든 자식 요소에 계속 같은 글꼴이 사용된다.
@font-face 속성 - 웹 폰트 사용하기
사용자 시스템에 없는 글꼴을 다른 글꼴로 대체하는 것이 아니라 그대로 보여 주려면 어떻게 해야 할까? 이전에는 개발자가 그래픽 프로그램에서 원하는 글꼴을 이용하 텍스트를 입력한 후 이미지로 저장해 웹 문서에 넣어 사용했다. 하지만 CSS3가 ‘웹 폰트(web font)’를 표준으로 채택한 이후 웹 폰트를 사용할 수 있다.
웹 폰트란?
웹 문서를 작성할 때 웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로드시키는 방식이다.
글꼴 저작권에 주의하기
글꼴 사용에 대해서는 사용권 범위가 까다롭기 때문에 반드시 사전에 확인해야 한다.
font-size 속성 - 글자 크기 조절하기
글자 크기는 픽셀이나 포인트를 비롯해 크기를 여러 단위로 지정할 수 있고 백분율을 사용할 수도 있다.
font-size:<절대 크기> | <상대 크기> | <크기> | <백분율>
사용할 수 있는 속성은 다음과 같다.
| 속성 값 | 설명 |
|---|---|
| <절대 크기=""> | 브라우저에서 지정한 글자 크기이다. 사용할 수 잇는 값은 xx-small | x-small | small | medium | large | x-large | xx-large이다. |
| <상대 크기=""> | 부모 요소의 글자 크기(font-size)를 기준으로 거 크게 표시하거나 더 작게 표시한다. 사용할 수 있는 값은 larger | smaller이다. |
| <크기> | 브라우저와 상관없이 글자 크기를 직접 지정한다. |
| <백분율> | 부모 요소의 글자 크기를 기준으로 해당하는 %를 계산해 표시한다.(%와 함께 표시) |
크기 값을 직접 지정할 때 사용할 수 있는 단위는 다음과 같다.
| 단위 | 설명 |
|---|---|
| em | 해당 글꼴의 대문자 M의 너비를 기준으로 크기를 조절한다. |
| ex | x-height이다. 해당 글꼴의 소문자 x의 높이를 기준으로 크기를 조절한다. |
| px | 픽셀. 모니터에 따라 상대적 크기가 된다. |
| pt | 포인트. 일반 문서에서 많이 사용하는 단위이다. |
px단위
웹에서 font-size 속성을 사용해 폰트 크기를 지정할때는 보통 px을 사용한다. 하지만 px단위를 사용하면 폰트 크기가 고정되어 창 크기가 작은 모바일 기기에서도 같은 작은 글씨로 표시된다. 따라서 모바일 기기를 고려한다면 em단위를 사용하는 것이 좋다.
em단위
em은 부모 요소에서 지정한 폰트의 대문자 M의 너비를 1em으로 놓고 상대적 값을 계산해 다른 요소들의 글자 크기를 조절한다. 만약 지정한 크기가 없다면 <body>요소의 크기 16px이 기본 값 1em으로 지정된다.
<style>
h1{font-size: 3em;}
p {font-size: 1em;}
</style>
<h1>3em의 크기를 가진 제목</h1>
<p>1em의 크기를 가진 단락</p>
출력 >
개발자도구에서 1em 제목 텍스트의 computed를 클릭하면 font-size:48px로 표시된 것을 확인할 수 있다. 3em은 16px이다.
font-weight속성 - 글자 굵기 지정
font style:속성값 | 속성값...
| 속성 값 | 설명 |
|---|---|
| normal | 일반적인 형태로 기본 값이다. |
| bold | light | bolder | 굵게 | 원래 굵기보다 더 가늘게 | 원래 굵기보다 더 굵게 |
| 100~900사이의 수치 | 400은 normal, 700은 bold에 해당하며 숫자 값을 직접 조절할 수 있다. |
font-style 속성 - 글자 스타일 지정하기
font style: normal | italic | oblique
| 속성 값 | 설명 |
|---|---|
| normal | 일반적인 형태로 표시한다. |
| italic | 이탤릭체로 표시한다 |
| oblique | 기울어진 글꼴로 표시한다. |
italic은 기울어진 글꼴이 처음부터 디자인되어 있는 반면 oblique는 기본 글꼴을 단지 기울어지게 표시만 할 뿐이다. 대부분 기울어진 형태에 맞게 글꼴이 디자인 되어 있어 웹에서는 italic을 주로 사용한다.
<style>
p {font-style: italic;} /*이탤릭체로*/
p.txt {font-style: normal;} /*p 요소 중 class=txt인 부분은 보통체로*/
</style>
<p>시드니, 호주</p>
<p>리우데자네이루, 브라질</p>
<p class="txt">나폴리, 이탈리아</p>
출력 >
font 속성 - 글꼴 속성을 한꺼번에 묶어 표현하기
앞서 배운 글꼴을 하나하나 소스 줄에 넣으면 소스가 매우 길어질 것이다. font 속성을 이용하여 여러 속성들을 한꺼번에 묶어 약식으로 표현할 수 있다.
font : font : <font-size><font-variant><font-weight><font-size/line-height><font-family> | caption | icon | menu | message-box | small-caption | status-bar
| 속성 값 | 설명 |
|---|---|
| font-* | font-로 시작하는 글꼴 관련 속성을 한꺼번에 나열한다. |
| caption | 캡션에 어울리는 글꼴 스타일을 표시한다. |
| icon | 아이콘에 어울리는 글꼴 스타일로 표시한다. |
| menu | 드롭다운 메뉴에 어울리는 글꼴 스타일로 표시한다. |
| message-box | 대화상자에 어울리는 글꼴 스타일로 표시한다. |
| small-caption | 작은 캡션에 어울리는 글꼴 스타일로 표시한다. |
| status-bar | 상태 표시줄에 어울리는 글꼴 스타일로 표시한다. |
font-size와 line-height는 12px/24px처럼 슬래시로 연결해 함께 표현한다. line-height는 줄 간격을 조절하는 속성인데 font속성은 아니지만 글자 크기와 줄 간격이 밀접한 관련이 있으므로 두 속성을 하나의 속성처럼 묶어서 사용하기도 한다.
p {font:16px/25px "맑은 고딕"}
주의
p {font:120%/120% bold}위와 같이 지정한 경우 글자 크기 120%는 부모 요소의 글자 크기를 기준으로 120%만큼 표시하고 뒤에 있는 줄 간격 120%는 현재 요소의 글자 크기를 기준으로 한다는 것이다.
<style>
p.txt {
font: italic 12px/24px 돋움;
}
</style>
<p class="txt">여러 요소가 함께 사용된 웹 문서에서는 글자크기와 글꼴이 중요합니다. 그리고 글자색을 선택하는 것도 아주 중요한 요소 중 하나입니다...</p>
<p>이럴 때 사용하는 것이 글꼴 속성입니다.</p>
<p style="font:caption"> [font:caption] 캡션에 어울리는 글꼴 스타일</p>
<p style="font:icon"> [font:icon] 아이콘에 어울리는 글꼴 스타일</p>
<p style="font:menu"> [font:menu] 드롭다운 메뉴에 어울리는 글꼴 스타일</p>
<p style="font:message-box"> [font:message-box] 대화상자에 어울리는 글꼴 스타일</p>
<p style="font:small-caption"> [font:small-caption] 작은 캡션에 어울리는 글꼴 스타일</p>
<p style="font:status-bar"> [font:status-bar] 상태 표시줄에 어울리는 글꼴 스타일</p>
예 >
2. 텍스트 스타일
color 속성 - 글자 색 지정하기
웹 문서의 문단이나 제목 등의 텍스트에서 사용되는 글자 색을 바꿀 때는 color 속성을 사용한다.
color : <색상>
<style>
h1 {color: rgb(0, 200, 0);} /*rgb값 사용 - 녹색 계열*/
h2 {color: blue;}
.accent {color: #ff0000;}
</style>
<h1>세계 10대 슈퍼푸드</h1>
<img src="images/galic.jpg">
<h2>마늘</h2><p>마늘은 한가지 해가 있고 백가지 이로움이 있다. 한 가지 해란, 먹으면서 위가 쓰린 것이다.</p>
<p>마늘 특유의 아린 맛은 <span class="accent">알리신</span>이라는 성분 때문으로.....</p>
예 >
text-decoration속성 - 텍스트에 줄 표시하기 / 없애기
text-decoration속성을 이용하면 텍스트에 밑줄을 긋거나 취소 선을 표시할 수 있다.
text-decoration : none | underline | overline | line-through
| 속성 값 | 설명 |
|---|---|
| none | 밑줄을 표시하지 않는다.(기본값) |
| underline | 밑줄을 표시한다. |
| overline | 영역 위로 선을 그린다. |
| line-through | 영역을 가로지르는 선(취소 선)을 그린다. |
<style>
p {line-height: el.8;}
a {text-decoration: none;} /*밑줄 없앰*/
.edited { text-decoration: line-through;} /*휘소 선*/
</style>
<p>다양한 기기로 인터넷에 접속할 수 있는 요즘,<br>
<span class="edited">HTML4</span> HTML5를 공부해야 할 때입니다.</p>
<p><a href="https://spec.whatwg.org/" target="_blank"><b>HTML5 표준 규약 살펴보기</b></a></p>
/*a 링크 텍스트에서 밑줄을 없앰*/
text-transform속성 - 텍스트 대소문자 변환하기
영문자를 표기할 때 text-transform속성으로 텍스트를 대소문자 또는 전각문자로 변환한다. 이 속성은 한글에는 영향을 미치지 않는다.
| 속성 값 | 설명 |
|---|---|
| none | 변환하지 않는다.(기본 값) |
| capitalize | 시작하는 첫 번째 글자를 대문자로 변환한다. |
| uppercase | 모든 글자를 대문자로 변환한다. |
| lowercase | 모든 글자를 소문자로 변환한다. |
| full-width | 가능한 모든 문자를 전각 문자로 변환한다. |
전각 문자란 고정 폭 영문자 너비의 두 배정도 너비의 문자이며 전각 문자 너비의 절반 정도 너비의 문자를 반각문자라고 부른다.
text-shadow속성 - 텍스트에 그림자 효과 추가하기
text-shadow속성은 텍스트에 그림자 효과를 추가해 텍스트를 좀 더 입체적으로 보이게 한다. 속성 값으로 ‘none’이나 그림자 값을 줄 수 있는데, 그림자 값은 쉼표로 구분해 여러 값을 지정할 수 있다.
text-shadow : none | <가로 거리> <세로 거리> <번짐 정도> <색상>
| 속성 값 | 설명 |
|---|---|
| <가로 거리=""> | 텍스트부터 그림자까지의 가로 거리를 입력한다. 양수 값은 글자 오른쪽, 음수 값은 글자 왼쪽에 그림자를 만든다. 필수 속성이다. |
| <세로 거리=""> | 텍스트부터 그림자까지의 세로 거리를 입력한다. 양수 값은 글자 아래쪽, 음수 값은 글자 위쪽에 그림자를 만든다. 필수 속성이다. |
| <번짐 정도=""> | 그림자가 번지는 정도. 양수 값을 사용하면 그림자가 모든 방향으로 퍼져 나간다. 반대로 음수 값은 그림자가 모든 방향으로 축소되어 보인다. 기본값은 0이다. |
| <색상> | 그림자 색상을 지정한다. 한 가지만 지정할 수도 있고 공백으로 구분해 여러 색상을 지정할 수도 있다. 기본 값은 현재 글자 색이다. |
<style>
.shadow1 {
color: orange;
text-shadow: 1px 1px;
}
.shadow2 {
text-shadow: 5px 5px 3px #f00;
}
.shadow3 {
color: #fff;
text-shadow: 7px -7px 5px #000;
}
</style>
<h1 class="shadow1">HTML</h1>
<h1 class="shadow2">HTML</h1>
<h1 class="shadow3">HTML</h1>
예 >
white-space속성 - 공백 처리
텍스트에는 글자 뿐 아니라 공백도 있다. 이 공백이 하나의 원칙으로 처리되지 않는다면 문서가 지저분해 보일 수 있다.
| 속성 값 | 설명 |
|---|---|
| normal | 여러 개의 공백을 하나로 표시한다.(기본 값) |
| nowrap | 여러 개의 공백을 하나로 표시하고 영역 너비를 넘어가는 내용은 줄을 바꾸지 않고 계속 한 줄로 표시한다. |
| pre | 여러 개의 공백을 그대로 표시하고 영역 너비를 넘어가는 내용은 줄을 바꾸지 않고 계속 한 줄로 표시한다. |
| pre-line | 여러 개의 공백을 하나로 표시하고 영역 너비를 넘어가는 내용은 자동으로 줄을 바꿔 표시한다. |
| pre-wrap | 여러 개의 공백을 그대로 표시하고 영역 너비를 넘어가는 내용은 자동으로 줄을 바꿔 표시한다. |
예를 들어 텍스트 안에 공백이 불규칙하게 포함된 내용을 편집할 때 모든 공백을 공백 한 칸으로 인식하고 줄을 바꾸지 않으려면 다음과 같이 작성한다.
td {white-space:norwrap;}
letter-spacing과 word-spacing속성 - 텍스트 간격 조절
letter-spacing속성은 낱 글자 사이 간격을 조절하고 word-spacing속성은 단어와 단어 사이 간격을 조절하는데 주로 letter-spacing속성을 사용해 자간을 조절한다.
자간은 가능하면 em단위로 지정하는 것이 좋다. 그래야 바뀌는 글꼴에 따라 자간이 유지된다.
3. 문단 스타일
문단 스타일에서 조절하는 부분은 텍스트 정렬이나 들여쓰기, 줄 간격 등이다.
text-align 속성 - 텍스트 정렬하기
text-align속성은 문단의 텍스트 정렬 방법을 지정한다. 속성 값으로 워드나 한글 문서에서 흔히 사용하는 ‘왼쪽 정렬’, ‘ 가운데 정렬’등을 지정할 수 있다.
| 속성 값 | 설명 |
|---|---|
| left | 왼쪽에 맞추어 문단을 정렬한다. |
| right | 오른쪽에 맞추어 문단을 정렬한다. |
| center | 가운데에 맞추어 문단을 정렬한다. |
| justify | 양쪽에 맞추어 문단을 정렬한다. |
text-justify 속성 - 정렬 시 공백 조절하기
text-align속성 값이 justify인 경우, 양쪽 끝에 맞추기 때문에 글자와 단어 사이 간격이 어색하게 벌어질 수 있다. 이 때 간격을 어떻게 조절할 것인지 지정하기 위해 사용하는 것이 text-justify 속성이다.
| 속성 값 | 설명 |
|---|---|
| auto | 웹 브라우저에서 자동으로 지정한다. |
| none | 지정하지 않는다. |
| inter-word | 단어 사이의 공백을 조절해 정렬한다. |
| distribute | 인접한 글자 사이의 공백을 똑같이 맞추어 정렬한다. |
text-indent속성 - 텍스트 들여 쓰기
text-indent속성은 문단의 첫 글자를 얼마나 들여 쓸지를 지정한다.
| 속성 값 | 설명 |
|---|---|
| <크기> | 단위와 함께 들여 쓸 크기를 지정한다. 음수 값도 사용할 수 있다. |
| <백분율> | 부묘 요소의 너비를 기준으로 상대적 크기를 지정한다. |
속성 값을 백분율로 지정할 경우 부모 요소의 너비 값이 달라지면 들여쓰기 양도 달라진다.
line-height 속성 - 줄 간격 조절하기
글자 크기를 기준으로 숫자, 실제 크기, 백분율로 표시한다.
line-height : normal | <숫자> | <크기> | <백분율> | inherit
4. 목록 스타일
텍스트로 목록과 링크도 만들 수 있다. 물론 두 가지를 합칠수도 있다. 웹 문서에서 자주 등장하는 메뉴 항목이 바로 목록과 링크를 결합한 형태라고 할 수 있다.
list-style-type속성 - 목록의 불릿과 번호 스타일 지정하기
순서 없는 목록의 경우, 목록 앞에 다양한 불릿(bullet)을 넣을 수 있고 순서 목록에서는 번호 스타일을 지정할 수 있다. 이때 list-style-type속성을 이용한다.
순서 없는 목록에서 불릿 모양 바꾸기
| 속성 값 | 설명 |
|---|---|
| disc(⚫) | 채운 원(기본 값) |
| circle(⚪) | 빈 원 |
| square(⬛) | 채운 사각형 |
| none | 불릿 없애기 |
불릿 대신 이미지 넣기
list-style-image속성을 이용해 불릿을 원하는 이미지로 바꿀 수 있다.
list-style-image : <이미지> | url(이미지 파일 경로)
list-style-position속성 - 목록에 들여 쓰는 효과 내기
| 속성 값 | 설명 |
|---|---|
| inside | 불릿이나 숫자를 안쪽으로 들여 쓴다. |
| outside | 기본 값으로 불릿이나 숫자를 밖으로 내어 쓴다.(기본 값) |
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>불릿 들여쓰기</title>
<style>
.inside {list-style-position: inside;}
</style>
</head>
<body>
<ul>
<li>나는내가</li>
<li>정말조아</li>
</ul>
<ul class="inside">
<li>회사소개</li>
<li>가나다다다</li>
</ul>
</body>
</html>
예 >
list-style속성 - 목록 속성 한꺼번에 표시하기
font 속성과 비슷하게 list-style속성으로 list-style-type과 list-style-position, list-style-image 속성을 한꺼번에 표시할 수 있다.
ol {list-style-type:none;} => ol {list-style:none;}
ol {list-style-type:lower-alpha;
list-style-position:inside;}
=>
ol {list-style: lower-alpha, inside;}
댓글남기기