웹디자인기능사 실기 | 기본적인 와이어프레임 구조

웹디자인기능사 실기 기본적인 HTML, CSS, JAVASCRIPT 구조에 대해 말씀드리겠습니다. 크게 팝업창, 헤더, 섹션, 푸터 정도로 나뉘게 됩니다.

팝업창
헤더 : 로고, 메뉴
섹션 : 공지사항, 갤러리, 배너, 바로가기
푸터 : 카피라이트, SNS, 패밀리사이트

HTML

세팅

<head>
    <title> </title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="css/파일명.css" />
    <script src="js/jquery-1.12.3.js"></script>
    <script src="파일명.js"></script>
</head>

와이어프레임

<body>
    <div class="popup">                                              <!--팝업창--> 
        <h2></h2>
        <p></p>
        <a href="#"> 닫기 X </a>
    </div>            

    <header>
        <h1></h1>
        <!-- 메뉴 -->
        <nav class="nav_header">                                    
            <ul>
                <li>
                    <a href="#" class="mainMenu">  </a>     <!--메인메뉴-->
                    <ul class="subMenu"> </ul>              <!--서브메뉴-->   
                </li>
            </ul>
        </nav>
        <div class="subMenuBg"></div>                       <!-- 전체 배경인 경우만 필요 -->                           
    </header>

    <section>
        <!-- 슬라이드 -->
        <div class="slide"> </div>                                                      

        <!-- 공지사항 / 갤러리 1. 탭구조 -->
        <div class="contents">
            <div class="board">		
                <ul class="btn">            <!-- 탭버튼 -->        
                    <li class="tab1"><a href="#tab1">공지사항</a></li>
                    <li><a href="#tab2">갤러리</a></li>
                </ul>	
                <ul class="frame">          <!-- 내용 -->  
                    <div class="notice"></div> 	
                    <div class="gallery"></div>  
                </ul>	
            </div>      
        </div>

        <!-- 공지사항 / 갤러리 2. 분리형 -->
        <div class="notice">  </div>                          
        <div class="gallery">  </div>  
        <div class="banner">  </div>   
        <div class="shortcut">  </div>                          
    </section>

    <!-- 푸터 -->
    <footer>
        <h1> 로고 </h1>                    
        <nav class="nav_footer"> 하단메뉴                                
            <ul></ul>
        </nav>   
        <p> 카피라이트 </p>  

        <!-- 패밀리사이트 있는 경우 -->
        <div class="family">                                        
            <button>패밀리사이트<span class="icon">▼</span></button>
            <ul></ul>
        </div>    
    </footer> 
</body>

와이어프레임 메뉴 세로형

<body>
    <!-- 팝업창 --> 
    <div class="popup">                                             
        <h2></h2>
        <p></p>
        <a href="#"> 닫기 X </a>
    </div>            

    <header>
        <h1></h1>
        <!-- 메뉴 -->
        <nav class="nav_header">                                    
            <ul>
                <li>
                    <a href="#" class="mainMenu">  </a>     <!--메인메뉴-->
                    <ul class="subMenu"> </ul>              <!--서브메뉴-->   
                </li>
            </ul>
        </nav>
        <div class="subMenuBg"></div>                       <!-- 전체 배경인 경우만 필요 -->                           
    </header>

    <section>
        <!-- 슬라이드 -->
        <div class="slide"> </div>   

        <!-- 공지사항 / 갤러리 1. 탭구조 -->
        <div class="contents">
            <div class="board">		
                <ul class="btn">            <!-- 탭버튼 -->        
                    <li class="tab1"><a href="#tab1">공지사항</a></li>
                    <li><a href="#tab2">갤러리</a></li>
                </ul>	
                <ul class="frame">          <!-- 내용 -->  
                    <div class="notice"></div> 	
                    <div class="gallery"></div>  
                </ul>	
            </div>      

        <!-- 배너 / 바로가기 -->
            <div class="banner"> </div>   
            <div class="shortcut"></div>   
        </div>   

        <!-- 푸터 -->
        <footer>
            <h1> 로고 </h1>                    
            <nav class="nav_footer"> 하단메뉴                                
                <ul></ul>
            </nav>   
            <p> 카피라이트 </p>  

            <!-- 패밀리사이트 있는 경우 -->
            <div class="family">                                        
                <button>패밀리사이트<span class="icon">▼</span></button>
                <ul></ul>
            </div>    
        </footer>            
    </section>
</body>

CSS

세팅

@charset "utf-8";
* {
    padding: 0;
    margin: 0;
    font-family: "맑은 고딕", sans-serif;
    font-size: 14px;
    color: #333333;
}
li { list-style: none; }
a { text-decoration: none; }
img { border: none; }

와이어프레임 메뉴 가로형

