Download presentation
Presentation is loading. Please wait.
1
웹과 모바일 홈페이지의 이해와 제작 HTML태그와 CSS로 꾸미기
2
강의 자료 다운로드
3
HTML 태그 (tag) HTML을 사용하기 위한 문법
4
HTML 태그 (tag) HTML을 사용하기 위한 문법 <!DOCTYPE html>
<!--이 부분은 주석문입니다. 웹 브라우저는 주석을 화면에 출력하지 않습니다.--> <html> <head> 문서제목, 자바스크립트 코드, CSS 스타일 정의, 메타데이터정의 </head> <body> 문서의 본문 텍스트, 이미지, 테이블, 자바스크립트 코드, 동영상 등 </body> </html>
5
HTML 태그 (tag) HTML을 사용하기 위한 문법
시작태그와 종료태그 모두 있는 경우 - <html>…</html> <title></title> 종료태그 없는 경우 - <br>
6
HTML 태그 (tag) <h1> ~ <h6> 태그로 제목 달기
7
HTML 태그 (tag) <div> 태그
8
HTML 태그 (tag) <a> 태그 – 하이퍼링크를 생성 태그
9
HTML 태그 (tag) <img> 태그 – 이미지 삽입 -무료 이미지 unsplash.com
10
HTML 태그 (tag) <p> 태그 – 문단 생성
<span> 태그 - <div>와 유사, inline속성 <b> 태그 – Bold <i> 태그 – 이탤릭 <li> 태그 – 리스트 <ul>, <ol> 태그
11
HTML 태그 실습 <h1> <ol> <li> </ol> <div>
12
CSS로 꾸미기 CSS(Cascading Style Sheet) -HTML 문서의 색이나 모양 등 외관을 꾸미는 언 어 -CSS로 작성된 코드를 스타일 시트라고 부름 - 색상, 배경, 텍스트, 폰트, 박스모델, 비주얼 포 맷 및 효과, 리스트, 테이블, 사용자 인터페이스
13
CSS로 꾸미기 CSS 스타일 시트 만드는 방법 3가지 1. <style> </style> 태그에 스타일 시트 작성 2. style 속성에 스타일 시트 작성 3. 별도 파일로 작성
14
CSS로 꾸미기 1. <style> </style> 태그에 스타일 시트 작성 <head>
body { background-color : mistyrose; } h3 { color : purple; } hr { border : 5px solid yellowgreen; } span { color : blue; font-size : 20px; } </style> </head>
15
CSS로 꾸미기 2. style 속성에 스타일 시트 작성
16
CSS로 꾸미기 3. 별도 파일로 작성 <head>
<link href="mystyle.css" type="text/css" rel="stylesheet"> </head> /* mystyle.css */ body { background-color:linen; color:blueviolet; margin-left:30px; margin-right:30px; } h3 { text-align:center; color:darkred;
17
CSS로 꾸미기 Id셀렉터와 class 셀렉터 <body>
<div class=“div1”>class 셀렉터</div> <div id=“div2”>id 셀렉터</div> </body> <style> .div1 { color : red; } #div2{ color : blue; </style>
18
CSS로 꾸미기 CSS의 박스모델 - HTML 태그는 사각형 박스로 다루어짐 margin(여백) 콘텐츠
border(테두리) padding(패딩) 콘텐츠 HTML 태그의 텍스트나 이미지가 출력되는 부분 패딩 콘텐츠를 직접 둘러싸고 있는 내부 여백 테두리 패딩 외부의 테두리로서, 직선이나 점선 혹은 이미지로 테두리를 그릴 수 있음 여백 박스의 맨 바깥 영역이며 테두리 바깥의 공간으로 인접한 아래위 이웃 태그의 박스와의 거리
19
감사합니다. See you next week!!
Similar presentations
