Dr Ghost Dev

HTML 태그 이름 붙이기, class, div 태그 본문

Front-End/HTML,CSS

HTML 태그 이름 붙이기, class, div 태그

Dr Ghost 2023. 10. 19. 18:07
반응형

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
'Front-End/HTML,CSS' Related Articles more