1. CSS란
•
CSS(Cascading Style Sheets): HTML 웹 문서의 스타일을 표현하는 언어로 HTML, XHTML, XML 같은 코드로 작성된 웹 요소들이 어떻게 표시될 지(스타일)를 정의
•
글꼴이나 배경색, 너비와 높이, 위치 등을 지정할 수 있음
•
웹브라우저, 스크린 크기, 장치에 따라서 화면을 다르게 표시될 수 있도록 지정 가능
•
문서의 내용과 표현을 분리하며 CSS 파일만 수정하면 스타일에 해당하는 HTML 문서가 한 번에 수정되는 장점이 있음
•
문법: 선택자 {속성:속성값; 속성:속성값;}
◦
주석: /* 주석 내용 */
•
화면 상의 HTML로 이루어진 요소들에 대응하여 스타일 세트를 각각 적용
•
특히, web crawling을 위해서는 CSS selector(선택자)를 이해해야 함
2. CSS를 선언하는 법
2.1 인라인(inline) 스타일 선언
•
각 html 태그에 직접 style 속성을 이용해서 선언
•
많이 사용되지는 않음. 태그마다 일일이 작성하고 수정하기 어려움.
•
예시: <p style=”font-size: 11pt; color: white;”> ... </p>
2.2 내부 스타일 선언
•
같은 html 파일 내에 style 태그를 사용해서 태그 내부에 선언
•
html 문서의 <head><style> </style></head> 안에 작성
•
선택자 문법을 사용해서 문서 내의 요소(HTML 태그로 생성된 화면 요소)를 선택해 스타일 지정
•
작성과 수정이 용이함
•
여러 개의 웹 페이지에 적용할 수 없음
2.3 외부 스타일 선언
•
내부 스타일 선언에 선언된 스타일 세트를 외부 파일(.css 확장자)에 선언
•
link 태그로 적용하려는 html에 불러와서 사용
<head>
<link rel=“stylesheet” type=“text/css” href=“{css파일명}”/>
<head>
HTML
복사
참고자료
•
인프런, ⟪프로그래밍 시작하기: 웹 입문⟫ 수업자료