▶ CSS3란?
CSS는 텍스트의 색상이나 크기 또는 이미지의 크기나 위치 등을 처리하는 웹 문서에서 디자인 요소를 담당하는 언어다. 자주 사용하는 디자인 부분들을 미리 조합해서 만들어 놓고 HTML페이지 내부에서 필요할 때마다 적용한다.
⦁ CSS 작성 방법
<style type="text/css"> 코드작성 </style>
⦁ CSS의 주석 처리
/* 주석 처리할 내용 */
▶ CSS 코드를 정의하는 방법
1. 내부 스타일 시트: HTML 문서 안의 과 안에 CSS 코드를 추가하는 방법
<!DOCTYPE html> <html> <head> <title>HTML 기본구조</title> <meta charset="UTF-8"> <style type="text/css"> span{color:red;} </style> </head> <body> <span>Hello, World</span> </body> </html>
2. HTML 태그의 style 속성에 CSS를 추가하는 방법
<body> <span style="color:red;">Hello, World</span> </body>
3. 외부 스타일 시트: 별도의 CSS 파일을 만들어 놓고 HTML 문서와 연결하는 방법
CSS 파일을 적용시킬 HTML 문서에 태그로 연결하여 사용하면 된다.
2-1) HTML 문서 - link로 연결
CSS 파일을 적용시킬 HTML 문서에 태그로 연결하여 사용하면 된다.
<!DOCTYPE html> <html> <head> <title>HTML 기본구조</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> <!--연결 </head> <body> <span>Hello, World</span> </body> </html>
2-2) HTML 문서 - @import로 불러오기
<!DOCTYPE html> <html> <head> <title>HTML 기본구조</title> <meta charset="UTF-8"> <style type="text/css"> @import url("style.css"); </style> </head> <body> <span>Hello, World</span> </body> </html>
@import url()은 여러 개의 CSS 파일을 한 번에 가져올 수 있다
<style type="text/css"> /* style css */ @import url("base.css"); @import url("style.css"); @import url("member.css"); </style>