Embed Size (px)
Citation preview
강사 김준일
HTML과CSS를 활용한
개별디자인 D4
01. HTML, CSS 그리고 메이크샵
쇼핑몰의 핵심 기능을 담당하는
쇼핑몰 프로그램으로
HTML,CSS,Javascript를 포함
쇼핑몰이 어떻게 보여질지
표현(디자인)을 담당하는 언어
쇼핑몰의 UI 및 배너등을
표현하며 유효성 검사등을
담당하는 개발 언어
쇼핑몰의 구조와 기능
이미지, 문구등 내용을
담당하는 언어
1
3
2
4
쇼핑몰
02. HTML의 기초(HTML이란?)
우리가 인터넷에서 보는 WEB 페이지를 기술하는 언어로 인터넷 문서를
표현하기 위한 각종 태그 및 일반 텍스트로 이루어진 마크업 언어입니다
HyperText Markup Language
노란색 튤립 이미지 입니다.
[구글로 이동]
<body>
<img src=“튤립.jpg” />
<br/>
노란색 튤립 이미지 입니다.
<br/>
<a href=“http://google.co.kr”>
[구글로 이동]</a>
</body>
02. HTML의 기초(기본구조)
<html><head><title>홈페이지 이름</title><meta> - 웹 페이지 정보 요약<link> - 외부 파일 연결<script> - javascript 정의<style> - css 내용 정의홈페이지에 필요한 각종 내용을 정의하는 공간
</head><body>
실제 홈페이지 내용을 만드는 공간</body>
</html>
02. HTML의 기초(Tag 사용방법)
<a href=“http://www.google.com”>구글이동</a><p>오늘 <strong>점심 메뉴</strong>는 무엇입니까?</p><div>이것은 <span>상자</span>입니다.</div><ul>
<li>첫번째 항목</li><li>두번째 항목</li>
</ul>
단, 단일 태그의 경우 열고 닫는 것을 한번에 처리합니다.예) <img src=”../logo.gif” />, <br/>, <input type=“text” name=“id” />
모든 Tag는 <tag명>열고 </tag명>닫는다.
<tag명> </tag명> <tag명 속성값> </tag명>
02. HTML의 기초(실습 사전 준비)
1. google에서 “notepad++” 검색2. notepad 사이트에서 notepad++ 프로그램 다운로드 및 설치3. notepad++ 에디터에서 아래 내용 입력 후 저장(단축키는 Ctrl + S)
<html><head>
<meta charset=“EUC-KR” /><title>HTML연습</title>
</head><body>
HTML 연습공간</body>
</html>
4. 웹 브라우저에서 저장한 test.html파일 확인
02. HTML의 기초(img Tag)
- 사용방법<img src=“이미지 주소” alt=“이미지 대체문구” />
- 속성설명src : 서버에 업로드된 이미지의 URL 주소alt : 이미지가 없을 경우 대체하여 표현될 문구 내용
- 예제<img src="http://shopinside.net/images/common/logo.png" /><img src="http://shopinside.net/images/common/logo.png"><img src="http://shopinside.net/images/logo.png" alt="ShopInside" />
이미지 파일을 브라우저 화면에 표시해주는 Tagimg
02. HTML의 기초(a Tag)
- 사용방법<a href=“홈페이지 URL” target=“이동위치”>클릭할 문구 및 Tag </a>
- 속성설명href : 이동할 홈페이지 주소(url)target : 이동할 브라우저 위치, _blank : 새창(새탭), _self : 현재창(생략)
- 예제<a href=“http://www.google.co.kr”>구글로이동</a><a href=“http://www.google.co.kr” target=“_blank”>구글로 새창이동</a><a href=“http://shopinside.com”><img src=“로고이미지 주소” /></a>
페이지 이동 버튼을 생성하는 Taga
버튼이 되는 내용
02. HTML의 기초(span, strong Tag)
- 사용방법<span>글자</span>
- 예제10,000원 → <span>8,000원</span>
- 사용방법<strong>글자</strong>
- 예제이 상품은 <strong>무료배송</strong> 상품 입니다.
줄 바꿈 없이 영역을 묶어주는 Tagspan
글자를 두껍게(진하게) 만들어 주는 Tagstrong
02. HTML의 기초(inline 요소)
inline 요소의 특징
줄 바꿈 없이 인접한 inline 요소와 나란히 배치된다.
가로, 세로 크기를 지정할 수 없다.
기본 가로 크기는 Tag안의 내용 만큼이다.
inline 요소의 Tag 안에는 block 요소 Tag는 올 수 없다.
img, a, span, strong, em, i, b, input, button Tag등이 inline 요소이다.
img, a, span, strong Tag는 inline요소
02. HTML의 기초(br Tag)
- 사용방법<br/>
- 설명문장의 줄 바꿈을 할때나 inline요소의 줄 바꿈을 할 때 사용
- 예제배송안내5만원 미만 구매 시 배송비는 2,500원이 부과됩니다.5만원 이상 구매 시에는 무료로 배송됩니다.당일 4시까지 결제 건에 대해서는 당일 배송을 원칙으로 합니다.
문장 및 이미지의 줄을 바꿀 때 사용하는 Tagbr
<br/><br/>
<br/><br/>
02. HTML의 기초(p Tag)
- 사용방법<p>출력할 내용</p>
- 설명문단을 뜻하는 Paragraph의 첫 글자를 따서 P를 사용.
- 예제<p>[상품 안내]</p><p>보시고 계신 상품의 최신 기술을 적용한 제품으로 뛰어난 다자인과 휴대성을자랑하며 남녀노소 누구나 쉽게 이용할 수 있습니다. 사이즈는 아래 내용을 참고해주세요.</p><p>S:스몰사이즈, M:중간사이즈, L:큰사이즈, XL:가장 큰사이즈</p>
문단을 정의하는 Tagp
02. HTML의 기초(div Tag)
- 사용방법<div>출력할 내용</div>
- 설명Division(분할)의 약자로 영역을 분할하거나 그룹화 할때 사용한다.
- 예제<div><img src=“http://shopinside.net/images/common/logo.png” /></div><div>
<a href=“login.html”><span>로그인</span></a><a href=“join.html”><span>회원가입</span></a>
</div>
HTML 문서 영역이나 섹션의 분할을 정의하는 Tagdiv
사이트
- 사용방법<ul>
<li>첫번째 내용</li><li>두번째 내용</li>
</ul>
- 설명원래는 목록, 목차 등을 표현할 때 사용하는 Tag지만 그 외에도 동일한 내용이반복될 때 그룹화 하는 목적으로 사용하기도 한다.단, ul Tag안에는 li Tag만 사용 가능!!
02. HTML의 기초(ul, li Tag)
- 예제<ul>
<li><a href=“”>메인메뉴1</a></li><li><a href=“”>메인메뉴2</a></li><li><a href=“”>메인메뉴3</a></li><li><a href=“”>메인메뉴4</a></li>
</ul>
목록, 목차 등을 표현할 때 사용하는 Tagul, li
- 사용방법<dl>
<dt>제목</dt><dd>내용</dd>
</dl>
- 설명상품 상세 페이지에서 상품에 대한 정보 용약 등을 표시할 때 사용
02. HTML의 기초(dl, dt, dd Tag)
- 예제<dl>
<dt>소비자가</dt><dd>65,000원</dd><dt>판매가</dt><dd>55,000원</dd><dt>적립금</dt><dd>550원</dd>
</dl>
제목과 내용으로 구성된 목록을 표시하는 Tagdl,dt,dd
02. HTML의 기초(block 요소)
p, div, ul li, dl dt dd Tag는 block요소
block 요소의 특징
가로 크기를 지정하지 않으면 기본 가로 크기는 100%이다.
가로 크기와 상관 없이 앞,뒤 요소와 강제로 줄 바꿈이 된다.
p Tag 안에는 block 요소 Tag는 올 수 없다.
ul 안에는 li 만 사용 가능하고 dl 안에는 dt, dd만 사용 가능하다.
body, div, p, ul li, dl dt dd, h1 ~ h6, table Tag등이 block 요소이다.
03. CSS의 기초(CSS란?)
웹 사이트가 어떻게 보여질 것인지를 담당하는 코드이자 언어입니다.
웹 사이트의 표현을 제어하는 것으로 웹 디자인을 보여주는 언어라고 보시면 됩니다.
Cascading Style Sheets
<span>버튼</span>
span {border: 3px solid #000000;display: block;padding: 10px 30px;font-size: 18px;text-align: center;background-color: #333333;color: #ffffff;
}
버튼
버튼
08. CSS의 기초(작성규칙)
div {
font-size: 20px;
color: #ff0000;
}
선택자의 이름을 지정하고 { 시작 } 끝나는 선언 구간을 만든 후 선언구간
안에 “속성 : 값 ;” 형태로 연속해서 작성합니다.
아래와 같이 한줄로 작성하는 것도 가능합니다.
div { font-size: 20px; color: #ff0000; }
선택자 이름 선언구간
시작과끝
03. CSS의 기초(선택자의 종류)
HTML Tag명, id 이름, class 이름
<div id=“logo”>
<a href=“/” class=“logo_name”><span>My Shop</span></a>
</div>
#logo { text-align: center; }
.logo_name { font-size: 14px; }
span { color: #00ffff; font-weight: bold; }
#logo .logo_name { }
#logo .logo_name span { }
03. CSS의 기초(속성 정리 - dimension)
.box { width: 100px; height: 100px; }
.w_max { width: 100%; }
.half_box { width: 50%; }
속성 설명 값
Width 요소의 가로 크기 100%, 50%, 100px, 300px
Height 요소의 세로 크기 100%, 50%, 100px, 300px
03. CSS의 기초(속성 정리 - border)
.box { border: 1px solid #ff0000; }
.border_bt { border-bottom: 1px double #333333; }
속성 설명 값
border 상하좌우 네 면의 선을 한번에 선언 두께 종류 색상 ( 1px solid #ff0000 )
border-top 상단 면의 선을 선언 두께 종류 색상 ( 1px dashed #00ff00 )
border-right 우측 면의 선을 선언 두께 종류 색상 ( 1px dotted #0000ff )
border-bottom 하단 면의 선을 선언 두께 종류 색상 ( 1px double #ffff00 )
border-left 좌측 면의 선을 선언 두께 종류 색상 ( 1px solid #00ffffff )
종류값 Solid, dashed, dotted, double, none
03. CSS의 기초(속성 정리 - background)
.box_bg { background-images: url(‘http://google.com/logo.png’); }
.bg_color { background-color: #d1c221; }
속성 설명 값
background-images 배경에 이미지를 넣는다 url(‘이미지파일주소’)
background-repeat 배경 이미지의 반복여부를 정의 repeat, repeat-x, repeat-x, no-repeat
background-position 배경 이미지의 위치를 정의 가로위치 세로위치 ( 10px center )
background-size 배경 이미지의 크기를 정의 가로크기 세로크기 ( 50px 30px )
background-color 배경의 색상을 정의 색상 ( #d1c221 )
03. CSS의 기초(속성 정리 - text)
.color_red { color: #ff0000; text-decoration: underline; }
.small_ls { letter-spacing; -1px; }
.info { text-align: center; line-height: 20px; }
속성 설명 값
color 글자의 색상을 지정 #000000, #ffffff, white, black, red, blue
text-align block 요소 안에 텍스트 정렬 center, right, left
letter-spacing 자간의 간격을 지정 0px, -1px, 1px
line-height 문장과 문장의 줄 간격을 지정 auto, 12px, 18px, 20px…..
text-decoration 요소 안의 텍스트 꾸밈 None, underline, overline, line-through
03. CSS의 기초(속성 정리 - font)
.big_font { font-size: 24px; font-weight: bold; }
.batang { font-family: Batang; }
속성 설명 값
font-family 글자의 글꼴을 지정 글꼴 (Dotum, Nanum Ghothic)
font-size 글자의 크기를 지정 12px, 16px, 1em, 0.8em
font-weight 글자의 두께를 지정 Normal, Bold
font-style 글자의 스타일을 지정 Normal, italic
03. CSS의 기초(속성 정리 - classification)
.menu li { float: left; }
.hide { display: none; }
.agree { overflow: scroll }
속성 설명 값
float block 요소를 정렬하여 인접한 요소와 나열되도록 함 none, left, right
clear 바로 이전의 float 속성을 해제 both
display 요소의 성질을 변경한다 none, block, inline, inline-block
cursor 커서의 모양을 변경한다 pointer
visibillity 요소를 보이거나 감출 수 있다 visible, hidden
overflow 요소 내용이 클 경우 처리 방식 지정 auto, hidden, scroll
03. CSS의 기초(속성 정리 - padding)
.box { padding: 10px; }
.box2 { padding: 10px 20px; } – 상하, 좌우
.box3 { padding: 10px 20px 5px 15px; } – 상, 우, 하, 좌
속성 설명 값
padding 요소의 안쪽 여백을 지정 위 우측 아래 좌측 ( 1px 2px 3px 4px )
padding-top 요소의 위 안쪽 여백을 지정 10px
padding-right 요소의 우측 안쪽 여백을 지정 10px
padding-bottom 요소의 아래 안쪽 여백을 지정 10px
padding-left 요소의 좌측 안쪽 여백을 지정 10px
03. CSS의 기초(속성 정리 - padding)
[HTML]
<div class=“box”>
<img src=‘banner.jpg’ />
</div>
[CSS]
.box {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}
10px
10px
20px 20px
03. CSS의 기초(속성 정리 - margin)
.box { margin: 10px; }
.box2 { margin: 10px 20px; } – 상하, 좌우
.box3 { margin: 10px 20px 5px 15px; } – 상, 우, 하, 좌
속성 설명 값
margin 요소의 바깥쪽 여백을 지정 위 우측 아래 좌측 ( 1px 2px 3px 4px)
margin-top 요소의 위 바깥쪽 여백을 지정 10px
margin-right 요소의 우측 바깥쪽 여백을 지정 10px
margin-bottom 요소의 아래 바깥쪽 여백을 지정 10px
margin-left 요소의 좌측 바깥쪽 여백을 지정 10px
03. CSS의 기초(속성 정리 - margin)
[HTML]
<div class=“box1”>1</div>
<div class=“box2”>2</div>
<div class=“box3”>3</div>
<div class=“box4”>4</div>
[CSS]
.box1 { margin-right: 20px; }
.box2 { margin-bottom: 10px; }
.box3 { margin-left: 20px; }
.box4 { margin-top: 10px; }
1 2
3 4
10px 10px
20px
20px
03. CSS의 기초(속성 정리 - positioning)
#header { position: block; }
.logo { position: absolute; top: 30px; left: 100px; }
.top { position: fixed; right: 50px; bottom: 50px; }
속성 설명 값
position 요소의 배치방식을 지정 relative, absolute, fixed
top 요소를 위에서부터 위치 지정 30px, 10%
right 요소를 우측에서부터 위치 지정 30px, 10%
bottom 요소를 아래에서부터 위치 지정 30px, 10%
left 요소를 왼쪽에서부터 위치 지정 30px, 10%
z-index 요소가 겹칠 경우 우선순위 지정 높은 숫자가 앞으로 노출
03. CSS의 기초(속성 정리 - positioning)
[HTML]
<div class=“box1”>
<div class=“box2”>
</div>
</div>
[CSS]
.box1 { position: relative; }
.box2 {
position: absolute;
top: 30px; left: 100px;
}
box1
box2
30px
100px
09. Web Font (폰트이야기)
굴림
궁서
바탕돋움
애플고딕
굴림,돋움,바탕,궁서
04. Web Font (사용방법)
<head></head> 사이에 아래 나눔고딕 Web Font 사용을 선언
<link href="http://fonts.googleapis.com/earlyaccess/nanumgothic.css" rel="stylesheet">
사용방법 : { font-family: Nanum Gothic; }
Web Font를사용하는 이유
기기 상관 없이동일한 폰트 노출
이미지 보다빠른 로딩
확대해도깨끗한 글씨
10. Font Icon이란?
크기나 색상 수정이 어려움
디자이너가 없으면 사용 못함
재사용이 불편함
누구나 사용 가능
색상, 크기 자유로움
로딩 속도가 빠름
이미지 아이콘
폰트 아이콘
05. Font Icon (사용 방법)
Font Icon의 대표 Font Awesome
<head></head> 사이에 아래 Font Awesome Icon사용을 선언
<link href=“http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css“ rel="stylesheet">
지금은 잘 사용하지 않는 <i>태그를 이용함기본 Class명은 fa 이후 추가 클래스 명으로 아이콘 결정
예시 : <i class="fa fa-home"></i> <i class="fa fa-shopping-cart"></i>
사이트
05. Font Icon (다른 아이콘들)
사이트
Font Icon을 쓰다보면 항상 아쉬운 국내
SNS 아이콘을 제공
한국형 Font Icon (XEICON)
750여개의 다양한 아이콘을 제공
구글이 만든 Font Icon (Material Icons)
사이트
감사합니다.
