국비교육 학습일지

국비교육 7일차 학습일지- css,html

유정월드 2023. 1. 4. 17:41

오늘은 간단한 웹 사이트를 만들어보는 실습을 했다.

강사님과 같이 따라가면서 할 때는 이해가 된 줄 알았는데,,, 혼자 만들어보려고 하니까

많이 했갈렸다 ㅠㅠ

특히 위치 배열하는데 float 속성이 아직 감이 안잡혀서 어려웠다... 

이 부분은 주말에 더 공부해와야겠다.

 

1) 여행사 웹사이트 만들기

완성본

<HTML>

<!DOCTYPE html>
<html lang="ko">
<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="./css/index.css">
</head>
<body>
    <div id="wrap">
        <header>
            <h1><a href="index.html"></a></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>
                            <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>
                            <li><a href="#">미주/중남미</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </header>
        <section id="main-slid">
            <h2 class="hidden">메인슬라이드이미지</h2>
            <ul>
                <li><a href="#"><img src="./images/images(1).jpg" alt="이미지"></a></li>
                <li><a href="#"><img src="./images/images(2).jpg" alt="이미지"></a></li>
                <li><a href="#"><img src="./images/images(3).jpg" alt="이미지"></a></li>
            </ul>
        </section>
        
        <section id="notice" class="sec-all">
            <h2>공지사항</h2>
            <table>
                <tr>
                    <th>내용</th>
                    <th>날짜</th>
                </tr>
                <tr>
                    <td><a href="#">다도해 풍광을 한눈에...해남 땅끝 해안누리길 여행하기</a></td>
                    <td>2018-01-10</td>
                </tr>
                <tr>
                    <td><a href="#">
                        국토순례 기차여행에 참가하는 학교, 청소년단체 등...</a></td>
                    <td>2017-12-21
                    </td>
                </tr>
                <tr>
                    <td><a href="#">
                        설악산 1월초 설경 절정, 기차 여행 상품이 출시되었..</a></td>
                    <td>2017-12-15</td>
                </tr>
                <tr>
                    <td><a href="#">
                        여행가이드가 추천하는 국내 겨울여행지 & 관광열차</a></td>
                    <td>2017-12-07</td>
                </tr>
                <tr>
                    <td><a href="#">신나는 겨울여행 대관령 눈꽃축제, 고니골 빛축제로..</a></td>
                    <td>2017-12-01</td>
                </tr>
            </table>

        </section>
        <section id="partner" class="sec-all">
            <h2>partner</h2>
            <a href="#"><img src="./images/info.png" alt="여행정보제공"></a>
        </section>

        <section id="icon-wrap">
            <div class="icon1">
                <a href="#">
                    <img src="./images/news.png" alt="새소식">
                    <h3>새소식</h3>
                </a>
            </div>
            <div class="icon2">
                <a href="#">
                    <img src="./images/travlemusic.png" alt="여행음악">
                    <h3>여행음악</h3>
                </a>
            </div>
            <div class="icon3">
                <a href="#">
                    <img src="./images/travlmeunal.png" alt="여행메뉴얼">
                    <h3>여행메뉴얼</h3>
                </a>
            </div>

        </section>
        <footer class="footer">
            <div class="footer-left">
                <nav>
                    <ul>
                        <li><a href="#">법적고지</a></li>
                        <li><a href="#">개인정보취급방침</a></li>
                        <li><a href="#">개인정보처리방침</a></li>
                    </ul>
                </nav>
            </div>
            <div class="footer-right">
                <address>
상호명:(주)앤윤컴퍼니<br>
대표자:윤정우<br>
개인정보관리책임자:김선정<br>
상담전화:1588-0789<br>
사업장주소:서울특별시 금천구 가산동 가산디지털2로
                </address>
            </div>
        </footer>
    </div>    
</body>
</html>

<CSS>

@charset "UTF-8";

