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> …

Float Layout

float element를 이용한 간단하게 만들어본 6가지 레이아웃 해당 내용은 float-layout을 숙지해야 합니다. float:left;을 사용시 레이아웃이 좌측으로 정렬됩니다. float:left;는 display:inline-block과 큰 차이점이 있습니다. float은 글자와 섞이며 float 다음에 clear를 하지 않으면 …

Content Layout

이번에는 이전 장에 이어서 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; …

HTML과 CSS로 기본 사이트 틀 만들기

<!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; …