브라우저별 호환성 접두어
293
5 asked
저는 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 */Answer 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
26
2
'CSS Level 3: grid'의 정리본 PDF도 올려주시면 좋을 듯 합니다.
0
54
2
[강의 문의] '앱 출시하기' 강의 추가 일정 관련하여 문의드립니다.
0
37
1
경력기술서는 어떤 방향이 좋을까요?
0
52
2
왜 https://via.placeholder.com/150 등 링크가 연결이 안되나요?
0
74
3
어플리케이션 실행 후 에러에 관하여 질문 드립니다.
2
60
2
26,27강 진행 간 노션, html 프롬프트 파일 불일치
0
65
3
<div id="banner">배너 이미지</div> 관련 질문
0
34
1
변수 설정 시에 질문입니다.
0
38
2
설치 및 설정 가이드 노션 자료는 없나요 ?
0
43
2
counter01.html은 어디있을까요?
1
29
1
수업자료 문의
0
38
2
part3. spy 쪽 / part3,part4 강의자료
0
57
2
최종 코드
0
60
2
Open AI 결제
0
74
2
figma 파일을 받을 수가 없어요
0
64
1
다운로드 연결이 되지 않을 때는 어떻게 해야할까요?
0
64
1
Visual Studio Code 대신 Pycharm 써도 되나요?
0
61
2
수업자료 다운로드 문의
0
97
1
scss 파일 컴파일 후 에밋이 동작하지 않아요
0
399
1
강의자료 공유
0
230
0
live compiler vs 명령행 인터페이스
0
219
1
질문이 있습니다.
0
302
2
import파일명
1
286
1