font- : 글자 관련 속성들을 지정한다.
font-style: 글자 기울기를 설정한다
기본값: normal
ex)
<body>
<style>
.box1 {
font-style: italic;
}
</style>
<p class="box1">안녕하세요</p>
</body>
font-style에 속성 값
normal: 기울임이 없는 글자를 설정한다
italic: 이탤릭체로 글자를 설정한다.
font-weight:글자의 두께를 설정한다.
기본값 : nomal
font-weight의 속성 값
normal:기본 글자 두께(400)
bold: 두꺼운 글자두깨(700)
숫자: 100~900까지 100단위숫자로 글자 두께를 설정한다. (주로 normal(400)을 기준으로 얇게, 두껍게 설정한다)
ex)
<body>
<style>
.box1 {
font-weight: bold;
}
</style>
<p class="box1">안녕하세요</p>
</body>
font size:글자 크기를 설정한다.
기본값:16px
글자 크기를 설정할때에는 주로 px로 크기 설정을 한다.
ex)
<body>
<style>
.box1 {
font-size: 40px;
}
</style>
<p class="box1">안녕하세요</p>
</body>
line-height: 줄높이를 설정한다.
기본값 nomal(브라우저마다 1~1.4로 차이가 있다)
line-height의 속성값
normal: 브라우저의 기본 line-height를 따른다
숫자 : font-size의 배수로 지정한다 (주로 사용되는 방법)
단위 : px,em,rem등으로 줄 간격을 지정한다.
ex)
<body>
<style>
.box1 {
line-height: 1.5;
}
</style>
<p class="box1">안녕하세요</p>
</body>
위코드에서 style태그 부분에 class가 box 1인 p태그에 line-height를 1.5로 설정했다 이때 글자크기를 참조하여 배수를 설정하는데
font-size의 기본값은 16px이기때문에 16px의 1.5배 즉 24px 만큼의 줄 높이가 생긴다 만약 글자크기를 다른 값으로 설정하면 그 값에 따라 line-height에 값도 달라진다.
부가적으로 줄간격은 줄 높이에서 글자크기를 뺀 값이 된다 위 코드를 예시로 줄 높이(24px)-글자크기(16px)를 뺀값 8px가 위아래로 4px씩 배치되고 1번째 줄에 아랫줄 높이와 2번째 줄에 윗줄 높이가 만나
줄 간격은 8px가 되는 구조이다
font-family: 글꼴을 설정한다.
사용법 :글꼴 후보를 , 로 구분하여 여러 개 명시한 후 마지막에 글꼴 계열을 명시한다
글꼴 후보는 갯수제한없이 작성 가능하다.
글꼴 후보를 여러개 명시하는 이유는 사용자 컴퓨터나 브라우저에 해당 글꼴이 없는 경우를 대비하기 위해서다
이때 글꼴계열은 필수로 명시해야 한다
글꼴계열을 필수로 명시하는 이유는 글꼴 후보가 전부 없을 때 글꼴을 사용하긴 해야 하는데 글꼴 계열을 명시하면 브라우저가 해당 글꼴 계열에 해당하는 글꼴 중 사용 가능한 글꼴을 자동으로 설정하기 때문이다.
글꼴 계열의 종류
serif:바탕체 계열
sans-serif: 고딕체 계열 (가장 많이 사용됨)
monospace: 가로폭이 동일한 계열
cursive:필기체
fantasy : 장식이 있는 글꼴 계열
ex)
<style>
.box1 {
font-family: serif;
/* 바탕체 계열 */
}
.box2 {
font-family:sans-serif ;
/* 고딕체 계열 */
}
.box3 {
font-family:monospace ;
/* 가로폭이 동일한 계열 */
}
.box4 {
font-family:fantasy;
/* 장식이있는 글꼴 계열 */
}
</style>
<p class="box1">안녕하세요</p>
<p class="box2">안녕하세요</p>
<p class="box3">안녕하세요</p>
<p class="box4">안녕하세요</p>
<p class="box1">안녕하세요</p>
위코드에서 style태그 부분에 font-family를 보면 브라우저나 사용자 컴퓨터에 Arial체가 있다면 그 글꼴을 쓴다 없다면 다음인 Open Sans체를 사용하고
Opne Sans도 없다면 돋움체를 사용한다 위와같이 왼쪽부터 차례대로 명시한 글꼴을 탐색하는 구조이고 마지막은 글꼴 계열을 명시해주면 된다
위 코드에서 sans-serif는 글꼴 계열에 해당된다.
color: 글자의 색상을 설정한다.
color의속성값
색상 이름 : 색상의 이름으로 색상을 명시함
ex) color :red;
★Hex 색상코드 : 0~9 , a~f까지의 숫자와 알파벳을 #6자리로 표현하는 방법
실무에서 가장많이사용된다고 알려짐
ex) color:#333efa
rgb: 빛의 삼원색 red,green,blue의 색상을 조합하여 색상을 표현하는 방법
ex) color:rgb(100,255,255)
★rgba: rgb와 같은 기능을 하지만 투명도를 지원하는 방법 이때 4번째 자리에 투명도를 명시하며 소수점 단위(이때 0 은 생략 가능하다)로 투명도를 나타냄
즉 1=불투명 0.1= 본래색상의 10%만큼의 색상으로 투명함 0.5= 본래 색상의 50%만큼의 색상으로
투명함 ex)color:rgba(100,255,255,.5)
text-align: 문자 정렬 방식을 설정한다.
text-align의 속성값 :
left :문자를 왼쪽 정렬한다
right:문자를 오른쪽 정렬한다
center: 문자를 가운데 정렬한다
justify:문자의 양쪽 폭을 맞춰 정렬한다.(문자가 2줄 이상일 때만 사용 가능하다)
ex)
<style>
.box1 {
text-align: justify;
}
</style>
<p class="box1">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quia, velit eveniet repellat saepe et officia quos enim porro itaque incidunt?
Praesentium unde quod nulla repudiandae sequi rem similique non repellat.
</p>
text-decoration: 문자의 선을 설정한다.
none: 기본값
text-decoration의 속성값
none:선 없음
underline:글자 아래에 줄을 지정한다
overline:글자 위에 줄을 지정한다.
line-through: 삭제글처럼 글자 중앙에 선을 지정한다.
ex)
<style>
.box1 {
text-decoration:line-through;
}
</style>
<p class="box1">안녕하세요</p>
text-indent: 첫 번째 줄의 들여 쓰기를 설정한다.
음수 값을 사용할 수 있다 음수 값을 사용하면 내어 쓰기가 된다.
ex1)
<style>
.box1 {
text-indent: 100px;
}
</style>
<p class="box1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Nihil sunt necessitatibus corrupti id quasi at, distinctio autem vel consequatur quod eveniet
delectus illum quisquam dolore quo,
doloribus, fugit reiciendis deleniti?
</p>
letter-spacing: 자간 (글자와 글자사이에 간격)에 간격을 설정한다
음수 값 사용이 가능하다.
기본값 : normal
letter-spacing의 속성 값
normal:0
단위: px
ex1)
<style>
.box1{
letter-spacing: 10px;
}
</style>
<p class="box1">안녕하세요 </p>
word-spacing : 단어와 단어 사이의 간격을 설정한다. 이때 단어와 단어의 구분은 띄어쓰기로 판단한다.
기본값:normal
word-spacing의 속성 값
normal:0
단위 px
ex2)
<style>
.box1{
word-spacing: 10px;
}
</style>
<p class="box1">안녕 하세요 </p>'CSS' 카테고리의 다른 글
| css 전환(Transitions)과 변환(Transforms) (0) | 2022.04.03 |
|---|---|
| css background- (0) | 2022.04.03 |
| css float와 position (0) | 2022.04.03 |
| css 단위와 박스모델 (0) | 2022.04.03 |
| css 선택자, 상속에 관한내용 (0) | 2022.04.03 |
