HTML 과 CSS 를활용한개별디자인 D4 강사김준일
01. HTML, CSS 그리고메이크샵 1 2 쇼핑몰의구조와기능 이미지, 문구등내용을 담당하는언어 쇼핑몰 쇼핑몰이어떻게보여질지 표현 ( 디자인 ) 을담당하는언어 3 4 쇼핑몰의 UI 및배너등을 표현하며유효성검사등을 담당하는개발언어 쇼핑몰의핵심기능을담당하는 쇼핑몰프로그램으로 HTML,CSS,Javascript 를포함
02. HTML 의기초 (HTML 이란?) HyperText Markup Language 우리가인터넷에서보는 WEB 페이지를기술하는언어로인터넷문서를 표현하기위한각종태그및일반텍스트로이루어진마크업언어입니다 <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 사용방법 ) 모든 Tag 는 <tag 명 > 열고 </tag 명 > 닫는다. <tag 명 > </tag 명 > <tag 명속성값 > </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 />
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 이미지파일을브라우저화면에표시해주는 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" />
02. HTML 의기초 (a Tag) 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>
02. HTML 의기초 (span, strong Tag) span 줄바꿈없이영역을묶어주는 Tag - 사용방법 <span> 글자 </span> - 예제 10,000 원 <span>8,000 원 </span> strong 글자를두껍게 ( 진하게 ) 만들어주는 Tag - 사용방법 <strong> 글자 </strong> - 예제이상품은 <strong> 무료배송 </strong> 상품입니다.
02. HTML 의기초 (inline 요소 ) img, a, span, strong Tag 는 inline 요소 inline 요소의특징 줄바꿈없이인접한 inline 요소와나란히배치된다. 가로, 세로크기를지정할수없다. 기본가로크기는 Tag안의내용만큼이다. inline 요소의 Tag 안에는 block 요소 Tag는올수없다. img, a, span, strong, em, i, b, input, button Tag등이 inline 요소이다.
02. HTML 의기초 (br Tag) br 문장및이미지의줄을바꿀때사용하는 Tag - 사용방법 <br/> - 설명문장의줄바꿈을할때나 inline 요소의줄바꿈을할때사용 - 예제배송안내 <br/> 5만원미만구매시배송비는 2,500원이부과됩니다. <br/> 5만원이상구매시에는무료로배송됩니다. <br/><br/> 당일 4시까지결제건에대해서는당일배송을원칙으로합니다.
02. HTML 의기초 (p Tag) p 문단을정의하는 Tag - 사용방법 <p> 출력할내용 </p> - 설명문단을뜻하는 Paragraph 의첫글자를따서 P 를사용. - 예제 <p>[ 상품안내 ]</p> <p> 보시고계신상품의최신기술을적용한제품으로뛰어난다자인과휴대성을자랑하며남녀노소누구나쉽게이용할수있습니다. 사이즈는아래내용을참고해주세요.</p> <p>s: 스몰사이즈, M: 중간사이즈, L: 큰사이즈, XL: 가장큰사이즈 </p>
02. HTML 의기초 (div Tag) div HTML 문서영역이나섹션의분할을정의하는 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>
02. HTML 의기초 (ul, li Tag) ul, li 목록, 목차등을표현할때사용하는 Tag - 사용방법 <ul> <li> 첫번째내용 </li> <li> 두번째내용 </li> </ul> - 예제 <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> - 설명원래는목록, 목차등을표현할때사용하는 Tag 지만그외에도동일한내용이반복될때그룹화하는목적으로사용하기도한다. 단, ul Tag 안에는 li Tag 만사용가능!!
02. HTML 의기초 (dl, dt, dd Tag) dl,dt,dd 제목과내용으로구성된목록을표시하는 Tag - 사용방법 <dl> <dt> 제목 </dt> <dd> 내용 </dd> </dl> - 예제 <dl> <dt> 소비자가 </dt> <dd>65,000 원 </dd> <dt> 판매가 </dt> <dd>55,000 원 </dd> <dt> 적립금 </dt> <dd>550 원 </dd> </dl> - 설명상품상세페이지에서상품에대한정보용약등을표시할때사용
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 의기초 (CSS 의막강함살펴보기 ) http://www.csszengarden.com/
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) 속성설명값 Width 요소의가로크기 100%, 50%, 100px, 300px Height 요소의세로크기 100%, 50%, 100px, 300px.box { width: 100px; height: 100px; }.w_max { width: 100%; }.half_box { width: 50%; }
03. CSS 의기초 ( 속성정리 - border) 속성설명값 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.box { border: 1px solid #ff0000; }.border_bt { border-bottom: 1px double #333333; }
03. CSS 의기초 ( 속성정리 - background) 속성설명값 background-images 배경에이미지를넣는다 url( 이미지파일주소 ) background-repeat 배경이미지의반복여부를정의 repeat, repeat-x, repeat-x, no-repeat background-position 배경이미지의위치를정의가로위치세로위치 ( 10px center ) background-size 배경이미지의크기를정의가로크기세로크기 ( 50px 30px ) background-color 배경의색상을정의색상 ( #d1c221 ).box_bg { background-images: url( http://google.com/logo.png ); }.bg_color { background-color: #d1c221; }
03. CSS 의기초 ( 속성정리 - text) 속성설명값 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.color_red { color: #ff0000; text-decoration: underline; }.small_ls { letter-spacing; -1px; }.info { text-align: center; line-height: 20px; }
03. CSS 의기초 ( 속성정리 - font) 속성설명값 font-family 글자의글꼴을지정글꼴 (Dotum, Nanum Ghothic) font-size 글자의크기를지정 12px, 16px, 1em, 0.8em font-weight 글자의두께를지정 Normal, Bold font-style 글자의스타일을지정 Normal, italic.big_font { font-size: 24px; font-weight: bold; }.batang { font-family: Batang; }
03. CSS 의기초 ( 속성정리 - classification) 속성설명값 float block 요소를정렬하여인접한요소와나열되도록함 none, left, right clear 바로이전의 float 속성을해제 both display 요소의성질을변경한다 none, block, inline, inline-block cursor 커서의모양을변경한다 pointer visibillity 요소를보이거나감출수있다 visible, hidden overflow 요소내용이클경우처리방식지정 auto, hidden, scroll.menu li { float: left; }.hide { display: none; }.agree { overflow: scroll }
03. CSS 의기초 ( 속성정리 - padding) 속성설명값 padding 요소의안쪽여백을지정위우측아래좌측 ( 1px 2px 3px 4px ) padding-top 요소의위안쪽여백을지정 10px padding-right 요소의우측안쪽여백을지정 10px padding-bottom 요소의아래안쪽여백을지정 10px padding-left 요소의좌측안쪽여백을지정 10px.box { padding: 10px; }.box2 { padding: 10px 20px; } 상하, 좌우.box3 { padding: 10px 20px 5px 15px; } 상, 우, 하, 좌
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; } 20px 10px 10px 20px
03. CSS 의기초 ( 속성정리 - margin) 속성설명값 margin 요소의바깥쪽여백을지정위우측아래좌측 ( 1px 2px 3px 4px) margin-top 요소의위바깥쪽여백을지정 10px margin-right 요소의우측바깥쪽여백을지정 10px margin-bottom 요소의아래바깥쪽여백을지정 10px margin-left 요소의좌측바깥쪽여백을지정 10px.box { margin: 10px; }.box2 { margin: 10px 20px; } 상하, 좌우.box3 { margin: 10px 20px 5px 15px; } 상, 우, 하, 좌
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 10px 20px 3 4 20px 10px
03. CSS 의기초 ( 속성정리 - positioning) 속성설명값 position 요소의배치방식을지정 relative, absolute, fixed top 요소를위에서부터위치지정 30px, 10% right 요소를우측에서부터위치지정 30px, 10% bottom 요소를아래에서부터위치지정 30px, 10% left 요소를왼쪽에서부터위치지정 30px, 10% z-index 요소가겹칠경우우선순위지정높은숫자가앞으로노출 #header { position: block; }.logo { position: absolute; top: 30px; left: 100px; }.top { position: fixed; right: 50px; bottom: 50px; }
03. CSS 의기초 ( 속성정리 - positioning) [HTML] <div class= box1 > <div class= box2 > </div> </div> box1 100px box2 30px [CSS].box1 { position: relative; }.box2 { position: absolute; top: 30px; left: 100px; }
09. Web Font ( 폰트이야기 ) 굴림 애플고딕 돋움 바탕 궁서 굴림, 돋움, 바탕, 궁서
04. Web Font ( 사용방법 ) Web Font 를사용하는이유 기기상관없이동일한폰트노출 이미지보다빠른로딩 확대해도깨끗한글씨 <head></head> 사이에아래나눔고딕 Web Font 사용을선언 <link href="http://fonts.googleapis.com/earlyaccess/nanumgothic.css" rel="stylesheet"> 사용방법 : { font-family: Nanum Gothic; }
10. Font Icon 이란? 이미지아이콘 크기나색상수정이어려움 디자이너가없으면사용못함 재사용이불편함 누구나사용가능 색상, 크기자유로움 로딩속도가빠름 폰트아이콘
05. Font Icon ( 사용방법 ) Font Icon 의대표 Font Awesome <head></head> 사이에아래 Font Awesome Icon 사용을선언 <link href= http://maxcdn.bootstrapcdn.com/fontawesome/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 (XEICON) Font Icon 을쓰다보면항상아쉬운국내 SNS 아이콘을제공 구글이만든 Font Icon (Material Icons) 750 여개의다양한아이콘을제공 사이트 사이트
감사합니다.