오늘 배울 내용!!
✔ Inline Style Sheet
✔ Internal Style Sheet
✔ Linking Style Sheet
📢 CSS란?
css는 "cascading style sheets"의 줄임말으로 웹 문서의 스타일 시트이다.
html에서 웹에 대한 내용을 구성한다면, css는 디자인 역할을 맡고 있다.
디자인 전부가 css에 포함된다고 생각하면 편하다.(폰트, 글씨 크기, 색, 도형, 정령 등)
1. Inline Style Sheet
html 태그의 속성에 css 코드를 넣는 방법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline Style Sheet</title>
</head>
<body>
<h1 style="color: red; background-color: yellow;">원숭이 엉덩이는 빨개</h1>
</body>
</html><h1>이라는 태그 안에 속성 값을 만들어 글씨에는 빨간색, 배경에는 노란색을 적용한 것
디자인 요소를 태그마다 하나하나 지정해줘야하기 때문에 한계가 있으며 재사용이 불가능하다는 단점이 존재!!
2. Internal Style Sheet
<html>안에 <style> 안에 css 코드를 넣는 방법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal Style Sheet</title>
<style>
h1{
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<h1>원숭이 엉덩이는 빨개</h1>
</body>
</html>html 문서 안에 <style>태그를 넣어 디자인을 적용한 것
(<style>태그는 보통 <head>와 </head>사이에 넣지만 어디에 넣어도 상관없다!)
html 문서 안의 여러 요소를 한번에 꾸밀 수 있다는 장점이 있다.
하지만, 다른 html 문서에는 적용할 수 없다는 단점!
3. Linking Style Sheet(중요!!)
별도의 css파일을 생성하고 html문서와 연결하는 방법
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linking Style Sheet</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<h1>원숭이 엉덩이는 빨개</h1>
</body>
</html>css
h1 {
color: red;
background-color: yellow;
}href는 연결하고자 하는 링크이다!!!
style.css 앞의 "./"는 해당 파일의 위치를 의미한다.
여러 html 문서에 사용할 수 있다는 장점!
style.css를 적용시키고 싶은 문서에 <link> 태그로 연결만 해주면 된다!
상대경로란?
해당 파일과 폴더의 위치를 상대적으로 표시한 경로
✔ ./ : 현재 위치
✔ '../' : 현재 위치의 상단 폴더
⭐Mission⭐
css
div {
color: aqua;
background-color: blue;
}
span {
color: white;
background-color: blue;
}html
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/mission.css">
</head>
<body>
<div>
<h1>Youtube 전스트</h1>
</div>
<a href="https://www.youtube.com/channel/UCD8r5Jgns2V64-NcUmXclpg" target="_blank"><img src="../img/1634819315.gif"></a>
<br>
<span>CLICK IMAGE↗</span>
<p>롤토체스를 가장 재밌게하는 유튜버 전스트!!</p>
<p>예능덱 고수 전스트</p>
</body>
</html>