반응형
HTML class
HTML의 class 속성은 HTML 요소 클래스를 특정하는데에 사용이 된다.
같은 클래스에의 다중 HTML 요소들은 공유할 수 있다.
HTML class 속성
class 속성은 style sheet에서 클래슬 이름을 가리키는데 사용이 된다.
특정 클래스 이름을 가진 요소에 접근하거나 조작하기위해 JavaScript를 사용할 수 있다.
class 속성안에 <div>라는 요소들이 있는 <div>는 .class명 에따라 CSS로 스타일을 정의할 수 있다.
다음의 예시를 보자
<!DOCTYPE html>
<html>
<head>
<style>
.city{
background-color: yellowgreen;
color:red;
border:2px solid black;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div class="city">
<h2>Seoul</h2>
<p>Seoul is the captial of KOREA</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the captial of JAPAN</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the captial of France</p>
</div>
</body>
</html>위의 예시는 클래스를 city로 묶고 세가지의 지역 서울, 도쿄, 파리를 입력을 받았다.
각 클래스를 꾸미기위해 CSS 스타일로 .city를 통해 city클래스에 해당하는 요소들의 스타일을 변경하였다.
위의 예시처럼 클래스 설정을 요소 전체로 하는 방법도 있지만
작은 단위로도 만들어서 클래스를 만들 수 있다.
<!DOCTYPE html>
<html>
<head>
<style>
.note{
font-size:150%;
color:red;
}
</style>
</head>
<body>
<h1>This is <span class="note">important</span> information</h1>
<p>we need to learn a lot of <span class="note">programming languages</span></p>
</body>
</html>위의 예시를 보면 important와 programming lanuages 요소만 클래스로 받아서 CSS로 스타일을 한것을 알 수 있다.
예시를 실행시켜보면 두 요소만 폰트색이 빨간색이면서 크기가 더 큰 것을 알 수 있다.
다중 클래스 설정
클래스를 다중으로 설정할 수 있다.
아래의 에시를 통해 알아보자
<!DOCTYPE html>
<html>
<head>
<style>
.company{
font-size: 150%;
color:red;
}
.main{
text-align: center;
}
</style>
</head>
<body>
<h1>Multiple classes</h1>
<p>Here, all three h2 elements belongs to the "company" class. In addition, SamSung also belongs to the "main" class, which center-aligns the text.</p>
<h2 class="company main">SamSung</h2>
<h2 class="company">SK</h2>
<h2 class="company">LG</h2>
</body>
</html>위의 예시를 보면 기업 세개 삼성, SK, LG가 공통적으로 company 클래스를 갖는다는 것을 알 수 있다.
추가적으로 삼성의 경우 main이라는 클래스를 더 추가하여 main 클래스 스타일까지 적용하는 것을 알 수 있다.
다중 클래스를 적용하는 방법은 다음과 같다.
<type class="class01 class02">
반응형
'웹프로그래밍 > HTML' 카테고리의 다른 글
| HTML Forms (0) | 2023.09.05 |
|---|---|
| HTML Iframes (0) | 2023.09.04 |
| HTML 리스트 - Unordered Lists (0) | 2023.09.04 |
| HTML 리스트 list (0) | 2023.09.04 |
| HTML 단락과 <br>,<pre> 사용법 (0) | 2023.09.04 |
댓글