브라우저별 호환성 접두어
310
投稿した質問数 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
42
1
14강. 업체 연결이 필요하신 분은 개인톡으로 문의해주세요.
0
40
1
인프당 무당 캐릭터 뽑는 프롬프트
0
49
2
10월 15일 삭제예정 강의 문의
0
42
1
강의가 중복됐어요
0
57
1
결제가 이루어지는 방식에 대한 문의
0
66
1
강의제목에 10/15일 삭제라고 나와있는데,
0
48
1
선생님 강의자료를 받을수 없어요! 메일보냈어요.
0
57
2
1강 동영상 재생 오류
1
68
2
헤더에서 empty column이 삭제가 안되고, 헤더 레이아웃을 동영상처럼 선택하는 옵션이 안나오는데 어떻게 하나요?
0
45
1
Composition단계에서 `Layer`는 누가 만드는지
0
47
1
Strict Mode 예시 질문!
0
65
2
해당 플러그인을 설치했는데 추가 지원 안될 수 있다고 다른 플러그인을 깔아보라는데 어떻게 해야하나여?
0
67
2
만일 실물을 택배로 배송해야 할 경우 주소지 입력하는 방법이 궁금해서요.
1
94
4
설명이 잘못된거같습니다.
1
79
2
31강 학습자료에 프롬프트가 엉뚱한것이 있어요
1
68
1
bitnami 설치
0
41
0
강의 소스 코드는 어디서 볼수 있나여?
1
71
1
수업자료 다운로드 문의
0
111
1
scss 파일 컴파일 후 에밋이 동작하지 않아요
0
417
1
강의자료 공유
0
241
0
live compiler vs 명령행 인터페이스
0
239
1
질문이 있습니다.
0
320
2
import파일명
1
306
1