• 카테고리

    질문 & 답변
  • 세부 분야

    자격증 (디자인)

  • 해결 여부

    미해결

모달창 modal의 높이값 오류 질문입니다.

21.04.02 02:43 작성 조회수 677

1

modal div가 height:100%(100vh)로 지정해도 검정색 배경이 브라우저 전체에 채워지지 않습니다. 

문제집에 나와 있는 문제라서 구조를 변경하여 코딩했는데 html 구조 자체에 문제가 있는 건가요?

답변 4

·

답변을 작성해보세요.

0

CSS 아래처럼 해주세요.

/*Modal*/
.modal{
    background-colorrgba(0000.2);
    positionabsolute;
    width100%;
    height100%;
    top:0;
    left:0;
}
.modal-content{
    background-color#fff;
    position:absolute;
    top50%;
    left50%;
    transformtranslate(-50%-50%);
}

그리고 모달 만드실 때 table 태그 사용하셨는데 시험보실 때 table 태그 사용하시면 안되요.

감점 될 수 있어요.

table 태그 사용하지 마세요.

추가로... 뭘 보고 연습하시는지 모르겠는데 실기시험 공개도면과 같은게 아니라 2018년 3월에 새롭게 개정되기 전 시험 영상이나 책을 보시는 것 같아요. 아마도... 만약 그러시면 절대 안되요. 시험 떨어집니다.

table 태그 사용한거 보니까 이상해요..

제가 올려놓은 최종본과 2021년 공개도면을 기준으로 반드시 연습하세요.

아래 주소로 들어가시면 중간쯤에 2021-웹디자인기능사.zip 공개문제 다운로드 있어요.

이거 받아서 연습하세요. 꼭~

http://www.q-net.or.kr/crf005.do?id=crf00503&jmCd=7798

pangirl3님의 프로필

pangirl3

질문자

2021.04.02

그대로 코딩햇는데도 아래에 검정색 배경이 안 채워져요.

그리고 이 문제 이기적 기출문제의 풀이 보고 만든건데....그럼 공식적인 문제집이 틀린거네요?

지금 문제는 현재 시행하는 문제와 다른 것 같아요.

2018년 3월 이전 방식으로 공부하시는 것 같습니다.

책 표지 사진을 올려줘보세요. 

0

pangirl3님의 프로필

pangirl3

질문자

2021.04.02

/*Navigation*/
$('.menu li').mouseenter(function(){
    $(this).children('.sub-menu').stop().slideDown()
})
$('.menu li').mouseleave(function(){
    $(this).children('.sub-menu').stop().slideUp()
})

0

pangirl3님의 프로필

pangirl3

질문자

2021.04.02

@charset "utf-8";
body{
    margin: 0;
    font-size: 15px;
    background-color: #fff;
    color:#999999;
}
a{
    text-decoration: none;
    color:#999999;
}

.container{
    border: 1px solid red;
    width: 960px;
    margin: auto;
}
header{
    height: 150px;
    position: relative;
    z-index: 10;
}
header > div{
/*    border: 1px solid #000;*/
    height: 150px;
    float: left;
    box-sizing: border-box;
}
.header-logo{
    width: 300px;
}
/*Navigation*/
.navi{
    width: 500px;
    float: right;
}
.menu{
    list-style: none;
    padding: 0;
    margin-top: 60px;
}
.menu li{
/*    border: 1px solid #000;*/
    float: left;
    width: calc(100%/3);
    box-sizing: border-box;
}
.menu li > a{
    display: block;
    color:#000;
    padding: 5px;
    text-align: center;  
}
.sub-menu{
/*    border: 1px solid #000;*/
    background-color: #893700;
    display: none;
}
.sub-menu > a{
    display: block;
    padding: 5px;
    text-align: center;
    background-color: rgb(255, 246, 210);
    color:#000;
}
.sub-menu a:hover{
    background-color: #00ccff;
    color:#fff;
}
.menu li:hover > a{
    background-color: #4298cc;
    color:#fff;
}

