오늘 수업도 거의 실습하는 시간을 가졌다.
float 아직도 감을 못잡고 했갈린다...ㅠ
2개를 제작했는데 2번째 제작한 건 집중력이 떨어져서 그런가 여러가지 디테일한 부분을 놓쳐서 제작했다. 이부분은 이번주 주말에 다시 학습하며 다시 코드를 짜서 올려야겠다.
1. 무빙사진 동호회
첫번째 사진이 예시, 두번째 사진이 내가 제작한 웹 사이트이다.
이전에 만들어보던 예제와 비슷한데, 맨 아래 도트 1개짜리 이미지를 5개 연달아 넣어보았다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>무빙사진동호회</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div id="wrap">
<header>
<h1><img src="./img/logo.jpg" alt="로고이미지"></h1>
<nav>
<ul class="gnb">
<li>
<a href="#">동호회소개</a>
<ul class="sub">
<li><a href="#">연혁</a></li>
<li><a href="#">회칙</a></li>
<li><a href="#">이용안내</a></li>
</ul>
</li class="gnb">
<li>
<a href="#">갤러리</a>
<ul class="sub">
<li><a href="#">풍경자연</a></li>
<li><a href="#">인물</a></li>
<li><a href="#">사물</a></li>
</ul>
</li class="gnb">
<li>
<a href="#">교육안내</a>
<ul class="sub">
<li><a href="#">기초사진</a></li>
<li><a href="#">디지털사진</a></li>
<li><a href="#">전문사진</a></li>
</ul>
</li class="gnb">
<li>
<a href="#">교육안내</a>
<ul class="sub">
<li><a href="#">게시판</a></li>
<li><a href="#">출사일정</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<section class="slid">
<div class="img-slid">
<ul>
<li><img src="./img/images(1).jpg" alt="슬라이드이미지"></li>
<li><img src="./img/images(2).jpg" alt="슬라이드이미지"></li>
<li><img src="./img/images(3).jpg" alt="슬라이드이미지"></li>
</ul>
</div>
<div class="text">
<h2>무빙사진갤러리</h2>
</div>
<div class="dot">
<img src="./img/dot.png" alt="점" class="dot-img">
<img src="./img/dot.png" alt="점" class="dot-img">
<img src="./img/dot.png" alt="점" class="dot-img">
<img src="./img/dot.png" alt="점" class="dot-img">
<img src="./img/dot.png" alt="점" class="dot-img">
</div>
</section>
<section class="sec-all notice">
<h3>▶공지사항</h3>
<table>
<tr>
<th>내용</th>
<th>날짜</th>
</tr>
<tr>
<td><a href="#">제30회 정기출사 및 모임이 있습니다. </a></td>
<td>2018-04-10</td>
</tr>
<tr>
<td><a href="#">대한민국 사진공모전이 개최됩니다. 참여해보세요.</a></td>
<td>2018-04-10</td>
</tr>
<tr>
<td><a href="#">대한민국의 자연 사진 전시회가 있습니다.</a></td>
<td>2018-04-09</td>
</tr>
<tr>
<td><a href="#">포로그래퍼와 함께 하는 디지털사진 설명회가 있습니다.</a></td>
<td>2018-03-17</td>
</tr>
<tr>
<td><a href="#">무빙동보회에 오신 것을 환영합니다. 회원가입은 여기서... </a></td>
<td>2018-03-07</td>
</tr>
</table>
</section>
<section class="sec-all partner">
<h3>▶Partner Site</h3>
<img src="./img/PARTNER.png" alt="">
</section>
<section class="icon-wrap">
<div class="icon1 icon">
<img src="./img/icon1.png" alt="아이콘이미지">
<p class="text-icon">커뮤니티</p>
</img>
</div>
<div class="icon2 icon">
<img src="./img/icon2.png" alt="아이콘이미지">
<p class="text-icon">전시회</p>
</img>
</div>
<div class="icon3 icon">
<img src="./img/icon3.png" alt="아이콘이미지">
<p class="text-icon">정보마당</p>
</img>
</div>
</section>
<footer>
<div class="footer-left">
<nav>
<ul>
<li>법적고지</li>
<li>개인정보취급방침</li>
<li>개인정보처리방침</li>
</ul>
</nav>
</div>
<div class="footer-right">
<address>
상호명:무빙사진동호회<br>
대표자:ANNE YOON <br>
개인정보관리책임자:PAULA KIM <br>
사업장주소:서울특별시 금천구 가산동 가산디지털2로
</address>
</div>
</footer>
</div>
</body>
</html>@charset "UTF-8";
/*전체초기화*/
*{margin: 0; padding: 0; color: #666666; text-decoration: none; list-style: none;}
img{display: block;}
a{display: block;}
#wrap{width: 1000px; height: 1150px; margin: auto;}
/*헤더*/
header{width: 1000px; height: 150px; float: left; }
/*로고*/
header h1{width: 200px; height: 100px;}
header h1 img{width: 100%; height: 100%;padding: 25px 0;}
/*메인메뉴*/
header nav{float: right; z-index: 3;position: relative;}
header nav ul.gnb>li{float: right; }
header nav ul.gnb>li>a{text-align: center; width: 150px; height: 50px; line-height: 50px; font-size: 20px; }
header nav ul.gnb>li>a:hover{background-color: rgba(51, 102, 255, 0.3); transition: 0.4s;}
/*서브메뉴*/
header nav ul.gnb>li>ul.sub>li>a{background-color: rgba(51, 102, 255, 0.3); height: 50px; text-align: center; transition: 0.4s; line-height: 50px; color: #fff;}
header nav ul.gnb>li>ul.sub>li>a:hover{text-decoration: underline;}
header nav ul.gnb>li>ul.sub>li>a{display: none;}
header nav ul.gnb>li:hover>ul.sub>li>a{display: block; transition: 0.4s;}
/*슬라이드 이미지*/
.slid{width: 1000px; height:400px; float: left;overflow: hidden; position: relative;}
.slid div.img-slid>ul li img{position: absolute;top: 0; left: 0;}
.slid div.text{width: 300px; height: 100px; background-color: rgba(153, 153, 153, 0.5); position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; border-radius: 15px; text-align: center; line-height: 100px;}
.slid div.text h2{color: #fff;}
/*도트 연속 5개*/
.dot{position: absolute; float: left; width: 100px; height: 20px; bottom: 0; left: 0; right: 0; margin: auto;}
.dot img{width:20px; height: 20px;float: left;}
/*공지사항 파트너 공통*/
.sec-all{width: 480px; height:230px; float: left;padding: 10px;}
.sec-all h3{text-align: left; margin-bottom: 10px; text-indent: 10px; border-bottom: 1px solid #3366FF;}
/*공지사항*/
.notice table{width: 480px; height: 200px; font-size: 15px; border-collapse: collapse;}
.notice table tr:nth-child(even){background-color: #999;}
.notice table td a:hover{text-decoration: underline;}
/*파트너*/
.partner img{width: 450px; height: 170px; margin: 45px 0 25px 25px;}
/*아이콘 영역*/
.icon-wrap{width: 750px; height: 270px; clear: both; margin: auto;}
.icon-wrap div{width: 250px; height: 210px; float: left;}
.icon-wrap div img{width: 80%;margin: auto; ;}
.icon-wrap div p{background-color:rgba(153, 153, 153,0.5); text-align: center; width: 100px; height: 40px; line-height: 40px; border-radius: 15px; color: black; margin: auto; cursor: pointer;}
.icon-wrap div p:hover{background-color: #666666; transition: 0.4s;}
.text-icon{width: 250px; height: 270px; text-align: center; background-color: #3366FF;}
/*푸터영역*/
footer{width: 1000px; height: 100px; background-color: #3366FF; float: left;}
.footer-left{width: 500px; height: 100px;float: left;}
.footer-left nav ul li{float: left; color: #fff;margin: 20px 10px; font-size: 14px;}
.footer-right address{color: #fff; font-size: 12px; font-style: normal; margin: 20px; 10px}
2. 한국대학교총동문회
첫번째 사진이 문제 예시이고 두번째 사진이 내가 제작한 웹 페이지이다.
이번 문제는 잘 해결해내지 못 했다...
우선,, 어떤 문제인지 푸터영역의 1차 서브메뉴 호버를 할 때 2차 메뉴가 뜨지 않았고 공지사항 부분에 이미지에 마진을 적용해도 적용이 안되는 문제가 생겨서 위치가 애매해져버렸다..
이번 주말 복습 때 이부분을 꼬옥 다시 수정해서 학습해봐야겠다...!ㅠㅠ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>한국대학교총동문회</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div id="wrap">
<header>
<h1><img src="./img/top_logo.png" alt=""></h1>
<nav>
<ul class="gnb">
<li>
<a href="#">대학원소개</a>
</li>
<li>
<a href="#">동문회소개</a>
<ul class="sub">
<li><a href="#">동문회소개</a></li>
<li><a href="#">동문회조직도</a></li>
<li><a href="#">임원리스트</a></li>
</ul>
</li>
<li>
<a href="#">커뮤니티</a>
<ul class="sub">
<li><a href="#">동문경조사</a></li>
<li><a href="#">동문행사일정</a></li>
<li><a href="#">사용자메뉴얼</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<section id="slid-img">
<ul>
<li><img src="./img/slide1.png" alt="슬라이드이미지"></li>
<li><img src="./img/slide2.png" alt="슬라이드이미지"></li>
<li><img src="./img/slide3.png" alt="슬라이드이미지"></li>
</ul>
<div class="slid-text">
<h2>한국대학교 총동문회</h2>
<h2>환영합니다.</h2>
</div>
</section>
<section class="c">
<div class="sec-all notice">
<div class="c-text">
<h3> 공지사항</h3>
<p>MORE</p>
</div>
<table>
<tr>
<td><a href="#">
제17회 한국대학교 동문회장배 자선골프대회 안내문..</a></td>
<td>2023-08-27
</td>
</tr>
<tr>
<td><a href="#" >개교 100주년 기념 야외 오페라 '토스카'축제 초청...</a></td>
<td>2023-08-27</td>
</tr>
</table>
<ul>
<li><img src="./img/slide1.png" alt="슬라이드이미지"></li>
<li class="mid"><img src="./img/slide2.png" alt="슬라이드이미지"></li>
<li><img src="./img/slide3.png" alt="슬라이드이미지"></li>
</ul>
</div>
<div class="sec-all company">
<img src="./img/banner.jpg" alt="배너이미지">
</div>
<div class="sec-all icon">
<ul>
<li><img src="./img/icon1.png" alt="아이콘">
<p><a href="#">동문경조사</a></p>
</li>
<li><img src="./img/icon2.png" alt="아이콘">
<p><a href="#">동문행사일정</a></p></li>
<li><img src="./img/icon3.png" alt="아이콘">
<p><a href="#">사용자메뉴얼</a></p></li>
</ul>
</div>
</section>
<footer>
<div class="bottom-logo">
<img src="./img/bottom_logo.png" alt="">
</div>
<div class="footer-right">
<nav>
<ul>
<li><a href="#">법적고지</a></li>
<li><a href="#">개인정보취급방침</a></li>
<li><a href="#">개인정보처리방침</a></li>
</ul>
</nav>
<address>
사업자번호:228-81-03754 상호명:(주)아이엔에스컴퍼니 대표자:김형주 통신판매신고:제2016-인천중구-0617호 개인정보책임관리자:김동호 <br>
상담전화:1588-2600 사업장주소:인천광역시 중구 개항로 49
</address>
</div>
</footer>
</div>
</body>
</html>@charset "UTF-8";
/*전체 초기화*/
*{margin: 0; padding: 0;list-style: none; color: #333333; text-decoration: none;}
img{display: block; }
a{display: block;}
#wrap{width:1200px; height: 800px; margin: auto;}
/*헤더*/
header{width: 1200px; height:100px; background-color:#FFC000; float: left;}
/*로고*/
header h1{width: 300px; height: 100px; float: left;}
/*1차 메뉴*/
header nav{float: right; position: relative; margin-top: 50px;}
header nav ul.gnb>li{float: left;;}
header nav ul.gnb>li>a{height: 50px; width: 200px;line-height: 50px; text-align: center; font-size: 18px; font-weight: bold;}
header nav ul.gnb>li>a:hover{background-color: rgba(255, 80, 80,0.3); transition: 0.4s;}
header nav ul.gnb>li>ul.sub>li a{text-align: center; background-color: rgba(255, 80, 80,0.3); padding: 15px; margin: 0;transition: 0.4s;}
header nav ul.gnb>li>ul.sub>li>a:hover{text-decoration: underline;}
header nav ul.gnb > li > ul.sub{display: none;}
header nav ul.gnb > li:hover > ul.sub{display: block;}
/*슬라이드 이미지*/
#slid-img{width: 1200px; height: 300px; overflow: hidden; position: relative;}
#slid-img ul{width: 3600px;}
#slid-img ul li{float: left;}
/*슬라이드 텍스트*/
.slid-text{position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;width: 350px; height: 150px; background-color: rgba(255, 255, 255,0.5); border-radius: 20px; text-align: center; line-height: 45px;}
.slid-text h2:first-child{color:rgb(207, 30, 30); text-shadow: 3px 3px 3px gray; font-size: 35px; margin-top: 30px;}
.slid-text h2:last-child{color:rgb(12, 97, 226); text-shadow: 3px 3px 3px gray; font-size: 35px;}
/*c파트*/
.c{width: 1200px; height: 200px; float: left;}
.sec-all{width: 400px; height: 200px;; float: left;}
.notice table{width:380px; height: 80px; font-size: 12px; clear: both; line-height: 40x; margin: auto;}
.notice h3{float: left;margin-left: 5px;}
.notice p{float: right; margin-right: 10px;}
.c-text{border-bottom:4px solid rgb(207, 30, 30); width: 400px; height: 30px;line-height: 30px;}
.notice ul{}
.notice ul li{}
.notice ul li img{width: 120px; height: 80px; float: left; margin-top: 0px; margin: auto; }
.notice ul li img.mid{margin-left: 20px;}
/*명함*/
.company img{width: 380px;height: 180px; margin: 10px 10px;}
/*아이콘*/
.icon ul{background-color: darkolivegreen;}
.icon ul li{float: left; width: 120px;height:130px;margin: 15px 0 5px;}
.icon ul p{text-align: center; background-color: rgb(207, 30, 30); width: 110px; height: 30px; line-height: 30px; margin-top: 23px; margin-left: 10px; border-radius: 15px;}
.icon ul p a{color: #fff;}
/*footer */
footer{width: 1200px; height: 100px; background-color: #FFC000; clear: both;}
footer div.bottom-logo{float: left;}
footer div.footer-right nav{float: left;width: 700px; height: 30px; }
footer div.footer-right nav ul li{float: left; margin: 0 10px;}
footer div.footer-right nav ul li a::after{content: "|"; padding: 10px;}
footer div.footer-right nav ul li:last-child a::after{content: " ";}
footer div.footer-right address{float: left; width: 960px;height: 70px; font-size: 15px;}
'국비교육 학습일지' 카테고리의 다른 글
| 국비교육 11일차 학습일지 - 반응형 웹(2) (0) | 2023.01.10 |
|---|---|
| 국비교육 10일차 학습일지 - 반응형 웹 (0) | 2023.01.09 |
| 국비교육 8일차 학습일지 - html, css로 간단한 웹 사이트 만들기 실습 (0) | 2023.01.05 |
| 국비교육 7일차 학습일지- css,html (2) | 2023.01.04 |
| 국비교육6일차 학습일지 - css (0) | 2023.01.03 |