작성자 없음
작성자 정보가 삭제된 글입니다.
24.05.29 07:42 작성
·
133
·
수정됨
0
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Green복지재단</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrap">
<header>
<h1>
<a href="#">
<img src="images/logo.jpg" alt="">
</a>
</h1>
<nav>
<ul class="gnb">
<li><a href="#">재단소개</a>
<ul class="lnb">
<li><a href="#">설립취지</a></li>
<li><a href="#">연혁</a></li>
<li><a href="#">찾아오시는길</a></li>
</ul>
</li>
<li><a href="#">후원하기</a>
<ul class="lnb">
<li><a href="#">국내후원</a></li>
<li><a href="#">국외후원</a></li>
<li><a href="#">맞춤후원</a></li>
</ul>
</li>
<li><a href="#">자료실</a>
<ul class="lnb">
<li><a href="#">서식자료실</a></li>
<li><a href="#">사진자료실</a></li>
<li><a href="#">후원양식</a></li>
</ul>
</li>
<li><a href="#">스토리</a>
<ul class="lnb">
<li><a href="#">웹진</a></li>
<li><a href="#">보고서</a></li>
<li><a href="#">나의 후원</a></li>
</ul>
</li>
</ul>
<div class="lnb_bg"></div>
</nav>
</header>
<div class="slide">
<ul>
<li><img src="images/slide1.jpg" alt=""></li>
<li><img src="images/slide2.jpg" alt=""></li>
<li><img src="images/slide3.jpg" alt=""></li>
</ul>
</div>
<section>
<div class="board">
<h2><a href="#">공지사항</a></h2>
<ul>
<li>
<a href="#">
<p class="title">웹디자인 기능사 풀어보야요</p>
<p class="date">2023-12-15</p>
</a>
</li>
<li>
<a href="#">
<p class="title">웹디자인 기능사 풀어보야요</p>
<p class="date">2023-12-15</p>
</a>
</li>
<li>
<a href="#">
<p class="title">웹디자인 기능사 풀어보야요</p>
<p class="date">2023-12-15</p>
</a>
</li>
<li>
<a href="#">
<p class="title">웹디자인 기능사 풀어보야요</p>
<p class="date">2023-12-15</p>
</a>
</li>
</ul>
</div>
<div class="gallery">
<h2><a href="#">갤러리</a></h2>
<ul>
<li><a href="#"><img src="images/gallery1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/gallery2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/gallery3.jpg" alt=""></a></li>
</ul>
</div>
<div class="banner">
<h2><a href="#">배너</a></h2>
<ul>
<li>
<a href="#">
<p class="icon"><img src="images/icon.jpg" alt=""></p>
<p class="title">시험유형은 모두 20가지</p>
</a>
</li>
<li>
<a href="#">
<p class="icon"><img src="images/icon.jpg" alt=""></p>
<p class="title">시험유형은 모두 20가지</p>
</a>
</li>
<li>
<a href="#">
<p class="icon"><img src="images/icon.jpg" alt=""></p>
<p class="title">시험유형은 모두 20가지</p>
</a>
</li>
</ul>
</div>
</section>
<footer>
<h1><img src="images/logo_footer.jpg" alt=""></h1>
<div class="lnfo">
경기도 성남시 분당구 돌마로 46 (광천빌딩 5층)<br>
그린컴퓨터에서 ui/ux 웹디자인+웹퍼블리셔 수업중 (강쌤)
</div>
<div class="family">
<select>
<option value="">familysite</option>
<option value="">네이버</option>
<option value="">다음</option>
<option value="">네이트</option>
</select>
</div>
</footer>
</div>
<div class="popup_box">
<div class="popup">
<h3>팝업제목</h3>
"한정 기간, 특별 혜택! 최대 40% 할인과 선착순 사은품! 다양한 상품으로 쇼핑의 즐거움을 높이세요. 놓치지 마세요! 자세한 내용은 홈페이지에서 확인하세요. 지금 쇼핑 시작!"
<button type="button">닫기</button>
</div>
</div>
<script src="script/jquery-3.7.0.min.js"></script>
<script src="script/action.js"></script>
</body>
</html>
파일업로드는 불가한건가요?ㅠㅠ
먼저 css파일을 선생님 코드로, html은 제가 짠 코드로 해보니 에러가 나서 html에서 문제가 발생했다는 사실을 알아서, html을 선생님 코드로 해보니 정상으로 나와서... 제 html 파일 업로드해봅니다. 어디가 문제인지 모르겠습니다.ㅠㅠ 이런 경우가 제법 되어서 왜 그런지 이번에 좀 확실히 짚고 넘어가야겠어요.ㅠㅠ 흐규...
그리고 a2유형 입니다!
답변 2
0
2024. 05. 29. 15:06
css를 넣어봤는데 그냥은 확인이 어렵네요
아무래도 이메일로 보내줘보셔야겠어요
이미지같은 파일,폴더 모두 압축해서 보내주시구요
혹시 이메일로 js첨부가 안되시면
action.js 를 action.jss 로 이름 바꿔서 보내주시면 되요~
0
* {margin: 0; padding: 0; list-style: none; text-decoration: none; color: #222;} .wrap {width: 1200px; margin: 0 auto;} header {width: 1200px; height: 100px; position: relative;} .slide {width: 1200px; height: 300px; background: #eee; overflow: hidden;} section {width: 1200px; height: 200px;} footer {width: 1200px; height: 100px; background: #333;} /* 헤더 */ header h1 {float: left; width: 200px; height: 40px; margin-top: 30px;} header nav {float: right; width: 800px; height: 100px; background: #ddd;} header nav li {float: left; width: 200px; height: 100px; line-height: 100px; text-align: center; font-size: 20px;} header nav li .lnb {position: absolute; width: 200px; z-index: 3; opacity: 0; visibility: hidden; transition: 0.5s;} header nav li .lnb li {height: 60px; line-height: 60px; } header nav li:hover {background: #37401c;} header nav li:hover a {color: #fff;} header nav li .lnb li a {color: #fff;} header nav .lnb_bg {position: absolute; width: 1200px; height: 180px; background: #657f20; left: 0; top: 100px; z-index: 2;opacity: 0; visibility: hidden; transition: 0.5s;} header nav:hover .lnb {opacity: 1; visibility: visible;} header nav:hover .lnb_bg {opacity: 1; visibility: visible;} /* 슬라이드 */ .slide ul {width: 3600px; height: 300px;} .slide ul li {width: 1200px; height: 300px; float: left;} /* @charset "UTF-8"; *{margin: 0; padding: 0; list-style: none; text-decoration: none; color: #222;} .wrap{width: 1200px; margin: 0 auto;} header{width: 1200px; height: 100px; position: relative;} .slide{width: 1200px; height: 300px; background: #eee; overflow: hidden;} section{width: 1200px; height: 200px;} footer{width: 1200px;height: 100px;background: #333;} header h1{float: left; width: 200px; height: 40px; margin-top: 30px;} header nav{float: right; width: 800px; height: 100px; background: #ddd;} header nav li{float: left; width: 200px; height: 100px; line-height: 100px; text-align: center; font-size: 20px;} header nav li .lnb{ width: 200px;position: absolute; z-index: 3; opacity: 0; visibility: hidden; transition: .5s;} header nav li .lnb li{ height: 60px; line-height: 60px; } header nav li:hover{background: #37401c;} header nav li:hover a{color: #fff;} header nav li .lnb li a{color: #fff;} header nav .lnb_bg{position: absolute; width: 1200px; height: 180px; background: #657f20; left: 0; top: 100px; z-index: 2; opacity: 0; visibility: hidden; transition: .5s;} header nav:hover .lnb{opacity: 1; visibility: visible;} header nav:hover .lnb_bg{opacity: 1; visibility: visible;} .slide ul{width: 3600px; height: 300px;} .slide ul li{width: 1200px; height: 300px; float: left;} */ /* 섹션 */ section .board {width: 400px; height: 200px; float: left; padding: 10px; box-sizing: border-box;} section .board h2 {height: 50px; line-height: 50px; } section .board li {height: 30px; line-height: 30px;} section .board li p.title {float: left;} section .board li p.date {float: right;} section .gallery {width: 400px; height: 200px; float: left; padding: 10px; box-sizing: border-box;} section .gallery h2 {height: 50px; line-height: 50px; } section .gallery li {width: 110px; height: 110px; float: left; margin-right: 15px;} section .gallery li img {width: 100%;} section .gallery li:last-child {margin-right: 0;} section .banner {width: 400px; height: 200px; float: left; padding: 10px; box-sizing: border-box;} section .banner h2 {height: 50px; line-height: 50px; } section .banner li {height: 44px; line-height: 44px; } section .banner li p.icon {float: left;} section .banner li p.icon img {width: 30px; vertical-align: middle; margin-right: 8px;} section .banner li p.title {float: left;} /* section .board{width: 400px; height: 200px; float: left; padding: 10px; box-sizing: border-box; } section .board h2{height: 50px; line-height: 50px;} section .board li{height: 30px; line-height: 30px;} section .board li p.title{float: left;} section .board li p.date{float: right;} section .gallery{width: 400px; height: 200px; float: left; padding: 10px; box-sizing: border-box;} section .gallery h2{height: 50px; line-height: 50px;} section .gallery li{width: 110px; height: 110px; float: left; margin-right: 15px;} section .gallery li img{width: 100%;} section .gallery li:last-child{margin-right: 0;} section .banner{width: 400px; height: 200px; float: left; padding: 10px; box-sizing: border-box; } section .banner h2{height: 50px; line-height: 50px;} section .banner li{height: 44px; line-height: 44px;} section .banner li p.icon{float: left;} section .banner li p.icon img{width: 30px; vertical-align: middle; margin-right: 8px;} section .banner li p.title{float: left;} */ /* footer h1{width: 200px; height: 40px; float: left; margin-top: 30px;} footer .info{width: 700px; height: 60px; float: left; margin-top: 20px; margin-left: 50px; color: #fff;} footer .family{width: 200px; height: 40px; float: right; background: #000; margin-top: 30px; margin-right: 10px;} footer .family select{width: 200px; height: 40px;} */ /* 푸터 */ footer h1 {width: 200px; height: 40px; float: left; margin-top: 30px;} footer .info {width: 700px; height: 60px; float: left; margin-top: 20px; margin-left: 50px; color: #fff;} footer .family {width: 200px; height: 40px; float: right; background: #000; margin-top: 30px; margin-right: 10px;} footer .family select {width: 200px; height: 40px;} /* 팝업 */ .popup_box {width: 100%; height: 100vh; position: absolute; background: rgba(0,0,0,0.8); left: 0; top: 0; z-index: 3; display: none;} .popup_box .popup {width: 400px; height: 300px; position: absolute; left: 50%; top: 50%; background: #fff; transform: translate(-50%,-50%); padding: 20px; font-size: 18px; } .popup_box .popup button {position: absolute; right: 10px; bottom: 10px; width: 100px; height: 50px; background: #000; color: #fff; cursor: pointer;}
2024. 05. 29. 20:34
강사님. 해결하였습니다.
신경써주셔서 감사합니다.