CSS 규칙
선택자 {
속성: 속성값;
속성: 속성값;
}CSS 파일
link태그: 현재 문서 바깥에 있는 파일을 불러오는 태그rel: relationship의 약자로 불러올 파일과의 관계를 나타냄
- html 파일에 link 태그로 CSS 파일 연결하기
<link rel="stylesheet" href="style.css">- link 태그의 href에 써준 파일에 CSS 스타일을 적기
태그 이름
- 태그 이름 이용해서 스타일 바꾸기:
<style> h3 { font-size: 24px; } </style>아이디
- 아이디 정해주기:
<tag id="hallasan">- 아이디 이용해서 스타일 바꾸기:
<style> #hallasan { color: #f56513 } </style>
- 한 페이지 안에서 아이디 이름은 중복해서 쓸 수 없음 -> 하나의 스타일만 바꾸고 싶을 때
클래스
- 클래스 정해주기:
<tag class="place"><h3 class="place">우도</h3> <h3 class="place" id="hallasan">한라산 국립공원</h3> <h3 class="place">성산 일출봉</h3> <h3 class="place">군산 오름</h3>
- 클래스 이용해서 스타일 바꾸기:
<style> .place { color: #f56513 } </style>
- 아이디와의 차이점: 여러 태그에 지정할 수 있음 -> 여러개의 스타일을 동시에 바꾸고 싶을 때
다양한 색상 단위
- 색상 이름
잘 사용 안함 - 색상 코드 (RGB)
#으로 시작, 숫자랑 문자(a~f)로 조합한 여섯 자리
0~255(16진수로 00~ff)까지 늘어남
빨강, 초록, 파랑의 세기를 각각 두 자리씩(00~ff) 표시함
rgb(255, 0, 0) -> 빨강 - RGBA
RGB 표기에다가 불투명도(Alpha)를 추가한 것
불투명도는 0~1 사이의 소수점 숫자
rgba(255,0,0,1) -> 빨강
다양한 크기 단위
- 픽셀 (절대적인 단위)
- 퍼센트 (상대적인 단위)
부모 태그(선택한 태그의 바로 위 태그)에 대해서 상대적인 크기
크기를 바꾸고 싶을 때 부모의 크기만 바꾸면 됨 - em (상대적인 단위)
1em = 부모태그의 font-size - rem (상대적인 단위)
1rem = 최상위태그(<html>태그)의 font-size
코멘트
/* 로 시작해서 */ 로 끝나는 코드
아이디어와 구현을 좋아합니다!