달마루
기획자에서 개발자로
달마루
전체 방문자
오늘
어제
  • 분류 전체보기 (334)
    • 기획 이야기 (3)
    • 개발자로 전향한 이유 (1)
    • Github Address (1)
    • 개발자, 그 여정 (11)
      • 기초특강 (4)
      • 국비학원 선정 (4)
      • BitCamp_수업내용 (1)
      • 학원 프로젝트 후기 (1)
      • 정보처리기사 (1)
      • 개발 이야기 (0)
    • 개념 창고 (126)
      • JAVA (50)
      • CS (1)
      • Database (27)
      • NetWork (2)
      • 자료 구조 (2)
      • React (8)
      • Spring (3)
      • JPA (1)
      • HTML & CSS (18)
      • JS (3)
    • algorithm (186)
      • 백준 (161)
      • 프로그래머스 (23)
    • 사는 이야기 (0)

블로그 메뉴

  • Github
  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • Bronze IV
  • programmers
  • Bronze V
  • SQL고득점Kit
  • select
  • HTML
  • 혼공MySQL
  • SQL
  • 알고리즘
  • BOJ
  • BOJ algorithm
  • 문제풀이
  • MySQL
  • 백준알고리즘
  • Algorithm
  • 혼자공부하는SQL
  • Scanner
  • java algorithm
  • 알고리즘풀이
  • 자바
  • Bronze III
  • math
  • 혼공SQL
  • 백준문제풀이
  • sql 문제풀이
  • java
  • react
  • BRONZE
  • 백준
  • 프로그래머스

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
달마루

기획자에서 개발자로

개념 창고/HTML & CSS

[CSS] id 속성과 class 속성의 차이?

2024. 2. 1. 02:59


한줄로 정리하면
ID는 한 요소에만 사용이 가능하고,
CLASS는 여러 요소에 중복 사용이 가능합니다.

고유하게 전체 페이지에서 단 한가지에만 적용이 목적이라면
구분이 가능하지만, 반복이 불가능한 ID를 사용할 수 있고, 
중복으로 전체 페이지에서 반복적으로 적용이 목적이라면
구분이 가능하지만, 반복이 가능한 CLASS를 사용하면 됩니다.
CLASS는 반복적으로 쓰이는 유형들을 동일한 CLASS로 분류하여
편하게 관리할 수 있습니다. 

 

CSS에서의 사용법

CSS에서 사용하기 위해서는
#id
.class
형식으로 사용하면 됩니다.
id 속성은 유일하기 때문에 클래스보다 우선적으로 적용됩니다.

표로 정리합니다.

id class
# 으로 선택 . 으로 선택
한 문서에 단 하나의 요소에만 적용 동일한 값을 갖는 요소가 많음
특정 요소에 이름을 붙일 때 사용 스타일의 분류(classification)에 사용


예제 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>id, class 적용 예제</title>
    <style>
        /* id 사용시 id 앞에 #을 붙여 사용 */
        #footer {
            clear: both;
            background-color: #333333;
            color: white; /* 흰색 텍스트 예제 추가 */
            padding: 10px; /* 패딩 추가 */
        }
        /* class 사용시 class 앞에 .을 붙여 사용 */
        .box {
            text-align: center;
            background-color: #333333;
            color: white; /* 흰색 텍스트 예제 추가 */
            padding: 10px; /* 패딩 추가 */
        }
    </style>
</head>
<body>

    <div class="box">
        <!-- box의 1번째 class -->
        <p>This content is in a box 1.</p>
    </div>

    <div class="box">
        <!-- box의 2번째 class -->
        <p>This content is in a box 2.</p>
    </div>

    <div class="box">
        <!-- box의 3번째 class -->
        <p>This content is in a box 3.</p>
    </div>

    <div id="footer">
        <!-- footer의 유일한 사용처-->
        <p>This is the footer.</p>
    </div>

</body>
</html>



저작자표시 비영리 변경금지 (새창열림)

'개념 창고 > HTML & CSS' 카테고리의 다른 글

CSS 기본 선택자  (0) 2022.05.20
CSS 선언 방식  (0) 2022.05.20
CSS 정의 및 기본 문법  (0) 2022.05.20
HTML 전역 속성  (0) 2022.05.18
HTML의 주석처리  (0) 2022.05.18
    '개념 창고/HTML & CSS' 카테고리의 다른 글
    • CSS 기본 선택자
    • CSS 선언 방식
    • CSS 정의 및 기본 문법
    • HTML 전역 속성
    달마루
    달마루
    항상 어제보다 좋은 코드를 지향합니다. https://github.com/LimDongHyun99

    티스토리툴바