CSS 속성 - 폰트, 텍스트 스타일
[폰트]
-폰트는 자손들에게 모두 영향을 미침
-폰트지정 : font-family , 기본서체 (serif(명조체), sans-serif(고딕체), monospace(타자기서체-가로세로간격같음))를 맨 마지막에 위치시키길 권장함
-웹폰트 등록 : @font-face로 원하는 폰트 생성, 폰트의 경로는 무조건 url(주소) 함수를 이용함
-폰트크기 : px(픽셀), pt(포인트 : 1포인트=70픽셀), %(150%=1.5배), em(5em=상위부모의 5배), rem(5rem=최상위기준의 5배 *권장) 사용
-볼드체, 이탤릭체 : 볼드(font-weight: bold;) / 이탤릭체 (font-style: italic;)
-폰트축약형의 순서 : font: 폰트스타일(볼드체, 이탤릭체 순서는 상관없음) 폰트크기 폰트체 / (style weight) size family
| 속성 | 설명 |
| font | 한줄에서 모든 폰트 속성을 설정할 때 사용 |
| font-family | 폰트 패밀리 설정 |
| font-size | 폰트의 크기 설정 |
| font-style | 폰트 스타일 설정 |
| font-weight | 폰트의 볼드체 여부 설정 |
[텍스트 스타일]
| 속성 | 설명 |
| color | 텍스트의 색상을 지정한다. |
| direction | 텍스트 작성 방향을 지정한다. (가로쓰기, 세로쓰기) |
| letter-spacing | 글자간 간격을 지정한다. |
| line-height | 텍스트 줄의 높이를 지정한다. |
| text-align | 텍스트의 수평 정렬을 지정한다. |
| text-decoration | 텍스트 장식을 지정한다. |
| text-indent | 텍스트의 들여쓰기를 지정하낟. |
| text-shadow | 그림자 효과를 지정한다. |
| text-transform | 대소문자 변환을 지정한다. |
[워드랩핑] : word-wrap: break-word;
-공간에 맞춰 텍스트가 자동으로 줄바꿈이 되도록함
[다중컬럼]
-한 페이지의 글을 다중열로 보여주기
[속성정리]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font & text style</title>
<style>
/* 이 영역 안에서는 css언어 문법체계를 따름 */
/* 마지막에는 기본서체를 줘야함 */
p{font-family:'Courier New', sans-serif;}
p{font-family: 'Franklin Gothic Medium', serif;}
p{font-family: monospace;}
p{font-family: cursive;}
/* 웹 폰트 : 개발자가 지정한 별도의 글꼴파일을 사용하기 */
/* 글꼴등록 @ */
@font-face{
font-family: "My Font";
src: url(./font/나눔손글씨\ 동화또박.ttf)
}
/* 내 폰트적용 */
p{font-family: "My Font", sans-serif;}
/* 폰트 크기 */
p{font-size: 20px;}
p{font-size: 20pt;}
p{font-size: 150%;}
/* 배수 */
p{font-size: 1.7em;}
/* 최상위 부모의 크기를 기본으로 배율지정(권장) */
p{font-size: 2.0rem;}
/* 통상적으로 노멀, 볼드를 씀 */
p{font-weight: bold;}
/* 이탤릭체, 노멀을 씀 */
p{font-style: italic;}
/* 폰트 축약형 */
/* -family -size -weight -style를 한번에 축약으로 설정 */
/* 순서가 있음 (style weight) size font */
p{font: bold italic 2.5rem "My Font", sans-serif;}
/* 텍스트관련 스타일 속성들 */
/* 가운데 정렬 */
p{text-align: center;}
/* 양쪽정렬 */
p{text-align: justify;}
/* 텍스트 변환 */
/* 대문자 */
p{text-transform: uppercase;}
/* 소문자 */
p{text-transform: lowercase;}
/* 각 단어의 첫글자 대문자 */
p{text-transform: capitalize;}
/* 텍스트 줄긋기 */
/* 윗선 */
p{text-decoration: overline;}
/* 밑선 */
p{text-decoration: underline;}
/* 취소선 */
p{text-decoration: line-through;}
p{text-decoration: none;}
/* 텍스트 그림자 (옆(x방향) 아래(y방향) 위(흐림정도) 색상)*/
p{text-shadow: 5px 3px 5px red ;}
/* 워드 랩 */
/* p의 아이디가 aa인것의 5글자 들어갈 정도로 자동 줄바꿈해서 보여주기 */
/* 한글은 문제없이 잘 되지만 영어는 word-wrap: break-word; 를 줘야함 */
p#aa{
width: 5em;
border: 1px solid blue;
word-wrap: break-word;
}
/* 다중컬룸 */
p.column{
column-count: 2;
column-gap: 80px;
column-rule: 4px dashed green;
}
</style>
</head>
<body>
<p>Hello World</p>
<p>한글은 어떻게 나오나</p>
<p id="aa">
한글은 전혀 문제 없이 자동으로 워드랩이 됩니다.
jdsklfjsdlfkdsjflksdjfldsghsdlkh
</p>
<p class="column">
Lorem ipsum사용 (lorem 자동완성 생성됨)
</p>
</body>
</html>