웹디자인기능사 실기 중앙정렬 MODAL(POPUP) HTML 중앙정렬 MODAL(POPUP) Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, repudiandae, illum, quo voluptatem suscipit natus laborum delectus at molestiae hic quia ad dolores culpa corrupti iste aspernatur expedita nesciunt autem beatae vero? Doloremque, nihil expedita debitis assumenda ut iste quas explicabo magni necessitatibus aliquam illum incidunt provident sunt .. 웹디자인기능사 실기 유형 중앙정렬 header+footer inner F-1 TYPE 전체 바로 확인하기 HTML HEADER_FOOTER 100 CSS /* header */ header { width: 100%; height: 100px; background:#EDBBBB; border:3px solid red;} header .inner { width:1200px; height: 100px; margin: 0 auto; background: #EF9090;} /* container */ .container { width: 1200px; height: 500px;margin: 0 auto;} /* visual */ .visual { overflow: hidden; position: relative; width: 100%; height: 300px; background:.. 2021년 웹디자인기능사 실기 A TYPE A TYPE CHECKLIST LOGO - 200PX *40PX 심벌없이 로고명을 포함한 워드타입으로 디자인 FOOTER LOGO - GRAYSCALE(무채색)로 변경하고 접근성을 고려하여 배치 전체영역 100% , 컨텐츠영역 1200PX 가운데 정렬 HEADER TOP - NAV B유형 VISUAL - FADEIN-OUT CONTENTS - TAB 다중유형 CONTENTS - BANNER CONTENTS - CONTENT FOOTER - A유형 레이어 팝업창 제작 HTML MAIN - 1 sub 1 - 1 sub 1 - 2 sub 1 - 3 sub 1 - 4 MAIN - 2 sub 2 - 1 sub 2 - 2 sub 2 - 3 sub 2 - 4 MAIN - 3 sub 3 - 1 sub 3 - 2 sub.. 웹디자인기능사 실기 HTML , CSS HTML CSS & reset.css @charset "utf-8";/*important*/ * { margin: 0; padding: 0; box-sizing: border-box; list-style: none; font-family: "맑은 고딕"; } a { text-decoration: none; color: inherit; } .clearfix::after { content: ""; display: block; clear: both; } 웹디자인기능사 실기 유형 중앙정렬 FOOTER HTML 중앙정렬 FOOTER TYPE a {display: block; width: 100%; height: 100%; } footer .footer_logo > a > img {width: 100%; height: 100%; object-fit:cover;} footer .copy {float: left; width: 780px; height: 100px; font-weight: bold; margin-top: 30px; } footer .sns {float: left; width: 200px; height: 100px;} footer .sns a {display: inline-block; margin-top: 30px;} FOOTER CODE --> B TYPE 하단메뉴 1 하단메뉴 2 하단메뉴 3.. 웹디자인기능사 실기 유형 왼쪽정렬 CONTENTS > TAB 왼쪽 정렬 다중유형 TAB HTML 공지사항 공지사항1 2021.04.21 공지사항2 2021.04.21 공지사항3 2021.04.21 공지사항4 2021.04.21 갤러리 !-- banner code --> 배너 CSS @charset "utf-8"; * { margin: 0; padding: 0; box-sizing: border-box; list-style: none; font-family: "맑은 고딕";} a { color: inherit; text-decoration: none;} .clearfix::after { content:""; display: block; clear:both; } /* contents */ .contents .notice {float: left; width: 260px.. 웹디자인기능사 실기 유형 중앙정렬 CONTENTS CONTENTS A 영역 ( TAB 별도로 작성) CONTENTS B 영역 BANNER ( GALLERY 단일유형 링크 ) HTML 중앙정렬 CONTENT B TYPE 바로가기 CSS /* link */ .contents .link {position: relative; float: left; width: 400px; height: 200px; padding: 10px;} .contents .link a {display: block; position:relative; width: 100%; height: 100%;} .contents .link a > img {display: block; width: 100%; height: 100%; object-fit: cover;} .contents .link a >.. 웹디자인기능사 실기 유형 중앙정렬 VISUAL FADE IN,OUT + SLIDES HTML FADE-IN-OUT SLIDE LEFT-RIGHT and Right - left 슬라이드 1 슬라이드 2 슬라이드 3 CSS /* visual */ .visual {position: relative; overflow:hidden; width: 100%; height:300px;} .visual .slides { position: absolute; left: 0; top: 0; z-index: 0; width: 1200px; height: 300px;} .visual .slides > img { display: block; width: 100%; height: 100%; object-fit: cover; } .visual .slides > span { position: absolute; left.. 이전 1 2 3 4 다음
