class와id의차이
class와비슷한속성인id를이용하면html요소에고유한id를지정해줄수있는데요.
두속성의차이점은하나의id는하나의웹문서에오직한번만적용할수있어서반복사용이불가능하고class는여러번반복사용이가능하다는점이에요.
사실HTML과CSS에서는하나의웹페이지에같은아이디를여러번사용해도별문제없이동작하긴해요.
하지만이렇게중복된아이디를가지고자바스크립트작업을하게되면오류가발생하니되도록이면하나의id는한번만사용하는습관을들이도록해요.
class를정의할때는클래스이름앞에마침표를붙여.classname이라고쓴다고했죠?
id를정의할때는아이디이름앞에#을붙여#idname이라고쓰고요.
예를들어배경색이초록색인Green이라는이름의id를만든다고하면#Green{background-color:green;}이라고쓰면되고호출할때는id="Green"이렇게쓰면되는거예요.
<!-- css 공부-->
<html>
<head>
<title>css 공부</title>
<style>
#Green {
background-color: green;
}
</style>
</head>
<body>
<div>
<div id="Green">제목</div>
</div>
</body>
</html>style태그안에class를지정할때에는.class명이라고쓰고id를지정할때에는#id명이라고쓴다고했죠?
그렇다면태그를지정하고싶을때에는앞에뭘써야할까요? 태그앞에는 아무것도붙이지않아요.
이제style태그안에.으로시작하면클래스,#으로시작하면아이디,아무부호없이바로시작하면태그라는걸알겠죠?
<!-- css 공부-->
<html>
<head>
<title>css 공부</title>
<style>
#various {
background-color: blue;
color: black;
font-size: 20px;
text-align: center;
}
</style>
</head>
<body>
<div>
<div id="various">제목</div>
</div>
</body>
</html>그런데id를문서당한개만지정할수있다고해서id속성값도한개만지정할수있는건아니에요.
화면처럼여러가지속성을가진하나의id를만들어줄수있답니다.
천방지축😛 얼레벌레🙄 빙글빙글🙃 돌아가는 수지의 코드~🎵