TIL/CSS

[TIL] CSS ㅡ class / id에 스타일 적용하기

"유니" 2022. 9. 6. 23:23

 

 

 

오늘은 css에서 class, id 속성에 스타일을 지정하는 방법을 공부해 보겠읍니다 🫡 ( class/ id를 각각 언제 써야 하는지는 저도 다시 공부를 해보려해요..자아성찰) 

 

간단하게 보자면 

id는 : 전체 문서에서 딱 그 태그만 표현하고 싶을 때 사용하는 것이고, 

class는 : 여러가지 태그를 한번에 바꾸어 주고 싶을 때 사용하는 것 !!

 

 

이제 본격 스타일을 지정해줘 볼까요 

우선 태그의 속성 부분에 id/class 를 써 주고, 이름은 임의로 'yellow' / 'blue'로 지정 !! 추후에는 더 디테일하고, 의미있는 네이밍을 해야겠찌요 

 

 

이제 각각에 스타일을 지정해 줄건데, 

id 값에는 #(샾)을 써줘야고, class에는 .(피리어드)를 써줘야 합니다. 이것은 필수에오 

 

 

 

id 속성에는 폰트 컬러와 배경색을 바꿔주었는데, 이를 웹페이지에서 구현해주면 아래와 같이 나옵니다 신기하죠? (?) 

 

 

 

 

이번엔 class 속성에 스타일을 지정해 보겠습니다 

맨 앞에 . 을 찍어서 class 속성을 불러오고, 아래에 내가 변경하고 싶은 스타일들을 나열해주기 

제법 이것저것 해봄 헤헤.. 웹페이지에서 구현하면 아래와 같이 글자 크기와 배열도 함께 변경 된답니다 간단하지오?

재밌는 CSS의 세계.. 더열심히 해보자꾸나 '-'