About html markup
<!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 …
<!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> …
웹 디자인 기능사_실습자료
웹 디자인 기능사 실기 예제
웹 프로그래밍 교재 다운로드
다운로드 PDF 다운로드
슬라이드는 CSS만 있어도 만들 수 있습니다. 보통 슬라이드를 만든다고 생각하면 javascript를 사용해야한다고 생각합니다. 그러나 javascript를 모르더라도, css만으로 slide를 만들 수 있습니다. 결과물부터 확인해보겠습니다. 이런 형태의 Position enable slide를 만들 수 …
float element를 이용한 간단하게 만들어본 6가지 레이아웃 해당 내용은 float-layout을 숙지해야 합니다. float:left;을 사용시 레이아웃이 좌측으로 정렬됩니다. float:left;는 display:inline-block과 큰 차이점이 있습니다. float은 글자와 섞이며 float 다음에 clear를 하지 않으면 …
이번에는 이전 장에 이어서 Content 안속의 layout을 만들어보겠습니다. 1. display:inline-block;을 이용한 4등분 <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>Document</title> <style> *{margin:0;padding:0;} #header{ height:100px; line-height:100px; font-size:30px; border-bottom:5px solid #000; …
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>Document</title> <style> *{margin:0;padding:0;} #header{ height:100px; line-height:100px; font-size:30px; border-bottom:3px solid #000; text-align:center; } #footer{ border-top:1px solid #666; height:70px; line-height:70px; text-align:center; } #content{ width:800px; height:300px; …