01.CSS의 기본 문법

1.CSS의 기본 구조

선택자: css가 적용되는 영역을 지정.

font-family: "바탕" : 글꼴을 바탕으로 지정한다.

color: blue: 글자 색을 파란색으로 지정한다.

 

2. CSS의 삽입 방법

1)<style>태그를 이용:이 경우에는 영역에 지정을 해준다.

2)style속성을 이용한다: 태그 안에 style속성을 넣은 후 css명령을 실행한다->자주 사용하진 않지만 종종 간편함 때문에 사용된다.( HTML 코드와 CSS코드를 분리하는 것을 권고 하는 방침이 있어서)

3)CSS파일을 이용한다: 외부 CSS파일을 이용하는 것. 실전 프로젝트에서 많이 사용한다.

붉은 색 표시부분에서 CSS파일을 불러오면

해당 내용의 CSS파일이 적용된다.

 

3.CSS기본 문법

-CSS의 주석문-> /* 내용*/ -웹 바탕 색을 지정할 때->background-color: 색상명;(ex yellow) -글자 색상 설정: <span style="color:영어색상명;" 텍스트내용</span> *<span>태그는 웹 페이지에서 CSS를 적용하고나 하는 글자들을 선택하기 위해 사용되는 html태그. *색상명 뿐 아니라 색상코드로도 색상을 지정할 수 있다. 색상코드 더보기 -글자 정렬: 선택자{text-align: center;} ->left, center,right -줄 간격: 선택자{line-height: 150%}->180%,200% 등등 -밑줄: 선택자{text-decoration: underline;}->none -폰트: 선택자{font-family: "맑은고딕";}->돋움, 바탕 등등 -폰트사이즈: 선택자{font-size: 16px}->픽셀 수 조절 -글자 두께: 선택자{font-weight: bold;}-> normal -이탤릭체: 선택자{font-style: italic;} -글자 그림자:  선택자{text-shadow: 3px;} -> 픽셀 수 조절이나 색상코드

-링크 글자 꾸미기 <a hef="#"> 텍스트 내용</a> : 글자 클릭시 페이지 이동하지 않고 마우스 포인터만 손모양으로 변경 a:link{color: 컬러명; text-decoration:none;} : 글자 색이 컬러명 색으로 변경, 밑줄이 사라짐 a:visited{color: 컬러명; text-decoration:none;} : 방문한 링크는 컬러명 색으로 변경, 밑줄 사라짐 a:hover{color: 컬러명; text-decoration:underline;} : 마우스포인터를 글자위에 올리면 컬러명으로 색상변경, 밑줄넣는다. a:active{color: 컬러명; text-decoration:underline;} : 마우스로 글자를 클릭한 순간에 색변경, 밑줄 생김.

 

4.웹폰트 사용방법

구글폰트를 검색해서 폰트 선택

세부적인 스타일 선택후 select this style 클릭

빨간 박스 안에 있는 태그는 head태그 내에 삽입 하고 파란박스 안의 코드는 CSS코드