Font 단위
-
px
절대크기, 절대 크기를 지정해야 할 경우 사용
-
%
상대크기, 부모 태그 폰트 사이즈 기준 => 레이아웃 지정 시 주로 사용(widgh, height)
-
em
상대크기, 부모 태그 폰트사이즈 기준 > 폰트 사이즈에 사용
-
rem
상대크기, html(root)페이지 폰트 사이즈 기준 > 폰트 사이즈에 사용
em과 rem 차이점
Font 속성
- font-size
- font-weight
- font-style
- float(흐름 위치), color(색상), opacity(투명도), padding(패딩) 등
- font-family(글꼴) :여러개 지정 가능함 (설정순으로 적용, 안되면 다음 속성적용됨 마지막엔 san-serif or serif지정=> 다국어 지원 기능 때문)
웹 폰트 사용하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>웹 폰트 사용하기</title>
<style>
/*정의*/
@font-face {
font-family: 'Ostrich'; /* 폰트 이름 */
src: local('Ostrich Sans'), /* local : 사용자 pc에 해당 폰트가 있는지 */
url('fonts/ostrich-sans-bold.woff') format('woff'),
url('fonts/ostrich-sans-bold.ttf') format('truetype'),
url('fonts/ostrich-sans-bold.svg') format('svg');
}
.wfont {
font-family: 'Ostrich', sans-serif; /* 웹 폰트 지정 */
}
p {
font-size: 30px; /* 글자 크기 */
}
</style>
</head>
<body>
<p>Using Default Fonts</p>
<p class="wfont">Using Web Fonts</p>
</body>
</html>Google Font 이용하기
- 구글폰트에서 다운로드
- import
- style 태그에 적용 ...
Text 속성
- color : 텍스트 색상
- text-align : [left | right | center | justify(default값)] : 텍스트 정렬
- letter-spacing : 글자간 간격
- text-shadow : [위치 | 색상] 그림자 설정
- text-transform : [capitalize | lower | upper] 대소문자
- text-decoration : 텍스트에 여러 가지 효과를 설정하거나 제거하는데 사용
- line-height : 줄 간격
List 속성
- list-style-type : none | uppper-alpha | etc...
- list-style-image : url('파일 경로') | 리스트 스타일에 이미지 삽입
- list-style-position: inside | outside | 리스트 들여쓰기
Table 속성
table {
caption-side: bottom; /* 표 캡션 위치 upset | bottom */
border:1px solid black; /* 표 테두리는 검은 색 실선으로 */
border-collapse: collapse | separate(default) /* 테두리 한줄로 표시 */
border-spacing : 테이블 표 굵기
}
td, th {
border:1px dotted black; /* solid | dotted | dashed */
padding:10px; /* 셀 테두리와 내용 사이의 여백 */
text-align:center; /* 셀 내용 가운데 정렬 */
}
멋쟁이 백엔드 개발자가 되어보자