패스트캠퍼스 환급챌린지 9일차 : 김민태의 프론트엔드 Pre Academy : 처음 시작하는 프론트엔드 강의 후기

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
https://bit.ly/4hTSJNB

 

250313(목) 9일차

 

어제 CSS Part 1을 들었으니

부록 Part 3 css 수업 듣기

CSS 선택자

• 태그 선택자 : 태그 이름으로 선택
• 클래스 선택자 : 클래스 속성 값으로 선택 / 앞에 .
• 하위 선택자 : 하위 요소 선택 / 띄어쓰기가 하나의 선택자 기호로 사용
• 가상 클래스 선택자 / : 기호 사용
  • hover : 마우스 커서가 올라가 있는 동안 선택
  • active : 마우스를 클릭하고 있는 동안 선택

 

이번 강의를 통해 CSS 선택자의 기본 개념을 다시 한번 정리할 수 있었다

태그 선택자는 가장 직관적인 방식으로 특정 요소를 스타일링할 수 있어 기초적인 개념이지만 여전히 중요한 요소라는 점

단순한 선택 방식이지만, 전체적인 스타일 구조를 잡을 때 효과적으로 활용할 수 있겠다는 생각이 들었다

 

클래스 선택자는 특정 요소에 스타일을 적용할 때 필수적으로 사용되는 만큼 다시 복습하면서 선택자의 우선순위나 적용 범위에 대해 다시 한 번 정리할 수 있었다

특히 여러 요소에 같은 스타일을 적용할 수 있다는 점에서 HTML과의 연결 관계를 명확하게 이해하는 것이 중요하다고 느꼈다

예전에는 무조건 클래스를 부여해서 스타일링했지만 태그 선택자나 다른 방법과 적절히 조합하는 것이 더 효율적이라는 점을 다시 생각해보게 되었다

 

하위 선택자는 특정 요소 내부의 다른 요소를 선택할 때 유용하며 HTML 구조를 잘 파악하고 있어야 적절히 활용할 수 있다는 점

단순히 하위 요소를 선택하는 것에서 나아가 구조적인 접근을 통해 스타일을 적용하는 것이 중요하다는 점

예전에 사용했던 복잡한 CSS 코드들을 떠올리며

불필요한 선택자를 줄이고 더 명확하게 스타일을 적용하는 방향으로 개선해야겠다고 생각했다.

 

가상 클래스 선택자는 요소의 상태에 따라 스타일을 동적으로 변경할 수 있어, 사용자 경험을 향상시키는 데 필수적인 요소였다. :hover와 :active는 버튼이나 링크 등에 많이 사용되며 다양한 인터랙션을 적용하는 데 유용하다는 점을 다시 한번 확인할 수 있었다. 특히, 특정 상황에서만 스타일이 적용되므로 개발 과정에서 직접 확인하면서 조정하는 것이 중요하다는 점도 다시 떠올리게 되었다.

 

이번 복습을 통해 CSS 선택자의 개념을 다시 정리하면서 단순히 기능을 아는 것을 넘어 어떤 상황에서 어떻게 활용하는 것이 효과적인지를 다시 고민해보게 되었다.

앞으로도 다양한 선택자를 적절히 조합해 보다 깔끔하고 유지보수하기 쉬운 스타일을 작성하는 연습을 하자