.png)
CSS란?
Cascading Style Sheet
Cascading? 정의된 세부적인 스타일링이 있다면 그것을 쓰고, 정의된 것이 없다면 기본적으로 정의로 넘어가는 것
Author style : 개발자가 지정한 스타일링
User style : 사용자가 지정한 스타일링
Browser : 브라우저에서 기본적으로 지정된 스타일링
Author style -> User style -> Browser 순서대로 우선순위를 가짐
단, !important이 나오면 cascading의 연결고리를 무시하고 제일 중요한 스타일링이 됨. 최대한 !important를 쓰지 않고 다른 방식으로 구현하는 것이 좋음.
CSS Rules
CSS의 기본 패턴은 다음과 같다.
selector {
property: value;
}각각의 property 선언은 세미콜론으로 마무리해야 한다. 없어도 에러는 나지 않지만, 스타일이 적용되지 않는다.
CSS에서의 주석처리는 아래와 같이 작성한다.
/* 이것은 주석입니다 */Including Styles
HTML에 CSS를 적용하기 위해서는 외부 stylesheet 파일을 연결하는 방법을 추천한다. 이외에도 inline 스타일 또는 <style> 요소를 이용할 수 있다.
<head>
<title>Hello</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>Colors
Named colors
color: orange;
background-color: lightpink;RGB
Red, Green, Blue 순서, 각 채널마다 0~255 사이의 값을 입력
color: rgb(173, 20, 219);Hexadecimal
#RRGGBB 형식, RR = Red, GG = Green, BB = Blue, 각 채널마다 0~FF 사이의 16진수 값 입력
color: ##cc55ee;CSS Text Properties
text-align 글자 정렬
text-align: left;
text-align: right;
text-align: center;
text-align: justify; /*양쪽 맞춤*/font-weight 글자 굵기
font-weight: normal;
font-weight: bold;
font-weight: 400; /*100~900, normal*/
text-align: 700; /*bold*/text-decoration 글자 꾸미기
text-decoration: #f87120 underline wavy;
text-decoration: overline;
text-decoration: line-through;line-height 줄 간격
line-height: 2;letter-spacing 글자 간격
letter-spacing: 10px;font-size 글자 크기
font-size: 12px;
font-size: 2em;font-family 글씨체
font-family: Segoe UI, Futura, Arial, sans-serif;