css는웹문서의전반적인스타일을미리저장해둔스타일시트에요.
쉽게말해웹문서에쓰일글자의 크기 ,특정 태그의 색 등서식과관련된내용들을관리하는것
물론우리는이전수업에서태그내에style이라는속성을지정함으로써위의기능들을이미구현한바있어요.
하지만태그내에style속성을사용하여서식을지정하는것은사실좋은방법이아니에요
<!-- css 공부-->
<html>
<head>
<title>css 공부</title>
<style>
.title {
color: red;
font-size: 2em;
}
.content {
color: black;
font-size: 1em;
}
</style>
</head>
<body>
<div>
<div class="title">제목1</div>
<span class="content">내용1</span>
</div>
<div>
<div class="title">제목2</div>
<span class="content">내용2</span>
</div>
<div>
<div class="title">제목3</div>
<span class="content">내용3</span>
</div>
</body>
</html>css를사용하면마치우리가한번의클릭만으로컴퓨터나핸드폰의테마를변경할수있듯이웹문서의서식을일괄적으로지정할수있어요.
스타일은class라고도부르는데class를정의하는방법은style태그안에.(마침표)라고쓴후,박수지님이희망하는class의이름을입력하시면돼요.
그리고중괄호를열고해당class에적용될style을기록하고요
아래부분은 **title,content라는2개의class를실제로태그에적용하는소스에요.
제목에는title이라는class가,내용에는content라는class가적용되어있음을볼수있어요.
<!-- css 공부-->
<html>
<head>
<title>css 공부</title>
<style>
.link {
cursor: pointer;
}
.font_bold {
font-weight: bold;
}
.background_yellow {
background-color: yellow;
}
</style>
</head>
<body>
<div>
기본글자
</div>
<div class="link font_bold">
굵고 커서가 바뀌는 글자
</div>
<div class="background_yellow">
배경이 노란색인 글자
</div>
<div class="font_bold background_yellow">
굵고 배경이 노란색인 글자
</div>
</body>
</html>class는꼭하나만적용할수있는것이아니에요.
여러가지class를정의해둔후,원하는태그에원하는class를얼마든지지정할수있어요.
cursor: pointer; 는커서를올릴경우,커서가손모양으로변하게하는스타일이고,font-weight: bold; 는글자를굵게만드는style이에요.
그리고background-color: yellow; 는배경색을노란색으로변경하는style이고요.
천방지축😛 얼레벌레🙄 빙글빙글🙃 돌아가는 수지의 코드~🎵