Cascading Style Sheets(CSS)는 HTML이나 XML(XML의 방언인 SVG, XHTML 포함)로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어입니다.
CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링 되어야 하는지 지정합니다.
- MDN Web Docs
외부 스타일시트는 .css
확장자가 있는 별도의 파일을 문서로 가져오는 가장 일반적이며 많이 쓰는 방법이다.
<head>태그안에 <link>태그를 써서 css파일을 불러온다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
</body>
</html>
h1 { /* h1 : 선택자 */
color: blue; /* 선언부 */
background-color: yellow; /* color(속성) : blue(값) */
}
p {
color: red;
}
내부 스타일시트는 HTML문서내의 <head>태그안에 <style>태그를 만든다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
<style>
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
</body>
</html>
인라인 스타일은 html의 요소에 직접적으로 선언하는 방법으로 잘 사용하지 않는 방법이다.
🤔why? 유지보수가 매우 비효율적이기 때문!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
</head>
<body>
<h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
<p style="color:red;">This is my first CSS example</p>
</body>
</html>