/*초기화작업 reset*/
*{margin: 0; padding: 0; list-style: none; color: #333; font-family: "맑은 고딕";}
body{background-color: #ffffff;}
a{text-decoration: none; display: block;}
img{display: block;}
.hidden{display: none;}

/*wrap area*/
#wrap{width: 960px; height: 1200px; margin: auto;}

/*header area*/
header{width: 100%; height: 150px; float: left;}

/*logo*/
header h1{width: 200px;height: 100px; float: left; margin-top: 30px; }
header h1 a{width: 200px; height: 100px; background: url(../images/LOGO.png) no-repeat center -50px; background-size: cover;}

/*header-nav------------------------------------------------*/
header nav{float: right; position: relative; z-index: 2; margin-top: 100px;}
/*메뉴 공통------------------------------------------------------------------- */
header  nav ul li a{size: 150px; height: 50px; text-align: center;line-height: 50px; margin-right: 30px;}
/*1차메뉴------------------------------------------------------------------- */
header nav ul.gnb> li{float: left;}
header nav ul.gnb> li > a{font-size: 18px; font-weight: bold; color: #4298cc;}
header nav ul.gnb> li > a:hover{color: #59798d; background-color: #86c0e4;}
/*2차메뉴------------------------------------------------------------------- */
header nav ul.gnb> li:hover >ul.sub{display: block;}
header nav ul.gnb> li >ul.sub{display: none;}
header nav ul.gnb> li >ul.sub li a{background-color: rgba(255,255, 255, 80%);}
header nav ul.gnb> li >ul.sub li a:hover{background-color: #fff; text-decoration: underline;}
/*main-slid : 좌우슬라이드---------------------------------------------------------------*/
#main-slid{clear: both; width: 960px; height: 400px; overflow: hidden;}
#main-slid ul{width: 2880px;}
#main-slid ul li{float: left;}

/*공지사항과 partner 공통------------------------------------------------------------------*/
.sec-all{width: 480px; height: 270px; float: left;}
.sec-all h2{text-align: center; margin: 15px 10px; color: #893700; font-size: 20px; height: 30px;}
/* 공지사항 area------------------------------------------------------------------- */
#notice table{width: 470px; font-size: 15px; height:200px; border-collapse: collapse;}
#notice table tr:nth-child(even){background-color: antiquewhite;}
#notice table tr th{font-size: 17px;}
#notice table tr td a:hover{text-decoration: underline;}
/* partner area*/
#partner a{width: 470px; }
#partner a img{width: 100%; margin-left: 10px; margin-top: 35px;}

/*아이콘영역 ------------------------------------------------------------------- */
#icon-wrap{clear: both; width: 600px; height: 230px; margin: auto;}
#icon-wrap > div{float: left; width: 180px; height: 230px;box-sizing: border-box; padding: 10px;}
#icon-wrap > div:nth-child(2){margin: 0 30px;}
#icon-wrap > div a img{margin: auto;}
#icon-wrap > div:first-child a img{width: 80%;}
#icon-wrap > div a h3{background-color: #893700; width: 150px; height: 40px; border-radius: 10px; text-align: center; line-height: 40px; color: #fff; font-weight: normal; margin-top: 15px;}

/*hover 효과------------------------------------------------------------------- */
#icon-wrap > div a:hover{opacity: 0.5;}
/*#icon-wrap > div a h3:hover{background: #441d02;}*/
/*#icon-wrap > div a:hover img{opacity:0.5}*/
/*#icon-wrap > div a:hover h3{opacity:0.5}*/

/*footer area ------------------------------------------------------------------- */
footer{width: 960px; height: 150px; background-color: #4298cc; clear: both;}
footer div{width: 480px; height: 150px; float: left; font-size: 14px;}

/*left*/
.footer div.footer-left nav ul{margin: 50px 0 0 50px;}
.footer div.footer-left nav ul li{float: left;}
.footer div.footer-left nav ul li a{color: #fff;}
.footer div.footer-left nav ul li a:hover{text-decoration: underline;}
.footer div.footer-left nav ul li a::after{content: "|"; padding: 0 10px;}
.footer div.footer-left nav ul li:last-child a::after{content: " ";}

/*right*/
footer div.footer-right address{color: #fff; font-style: normal; margin-top: 20px;}

 

 

2) 베이커리 웹사이트

구조는 첫번째 웹사이트와 거의 동일하다.

 

<html>

<!DOCTYPE html>
<html lang="ko">
<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>DD베이커리</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div id="wrap">
        <header>
            <h1><a href="/"><img src="./image/logo.gif" alt="DD베이커리">
            </a></h1> 
            <nav>
            <ul class="gnb">
                <li><a href="#">DD소개</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="main-slid">
            <h2 class="hidden">메인슬라이드 이미지 : fade in/out</h2>
            <ul>
                <li><a href="#"><img src="./image/images(1).jpg" alt="img"></a></li>
                <li><a href="#"><img src="./image/images(2).jpg" alt="img"></a></li>
                <li><a href="#"><img src="./image/images(3).jpg" alt="img"></a></li>
                <li><a href="#"><img src="./image/images(4).jpg" alt="img"></a></li>
                <li><a href="#"><img src="./image/images(5).jpg" alt="img"></a></li>
            </ul>
            <div class="text-wrap">
                <p class="text1">베이커리 카페</p>
                <p class="text2">세상에 하나뿐인 베이커리</p>
            </div>
        </section>

        <section id="notice" class="sec-all">
            <h2>공지사항</h2>
            <table>
                <tr>
                    <th>내용</th>
                    <th>날짜</th>
                </tr>
                <tr>
                    <td><a href="#">제1회 DD 베이커리 워크숍에 초대합니다(서울권).</a></td>
                    <td>2017-12-12 </td>
                </tr>
                <tr>
                    <td><a href="#">올림픽공원 카페 초보 여성 창업을 추천받습니다. </a></td>
                    <td>2017-12-10 </td>
                </tr>
                <tr>
                    <td><a href="#">
                        맛과 영양, 환경문제까지 생각하는 베이커리!</a></td>
                    <td>2018-03-09 </td>
                </tr>
                <tr>
                    <td><a href="#">고품질 크림으로 만든 디저트로 달콤하게 겨울나기</a></td>
                    <td>2018-03-07 </td>
                </tr>
                <tr>
                    <td><a href="#">온가족이 함께 즐기는 베이킹 체험 교실 </a></td>
                    <td>2018-03-05 </td>
                </tr>
            </table>

        </section>
        <section id="partner" class="sec-all">
            <h2>Partner</h2>
            <ul>
                <li><a href="#"><img src="./image/PARTNER.jpg" alt="소자본카페창업"></a></li>
                <li><a href="#"><img src="./image/PARTNER_UP.png" alt="베이커리의 달콤함에 빠지다"></a></li>
            </ul>
        </section>

        <section id="icon-wrap">
            <h2 class="hidden">아이콘영역</h2>
            <figure>
                <img src="./image/icon1.png" alt="">
                <figcaption>고수의 레시피</figcaption>
            </figure>
            <h2 class="hidden">아이콘영역</h2>
            <figure>
                <img src="./image/icon2.png" alt="">
                <figcaption>모임 일정</figcaption>
            </figure>
            <h2 class="hidden">아이콘영역</h2>
            <figure>
                <img src="./image/icon3.png" alt="">
                <figcaption>식품안전관리</figcaption>
            </figure>

        </section>

        <footer>
            <div class="foot-left">
                <nav>
                    <ul>
                        <li><a href="#">법적고지</a></li>
                        <li><a href="#">개인정보취급방침</a></li>
                        <li><a href="#">개인정보처리방침</a></li>
                    </ul>
                </nav>
            </div>
            <div class="foot-right">
                <address>
                    상호명:(주)앤윤컴퍼니 <br>
                    대표자:윤정우 <br>
                    개인정보관리책임자:김선정 <br>
                    상담전화:1588-0789 <br>
                    사업장주소:서울특별시 금천구 가산동 가산디지털2로
                </address>
            </div>
        </footer>

        
    </div>
    
</body>
</html>

<css>

@charset "UTF-8";

/*reset*/
*{margin: 0; padding: 0; list-style: none; box-sizing: border-box; font-family: "맑은 고딕"; color: #333;}
a{text-decoration: none; display: block;}
img{display: block;}
.hidden{display: none;}

/*wrap area-------------------------------------------------------------------------------*/
#wrap{width: 960px; height: 1200px;margin: auto;}

/*header area----------------------------------------------------------------------------*/
header{width: 960px;height: 150px; float: left;/*header와 slide벌어짐 해결*/}
/*logo area---------------------*/
header h1{float: left; width: 250px; height: 150px;}

/*header nav ---------------*/
header nav{float: right; position: relative;z-index: 5;/*slide 이미지 앞으로 메뉴가 올라오게*/ margin-top: 80px;}

/*1.2차 공통효과*/

header nav ul li a{padding: 10px 30px; text-align: center; width: 150px;}

/*1차메뉴*/
header nav ul.gnb > li{float: left;}
header nav ul.gnb > li > a{font-weight: bold;font: 18px; color: #7b422e;}
header nav ul.gnb > li:hover > a{background-color:#bb692d; color: #fff; border-radius: 10px 10px 0 0;}
/*2차메뉴*/
header nav ul.gnb > li > ul.sub{display: none;}
header nav ul.gnb > li:hover > ul.sub{display: block;}
header nav ul.gnb > li > ul.sub li a{background-color:#d48852;}
header nav ul.gnb > li > ul.sub li a:hover{text-decoration: underline;}

/*main-slid area : fade in/out */
#main-slid{clear: both;position: relative;width: 960px; height: 400px; overflow: hidden;}
#main-slid ul li a img{position: absolute;top: 0;left: 0;}

#main-slid div.text-wrap{position: absolute; width: 300px; height: 80px; background-color: rgba(255,255,255,0.8); top: 0; left: 0; right: 0;bottom: 0;margin: auto;border-radius: 10px; padding: 10px 0; }
#main-slid div.text-wrap p.text1{text-align: center; font-size: 23px; font-weight: bold;color: #7b422e;}
#main-slid div.text-wrap p.text2{text-align: center; font-size: 18px;margin-top: 5px;}

/*공지사항과 파트너 공통*/
.sec-all{width: 480px; height: 270px; float: left; }
.sec-all h2{width: 470px; height: 30px; margin: 10px auto;text-align: center; font-size: 20px; border-bottom: 3px solid #7b422e;}

/*공지사항*/
#notice table{width: 470px; height: 200px; margin: auto;border-collapse: collapse; font-size: 15px;}
#notice table tr:nth-child(even){background-color: antiquewhite;}
#notice table tr th{color: #bb692d;}

#notice table tr td a:hover{text-decoration: underline;}

/*partner*/
#partner ul li{width: 470px; height: 95px; background-color: bisque;}
#partner ul li:first-child{margin-bottom: 10px;}
#partner ul li a{width: 270px; margin: auto;}
#partner ul li a img{width: 100%;}

/* 아이콘영역 */
#icon-wrap{width: 600px; height: 230px;  clear: both;margin: auto;}
#icon-wrap figure{width: 180px;height: 230px; float: left;}
#icon-wrap figure:nth-child(3){margin: 0 50px;}
#icon-wrap figure img{width: 100%;}
#icon-wrap figure figcaption{background-color: #bb692d; width: 150px; height: 40px;border-radius: 10px;margin: auto; line-height: 40px;text-align: center;color: aliceblue; cursor: pointer;}
#icon-wrap figure figcaption:hover{background-color: #7b422e; transition: 0.5s;}

/*footer area------------------------------------------------------------------------*/
footer{width: 960px; height: 150px;background-color: #7b422e;}

/*footer left + footer right 공통효과*/
footer div{width: 480px; height: 150px; float: left; font-size: 14px;}

/*footer left*/
footer div.foot-left{}
footer div.foot-left nav{}
footer div.foot-left nav ul{margin: 50px 0 0 50px;}
footer div.foot-left nav ul li{float: left;}
footer div.foot-left nav ul li a{color: #fff;}
footer div.foot-left nav ul li a:hover{text-decoration: underline;}
footer div.foot-left nav ul li a::after{content: "|"; padding: 10px;}
footer div.foot-left nav ul li:last-child a::after{content: " ";}
/*footer right*/
footer div.foot-right{}
footer div.foot-right address{font-size: normal; color: #fff; margin-top: 20px;}

'국비교육 학습일지' 카테고리의 다른 글

국비교육 9일차 학습일지 - css, html으로 간단한 웹 사이트 제작  (1) 2023.01.06
국비교육 8일차 학습일지 - html, css로 간단한 웹 사이트 만들기 실습  (0) 2023.01.05
국비교육6일차 학습일지 - css  (0) 2023.01.03
국비교육 5일차 일지 -css  (0) 2023.01.02
CSS - 4일차 교육 일지  (0) 2022.12.29

'국비교육 학습일지'의 다른글

  • 현재글국비교육 7일차 학습일지- css,html

관련글

티스토리툴바