CSS 기초

css 표현언어란?

html로 사이트를 완성한 후 css로 페이지를 꾸밀수있다.

 

 

---

 

css 연결방법

1. 외부스타일 시트사용
style.css 파일생성 후 작성 및 연동
<link href="파일경로">
2. 내부스타일 사용
<style>
</style>
내부에 css를 작성해서 연결
3. 인라인스타일 사용방법
<p style="font-size:24px"> 안녕하세요 </p>
<dv style="color:red">안녕하세요</div>

 

---

 

css 구문

선택자 { 속성:속성값; }

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

선택자
1. 태그 선택자 (p, div 등등)
ex) div { font-size; 30px: }
2. 아이디 선택자 (직접 입력한 ID) // ID는 주민등록번호처럼 하나만 있을 수 있다.
ex) #header { font-size; 30px: } #을 입력하지 않으면 태그에서 대상을 찾는다.
3. 클래스 선택자 (직접 입력한 class) // 클래스는 같은이름이 여러개 있을 수 있다.
ex) .header { font-size; 30px: }

 

 

---

 

스타일속성
1. color 글자의 색상을 지정
컬러단위
1) 색이름 ex> green/ red/ blue
2) 16진수 색상 코드 ex>#ffffff / #000000
3) 컬러함수 rgb(r,g,b) 0~255 ex> rgb(255,0,0) red 
rgba(r,g,b,a) r,g,b : 0~255 / a : 0~1 [소수단위 0.5=50%]

2. font-size 글자의 크기를 지정
px,em
웹 페이지 본문 : 14px
제목 : 24px~28px

3. font-family 글자의 서체 지정
font-family: 나눔고딕,dotum; / 나눔고딕이 없으면 dotum체 사용

4. text-decoration 글자의 꾸며주기 지정
underline : 글자아래 밑줄
none : 줄없음
overline : 글자 위 줄
line-though : 중간에 줄

5. text-indent 첫줄 들여쓰기 지정
ex> text-indent: 50px

6. line-height 줄 간격 
ex> line-height: 24px;(픽셀단위없이 1.5를주면 글자의1.5배)

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 sold red;

10. padding속성
컨텐츠와 요소와의 간격(여백) - 내부여백
ex> padding: 50px;
padding-top: 50px;


11. background 속성
ex > background: red; 배경의 속성을 지정한다.

 

 

 

See the Pen Untitled by kimsuhan (@codingbook) on CodePen.

 

 

P에게 속성을주면 ID가 있는 P와 없는 P 둘다 적용된다.