대부분의 웹 사이트는 정적 데이터를 표현하는 HTML 문서를 기반으로 디자인과 가독성을 높이기 위한 CSS 그리고 웹사이트와 사용자 간 다양한 상호작용을 만들어낼수 있는 JavaScript가 덧붙여진 형태입니다.
CSS의 적용방식에 대해 알아보기 전, CSS의 기본문법에 대해 알아보겠습니다.
CSS 문법은 크게 셀렉터와 선언 블록으로 나뉩니다.
먼저 셀렉터로 스타일을 지정할 HTML 요소나 id, class등을 선택한 뒤 그에 대한 스타일을 선언 블록인 중괄호{} 사이에 지정하는 방식입니다. 각각의 스타일 속성들은 세미콜론으로 구분합니다.
셀렉터{
속성명1: 속성값;
속성명2: 속성값;
}
ex{
color: red;
font-size: 20px;
background-color: black;
}위는 하나의 css문 예시입니다.
HTML에 CSS를 적용하는 방식은 세가지로 나누어지는데 inline, internal, external 방식이 있습니다.
1. Inline Style(인라인 스타일)
HTML 태그 내에 style 속성을 이용하여 CSS를 지정하는 방식입니다.
이 방법의 경우 이미 스타일을 적용할 요소가 지정되어 있기에 셀렉터 및 선언 블록 없이 바로 스타일 속성값을 지정합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS test</title>
</head>
<body>
<h1 style="color :red">
inline 방식 예시입니다.
</h1>
</body>
</html>
2. Internal Stylesheet(내부 스타일 시트)
HTML 문서의 <Head> 태그 내에 <style> 태그를 삽입하고 해당 태그 사이에 CSS문법을 작성해 스타일을 지정하는 방식입니다. 이 방법의 경우 해당 HTML문서에만 스타일이 적용됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
c1 {
color: black;
background-color: yellow;
}
</style>
</head>
<body>
<c1>style 태그에 적용한 스타일이 적용되었습니다.</c1>
</body>
</html>
3. External(외부 스타일 시트)
HTML 문서 내부가 아닌 외부에서 CSS파일을 작성했다면, HTML 문서의 <head> 태그 내에 <link> 태그를 삽입하여 HTML 문서에 CSS를 연결하는 방식입니다. <link>태그의 rel 속성을 stylesheet로 지정하고 href속성으로 CSS 파일의 경로를 지정하여 연결할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS test</title>
<link rel="stylesheet" type="text/css" href="css/ex.css">
</head>
<body>
<c1>참조한 css파일의 style이 적용되었습니다.</c1>
</body>
</html>
