CSS 기본

style

요소 선택자에 선택하기
<style>

h1{ //h1 태그에 모두 적용
	color : teal; //속성값 줄 떄마다 세미콜론으로 마무리
    text-decoration : underline; //텍스트에 언더라인
  }

아이디를 이용한 선택
<style>
	#id이름 {
    	color : red;
        text -decoration : line -through;
    	}
</style>


<h1 id ="id 이름"> 이 부분이 선택됩니다</h1>

클래스를 이용한 선택

<style>
	.headings{ color : lime; text-decoration: overline;}
</style>

<h2 class = "headings"> 이 부분에 스타일 적용</h2>
<h3 class = "headings"> 이 부분에도 적용</h3>

그륩을 이용한 선택
<style>
	h1 { color : navy;}
    	h1,h2 {text-align: center;} //위치 중간
    	h1,h2,p { background - color : lightgray;} // 뒷 배경 색깔
</style>

css 파일 만들어서 적용시키기

외부에 .css 파일을 만들고 
html head 부분에 추가해준다
<link rel = "stylesheet" href ="css파일 위치">

스타일 적용 우선순위는

내부 - 외부 - 기본 스타일이다

주석 달기

<style>
/* 주석 내용 */
이렇게  주석을 처리할 수 있다. 단 주석안에 주석을 넣는건 안된다.
</style>

CSS Style 기본 속성

color

1.색 이름으로 표현하기

2.RGB 색상으로 표현하기

3.16진수 색상값으로 표현

color : "navy";
color : rgb(r,g,y)l;
color : "0000ff";

Background

1.background - color
2.background - image
3.background - repeat
4.background - position
5.background - attachment

1. background - color : red,rgb,6진수;
2. background - image : url(),src
3. background - repeat :url(); background-repeat : repeat-x,y , no-repeat //x는 수평 반복 y는 수직 반복 
4. background -position : top rigth 백그라운드 이미지의 위치를 정할 수 있다, 픽셀로도 설정 가능
5. background - attachment : fixed 이 속성을 이용하면 스크롤 시에도 이미지의 위치가 변경되지 않는다.

Text

1. color
2. direction
3. letter-spacing
4. word-spacing
5. text-indent
6. text-align
7. text-decoration
8. text-transform
9. line-height
10. text-shadow

color :  바디 부분에 정의된 컬러는 모든 텍스트에 적용된다.
direction : ltr(left to right) rtl 글씨가 써지는 방향을 설정한다 
letter-spacing : 10px; 글자간의 간격을 설정한다
word-spacing : 단어 사이의 간격을 설정한다.
text-indent : 30px 첫 줄에 들여쓰기를 할지 안 할지를 설정한다.
text-align : 수평방향 정렬을 설정한다. 
text-decoration : 텍스트에 여러가지 효과를 설정한다.
text-transform : uppercase ->모든 영문자 대문자
lowercase -> 모든 영문자 소문자 capitalize -> 모든 영단어 첫 문자 만을 대문자로 만든다
line-hight : 텍스트 줄 간격을 설정한다.
text-shadow : px px #000000 텍스트에 간단한 그림자 효과를 설정한다

Font

1.font-family
2.font-style
3.font-varient
4.font-weight
5.font-size

font-family : 폰트이름, -> 폰트를 여러개 나열할 수 있다. 
적힌 순서대로 존재하는 폰트가 적용이 된다.
font-style : normal,italic(이탤릭체),oblique(기울림체)
font-variant : small-caps로 설정하면 모든 소문자를 작은 대문자 글꼴로 변경한다.
font-weight : 600,bolder,lighter,bold 텍스트의 굵기를 설정할 수 있다.
font-size : px로 하면 절대적인 크기 em,%로 하면 상대적인 크기로 설정 가능하다.

링크

1.link : 링크의 기본 상태 , 사용자가 아직 한 번도 해당 링크 방문 하지 않은 상태
2.visited : 사용자가 한번이라도 해당 링크를 통해 방문한 상태
3.hover : 사용자의 마우스 커서가 링크 위에 올라가 있는 상태
4.active : 사용자가 마우스로 링크를 클릭하고 있는 상태
5.focus : 키보드나 마우스의 이벤트 또는 다른 형태로 해당 요소가 포커스를 가지고 있는 형태

<style>
	a:link,a:visited{ 한번도 방문 안했거나 링크 방문한 상태
    	background-color : #ffa500;
        color :maroon;
        padding :15px 25px;
        text-align : center;
        text-decoration:none;
        display : inline-block;
   	 }
	a:hover , a:active { 커서가 올라가 있거나 클릭한 상태
    background-color : #ff4500;
    }
</style>

리스트

1.list-style-type
2.list-style-image
3.list-style-position

list-style-type : circle,square,upper-alpha,lower-roman
등 다양한 기호로 리스트를 표현할 수 있다.

list-style-image : url,src 자신만의 이미지로 리스트 표현 가능하다.
list-style-position : inside, outside 마크의 위치를 정할 수 있다.

테이블

1.border
2.border-collapse
3.border-spacing
4.caption-side
5.empty-cells
6.table-layout

border : 2px 테이블의 테두리 설정이 가능하다.
border-collapse : collapse 해당 테이블의 테두리는 한 줄로 표현된다
border-spacing : 20px 30px 테이블 요소 간의 여백을 설정해준다.