/*Slide Animation*/
.slide{
    position: relative;
    width: 960px;
    height: 400px;
    overflow: hidden;
}
.slide div{
/*    border: 1px solid blue;*/
    height: 400px;
    width: 2880px;
    font-size: 0;
    position: absolute;
    top:0;
    left:0;
    animation: slide 10s linear infinite;    
}
@keyframes slide{
    0%{
        left:0;
    }
    20%{
        left:0;
    }
    35%{
        left:-960px;
    }
    55%{
       left:-960px; 
    }
    75%{
        left:-1920px;
    }
    95%{
        left:-1920px;
    }
    100%{
        left:0;
    }
}

.items{
    overflow: hidden;
    margin-top: 20px;
}
.items > div{
/*    border: 1px solid green;*/
    height: 250px;
    float: left;
    box-sizing: border-box;
}
/*Tab Menu*/
.news{
    width: 480px;
}
.tab-inner{
    width: 90%;
    margin: auto;
}
.tab-inner h2, .banner-inner h2{
   text-align: center;
    margin: 5px;
}
.tab-inner .tab{
/*    border: 1px solid #000;*/
}
.tab-inner .tab span em, .tab-inner .tab span b{
    display: inline-block;
    text-align: center;
    color:#000;    
}
.tab-inner .tab em{
    width: 70%;    
    font-style: normal;
}
.tab-inner .tab b{
    width: 30%;
    font-weight: normal;    
}

.tab-inner .tab-content{
/*    border: 1px solid #000;*/
}
.tab-inner .tab-content a{
    display: block;
    padding: 5px;
    overflow: hidden;
    color:#000;
    font-size: 14px;
}
.tab-inner .tab-content a:nth-child(2n-1){
    background-color: #888;
}
.tab-inner .tab-content a em{
    width: 70%;
    display: inline-block;
    float: left;
    white-space: nowrap;
/*    overflow: hidden;*/
    
}
.tab-inner .tab-content a b{
    width: 30%;
    display: inline-block;
    float: right;
    text-align: right;
}

.banner{
    width: 480px;
}
.banner-inner .tab{
    margin-top:25px;
    text-align: center;
}

.icon-content-inner{}
.icon-content{
/*    border: 1px solid #000;*/
    overflow: hidden;
    width: 600px;
    margin: auto;
}
.icon-content > div{
/*    border: 1px solid red;*/
    height: 250px; 
    float: left;
    box-sizing: border-box;
    text-align: center;
}

.icon1{
    width: 200px;
}
.icon2{
   width: 200px;
   padding-top: 26px;
}
.icon3{
   width: 200px;
   padding-top: 26px; 
}
button{
    font-size: 18px;
    color:#fff;
    padding: 7px 3px;
    background-color: #777;
    border-radius: 5px;
    border: none;
}

footer{
    overflow: hidden;
}
footer div{
/*    border: 1px solid #000;*/
    height: 150px;
    width: 480px;
    float: left;
    box-sizing: border-box;
    background-color: #4298cc;
}
footer div:first-child{
    text-align: center;
    line-height: 100px;
}
footer div:first-child a{
    margin-right: 10px;
    color:#fff;
}
footer div:last-child span{
    display: block;
    padding: 3px 0;
    color: #fff;
    font-size: 13px;
}

/*Modal*/
.modal{
    background-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
}
.modal-content{
    background-color: #fff;
    position:absolute;
}

0

pangirl3님의 프로필

pangirl3

질문자

