브라우저별 호환성 접두어
281
投稿した質問数 5
저는 6분 50초대 보면 선생님께서 브라우저별 호환성까지 고려해서 접두어까지 저절로 붙은 스타일이 알아서 완성 됐다고 하시는데 저는 이렇게만 뜨는데 왜그런걸까요?
.one {
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
background-color: orange;
}
.two {
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
background-color: orange;
}/*# sourceMappingURL=main.css.map */回答 1
0
안녕하세요, 인프런 AI 인턴이에요.
접두어는 브라우저별로 웹 표준을 준수하지 않는 경우에 사용되는 접두사입니다. 저희 강의에서는 호환성을 고려하여 접두어를 사용하지 않고 스타일을 작성하였습니다.
그런데 제가 주신 코드를 보니, 한 개의 클래스만 one이라는 이름으로 정의되어 있습니다. 이 경우 스타일이 적용되지 않을 수 있습니다. two 클래스에도 동일한 스타일을 적용하셔야 할 것 같아요.
아래와 같이 two 클래스에도 스타일을 추가해 보세요.
.two {
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
background-color: orange;
}
이렇게 하시면 .one과 .two 클래스에 동일한 스타일이 적용되어 브라우저별 호환성 이슈없이 스타일이 완성될 거에요.
만약 접두어를 사용하고 싶으시다면, 접두어를 추가하여 스타일을 작성하실 수도 있습니다.
자세한 내용은 MDN(https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Properties_Reference)에서 각 속성의 호환성 정보를 확인하실 수 있으니 참고해주세요.
더 궁금한 점이 있으시면 언제든지 물어보세요. 좋은 하루 되세요.
배리어블 목록 없음
0
3
1
Token 등록 방법 문의
0
5
0
198강 (){onTap(e);}의 이해 돕기
0
19
1
6-6 실습 문의
0
21
2
섹션5 노션링크 는 따로 없나요?
0
25
2
Part 4에서 강의 연관 노션 정보들이 워드파일에 없습니다.
0
32
2
첨부자료 Part 4 코드 확인 부탁드리겠습니다.
0
26
2
선생님 각 강좌마다 예시로 보여주시는 웹페이지들은 어디서
0
23
1
퍼플렉시티 최소 결제단위 50달러로 바뀐 것 같습니다.
0
48
2
claude plugin 방법 자세히 부탁드려요
0
40
2
강의에 적용한 스크립트를 받아 볼수 있을까요?
0
40
2
최근 코테, 과제 테스트 트렌드
0
67
2
노션 25 인터렉션 구현 파트 안 보입니다!
0
38
2
파트3 13F부분도 짤린거같은데 확인해주세요
0
39
2
더백님 감사합니다
1
36
1
Gemini로 진행가능 여부 궁금합니다.
0
58
2
뉴스페이퍼 싱글템플릿 디자인 관련 상담 요청
0
26
2
프롬프트 11 진행 완료
0
44
2
수업자료 다운로드 문의
0
83
1
scss 파일 컴파일 후 에밋이 동작하지 않아요
0
382
1
강의자료 공유
0
218
0
live compiler vs 명령행 인터페이스
0
212
1
질문이 있습니다.
0
288
2
import파일명
1
272
1