본문 바로가기

웹/개념

웹 css - 태그1

1. font-size

 

px : 고정된 값, 모든 장치에서 같은 크기로 보임 

em : 부모태그의 영향을 받는 상대적인 값 

rem : html태그의 영향을 받는 상대적인 값

 

p{
font-size='10px';
font-size='10rem';
font-size='10em';
}

 

2.color

 

색상을 표현하는 방법으로는 

이름, 16진수, rgb값이 있다.

 

p{
color: red;
color: rgb(255,255,255);
color: #fffff;
}

 

3.background-color

 

p{
background-color: red;
background-color: rgb(255,255,255);
background-color: #ffffff;
}

 

4.text-shadow

 

text-shadow: x축 y축 번짐정도 색상;

 

p{
text-shadow: 5px 0px 2px blue;
}

 

5.text-align

 

left 좌로 정렬

right 우로 정렬

center 가운데 정렬

justify 공백없이 정렬

 

p{
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
}

 

6.font-weight

 

bold: 굵게

숫자: 숫자만큼 굵게

 

p{
font-weight: bold
font-weight: 900
}

 

7.font-height

 

px : 고정된 값, 모든 장치에서 같은 크기로 보임 

em : 부모태그의 영향을 받는 상대적인 값 

rem : html태그의 영향을 받는 상대적인 값

 

p{
line-height: 10px;
line-height: 10em;
line-height: 10rem;
}

 

8.font-family

 

여러폰트의 이름을 font-family: 뒤에 붙이기

 

p{
font-family: sans-serif
}

 

 

 

Google Fonts 검색후 페이지를 방문하여 마음에 드는 폰트 클릭후

우측 파란 글씨로 Select this style 클릭후

Use on the web

이란 글씨 밑 영어로 된 글자들을 head태그 안에 삽입 후 

font-family사용하여 글꼴 적용

' > 개념' 카테고리의 다른 글

CSS ::before ::after (가상 선택자)  (0) 2024.01.21
웹 css - 선택  (0) 2021.06.23