두개의 css로 나눴을때 발생하는 문제
조회수 4457회
메인화면의 틀의 css인 main.css 와 다이얼로그를 사용해서 그 다이얼로그의 css인 dialog.css 가 있습니다.
둘다 밑에처럼 가져왔구요
<link rel="stylesheet" type="text/css" href="~~~">
그런데 문제가 여기서 다이얼로그의 특정 어느부분의 css가 이상하게 적용이 안되서 main.css로 넘겨보았더니 적용이 되더라구요.. 뭐가 문제인가요?
밑에처럼 해보니 dialog-background 가 css 가 적용이안되어있습니다
test.html
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/joinDialog.js"></script>
<link rel="stylesheet" type="text/css" href="css/joinDialog.css">
</head>
<body>
<div id="dialog-background"></div>
<div id="dialog-join">
<div id="dialog-join-title">회원가입</div>
<input type="mail" id="dialog-join-mail" name="mail" placeholder="이메일을 입력하세요.">
<input type="password" id="dialog-join-password" name="password" placeholder="비밀번호를 입력하세요.">
<input type="text" id="dialog-join-name" name="name" placeholder="이름을 입력하세요.">
<div id="dialog-join-check-first">
echo('<label><input type="checkbox" id="check-age" name="check_age"> 만 14세 이상 이용약관 동의</label>
</div>
<div id="dialog-join-check-second">
<label><input type="checkbox" id="check-info" name="check_info"> 개인정보 취급방침 동의</label>
</div>
<div id="dialog-join-btn-wrap">
<div id="dialog-join-join">가입하기</div>
<div id="dialog-join-login">로그인</div>
</div>
</div>
<div id="dialog-login">
<div id="dialog-login-title">로그인</div>
<input type="mail" id="dialog-login-mail" name="mail" placeholder="이메일을 입력하세요.">
<input type="password" id="dialog-login-password" name="password" placeholder="비밀번호를 입력하세요.">
<div id="dialog-login-btn-wrap">
<div id="dialog-login-join">가입하기</div>
<div id="dialog-login-login">로그인</div>
</div>
</div>
</body>
</html>
joinDialog.css
<style type="text/css">
#dialog-background{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #aaaaaa;
opacity: 0.3;
z-index: 2000;
display: none;
}
/* 회원가입 */
#dialog-join{
width: 80%;
position: absolute;
z-index: 2001;
background-color: white;
padding : 10px;
border: #89dbc9 solid 1px;
display: none;
}
#dialog-join-title{
font-size: 0.9em;
height: 6.70%;
margin-bottom: 3.09%;
}
#dialog-join-mail, #dialog-join-password, #dialog-join-name{
width: 99%;
display: block;
border: #68ae9f 1px solid;
border-radius: 2px;
background-color: white;
height: 7.73%;
margin-bottom: 5.67%;
}
#dialog-join-name{
margin-bottom: 6.70%;
}
#dialog-join-check-first{
height: 7.73%;
margin-bottom: 5.67%;
font-size: 0.9em;
color: #7f7c7d;
}
#dialog-join-check-second{
height: 7.73%;
margin-bottom: 3.60%;
font-size: 0.9em;
color: #7f7c7d;
}
#dialog-join-check-first input, #dialog-join-check-second input{
vertical-align: middle;
}
#dialog-join-btn-wrap{
width: 100%;
height: 22.68%;
position: relative;
bottom: 0;
}
#dialog-join-btn-wrap div{
display: block;
width: 100%;
height: 50%;
color: white;
text-align: center;
}
#dialog-join-join{
background-color: #55a0cf;
border: none;
border-radius: 2px;
line-height: 250%;
}
#dialog-join-login{
background-color: #ea668b;
border: none;
border-radius: 2px;
line-height: 250%;
}
/* 로그인 */
#dialog-login{
width: 80%;
position: absolute;
z-index: 2001;
background-color: white;
padding : 10px;
border: #89dbc9 solid 1px;
display: none;
}
#dialog-login-title{
font-size: 0.9em;
height: 10.0%;
margin-bottom: 3.0%;
}
#dialog-login-mail, #dialog-login-password{
width: 99%;
display: block;
margin-bottom: 10px;
border: #68ae9f 1px solid;
border-radius: 2px;
background-color: white;
height: 15.0%;
margin-bottom: 5.0%;
}
#dialog-login-btn-wrap{
width: 100%;
height: 40%;
position: relative;
bottom: 0;
}
#dialog-login-btn-wrap div{
display: block;
width: 100%;
height: 50%;
color: white;
text-align: center;
}
#dialog-login-join{
background-color: #55a0cf;
border: none;
border-radius: 2px;
line-height: 300%;
}
#dialog-login-login{
background-color: #ea668b;
border: none;
border-radius: 2px;
line-height: 300%;
}
</style>
스크린샷 추가 ---------------------------------
-
(•́ ✖ •̀)
알 수 없는 사용자
2 답변
-
joinDialog.css 의 맨 위의
<style type="text/css">와 맨 아래의
</style>를 삭제해보세요.~
-
(•́ ✖ •̀)
알 수 없는 사용자
- 감사합니다 덕분에 해결했습니다..! 원래 style 태그는 붙이지 않는건가요? 알 수 없는 사용자 2016.8.17 15:25
- 네! style 태그는 html 문서에서 스타일 시트(css)를 사용하기 위한 태그이기 때문이죵! 즉 html 문서에서 css를 바로 사용하기 위해서(외부 파일로 불러들이지 않고) style 태그를 사용하는 겁니당~ css 문서에선 사용하지 않는걸로 알고 있습니다. 알 수 없는 사용자 2016.8.17 16:01
- 도움 감사합니다!!! 알 수 없는 사용자 2016.8.18 10:30
-
-
질문을 이해하기가 좀 힘들어서, 개인적으로 추측해서 적어봅니다. 어떤 명령어를 다른 명령어가 엎어서 우선적으로 실행하는 가장 기초적인 상황으로 추측해보면..
1.html/css는 최근(밑줄)의 명령어를 우선해서 받아들입니다. 만약 윗줄의 dialog.css와 아랫줄의 main.css에 중복되는 css명령어가 있다면 아랫줄의 명령어가 실행됩니다. dialog.css의 특정 어느부분의 css명령어가 적용이 안된다면 main.css에 같은 명령어가 없는지 체크할 필요가 있어요. 만약 3번째 줄처럼 bootstrap을 활용하신다면 그럴 확률이 더 높을 수 있어요.
<link rel="stylesheet" type="text/css" href="~/dialog.css"> <link rel="stylesheet" type="text/css" href="~/main.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">2. 끝에
!important명령어를 붙여서 사용했는지 체크할 수 있습니다.!important사용하게되면 다른 같은 명령보다 우선해서 실행합니다.적다보니 제가 상황을 제대로 이해했나 모르겠어요. 상황을 더 구체적으로 알려주시면 좋을 것 같아요. 왠지 다 적고나니까, css파일이 정상적으로 연결되지 않은것 같기도하고 아리송하네요. :)
=============댓글로 이야기를 들은 후, 내용 수정 ============
main.css의 내용이 질문내용에 없어서 잘 모르겠지만, 개인적으론 main.css의 내용과 충돌하는것같기도합니다. 위에 수정해주신 코드를 제쪽에서 정리해보면 첨부이미지처럼
#dialog-background이 정상적으로 적용되는데요. 아마도 추측이긴하지만 main.css든 아니면 다른 쪽 명령어가 덮어서 적용이 안된것처럼 보이지 않나 싶네요.
- css 가 정상적으로 연결되지 않는게 더 가까운거같습니다. dialog.css로 적용하고 구글 검사로 확인해보면 css가 아예 적용이 되어있질 않아요 ㅠㅠ 알 수 없는 사용자 2016.8.16 12:21
- 더 이해가안되는건dialog.css 에 일부 요소만 적용이안된다는겁니다.. dialog.css 에 대략적으로 10가지 요소에 css를 적용했다면 이중 9개의 요소는 css 적용이 되어있고 하나에는 전혀 적용이 안되어있네요.. id 오타도 아무리확인해봐도 아닌데..ㅠㅠ 알 수 없는 사용자 2016.8.16 12:23
- 음 그렇다면 저도 접해본 경험이 적은 부분인것 같네요. 구체적인 코드를 보면서 이야기하면 좋겠지만 쉽지는 않겠죠..? 박기선 2016.8.16 15:13
- 문제쪽인 부분만 때와서 내용에 붙였습니다. 저기같은경우 dialog-background만 css가 적용이 되질않습니다.. 알 수 없는 사용자 2016.8.16 16:17
- 문제를 수정해주셨네요. :-) 여기가 한국이 아니라 시차가 좀 있네요. 여튼, 지금 코드를 훑어보고 있는데요. 간단하게 의견을 적어서 답변내용을 수정했습니다. 박기선 2016.8.17 02:19
- 흐 저는 왜 똑같이 따로 파일 빼내서 테스트해봤는데도 background 만 css 적용되질 않을까요 :( 스크린샷 첨부했습니다 알 수 없는 사용자 2016.8.17 11:29
- 개발자도구에 보니 아예 ID부분이 나오질 않네요;;;;; 뭐지이건. 급한데로 html에 style테그로 반영하는것도 방법입... ㅠㅠ 박기선 2016.8.17 12:34
- style태그를 지우니까 적용이되었습니다..! 신경써주셔서 감사합니다..!!! 알 수 없는 사용자 2016.8.17 15:27
- 그렇네요. 저는 다른이유(아파치) 때문인지 잘되서 더 혼란을 드린듯 해요 :( 해결되서 다행입니다- 박기선 2016.8.17 15:27
댓글 입력