Web/HTML
HTML class,id 개념 및 차이점 form input
zkzk7290
2024. 7. 26. 16:12
반응형
HTML 의 class, id 개념
- Class: HTML에서 여러개의 태그들을 큰 단위로 묶어주는 주머니(div,span) ,CSS에는 이(div,span)을 포함한 다른
(h1, p, a)태그에도 이름을 붙여 같은 이름을 가진 태그들마다 CSS로 효과를 부여할 수 있다.
-클래스를 여러개 설정할 때는 띄워쓰기 만 해주면 된다.
.flex-container{
height: 100px;
width: 100px;
border: 1px solid black;
}
.box{
height: 100px;
width: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1> align-content</h1>
<div class="flex-container">
<div class="box" >1</div>
<div class="box1">2</div>
<div class=" box box1">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
</div>
id
id: class와 동일하게 같은 이름 가진 태그에 공통적인 효과를 부여할 수 있다. 하지만 class처럼 동시에 2개 이상을 사용하지 못한다.1가지의 아이디만 지정할 수 있기 때문에 주로 홈페이지의 레이아웃 영역을 꾸밀때 id를 사용한다.
#box{
height: 100px;
width: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1> align-content</h1>
<div class="flex-container">
<div id="box" >1</div>
<div id="box1">2</div>
<div id=" box box1">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
</div>
차이점
- class : class를 설정할 때 띄어쓰기로 2개 이상의 클래스를 지정할 수 있다.
- id: id를 설정할 때 1개의 id만을 지정할 수 있다.
반응형