비주얼 스튜디오 코드 20_ 연꽃축제 예제

☭DEVELOPER/#2 웹개발(자바기반 풀스택)

비주얼 스튜디오 코드 20_ 연꽃축제 예제 _ footer

조반짝 2023. 6. 9. 10:13

728x90

footer

_그림문자 가져오기

Font Awesome

The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

fontawesome.com

아이콘들을 글자처럼 사용하는 그림문자를 사용

링크를 걸어야함

푸터 쪽 다운로드 클릭

free for web을 클릭해서 무료로 그림문자를 사용할 수 있다.

경로 C:\Users\guro-hi\Downloads\fontawesome-free-6.4.0-web\fontawesome-free-6.4.0-web 에서

webfonts를 연꽃축제 css폴더에 붙여넣기한다.

다운로드하고 압축풀기를 하면 위에 사진처럼 폴더가 뜬다.

css > all 파일을 연꽃축제 css 파일에 복사하기 붙여넣기

html > head에서 link를 걸어준다.

글자이기 때문에 폰트사이즈로 사이즈 조절이 가능하다.

a태그를 걸어줘서 클릭이 가능하도록 명령어를 써준다

패밀리사이트 만들기

select태그 이용해서 하위 option태그로 만들어줌

<전체 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/style.css">
    <link rel="stylesheet" href="./css/all.css">
</head>
<body>
    <div id="wrap">
        <header id="header">
            <h1 class="logo">
                <img src="./img/logo.png" alt="부여연꽃 축제 로고이미지">
            </h1>
            <nav class="nav">
                <ul>
                    <li><a href="#">축제소개</a>
                        <ul class="submenu">
                            <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="submenu">
                            <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="submenu">
                            <li><a href="#">축제 소식</a></li>
                            <li><a href="#">보도 자료</a></li>
                            <li><a href="#">음식레시피</a></li>
                        </ul>
                    </li>
                    <li><a href="#">참여마당</a>
                        <ul class="submenu">
                            <li><a href="#">참가후기</a></li>
                            <li><a href="#">연꽃갤러리</a></li>
                            <li><a href="#">포토갤러리</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </header>
        <section id="banner">
            <h2>부여연꽃축제</h2>
            <img src="./img/banner.png" alt="연꽃배너이미지">
        </section>
        <section id="contents" class="clearfix">
            <!-- clearfix를 넣어줘야 footer가 위에 안올라옴 contents가 id라 class로 넣어줘야함-->
            <article class="notoice">
                <h3>공지사항</h3>
                <ul>
                    <li class="clearfix">
                        <!-- a태그와 span태그에 float을 주기위해 clearfix를 준다. -->
                        <a href="#">부여 연꽃 축제기간이 06월 15일부터 시작됩니다.</a>
                        <span>05-30</span>
                    </li>
                    <li class="clearfix">
                        <a href="#">연꽃 축제기간 중 타지에서 오는 관광객에게 2,000원 할인 행사를 하고 있습니다.</a>
                        <span>05-25</span>
                    </li>
                    <li class="clearfix">
                        <a href="#">서울 구로구에 계시는 분들은 부여와 자매구로 5,000원 할인하고 있습니다.</a>
                        <span>05-25</span>
                    </li>
                    <li class="clearfix">
                        <a href="#">부여 연꽃 보러 많이 많이 오세요.</a>
                        <span>05-24</span>
                    </li>
                </ul>
            </article>
            <article class="gallery">
                <h3>갤러리</h3>
                <ul>
                    <li>
                        <img src="./img/gall_1.png" alt="연꽃갤러리이미지01">
                        <span>바로가기</span>
                    </li>
                    <li>
                        <img src="./img/gall_2.png" alt="연꽃갤러리이미지02">
                        <span>바로가기</span>
                    </li>
                    <li>
                        <img src="./img/gall_3.png" alt="연꽃갤러리이미지03">
                        <span>바로가기</span>
                    </li>
                </ul>
            </article>
            <article class="link">
                <h3>바로가기</h3>
                <ul>
                    <li>
                        <img src="./img/link.png" alt="바로가기이미지">
                        <span>바로가기</span>
                    </li>
                </ul>
            </article>
        </section>
        <footer id="footer" class="clearfix">
            <div class="f_copy">
                <address>서울특별시 구로구 구로1동 하이미디어빌딩 4층 102호 하이미디어</address>
                <p>copyright &copy; 하이미디어 C./, Ltd All Right Reserved.</p>
            </div>
            <div class="f_sns">
                <a href="#"><i class="fa-brands fa-square-facebook"></i></a>
                <a href="#"><i class="fa-brands fa-instagram"></i></a>
                <a href="#"><i class="fa-brands fa-square-twitter"></i></a>
            </div>
            <div class="f_f">
                <select>
                    <option selected="selected">패밀리사이트</option>
                    <option>문화체육관광부</option>
                    <option>한국관광공사</option>
                    <option>한국지역진흥재단</option>
                </select>
            </div>
        </footer>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <!-- .min. 여백을 줄여서 용량이 적은 파일 -->

    <script>
        $(".nav>ul>li").hover(function(){
            //마우스 올렸을 때 이벤트
            $(this).find(".submenu").stop().slideDown(200);
        },function(){
            //마우스 내렸을 때 이벤트
            $(this).find(".submenu").stop().slideUp(200);
        });
    </script>
