문서에서 실행까지
CSS 예제를 붙이기 전에: MDN 설명과 브라우저 지원 정보를 함께 보는 법
CSS 문법을 찾는 문서와 브라우저 지원 표의 역할을 구분합니다. MDN·Can I use를 연결해 기능 확인부터 실제 기기 점검까지 진행하는 작업 흐름입니다.
예제가 동작하는 것과 사용할 수 있는 것은 다릅니다
한 브라우저에서 예제가 보이더라도 서비스 이용자의 환경에서 모두 같은 결과가 나온다는 뜻은 아닙니다. 주소제트는 개발 문서를 많이 여는 대신 질문을 나누어 찾는 경로를 제안합니다. 첫 질문은 문법이 맞는지이고, 두 번째는 필요한 환경에서 지원되는지입니다. 마지막으로 실제 화면에서 결과를 확인해야 합니다.
MDN에서는 기능의 의미와 사용 맥락을 읽습니다
MDN의 웹 기술 문서는 HTML·CSS·JavaScript 등 웹 개발 자료의 출발점입니다. 검색 결과의 짧은 코드만 가져오기보다 해당 기능 문서에서 문법과 설명을 읽어 보세요. 코드에 등장한 속성이 어떤 요소에 적용되는지, 원하는 배치와 관련된 기능인지 먼저 구분합니다. 이 글은 특정 CSS 기능의 최신 지원 여부를 보증하지 않습니다.
지원 표는 대상 브라우저와 버전으로 읽습니다
Can I use는 웹 기능의 브라우저 지원 정보를 찾는 도구입니다. 기능 이름으로 자료를 찾은 다음 대상 브라우저와 버전을 확인하세요. 전체적인 지원 비율 하나만으로 판단하기보다 서비스가 실제로 지원해야 하는 환경과 표의 주석을 함께 읽는 편이 작업 조건을 분명히 합니다. 문법 설명과 지원 정보가 필요할 때 두 자료를 오가며 확인합니다.
작은 검증 화면으로 마무리합니다
예를 들어 새 레이아웃 방식을 검토한다면 긴 페이지 전체를 바꾸기 전에 제목, 카드 몇 개, 긴 문자열이 있는 작은 화면을 만듭니다. 좁은 화면과 긴 텍스트에서도 읽을 수 있는지 확인하고, 기능이 없을 때 필요한 정보가 남는지도 살펴보세요. 지원 표를 읽었다는 사실은 자신의 구현을 테스트했다는 뜻이 아닙니다. 문서 주소와 확인한 환경을 작업 기록에 함께 남깁니다.
| 작업 질문 | 확인할 곳 | 남길 결과 |
|---|---|---|
| 문법과 의미가 맞는가 | MDN 해당 기능 문서 | 사용 목적과 적용 대상 |
| 목표 환경에서 지원되는가 | 브라우저 지원 표와 주석 | 검토한 브라우저·버전 |
| 우리 화면에서도 읽히는가 | 작은 검증 화면과 실제 기기 | 좁은 화면·긴 텍스트 확인 결과 |
실행 전 확인 목록
- 문서의 기능 이름과 사용한 코드가 일치하는가
- 목표 브라우저와 주석을 확인했는가
- 지원 표와 별도로 자신의 화면을 검증했는가