data life

CSS - Class vs Id 본문

CSS

CSS - Class vs Id

주술회전목마 2022. 10. 13. 09:38

<span>

padding : 상하좌우 모두 적용
margin : 좌우에만 적용 ▶️ inline 성질!!!
<!DOCTYPE html>
<head>
    <style>
        body {
            margin: 20px;
        }
        span {
            padding: 20px;
            margin: 30px;  //상하좌우 모두 30px로 마진을 줬으나 결과는 좌우만 적용된 걸 볼 수 있음
            background-color: aqua;
        }
    </style>
</head>
<body>
   <span>hello</span>
   <span>hello</span>
</body>
</html>

Class

.class name { property: property-value ; }

: 연이어 여러 개를 가질 수 있음

<span class="honey butter jam"></span>

Id

#id name { property: property-value ; }

: class와 달리 한 번에 여러 개를 가질 수 없음

 

차이점

우선순위

id > class > tag

'CSS' 카테고리의 다른 글

CSS - Units  (0) 2022.11.12
CSS - Add CSS to HTML  (0) 2022.11.11
CSS-Border  (0) 2022.10.13
CSS-Margin, Padding  (0) 2022.10.13
CSS - Basic, Display  (0) 2022.10.13
'CSS' Related Articles more