html

CSS Selector

이번 포스트에서는 다양한 CSS Selector에 대해 알아보도록 하겠습니다. 기초 선택자 기초 선택자에는 다음과 같다. 태그(Tag) 선택 아이디(ID) 선택 클래스(Class) 선택 자식(child) 선택 자손(descendants) 선택 위의 소스코드와 결과물을 통해 알 수 …

html

HTML 태그 기초

이번 포스트는 HTML에 대한 기초적인 내용에 대해 다루도록 하겠습니다. HTML의 탄생 웹 페이지는 한글문서 같은 것들을 다른 사람과 쉽게 공유하기 위해 제작되었다. 한글문서 자체를 타인과 공유하기 위해서는 파일시스템과 이메일 같은 …

웹 개발

웹 개발 분류와 차이

웹 개발은 크게 두 가지로 분류할 수 있습니다. Front-end Develop (=Client Side Develop) Back-end Develop (=Server Side Develop) 이 두가지의 차이와 경계를 명확하게 이해를 해야 웹 개발을 할 때 수월합니다. …

html

CSS의 여러가지 레이아웃

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

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

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

[ PHP + MySQL ] CRUD 구현하기

PHP + MySQL을 이용한 insert, update, delete, select 구현하기 해당 포스팅을 실습하기 이전에 XAMPP가 설치되어있어야 합니다.설치하기 1. DATABASE 세팅 일단 xampp control panel 실행 후, Apache와 MySQL을 활성화 합니다  그 …

Float Layout

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

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