html

CSS의 여러가지 레이아웃

이번에는 CSS flaot과 inline-block을 이용한 여러가지 레이아웃과 이론에 대하여 소개합니다.   Float과 inline-block 이슈 이번 섹션에서는 아래의 CSS 코드를 공통으로 사용할 것입니다. * { margin: 0; padding: 0; } ul, …

20180808 / 디지텍 / 슬라이드 심화

<html lang=”en”> <head> <meta charset=”UTF-8″> <title>Document</title> <style type=”text/css”> * { margin:0; padding:0; } ul, li { list-style:none; } .slide { width:1200px;margin:20px auto;height:400px; position:relative;overflow:hidden;} .slide ul{height:400px;position:relative;} .slide li{height:400px;} .slide li:nth-child(1){background:#faa;} .slide …

20180807 / 디지텍 / 슬라이드 고도화

<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>Document</title> <style type=”text/css”> * { margin:0; padding:0; } ul, li { list-style:none; } .slide { width:1200px;margin:20px auto;height:400px; position:relative;overflow:hidden;} .slide ul{height:400px;position:relative;} .slide li{height:400px;} .slide …

20180807 / 디지텍 / 웹 디자인 기능사 / 문제풀이

전체 파일 다운로드 : 문제풀이 HTML <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>디저트 전문점</title> <link rel=”stylesheet” href=”css/common.css”> <script src=”js/jquery-1.12.3.js”></script> <script type=”text/javascript”> $(document) .on(“mouseenter mouseleave”, “.gnb li”, function () { …

와이어프레임(공개)-1

[2018 웹 디자인 기능사] 와이어 프레임

올해 개정된 웹 디자인 기능사 출제 기준에 와이어 프레임이 추가되었습니다. 와이어프레임이란 레이아웃을 미리 스케치해놓은 것이라고 생각하면 편합니다. 전체 템플릿 다운로드 와이어프레임(공개)   첫번째 <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> …

20180731

<!DOCTYPE html> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>와이어 프레임 1</title> <link rel=”stylesheet” href=”css/common.css”> </head> <body> <div class=”header”> <div class=”logo”><h3><a href=”#”>프레임1</a></h3></div> <div class=”gnb”> <ul> <li><a href=”#”>MENU-1</a> <ul> <li><a …

웹디자인기능사 엔젤케이크

0510

<!DOCTYPE html> <html> <head> <meta0 http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>디저트 전문점</title> </head> <body> <div class=”wrap”> <header class=”header”> <h3 class=”logo”><a href=”#”><img src=”img/logo.png” alt=”logo” /></a></h3> <ul> <li><a href=”#”>브랜드 스토리</a></li> <li><a href=”#”>메뉴</a> <ul> …