Cascading Style Sheet
마크업언어로 작성된 문서를 표현하는 방법을 전해주는 언어
(폭포처럼) 쏟아지는 형태로 부모 요소의 스타일 속성이 자식 요소에도 그대로 적용됨
selector{
property: value;
}CSS 작성 위치
External StyleSheet
- 별도 페이지 생성 후 link로 연결
<head>
<link rel="stylesheet" href="main.css" />
</head>Style Element
<Head></head>요소 안에 작성- 여러 페이지 동일 요소의 스타일을 똑같이 적용하기 어려움
<head>
<style>
h1{
border:1px solid;
}
</style>
</head>HTML Inline Style
- 여러 동일 요소의 스타일을 똑같이 적용하기 어려움
<body>
<div style="background-color:yello">
</div>
</body>COLORS in CSS
Named color
red,green,tomato,teal,papayaplum,teal,gold,silver,magenta...- 140여개 색상명이 등록되어 있음
RGB
rgb(red,green,blue)- 각 색상은 0~255까지
- black = rgb(0,0,0)
- white = rgb(255,255,255)
rgba(red, green, blue, alpha): alpha = 투명도(0~1)
Hex
#red+green+blue색상 별 2자리씩 나타냄- 각 색상을 00~ff 범위의 16진수로 표현 (한 자리수 내에 더 많은 수를 작성할 수 있는 것이 장점)
- black = #000000 = #000
- white = #ffffff = #fff
Text Properties
text-align
텍스트 배치
- center
- left
- right
font-family
- 폰트 모양
- 1순위, 2순위, 3순위.. 작성 가능
- OS별 지원 폰트 확인
text-decoration
text-decoration-line- none : 없음
- underline : 밑줄
- overline : 윗줄
- line-through : 취소선
text-decoration-style- solid : 굵게
- double : 두 줄
- dotted : 작은 점선
- dashed : 큰 점선
- wavy : 물결
text-decoration-color
h1{
text-decoration: yellow underline wavy;
}font-weight
폰트 두께
line-height
1줄 당 높이
letter-spacing
자간 공백
font-size
글자 크기
내가 이해하려고 정리 중