Javascript # CSS
📝오늘 배운 내용
어제 HTML에 대해 배웠다면 오늘은 CSS에 대해 공부했다.
CSS는 웹페이지 스타일링을 하기 위한 도구라고 생각하면 되겠다.
우선 CSS를 적용하기 위해서는 총 3가지의 방법이 있다.
- 외부에 CSS 파일을 만들고 호출하여 사용하는 방법
- 인라인 적용 방법
- 내부 스타일 적용 방법
외부에 CSS 파일을 만들고 호출하여 사용하는 방법
스타일 시트를 작성한 CSS파일을 HTML 파일과 별도로 작성하여 HTML 파일에서 호출한다.
호출은 HTML 문서의 <head> 요소에 <link> 요소를 작성하여 외부 CSS 파일을 지정한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Modern CSS</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<header>This is the header.</header>
<div class="container">
<nav>
<h4>This is the navigation section.</h4>
<ul>
<li>Home</li>
<li>Mac</li>
</ul>
</nav>
</div>
<footer>
</footer>
</body>
</html>CSS 파일 작성
p {
font-size : 13px;
}
span {
color : red;
font-size : 11px;
}인라인 적용 방법
태그 안에 <style> 태그를 사용하여 css를 작성한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Modern CSS</title>
</head>
<body>
<header>This is the header.</header>
<div class="container">
<nav>
<p style="font-size: 13px;">This is the pharagraph section.</p>
<span style="color:red; font-size: 11px;">Hello</span>
<ul>
<li>Home</li>
<li>Mac</li>
</ul>
</nav>
</div>
<footer>
</footer>
</body>
</html>내부 스타일 적용 방법
<head> 태그 안에 <style> 태그를 사용하여 css를 작성한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Modern CSS</title>
<style>
p{font-size: 13px;}
span{color: red; font-size: 11px}
</style>
</head>
<body>
<header>This is the header.</header>
<div class="container">
<nav>
<p>This is the pharagraph section.</p>
<span>Hello</span>
<ul>
<li>Home</li>
<li>Mac</li>
</ul>
</nav>
</div>
<footer>
</footer>
</body>
</html>
do your best at any moment