style에 대한 질문을 드리고싶습니다.

Question

bootstrap에서 modal을사용하는데class&#61;&#34;modal&#34;을 사용해서 적용했습니다..modal { display: none; overflow: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; -webkit-overflow-scrolling: touch; outline: 0; }그런데 아래에 있는 다른 modal 관련된 css들도 같이 적용이 되더라구요.modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000; } .modal-backdrop.fade { opacity: 0; filter: alpha(opacity&#61;0); } .modal-backdrop.in { opacity: 0.5; filter: alpha(opacity&#61;50); }아무리 찾아봐도 연결하는 방법을 알지 못해서 어떻게 연결되어 사용할 수 있는 지 알려주셨으면 합니다

gomonk · Answer

질문이 잘 이해가 안돼는데, 뭘 연결하고자 하시는건가요?

shaffron · Answer

연결된다는게 어떤말인지 궁금하네요. 부모 엘리먼트에 적용된 효과가 자식 엘리먼트에 적용되는걸 말씀하시는거면 css 속성에 inherit이라고 있습니다. 부모 속성을 상속받는 거죠. 아니면 modal만 호출했는데 줄줄이 사탕처럼 다른 엘리먼트 들이 생기고 서로 다른 css에 영향을 받는걸말씀하시는거면 자바스크립트가 동적으로 엘리먼트를 DOM에 추가하기 때문입니다. 부트스트랩의 modal 함수를 호출하게 되면 이 함수 내에서 다른 엘리먼트를 추가하죠. header/ footer / content 등등 여러 엘리먼트를 기본적으로 추가하고 css입혀서 사용자는 내용만 입력할 수 있게 정돈된 DOM을 만들어줍니다.

SkillSlave · Answer

설명이 부족했던 것 같습니다; 자세하게 적어볼께요

div class='modal-dialog modal-sm'>

게시물의 비밀번호를 입력하여 주십시오.

이런식의 modal을 띄웠습니다 그런데 여기서 modal을 띄울때 자동으로 background-color가 검해지는 것을 조정하고싶어 검색을 해본결과 html상단에이렇게 색 자체를 바꾸어 주면 되는거였습니다. 기본값은 검정이었구요그런데 여기서 위에 코드와 같이 저는 modal-backdrop class를 적용시킨적이 없는데 적용이 되어 자동으로 기본값인 검정색 background-color 처리가 되는 것이 어떻게 되는건가 싶어서 질문을 드렸습니다

shaffron · Answer

개발자 도구에서 해당 옵션을 준 주체가 누구인지 확인이 필요할 것 같습니다.옵션 주체가 user agent stylsheet라고 되어있으면 브라우저가 임의로 준 값이라고 알고 있어요http://sir.kr/qa/69907 요기 참고해보세요~

SkillSlave · Answer

딱히 그런건 없어보입니다 ..제 의견을 말하자면 bootstrap이 이미 만들어놓은 클래스를 modal 을 사용할때 같이 나오게 하는거니까 브라우저가 임의로 설정한다는 것은 아닌거 같습니다;

shaffron · Answer

해당 부분은 Element 탭에서 해당 Element를클릭해야 나옵니다

SkillSlave · Answer

찾아봤는데 스타일 자체가 적용이 안되어 있네요; modal-backdrop결국에 bootstrap도 css로 만들어진 것을 사용하는거 일탠데 class사용 없이 적용 되는게 신기하네요

style에 대한 질문을 드리고싶습니다.

7개의 답변

Q&A 목록