본문 바로가기
웹코딩 배우기/· HTML

HTML class=""

by 닐기 2019. 10. 15.

class는 요소에 이름을 부여해 스타일을 적용하는 태그다. 이름이 같은 class를 부여한 요소는 똑같은 스타일을 받는다. 이 말은 class는 반복 사용할 수 있다는 말. ok! 근데 나 이거 알고 있었다능. 정리만 하고 넘어가자.

 

<head></head> 사이에 스타일 태그로 .menu를 컨트롤해준다.

div 블록구조에  class로 menu 이름을 부여한다. 스타일에서는 이름 앞에 .(점)을 적어줘야 한다.

그럼 위에 설정한 스타일이 div 구조에 적용이 된다. 참고로 class는 .(점) id는 #을 쓴다. 그리고 id는 반복 사용이 불가능하다.

 

- class는 모든 태그에 사용할 수 있다.

- class="name"은 대소문자를 구별한다.

<!DOCTYPE html>
<html>
<head>
<style>
	.menu {
		background-color: tomato;
		color: white;
		margin: 15px;
		padding: 15px;
	}
</style>
</head>
<body>

<div class="menu">
	<h2>밥</h2>
	<p>콩밥. 학교온 기분이다.</p>
</div>

<div class="menu">
	<h2>반찬</h2>
	<p>콩자반. 탈모 걱정은 없다.</p>
</div>

<div class="menu">
	<h2>국</h2>
	<p>정수기 국이 제일 맛있다.</p>
</div>
</body>
</html>

- 인라인 구조에도 써보자.

<!DOCTYPE html>
<html>
<head>
<style>
	span.rmf {
		font-size: 200%;
		color: tomato;
	}
</style>
</head>
<body>

<h2>나는 오늘
	<span class="rmf">물에 밥을 말아</span>
	먹었다.
</h2>

</body>
</html>

 

- class는 둘 이상의 이름을 가질 수 있다. 클래스 이름은 공백으로 구분한다.

class="name1 name2"

<!DOCTYPE html>
<html>
<head>
<style>
	.name1 {
		background-color: tomato;
		color: white;
		padding: 10px;
	}

	.name {
		text-align: center;
	}

</style>
</head>
<body>

<h2 class="name1 name2">엄마 밥줘</h2>
<h2 class="name1">밥</h2>
<h2 class="name1">만주네...=-=;</h2>
</body>
</html>

 

- class는 태그가 달라도 동일한 스타일이 적용된다.

<!DOCTYPE html>
<html>
<head>
<style>
	.name1 {
		background-color: tomato;
		color: white;
		padding: 10px;
	}

</style>
</head>
<body>

<h2 class="name1">엄마</h2>
<p class="name1">엄마</p>

</body>
</html>

 

* class는 스타일 태그를 받기 위함이고 반복 사용 가능하다. 끝!

style css 태그는 내부, 외부에서 컨트롤 할 수 있다.

반응형

댓글0