header { width:1200px; height:100px; margin: 0 auto; }
section { width:1200px; height:500px; margin: 0 auto;	}
footer { width:1200px; height:100px; margin: 0 auto; }

header h1 {float:left; width: height: margin-top: }
.nav_header { float:right; width: height: margin-top:  }
.slide { width:1200px; height:300px; }
.board { float:left; width:400px; height:200px; }
.notice { float: left; }
.popup { display: none; position: fixed; top: 150px; left: 0; right: 0; margin: 0 auto; } /* 가운데정렬 */
.gallery { float: left; }
.banner { float:left; width:400px; height:200px; }
.shortcut { float:left; width:400px; height:200px; }

footer h1 { float:left; width:400px; height:200px; }
footer p { float:left; width:950px; height:50px; }
.nav_footer { float:left; width:950px; height:50px; }		/* 네이게이션 */
.family { float: width: height: margin-top:  } 			/* 패밀리사이트 */

와이어프레임 메뉴 세로형

body { width: 1000px; height: 650px; }
header { float: left; width: 200px; height: 650px; }
section { float: left; width: 800px; height: 650px; }
footer { width: 800px; height: 100px; }

header h1 { width: 200px; height: 100px; }
.nav_header { width: 200px; overflow: hidden; } 		/* 메뉴 */
.slide { width: 800px; height: 350px; }				/* 슬라이드 */
.contents { width: 800px; height: 200px; }			/* 컨텐츠 */
.board { float: left; width: 400px; height: 200px; }
.notice { float: left; }
.popup { display: none; position: fixed; top: 150px; left: 0; right: 0; margin: 0 auto; } /* 가운데정렬 */
.gallery { float: left; }
.banner { float: left; width: 200px; height: 200px; }
.shortcut { float: left; width: 200px; height: 200px; }

/* 푸터 */
footer h1 { float: left; width: 200px; height: 100px; }
.nav_footer { float: left; width: 800px; height: 100px; }
footer p { float: left; width: 600px; height: 50px; }
.family { float: width: height: margin-top:  } 			/* 패밀리사이트 */

Javascript

★ 기본구조

$(document).ready(function(){

    // 메뉴
    $('.subMenu, .subMenuBg').slideUp(0);
    $('.nav_header').hover(function(){
        $('.subMenu, .subMenuBg').stop().slideDown('fast');
    }, function(){
        $('.subMenu, .subMenuBg').stop().slideUp('fast');
    });

    // 슬라이드
    var num = 0;
    setInterval(function(){
        if(num<2){
            num++;
        } else {
            num = 0;
        }
        $('.slide li').fadeOut('slow');
        $('.slide li').eq(num).fadeIn('slow');
    }, 3000);

    // 팝업창
    $('.popupOpen').click(function(){
        $('.popup').fadeIn(0); 
     });
     $('.popup a').click(function(){
         $('.popup').fadeOut(0);
     });

    //  패밀리사이트
     $('.family button').click(function(){
        $('.family ul').fadeToggle('fast'); 
     });
});

관련포스트

저작자표시

'컴퓨터자격증 > 웹디자인기능사' 카테고리의 다른 글

웹디자인기능사 실기 \| 문제 풀이 C-1 (해운대 빛축제) (0)	2022.03.08
웹디자인기능사 실기 \| 문제 풀이 A-4 (유진건설) (0)	2022.03.04
웹디자인기능사 실기 \| 문제 풀이 A-2 (Green 복지재단) (0)	2022.02.23
웹디자인기능사 실기 \| 메뉴, 슬라이드, 본문 유형 (0)	2022.02.17
웹디자인기능사 실기 \| 문제 풀이 B-1 (대한은행) (0)	2021.08.10
웹디자인기능사 실기 \| 주요 코드 정리 (2)	2021.08.04
웹디자인기능사 실기 \| 문제 풀이 A-3 (강원천문대) (0)	2021.08.03
웹디자인기능사 실기 \| 메뉴(네비게이션) 유형별 소스 (1)	2021.07.20

바이트비트

웹디자인기능사 실기 | 기본적인 와이어프레임 구조

HTML

세팅

와이어프레임

와이어프레임 메뉴 세로형

CSS

세팅

와이어프레임 메뉴 가로형

와이어프레임 메뉴 세로형

Javascript

★ 기본구조

'컴퓨터자격증 > 웹디자인기능사' 카테고리의 다른 글

댓글

티스토리툴바

웹디자인기능사 실기 | 기본적인 와이어프레임 구조

HTML

세팅

와이어프레임

와이어프레임 메뉴 세로형

CSS

세팅

와이어프레임 메뉴 가로형

와이어프레임 메뉴 세로형

Javascript

★ 기본구조

'컴퓨터자격증 > 웹디자인기능사' 카테고리의 다른 글

관련글

댓글

티스토리툴바