css 기초정리

css 표현언어

1. 외부 스타일 시트사용
style.css
<link href="파일경로">
2. 내부 스타일 사용
<style>
css구문작성
<style>
3. 인라인스타일 사용방법 <!-- 옛날 사용법 -->
<p style="font-size:24pc">안녕하세요</p>
<div style="color:red">div입니다.</div>

css구문 - 선택자{ 속성:속성값; }

ex) div { font-size: 24px; }

css 주석 처리 방법 - /**/

선택자
1. 태그 선택자 - html요소의 태그명으로 선택
태그명 { 속성: 속성값; }
ex) div { font-size: 24px; }
2. 아이디 선택자 - html요소의 아이디명으로 선택 (앞에 #을 써준다. #없으면 태그 선택자)
#아이디명 { 속성: 속성값; }
ex) #header { font-size: 24px; }
3. 클래스 선택자 - html요소의 클래스명으로 선택 (앞에 .을 써준다.)
.클래스명 { 속성: 속성값; }
ex) .inner_container { font-size: 24px; }
스타일 속성
1. color 글자의 색상 지정
컬러단위
1) 색이름 ex) green/ red/ blue/ pink
2) 16진수 색상 코드 ex) #ffffff(흰색) / #000000(검정)
3) 컬러함수  rgb(r,g,b) 0~255 / ex) rgb(255,0,0)  rgba(r,g,b,a) rgb : 0~255 / a : 0~1
2. font-size 글자의 크기 지정 px, em
웹 페이지 본문 : 14px
웹 제목 : 24px~28px
3. font-family 글자의 서체 지정
font-family: 나눔고딕, dotum;
4. text-decoration 글자의 꾸며주기 지정
underline : 글자 아래 밑줄 / none : 줄 없음 / overline : 글자 윗 줄 / line-through : 중간에 줄
5. text-indent 첫줄 들여쓰기 지정
ex) text-indent : 50px;
6. line-height 줄 간격
ex) line-height : 24px;
7. font-weight 글자의 두께 지정
normal/bold / 100~900 / 100~300 : 얇게 / 400~600 : 보통 / 700~900 : 두껍게
8. text-align 글자 정렬
left / center / right

9. border 속성
border-width / border-style / border-color
ex) div { border: 1px solid red; }
border-top: 1px solid red;
border-left: 1px solid red;
border-right: 1px solid red;
border-bottom: 1px solid red;
10. padding 속성
컨텐츠와 요소와의 간격(여백) - 내부 여백
padding: 50px;
padding-top : 상단 여백
padding-left : 왼쪽 여백
padding-right : 오른쪽 여백
padding-bottom : 하단 여백

11. background 속성
ex) background: pink;