[HTML&CSS]ID, Class의 차이 및 예제.
- 포로그래밍/HTML&CSS
- 2019. 7. 3.
안녕하세요? 원주남자입니다.
오늘은 id와 class의 차이점과 그 활용예제를 보겠습니다.
<img src="img1.png" id ="img1" class="common_img" />
<img src="img2.png" id ="img2" class="common_img" />위에 소스는 html코딩을 하다보며는 참 많이 보는 태그중에 하나 일것 같네요.
이미지가 2개가 있고요. 딱봐도 각각의 id는 다른데 class는 같다라는 것을 확인할 수 있습니다.
요약하자면
id는 스타일을 지정하고자 할 때 딱 한번 유니크하게 지정할 수 있는 속성입니다.
class는 단일보다는 그룹의 개념으로 한번에 여러개의 객체들에게 스타일을 지정하고자 할 때 일반적으로 사용됩니다.
그럼 실제로 위 소스를 활용하여 예제를 하나볼게요. (이미지는 무료이미지사이트에서 다운로드받았습니다.)
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="img/img1.jpg">
<img src="img/img2.jpg">
</body>
</html>
위는 id와 class활용없이 이미지를 넣은 상태입니다.
저는 위의 이미지는 원본대비 50%를 아래 이미지는 25%로 줄이고 싶습니다.
그리고 2개의 이미지에 동일하게 테두리를 줘보게요.
그러면 어떻하면될까요?
각각 이미지의 id에는 크기를 class에는 테두리와 관련된 css를 적용시키면되겠습니다.
<html lang="en">
<head>
<style>
.common_img{
border:4px solid #000000;
}
#img1{
width:50%
}
#img2{
width:25%
}
</style>
<meta charset="UTF-8">
<title>제목제목~</title>
</head>
<body>
<img src="img/img1.jpg" id="img1" class="common_img">
<img src="img/img2.jpg" id="img2" class="common_img">
</body>
</html>각각의 이미지에 img1, 2의 id와 common_img라는 class를 지정해주었습니다.
head사이에 style태그를 선언해 주었구요.
여기서 주의하실 점이 id는 #을 사용하여서 지정해주셔야하고 class는 . 을사용하여 지정해아한다는 것을 유의하세요.
결과를 볼까요?
이미지배치가 좀 이상한 것 같긴한데요 ㅎㅎㅎ;;
크기변경과 테두리가 들어간 것을 확인할 수가 있습니다.
배치를 원하는 곳으로 하고 싶으시다면은 float와 같은 속성들을 좀 더 활용하시면 좋을 것 같습니다.
좋은하루되세요~