</body>
</html>

<전체 css>

@charset "utf-8";

/*reset*/

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

li{
    list-style: none;
}

a{
    text-decoration: none;
    color: #222;
}

img{
    display: block;
}

.clearfix::after, .clearfix::before{
    content: "";
    display: block;
    clear: both;
}

#wrap{
    width: 1000px;
    margin: 0 auto;
}

#header{
    width: 300px;
    float: left;
    height: 650px;
    /* background-color: lightblue; */
}

#header .logo{
    width: 300px;
    height: 150px;
    /*가운데정렬 삼총사*/
    display: flex; /*flex는 반드시 부모한테 넣어라*/
    align-items: center;
    justify-content: center;
    background-color: beige;
}

#header .logo img{}

#header .nav{}
#header .nav ul{}
#header .nav ul li{
    width: 100%;
    position: relative;
}
#header .nav ul li a{
    background-color: #FD89A5;
    display: block;
    line-height: 40px;
    /*줄간격 높여주기*/
    color: #fff;
    font-size: 18px;
    /* text-align: center; */
    padding-left: 70px;
    /*글자 안쪽 정렬*/
}
#header .nav ul li a:hover{
    background-color: lightgreen;
}
#header .nav ul li ul.submenu{
    display: none;
    position: absolute;
    top:0;
    left: 300px;
    width: 100%;
    z-index: 10;
}
#header .nav ul li ul.submenu li{}
#header .nav ul li ul.submenu li a{
    background-color: lightpink;
    padding-left: 90px;
    color: #222;
}
#header .nav ul li ul.submenu li a:hover{
    background-color: lightgreen;
}

#banner{
    width: 700px;
    float: left;
    position: relative;
}

#banner h2{
    position: absolute;
    left: 5%;
    bottom: 10%;
    /* background-color: white; */
    padding: 15px;
    border-radius: 28%;
    /* opacity: 0.5; */
    /* transform: translate(-50%,-50%); */
    color: #000;
    font-size: 40px;
    text-shadow: 5px 5px 5px #fff;
}
#banner img{}


#contents{
    width: 700px;
    float: left;

}

#contents > article{
    width: 33.33%;
    height: 200px;
    padding: 10px;
    /*left, tap 여백10주기*/
    float: left;
}
#contents > article>h3{
    background-color: #FD89A5;
    color: white;
    /* 사각형 90*40px radius적용 */
    width: 90px;
    height: 40px;
    border-radius: 10px 10px 0 0;
    text-align: center;
    line-height: 40px;
}
#contents > article>ul{
    border-top: 1.7px solid #FD89A5;
    padding-top: 10px;
    /*선 밑 10px 여백주기*/
}


#contents .notoice{}
#contents .notoice ul{}
#contents .notoice ul li{
    padding: 5px 0;
    /*줄간격*/
    position: relative;
    /*가상요소 기준점*/
    font-size: 14px;
}

