반응형
HTML의 내용을 CSS로 디자인을 할 때 여러 요소들이 같은 태그를 사용하면 태그가 같기 때문에 각각 요소들을 따로 디자인을 할 수 없게 된다. 이러한 경우에는 원하는 요소에 태그에 이름을 붙이고 그 이름을 사용하여 CSS파일에서 각각 원하는 디자인을 요소마다 할 수가 있게 된다.
태그에 class를 입력한다.
<html>
<head>
<meta charset="UTF-8">
<title>html 연습장</title>
</head>
<body>
<p class="design1">hello</p>
<p>hello</p>
<p>hello</p>
</body>
<html>3개의 p태그 중에 첫 번째 p태그에는 design1이라는 이름으로 class를 입력하였다.
class이름을 CSS에 적을 때는 [.클래스이름] 형태로 적는다(※주의 : 마침표와 클래스이름사이에 띄어쓰기를 하면 안 된다.)
.design1 {
color: red;
}
p{
color: blue;
}p태그에는 글자색을 파란색으로 하고 design1 클래스에는 글자색을 빨간색으로 하였다.
design1 클래스도 p태그 안에 있음에도 불구하고 글자 색이 빨간색으로 출력되었다.
div 태그 사용
div 태그는 HTML 여러 요소들을 하나로 묶을 때 사용하는 태그이다. 이렇게 하면 여러 요소들을 한 번에 똑같은 디자인을 할 수가 있다.
<div></div> 태그 안에 하나로 묶고 싶은 여러 속성들을 입력한다.
<html>
<head>
<meta charset="UTF-8">
<title>html 연습장</title>
</head>
<body>
<div>
<p>hello</p>
<p>hello</p>
</div>
<p>hello</p>
</body>
<html>첫 번째, 두 번째 p태그를 div태그를 사용하여 하나로 묶었다.
div {
color: red;
}div태그만 CSS로 디자인을 하기만 해도 첫 번째, 두 번째 p태그를 디자인할 수 있게 된다.
반응형
'Front-End > HTML,CSS' 카테고리의 다른 글
| HTML, padding, border, margin (1) | 2023.10.19 |
|---|---|
| CSS, 속성, 속성 값, 색 표현 (0) | 2023.10.19 |
| HTML의 head와 body (0) | 2023.10.19 |
| HTML의 기본 골격 구조 (0) | 2023.10.19 |
