Download presentation
Presentation is loading. Please wait.
1
Web & Internet [03] HTML5 다양한 태그
2018년 09월 17일 박성진
![Web & Internet [03] HTML5 다양한 태그](http://slidesplayer.org/slide/16185561/95/images/1/Web+%26+Internet+%5B03%5D+HTML5+%EB%8B%A4%EC%96%91%ED%95%9C+%ED%83%9C%EA%B7%B8.jpg "2018년 09월 17일. 박성진.")
2
속성 (Attribute) 시작 태그 안에서 사용되는 것으로 태그의 구체적인 성격을 지시함 EX)
<body bgcolor=“#D9418C”> </body> <a href= </a>
3
글자 모양 태그 글자의 형태와 의미를 부여하는 태그
글자 모양 태그는 단독으로 사용 가능, 글자 모양 태그 내부에 제목, 본문 태그를 넣을 수 없음 태그 이름 설명 <b> 굵은 글자 태그 <i> 기울어진 글자 태그 <small> 작은 글자 태그 <sub> 아래 첨자 태그 <sup> 위 첨자 태그 <ins> 밑줄 글자 태그 <del> 가운데 줄이 그어진 글자(취소선) 태그 DBLab Template by Suan
4
예제 1. 글자 모양 태그 DBLab Template by Suan
5
예제 1. 글자 모양 태그 https://htmlcolorcodes.com/ 크기=30, 가로길이=30px, 가운데 정렬
DBLab Template by Suan
6
목록 태그 웹 페이지의 목록을 구성 보통 네비게이션 목록에서 주로 사용 됨 글머리 기호와 순서 번호 목록 태그 이름 설명
<ul> 글머리 기호 목록 태그 <ol> 순서 번호 목록 태그 <li> 목록 요소 DBLab Template by Suan
7
예제 2. 목록 태그 DBLab Template by Suan
8
예제 2. 목록 태그 DBLab Template by Suan
9
테이블 태그 웹 페이지의 표를 구성 태그를 계층 구조로 작성 태그 이름 설명 <table> 표(table)
<thead> 표의 머리 <tbody> 표의 본문 <tfoot> 표의 꼬리 <tr> 행 <th> 표의 제목 요소 <td> 표의 일반 요소 DBLab Template by Suan
10
예제 3. 테이블 태그 DBLab Template by Suan
11
예제 4. 테이블 태그 – 행/열 합치기 DBLab Template by Suan
12
이미지 태그 웹 페이지에 이미지를 삽입 속성 이름 설명 <src> 이미지의 경로 지정 <alt>
이미지가 없을 때 나오는 글자 지정 DBLab Template by Suan
13
예제 5. 이미지 태그 DBLab Template by Suan
14
예제 5. 이미지 태그 오른쪽 정렬 이미지 불러오기 이미지 대체 택스트 DBLab Template by Suan
15
예제 5. 그림 DBLab Template by Suan
16
예제 5. 그림 DBLab Template by Suan
17
예제 5. 그림 DBLab Template by Suan
18
예제 5. 결과 DBLab Template by Suan
19
만약, dogandcat.jpg 이 없을 경우…
DBLab Template by Suan
20
과제3 자기만의 시간표 만들어보세요. 10월 01일 오전 09:10 까지 제출
처음 2행은 <th> 태그로 시작 셀의 크기, 색은 임의로 지정 KNU 로고 이미지를 누르면 강원대학교 홈페이지로 이동 10월 01일 오전 09:10 까지 제출 Sublime Text 또는 메모장으로 사용해 과제물을 학번 및 학생이름 (예 _박성진) HTML으로 저장한 후 으로 제출 제출하시기 전에 파일을 열고 볼 수 있는지 확인해 주시기 바랍니다. 아니면, HTML 파일을 A4용지로 프린트한 뒤 제출 도움 필요하실 경우, 목요일 오후 4시~5시 한빛관 408호를 방문하시거나 예약
21
과제의 결과 예 DBLab Template by Suan
Similar presentations
![실습 1- 31p 2 3 문서 작성 및 저장 새 문서 작성하기 [ 파일 ] – [ 새 문서 ] or + 새 문서 입력 기존 문서 불러오기 [ 파일 ] – [ 불러오기 ] or + 4.](/40/11034584/big_thumb.jpg "실습 1- 31p 2 3 문서 작성 및 저장 새 문서 작성하기 [ 파일 ] – [ 새 문서 ] or + 새 문서 입력 기존 문서 불러오기 [ 파일 ] – [ 불러오기 ] or + 4.>")
![[첨부] 지원서 양식 및 과제 요강 삼성전자 VIP센터 2016 대학생 IDEA POOL 10기 모집.](/86/14034080/big_thumb.jpg "[첨부] 지원서 양식 및 과제 요강 삼성전자 VIP센터 2016 대학생 IDEA POOL 10기 모집.>")
![컴퓨터 프로그래밍 기초 [Final] 기말고사](/90/14529968/big_thumb.jpg "컴퓨터 프로그래밍 기초 [Final] 기말고사>")
![[ 2016-05 ] 호서대학교 현장실습지원센터 홈페이지 안내 교수 매뉴얼.](/91/15036153/big_thumb.jpg "[ 2016-05 ] 호서대학교 현장실습지원센터 홈페이지 안내 교수 매뉴얼.>")