-
class & IdHTML&CSS 2022. 9. 26. 08:49
HTML 요소에게 '이름'을 주는 방법은 두 가지가 있습니당
1. 클래스 (class)
- 클래스는 ( . )
2. 아이디 (id)- 아이디는 ( # )
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .blue-text { font-size:64px; color:blue; } .centered-text { text-align:center; } #best-text { color:orange; } </style> </head> <body> // 클래스를 2개 주고 싶으면 한 칸 띠고! 쓰면 된당 <h1 class="blue-text centered-text">heading1</h1> <h2 class="centered-text">heading2</h2> <p class="blue-text">첫번째</p> <p id="best-text">두번째</p> <p>세번째</p> <p>네번째</p> </body> </html>
클래스와 아이디 차이 1 
클래스와 아이디 차이2 # 실습 - 1
- 남자가 부르는 부분은 파란색(blue)
- 여자가 부르는 부분은 핑크색(hotpink)
- 남녀가 같이 부르는 부분은 연두색(lime)
<!DOCTYPE html> <html> <head> <title>사랑보다 깊은 상처</title> <meta charset="utf-8"> <style> .male{ color:blue; } .female{ color: hotpink; } .together{ color:lime; } </style> </head> <body> <h1>사랑보다 깊은 상처</h1> <h2>임재범, 박정현</h2> <p class="male">오랫동안 기다려왔어 내가 원한 너였기에<br> 슬픔을 감추며 널 보내줬었지<br> 날 속여가면서 잡고 싶었는지 몰라</p> <p class="female">너의 눈물 속에 내 모습 아직까지 남아있어<br> 추억을 버리긴 너무나 아쉬워<br> 난 너를 기억해 이젠 말할게 그 오랜 기다림</p> <p class="together">너 떠나고 너의 미소 볼 수 없지만<br> 항상 기억할게 너의 그 모든걸<br> 사랑보다 깊은 상처만 준 난<br> 이젠 깨달았어 후회하고 있다는 걸</p> <p>이젠 모두 떠나갔지만 나에겐 넌 남아있어<br> 추억에 갇힌 채 넌 울고 있었어<br> 난 이제 너에게 아무런 말도 할 수 없어</p> <p>그런 넌 용서할지 몰라 부족했던 내 모습을 <br> 넌 나를 지키며 항상 위로했었지 <br> 난 그런 너에게 이젠 이렇게 아픔만 남겼어</p> <p>너 떠나고 너의 미소 볼 수 없지만<br> 항상 기억할게 너의 그 모든걸 <br> 사랑보다 깊은 상처 만 준 난<br> 이제 깨달았어 후회하고 있다는 걸</p> <p>나는 상상했었지 나의 곁에 있는 널<br> 이젠 모든 나의 꿈들을 너에게 줄게</p> <p>너 떠나고 너의 미소 볼 수 없지만<br> 항상 기억할게 너의 그 모든걸<br> 사랑보다 깊은 상처만 준 난<br> 이젠 깨달았어 후회하고 있다는 걸</p> </body> </html># 실습 - 2
클래스 대신 아이디(id)를 이용해서 연두색으로 바꾸기
<!DOCTYPE html> <html> <head> <title>하늘을 달리다</title> <meta charset="utf-8"> <style> #bridge { color:lime; } </style> </head> <body> <h1>하늘을 달리다</h1> <h2>이적</h2> <p>두근거렸지 누군가 나의 뒤를 좇고 있었고<br> 검은 절벽 끝 더이상 발 디딜곳 하나 없었지<br> 자꾸 목이 메어 간절히 네 이름을 되뇌었을 때<br> 귓가에 울리는 그대의 뜨거운 목소리<br> 그게 나의 구원이었어</p> <p>마른 하늘을 달려 나 그대에게 안길 수만 있으면<br> 내 몸 부서진대도 좋아<br> 설혹 너무 태양 가까이 날아<br> 두 다리 모두 녹아내린다고 해도<br> 내 맘 그대 마음 속으로 영원토록 달려갈거야</p> <p>내가 미웠지 난 결국 이것밖에 안 돼 보였고<br> 오랜 꿈들이 공허한 어린 날의 착각 같았지<br> 울먹임을 참고 남몰래 네 이름을 속삭였을 때<br> 귓가에 울리는 그대의 뜨거운 목소리<br> 그게 나의 희망이었어</p> <p>마른 하늘을 달려 나 그대에게 안길 수만 있으면<br> 내 몸 부서진대도 좋아<br> 설혹 너무 태양 가까이 날아<br> 두 다리 모두 녹아내린다고 해도<br> 내 맘 그대 마음 속으로 영원토록 달려갈거야</p> <p id="bridge">허약한 내 영혼에 힘을<br> 날개를 달 수 있다면</p> <p>마른 하늘을 달려 나 그대에게 안길 수만 있으면<br> 내 몸 부서진대도 좋아<br> 설혹 너무 태양 가까이 날아<br> 두 다리 모두 녹아내린다고 해도<br> 내 맘 그대 마음 속으로 영원토록 달려갈거야</p> </body> </html>ㅇ