CSS 속성 종류_CSS
2021. 12. 15. 11:34ㆍksmart_html_css_js/css
728x90
- css 속성을 활용하여 html 요소에 style을 적용할 수 있다.
Font
- 글꼴(텍스트 요소)종류, 크기, 굵기, 스타일 등 지정
- 글꼴 종류
- 사용자 컴퓨터에 설치된 폰트 기준으로 설정이 가능하다.(굴림, 돋음, 맑은 고딕)
- 사용자의 컴퓨터 폰트가 설치가 안된 폰트는 웹폰트를 활용한다.
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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=Nanum+Pen+Script&family=Noto+Sans+KR:wght@100&display=swap" rel="stylesheet">
</head>
<style>
#font-test{font-family: 'Nanum Pen Script', cursive;}
</style>
<div id="font-test">안녕하세요.ksmart.or.kr</div>- 글꼴 크기
font-size: 25px;- 폰트 굵기
font-weight:bold;- 폰트 스타일
font-style:italic;
Text
- 텍스트 요소 표현 옵션
- 텍스트 정렬
- 적용 된 하위 인라인 요소의 정렬을 지정 할 수 있다.
- left, center, right
text-align:center;- text 아래, 위, 중간줄 표현
-underline, overline,line-through
#text-test2{text-decoration:underline red;}
Color
- 텍스트 요소 색상
- 웹 색상표, rgb, rgba로 표기 가능
rgba(255,255,255,최소0최대1)
.color-test{color:#ff0000;}
.color-test2{color:rgb(0,0,255);}
.color-test3{color:rgba(0,0,255,0.5);}
Border
-테두리 굵기 및 색상, 테두리 스타일
- 테두리 지정되는 대상에는 상하좌우의 위치를 가지고 있다.
- 전체적으로 적용도 가능하며, 위치별로 적용도 가능하다.
- 색상, 굵기, 스타일이 적용 가능하다.
- color : 색상
- style : 테두리 표기 종류
- width: 굵기(크기)
.border-test1{border:3px solid #000;}
.border-test2{
border-color:red;
border-style:dotted;
border-width:5px;
}
.border-test3{
border-bottom-color:#0f0;
border-bottom-style:dashed;
border-bottom-width:3px;
}
728x90
'ksmart_html_css_js > css' 카테고리의 다른 글
| CSS 속성 종류 4_CSS (0) | 2021.12.15 |
|---|---|
| CSS 속성종류 3_CSS (0) | 2021.12.15 |
| CSS 속성 종류2_CSS (0) | 2021.12.15 |
| 선택자_CSS (0) | 2021.12.14 |
| CSS 설계 가이드_CSS (0) | 2021.12.14 |