들어가기 전에
HTML에서 전체 문단이 아닌, 일부분에만 스타일을 적용하고 싶다면 어떻게 해야 할까요? 같은 스타일을 여러군데에서 여러번 사용하고 싶다면 어떻게 하면 좋을까요? CSS class를 이용해서 이 문제를 해결해봅시다.
학습 목표
Div, span 태그와 class를 사용해서 CSS 디자인을 부분적으로 적용해볼 수 있습니다.
핵심 단어
- div, span 태그
- class
강의 듣기
10. CSS기초(style 태그)
Span과 Div
우리가 CSS를 이용해서 문단의 특정 부분에만 스타일을 주어서 강조를 하고 싶다고 해 봅시다. 이 때 이 부분을 감싸줄 수 있는 HTML 태그가 필요하겠죠.
이를 위해서 우리는 div와 span이라는 태그를 사용합니다. 둘 모두 어떠한 특정한 기능이 있는 태그가 아니고, CSS나 Javascript 코드를 삽입하기 위해서 존재하는 태그입니다. div 태그는 화면 전체를 사용하기 때문에 줄바꿈이 되고, span은 줄바꿈이 되지 않습니다.
이제 이러한 div와 span 태그 안에 style 속성을 부여하면 이 태그로 감싸진 부분에만 디자인이 적용되게 됩니다.
하지만 이렇게 모든 부분을 div나 span 태그로 감싸려고 한다면 이를 쓰기도 힘들고, 수정하기는 더욱 힘들 것입니다. 이를 위해서 CSS에는 선택자라는 기능이 존재합니다.
Class
이를 위해서는 <head> 태그 안에 <style>이라는 새로운 태그를 만들어 줍니다. 이 style 태그 안에는 CSS 코드가 들어가게 됩니다. 그리고 js라는 class를 생성해 봅시다. 아래 코드와 같이 말이죠
<head>
<style>
.js {
font-weight: bold;
}
</style>
</head>이 때 js 앞에 찍혀있는 점은 js라는 이름이 class 이름이라는 것을 나타냅니다. 이렇게 class를 만들었으니, 이를 HTML 코드의 곳곳에 적용시키면 됩니다. 예를 들어 어떤 문장에서 Javascript라는 단어에만 이 class를 적용시켜서 볼드체로 만들고 싶다면 다음과 같이 쓰면 됩니다.
<span class="js">Javascript</span> is wonderful!이렇게 하면 이제 js라는 class를 가진 모든 태그를 한 번에 바꿀 수 있습니다. style 태그 안에 있는 .js만 수정하면 모든 부분을 한 번에 바꿀 수 있는 것이죠.
생각해보기
1) js class에 다양한 스타일을 추가해서 Javascript라는 글자를 꾸며봅시다.
comment
이는 내부 스타일 시트를 이용하는 방법으로 풀어주면 된다.
따라서 <head>태그 내부에 <style>을 작성하고, 내부에 css 코드를 작성해주면 된다. (잘 쓰지는 않음)
<style>
.js{ font-size : 16px; line-height=16px ; color:white ; decoration:none;}
</style>
<head>
<style> .js{font-wight:bold;font-size:40px;color:blue;background-color:yellow;text-decoration:underline;}</style>
</head>
<head>
<style>
.js{ font-size: 100px; font-weight: bold; text-decoration:underline;}
</style>
</head>
<style>
.js { font-weight:bold;color:red;font-size:40px;background-color:green }
</style>
<style>
.js{
color : blue;
background-color : yellow;
}
</style>
<span class="js">Javascript</span>
<div class="js">JavaScript</div>
<style>
.js{
color: blue;
font-szie:50%;
}
</style>
<head>
<style>
.js{
font-weight:bold;
color:blue;
}
</style>
</head>
<html>
<head>
<style>
.js{
font-size: 30px;
font-weight:bold;
color:blue;
font-style:gothic;
}
</style>
<body>
<p><span class = "js">j/span>ava<span class="js"></span>script</p>
</body>
</head>
</html>
.js{color:blue; background-color:powderblue; font-weight:bold;}
<style>
.js {
color:red; font-size:15px; font-weight:bold
</style>
.js
{
font-weight: bold;
font-size: 1.2em;
color: purple;
}
<style>
.js { font-weight: bold; color:gray; font-size:20px; font-family:'굴림';
}
</style>
<html>
<head>
<style>
.js{
font-size: 20px;
font-weight: bold;
color: red;
font-style: italic;
}
</style>
</head>
<body>
<p><span class="js">j</span>ava<span class="js">S</span>cript</p>
</body>
</html>
<head>
<style>
.js{
font-weight:bold;
color:pink;
font-size:45px;
}
</style>
</head>
<body>
<span class="js">Javascript</span>
</body>
<style>
.js{
border:2rem solid green;
font-size:3.5rem;
font-weight: bold;
padding: 3.5rem;
width:50%;
text-align: center;
}
</style>
</head>
<body>
<div class="js">재밌는 코딩 학습
</div>
<head>
<style>.js{
color: blue;
font-weight: bold;
font-size: 50px;
}
</style>
<body>
<p>Hello my name is <span class="js"> HS </span> </p>
</body>
</head>
.js{
font-size: 50px;
font-weight: bold;
color: rgb(7, 27, 28);
border-bottom: solid 2px red;
}
<head>
<style>
.js {
font-weight: bold;
font-style: italic;
font-size:30px;
}
</style>
</head>
<head>
<style>
.js{
font-weight:Bold;
color:green;
font-size: 35px;
}
</head>
</style>
<body>
<span class="js">Javascript</span>
</body>
https://github.com/JNyum/java_html.git
1_10