이제 HTML을 꾸미는 도구인 CSS를 사용하는 법을 알아보자.
이번 장에서는 CSS의 문법과 그걸 어떻게 html 파일이 인식하도록 연결하는 지에 대해 알아보자.
CSS는 별도의 파일로 존재하므로 폴더의 조직을 신경쓰면서 해보자.
<!DOCTYPE> // hello-css.html
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>Hello, CSS</title>
</head>
<body>
<h1>Hello, CSS</h1>
<p>CSS는 우리가 html element들을 스타일링 할 수 있도록 해준다. <a href='dummy.html'>
다른 예시</a>도 준비되어 있다.
</p>
<h2>List Styles</h2>
<p>꾸며줄 리스트들 </p>
<ul>
<li>disc</li>
<li>circle</li>
<li>square</l1>
</ul>
<p>숫자를 붙여줄 리스트들</p>
<ol>
<li>demical</li>
<li>lower-roman</li>
<li>upper-roman</li>
<li>lower-alpha</l1>
<li>upper-alpha</li>
<li>기타 등등</li>
</ol>
</body>
</html>여기에 추가로 복수의 웹 페이지 집합에서 CSS가 어떻게 작동하는지 알아보기 위해
간단한 html 문서를 하나 더 만들어보자.
<!DOCTYPE>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>Hello, CSS</title>
</head>
<body>
<h1>dummy</h1>
<p>CSS의 재활용 예시를 위한 더미 페이지
<a href='hello-css.html'>Go back</a>
</p>
<p>아무것도 없는 링크 <a href='nowhere.html'>obsolete link</a></p>
</body>
</html>
3-1 CSS Stylesheets
css stylesheet은 css 확장자로 존재한다. 우선 hello-css 폴더를 만들고, style.css를 만들어보자.
CSS를 작성할 때 사용되는 일정한 규칙이 존재한다. 항상 selector로 시작하며,
이 selector가 우리가 써준 css가 어떤 html element에 적용될지를 결정한다.
예시의 뜻을 해석하자면 <body>의 color를 #FF0000으로 하겠다는 것을 의미한다.
cf> CSS에 주석을 다는 형식은 html과는 조금 다르다.
다음과 같이 /* , */ 사이에 있는 내용들은 전부 주석으로 처리한다.
/* 주석 예시 */
/* CSS stylesheet */
/* style.css */
body {
color:#FF0000;
}
바꾸고 싶은 element를 지정하고 중괄호 사이에 특성과 값을 지정해주면 된다. 각각의 값은 세미콜론(;)으로 구분한다.
body의 font-size를 추가로 정해주고 싶으면 다음과 같이 추가해주면 된다.
/* CSS stylesheet */
/* style.css */
body {
color:#FF0000;
font-size:36px;
}
가독성을 위해 각각의 속성을 적을 때 줄을 바꿔주는 것이 좋다.
3-2 Linking a CSS Stylesheets
여기까지하고 css와 html을 link해줘야 한다. html에 이 둘을 연결하기 위한 element <link>가 있다.
html의 head에 다음과 같이 추가해보자.
<link href='styles.css' rel='stylesheet' type='text/css'><link>도 <a>와 비슷하지만 <head>에 사용되며, 정도 자체가 렌더링되진 않는다.
rel attribute는 resource와 html 문서의 관계를 정의한다.
기억해둘 점은 CSS파일은 브라우저와 직접적인 연결이 없다는 점이다.
CSS는 브라우저가 인식할 수 있는 html markup을 통해서만 영향을 미칠 수 있다.
'CSS' 카테고리의 다른 글
| Ch 05. CSS 선택자 (0) | 2022.04.14 |
|---|---|
| Ch 04. CSS Box Model (0) | 2022.04.12 |
| Ch 02. Links & Images (0) | 2022.01.24 |
| Ch 01. Introduction (0) | 2022.01.16 |