• CSS(Cascading StyleSheets) HTML 문서에 스타일을 더한다. – Cascading : 계단식 – Style : 멋을 내다 – Sheets : (종이) 한 장 => 계단식 스타일을 정의하는 문서 * HTML 문서는 태그가 태그를 포함하는 계단식 구조를 가지고 있다.※ CSS 코드는 CSS 파일에 작성한다. 확장자는 *.css이다.
CSS는 HTML과 함께 힘을 합쳐 목적을 수행한다.CSS문서(코드) 자체는 독립적으로 존재할 수 있지만 그 목적이 구조화된 HTML 문서의 스타일을 정의하는 데 있기 때문에 HTML 문서가 없는 CSS 문서는 사실상 의미가 없다.- HTML: 웹 문서의 콘텐츠를 구성하는 언어 – CSS: 웹 문서의 콘텐츠에 스타일을 추가하는 언어(색상, 크기, 위치 등) ※ HTML과 함께 사용되지 않는 CSS는 단순 텍스트일 뿐 웹 브라우저를 통해 결과를 확인하려면 반드시 HTML 문서 작성이 선행되어야 합니다.
• CSS 기본문법 CSS 기본문법 선택자의 어느 요소에 스타일을 적용할지에 대한 정보{중괄호} 선택한 요소에 적용할 스타일을 정의하는 영역 속성명 어느 스타일을 정의하고 싶은지에 대한 정보(색상, 크기 등) 속성값을 어떻게 정의하고 싶은지에 대한 정보예 선택자{속성명:속성값;} 주석자로 보이지만 컴퓨터(웹 브라우저)에는 보이지 않는 코드다.주로 코드에 대한 메모를 남기기 위한 용도로 사용된다.주석예{/*이 사이에 작성한 내용은 주석으로 처리된다.*/}•HTML에 CSS를 적용하려면?HTML 문서에 CSS 문서(코드)를 적용하고자 할 때는 다음과 같은 방식을 사용할 수 있다.- 인라인 스타일 : 태그에 직접 기술하기 – 스타일 태그 : 스타일 시트를 위한 태그를 추가하여 기술하기 – 문서 간 연결 : 스타일 시트 문서를 따로 작성하여 HTML 문서와 연결하는 CSS 적용할 법인 라인 스타일 태그에 style 속성을 추가하여 요소에 직접적으로 스타일을 정의하는 방식.(선택자는 필요 없음) 웹 콘텐츠와 스타일 시트를 분리하기 위해서는 사용하지 않는 것이 좋다.예 <p style=”color: blue;”> 문자를 파란색으로 하여 </p> 스타일 태그 HTML 문서에 <style> </style> 태그를 추가하고 그 안에 CSS 코드를 작성할 수 있다.HTML 문서에 대한 정보로 취급하기 위해 주로 head 태그 안에 위치한다.예 <style> 선택자 {color: red;} </style> → style 태그 안에는 CSS 코드를 작성해야 한다.문서 간 연결 확장자가 *.ss한 스타일시트 파일을 생성하고 그 안에 CSS 코드를 작성하여 HTML 문서에 이를 연결할 수 있다. 이때는 <link> 태그를 사용한다.<link> 태그는 HTML 문서의 <head> </head> 내부에서 사용할 필요가 있습니다.예 <linkhref=”./style.css” rel=”styesheet”>href: 접속하려는 외부 소스의 url을 기술하는 속성 rel: 현재 문서(HTML)와 외부 소스의 관련 관계를 기술하는 속성