#contents .notoice ul li::before{
    /*가상요소 넣어주기*/
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 3px;
    background-color: #FD89A5;
    
}

#contents .notoice ul li a{
    /* background-color: #999; */
    display: block;
    width: 70%;
    float: left;
    /*왼쪽 배치하기 위해 float띄워줌*/
    white-space: nowrap;
    overflow: hidden;
    /*일정범위가 넘어가면 대상을 숨겨주어라*/
    text-overflow: ellipsis;
    /*텍스트가 일정범위를 넘었을 때 ...넣어라*/
    padding-left: 10px;
    /*왼쪽 여백 들여쓰기*/
}
#contents .notoice ul li span{
    /* background-color: #666; */
    display: block;
    width: 25%;
    float: right;
    /*오른쪽 배치하기 위해 float띄워줌*/
    text-align: right;
    /*글자 오른쪽 정렬*/
}

#contents .gallery{}
#contents .gallery ul{
}
#contents .gallery ul li{
    float: left;
    margin-right: 10px;
    overflow: hidden;
    width: 64px;
    height: 129px;
    /*overflow:hidden시에 li의 너비, 높이값을 넣어줘야 된다.*/
}

#contents .gallery ul li:last-child{
    margin-right: 0;
}

#contents .gallery ul li img{}
#contents .gallery ul li span{
    width: 64px;
    height: 40px;
    font-size: 10px;
    background-color: #000;
    display: block;
    opacity: 0.3;
    color: #fff;
    text-align: center;
    transition: 0.5s;
}

#contents .gallery ul li:hover span{
    transform: translateY(-40px);
}

#contents .link{}
#contents .link ul{}
#contents .link ul li{
   position: relative;
}
#contents .link ul li img{}
#contents .link ul li span{
    width: 213px;
    height: 129px;
    font-size: 12px;
    background-color: white;
    display: block;
    opacity: 0.5;
    color: #666;
    text-align: center;
    line-height: 129px;
    transition: 0.5s;
    position: absolute;
    top: 0;
    left: 0;
}

#contents .link ul li:hover span{
    opacity: 0;
}



#footer{
    width: 700px;
    float: left;
    height: 100px;
    background-color: #FD89A5;
}

#footer>div{
    width: 200px;
    height: 50px;
    float: left;
    padding: 10px;
}
#footer .f_copy{
    /* background-color: #999; */
    width: 500px;
    height: 100px;
    padding-top: 30px;
    text-align: center;
    color: #fff;
}

#footer .f_copy address{
    font-style: normal;
}

#footer .f_sns{
    /* background-color: #888; */
    text-align: center;    
}

#footer .f_sns a{
    font-size: 25px;
    margin-right: 10px;
    color: #fff;
}


#footer .f_sns a:last-child{
    margin-right: 0;
}

#footer .f_f{
    /* background-color: #777; */
    display: flex;
    /* align-items: center; */
    justify-content: center;
}

728x90

저작자표시 비영리 변경금지

'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글

비주얼 스튜디오 코드 22_ 탭 메뉴 (0)	2023.06.09
비주얼 스튜디오 코드 21 _ 연꽃축제 예제 _ 팝업창 만들기 (0)	2023.06.09
비주얼 스튜디오 코드 19_ 연꽃축제 예제_banner, contents 넣기 (0)	2023.06.08
비주얼 스튜디오 코드18_ 연꽃축제 예제_header 사이드 (0)	2023.06.08
비주얼 스튜디오 코드 17_ 마우스 오버 효과 (0)	2023.06.08

현재글비주얼 스튜디오 코드 20_ 연꽃축제 예제 _ footer

조반짝의 도전일지

공부, 취미, 여행 모두 경험해보고 싶은 조반짝의 도전일지입니다. ✨contact_ looby777@naver.com ✨Instagram_holylovuuu_illust

자바, float, HTML, CSS, 프론트엔드, 웹디자인, 비주얼스튜디오코드, offset, Java, 자바스크립트, media, 코딩테스트, SQL, JavaScript, position, 이클립스, ACTIVE, Parallax, For문, if문,

Today :
Yesterday :

조반짝의 도전일지