2021.04.02

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>웹사이트제작</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <header>
            <div class="header-logo">
                <a href="#"><img src="images/logo-header.png" alt=""></a>
            </div>
            <div class="navi">
                <ul class="menu">
                    <li>
                        <a href="#">여행가이드 소개</a>
                    </li>
                    <li>
                        <a href="#">국내여행지</a>
                        <div class="sub-menu">
                            <a href="#">경기/강원</a>
                            <a href="#">충청도</a>
                            <a href="#">전라도</a>
                            <a href="#">경상도</a>
                        </div>
                    </li>
                    <li>
                        <a href="#">해외여행지</a>
                        <div class="sub-menu">
                            <a href="#">동남아</a>
                            <a href="#">남태평양</a>
                            <a href="#">유럽</a>
                            <a href="#">미주/중남미</a>
                        </div>
                    </li>
                </ul>   
            </div>
        </header>
        
        <div class="slide">
            <div>
                <a href="#"><img src="images/slide01.jpg" alt="slide01"></a>
                <a href="#"><img src="images/slide02.jpg" alt="slide02"></a>
                <a href="#"><img src="images/slide03.jpg" alt="slide03"></a>
            </div>
        </div>
        
        <div class="items">
            <div class="news">
                <div class="tab-inner">
                    <h2>공지사항</h2>
                    <div class="tab">
                        <span><em>내용</em><b>날짜</b></span>
                        <div class="tab-content">
                            <a href="#"><em>다도해 풍광을 한눈에...해남 땅끝 해안누리길 여행하기</em><b>2018-01-10</b></a>
                            <a href="#"><em>국토순례 기차여행에 참가하는 학교, 청소년단체 등...</em><b>2017-12-21</b></a>
                            <a href="#"><em>설악산 1월초 설경 절정, 기차 여행 상품이 출시되었..</em><b>2017-12-15</b></a>
                            <a href="#"><em>여행가이드가 추천하는 국내 겨울여행지 & 관광열차</em><b>2017-12-07</b></a>
                            <a href="#"><em>신나는 겨울여행 대관령 눈꽃축제, 고니골 빛축제로..</em><b>	2017-12-01</b></a>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="banner">
                <div class="banner-inner">
                   <h2>정보나눔</h2>
                   <div class="tab">
                       <a href="#"><img src="images/info.png" alt="info"></a>
                   </div>
                </div>
            </div>        
      </div>
                
        <div class="icon-content-inner">
           <div class="icon-content">
                <div class="icon1">
                    <a href="#"><img src="images/icon1.png" alt="icon1"></a>
                <button>새소식</button>  
                </div>
                <div class="icon2">
                    <a href="#"><img src="images/icon2.png" alt="icon2"></a>
                <button>여행음악</button>    
                </div>
                <div class="icon3">
                    <a href="#"><img src="images/icon3.png" alt="icon3"></a>
                <button>여행매뉴얼</button>    
                </div>
           </div>           
        </div>
        
        
        <footer>
            <div>
                <a href="#">법적고지</a>
                <a href="#">개인정보취급방침</a>
                <a href="#">개인정보처리방침</a>
            </div>
            <div>
                <span>상호명:(주)앤윤컴퍼니</span>
                <span>대표자:윤정우</span>
                <span>개인정보관리책임자:김선정</span>
                <span>상담전화:1588-0789</span>
                <span>사업장주소:서울특별시 금천구 가산동 가산디지털2로</span>
            </div>
        </footer>
</div>
 
     <div class="modal">
        <div class="modal-content">
            <table>
               <tr>
                   <td>이름</td>
                   <td><input type="text" name="name"></td>
               </tr>
               <tr>
                   <td>이메일</td>
                   <td><input type="email" name="email"></td>
               </tr>
               <tr>
                   <td>보내실 말씀</td>
                   <td><textarea name="message" cols="40" rows="10">메세지를 입력해주세요</textarea></td>
               </tr>
               <tr>
                   <td><input type="submit"></td>
               </tr>
            </table>
        </div>      
 </div>
  
   
   
    <script src="script/jquery-1.12.3.js"></script>
    <script src="script/custom.js"></script>
</body>
</html>