1. id 활용 스타일링
1️⃣ id 지정
h1 태그를 동일하게 3개를 작성할 경우,각 태그에 id값을 주면 개별적으로 스타일링 가능.
<body>
<h1 id="one">hello</h1>
<h1 id="two">hello</h1>
<h1 id="three">hello</h1>
</body>2️⃣ id 호출
위와 같이 id를 먹이고, head 태그의 style영역에서 해당 id를 호출한다.
<head>
<style>
#one{
color:red;
}
#two{
color:green;
}
#three{
color:blue;
}
</style>
</head>⭐️꿀팁
p태그에 hello 넣어서 10개 복제하는 방법
p{hello}*103️⃣ id에 링크 걸기
<body>
<a href="#one">one으로 이동</a>
</body>위와 같이 미디어태그 a에 넣어줄 경우, 해당 키값을 가진 문서로 이동함.
id는 고유값이므로, 동일한 이름으로 짓지 않을 것.
id는 선택자, property라고도 함.
2. class 활용 스타일링
1️⃣ class 지정
<style>
.one{
color:red;
}
</style>
<body>
<h1 class="one">hello</h1>
</body>💡 왜 id를 두고 class를 쓸까?
id는 중첩해서 쓰는 것이 불가능하다.
반면 class는 가능하므로, 특정 스타일링을 클래스로 지정할 경우
코드에 스타일링을 중복 적용 가능하다.
<body>
<h1 class="one two">hello</h1>
</body>
유저가 왜 그랬을까