html

CSS Selector

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

웹 개발

웹 개발 분류와 차이

웹 개발은 크게 두 가지로 분류할 수 있습니다. 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> …

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

CSS 선택자 ( CSS Selector )

주소 : https://flukeout.github.io/ 참고 : https://www.w3schools.com/cssref/css_selectors.asp 1. 태그 선택자 태그 자체를 선택합니다. 사용 방법 : 태그 이름을 사용 div {} div만 선택 div, span {} div와 span을 선택 div span {} div …

CSS는 무엇인가?

CSS란? CSS stands for Cascading Style Sheets 해석 : CSS는 Cascading Style Sheets의 약자입니다. CSS describes how HTML elements are to be displayed on screen, paper, or in other media …