반드시 기억해야 하는 CSS 선택자 30개

code.tutsplus.com

반드시 기억해야 하는 CSS 선택자 30개는 온라인 튜토리얼 사이트 Envato Tuts+에 실린 글의 한국어 번역본으로, 웹 페이지 요소를 지정할 때 자주 쓰는 CSS 선택자를 정리해 소개합니다. 범용 선택자(*), ID·클래스 선택자, 자식 선택자(X > Y), 속성 선택자(X[attr="value"]), :hover·:nth-child(n) 같은 가상 클래스 등 30가지 선택자를 하나씩 코드 예시와 함께 설명하고, 브라우저 호환성 정보와 데모 링크도 곁들였습니다. HTML·CSS를 막 배우기 시작한 입문자나, 선택자를 정확히 구분해 스타일을 효율적으로 작성하고 싶은 웹 퍼블리셔에게 참고가 됩니다.

#스타일 #CSS #HTML #프론트엔드 #웹퍼블리싱 #CSS선택자 #가상클래스 #속성선택자 #Tuts+

태그,스타일지원테스트

caniuse.com

브라우저별 지원하는 기능을 확인할 수 있는 https://caniuse.com 소개합니다. HTML에는 수많은 태그와 속성이 있고, CSS역시 수많은 스타일이 있습니다. 물론 많다 하여도 개발자들은 거짐 다 외워서 사용하고 모르는 경우는 검색해서 사용합니다. 그런데 가장 큰 문제는 기능이 많아 내가 모르고 있는 기능이 있다는 것이 아닙니다. 내가 알고 있는 기능이 모든 브라우저 환경에서 정상작동 되는지 파악하는 문제입니다. 웹표준을 지켜서 모든 환경에서 정상작동 되게 할수 있지만 이또한 한계가 있습니다. 이유는 브라우저마다 지원하는 부분이 조금씩 다르고 사용방법도 다른 경우가 있기 때문입니다. 이해는 됩니다. 기술이 계속 발전하면서 과거에 없던 기능들이 추가되는 것, 개발회사마다 조금씩 다를 수 밖에 없다는 점 이해 합니다. 그러기 때문에 개발하는 사람 입장에서는 어디까지 지원하고 또 무엇이 다른지를 알고 있어야만 합니다. 최신기술이 나오면 모든 사람들이 동시에 최신 기술을 사용하면 좋겠지만 현실은 그렇지 않습니다. 최신기술이 나오고 정착되려면 짧게는 몇 개월에서 길게는 몇 년이 걸리기도 합니다. 그러기에 개발자들은 이모든 것을 환경을 고려해 개발할 수밖에 없습니다. 그래서 소개하는 사이트가 바로 https://caniuse.com 입니다. Can I yse _______ ? 라는 부분에 내가 사용하고자 하는 태그나 CSS등을 입력하면 브라우저 별 사용가능 여부가 나와집니다. 너무 좋은 것은 같은 브라우저라 해도 버전 별로 지원여부가 다를 수 있는데 이 또한 자세히 나와진다는 것입니다. 물론 개발에 익숙한 사람이라면 자신이 지금까지 사용하던 기능이 어느 버전까지 지원하는지 알고 있겠지만 새로운 기능을 사용하고자 할 때에는 파악하기가 어렵습니다. 이때 https://caniuse.com 를 활용하면 검색만으로 지원가능 브라우저 및 버전을 쉽게 파악할 수 있습니다. 내가 사용 하고자 하는 기능이 어느 버전까지 지원하는지 한눈에 파악하길 원하시는 분이라면 https://caniuse.com 를 추천해드립니다.

#테스트 #영문 #버젼 #태그 #스타일 #브라우저 #지원 #CSS #HTML #caniuse #브라우저호환성 #웹표준 #크로스브라우징 #프론트엔드