1) HTML5의 개요
2) HTML 표준태그 실습
3) CSS 선택자
4) CSS 속성
5) CSS 애니메이션 및 고급 속성들
6) CSS 레이아웃 설계
코딩 - 편집기
크롬 - 모바일 친화적
안드로이드 -> 구글인수
시멘틱(semantic) 웹을 구현
<header> 머리말
<p> paragraph 문단
웹표준 - HTML5
<!DOCTYPE html> -> HTML5
<meta charset="UTF-8"> -> 한글이 깨짐
HTML 태그 -> 뼈대
CSS -> 디자인, 배치
자바스크립트 -> jquery
동적인요소구현
플래시
meta 웹페이지의 정보를 나타내는 태그
<h1>머리말태그 1</h1>
<h2>머리말태그 2</h2>
<h3>머리말태그 3</h3>
<h4>머리말태그 4</h4>
<h5>머리말태그 5</h5>
<h6>머리말태그 6</h6>
http://cafe.daum.net/knyatom/OF6W/122
1) HTML5에 표준태그들 실습하기
<h1></h1> -> 32px
글자크기 32px(픽셀) 굵은 글자
<h1 align="center"> 머리말 가운데 </h1>
<P></p> -> 16px
문단태그
<p align="center"> 가운데 정렬 </p>
<p align="right"> 오른쪽 정렬 </p>
<br> -> break 개행문자
드림위버 단축키 shift + enter
-> 공백넣기
드림위버 단축키 ctrl + shift + spacebar
© -> copyright
<hr> -> 수평선 넣기
<a> -> anchor
하이퍼링크 태그
<a href = "하이퍼링크"> 이름 </a>
시작태그 종료태그
href -> hyperlink refernce
a 태그에서 사용하는 속성j
href = url
속성 = "값"
a 태그 기본글자색이 파랑색이고 밑줄이 자동
href, title, target
target 클릭한 후 창 상태를 나타내는 속성
_self 자신창에서 열기
_blank 새창으로 열기
new 한번 열린 새창으로 열기
_top 최상위창에서 열기
_parent 부모창에서 열기
블럭형 태그(박스형)
인라인 태그(글자형)
태그는 태그이름 속성과 값으로 구성되어있다.
이 전체를 요소(Element)라 한다.
<a href="mailto:메일주소"> 메일보내기 </a>
메일보내기 -> 아웃룩익스페리스 설정되야지 가능
<a href="tel:전화번호"> 전화걸기 </a>
<a href="sms:전화번호"> 문자보내기 </a>
< < less than
> > greater than
공백
© ⓒ
& &
» >> 자세히보기
« <<
하이퍼링크
화면 이동하는 맵태그 구현하기
주석처리
<!-- 글자 -->
설명문, 프로그램코딩 주석문
브라우져가 실행(랜더링) 하지 않고 넘어간다.
네임 앵커, 맵 태그
<a href="#"> 기본 링크 </a>
가상의 링크
클릭했을때 자동으로 화면이 상단으로 이동하는
id로 책갈피를 단다
#id 명으로 링크를 건다.
id는 중복되지 않는 이름표
영문권장 영문시작
글자관련태그실습
font
brstrong
em
i
u
s
strike
ins
del
center
big
small
address
marquee
mark
details
pre
blockquote
ruby
HTML4
HTML5
비표준태그는 모바일에서 사용안한다(동작안함)
<font color="글자색상" face="글꼴" size="글꼴수치">
bold
strong
b, strong -> 굵은 글자
i -> italic 기울인문자
em
i, em
strong -> 의미를 강조한다.
시각장애인들에게 나래이션할때
웹 표준 및 웹 접근성을 향상
모바일, 태블릿, 스마트TV
시각디자인도 사용하게 만들자
small
big 비표준
sub 아래첨자
- substate
sup 윗첨자
- suppress
밑줄넣기
u, 비표준
ins 표준
취소선
<del> 표준
<s> <strike> 비표준
name 속성으로 화면이동은 a 태그로 네임속성을 지정해야된다.
출발지에서는 #name을 이용한다.
ruby태그
한자음표기, 외국어발음표기, 중국어 병음표기
ruby > rt(ruby text)
<span></span> 글자나 텍스트에 영역을 지정하기 위한 태그는
박스태그 -> div
글자태그 -> span
css코딩 방식 -> 속성:값
ex> background:red
html코딩 방식 -> 속성="값"
ex> aling = "center"
rp태그는 루비태그를 지원하지 않는 브라우저는 rt로 표현해야됨
윗주문자
타이틀 h1 홈페이지 메인타이틀
abbr : 축약어(표준)
acronym : 두문자어(비표준)
q
pre : preformatted 그대로 보여줌(표준)
xmp : pre 확장판(비표준) 특수문자와 pre기능 / pre + 특수문자와 같이 사용하시오.
address : 푸터영역에 회사주소나 저작권표시
marquee : 움직이는 태그
makr : 형광 태그
목록태그
1) 순서 있는 목록
2) 순서 없는 목록
3) 용어정의형 목록
메뉴모음 > 네비게이션바
<div>
<span>목록1</span>
<span>목록2</span>
</div>
dl>(dt+dd)
definiton list
defiition term
definition description
> 자식
+ 형제
border1:1px solid red;
테두리:두께 선모양(실선) 선색
웹표준 HTML5가 나오기전에는 화면 레이아웃 설계를 모두 테이블 태그 작성하였다.
지금도 가끔 테이블태그로 만들어진 화면구조가 있다.
table 태그 들어가는 태그들
tr : table row
th : table header
td : table data
cellspacing 셀과 셀사이의 간격
cellpadding 글자와 셀의 간격
width="300" > 픽셀단위
width="100%" > 유동형
table
tbody
thead
tfoot
게시판글자
insert -> table(ctal + alt + t)
align 수평정렬
valign 수직정렬
img 단독으로 사용하는 태그
src 이미지경로
alt 대체텍스트
width 가로크기
height 세로크기
title 풍선도움말
border 테두리
img src="http://placehold.it/150x150"> 이미지 홀더 사이트
html 태그 코딩을 쉽고 빠르게 하기
- 젠코딩, emmet
editplus, bracket, 기능확장
edit - keyboard shortcut
commands - zen codding - expand abbreviation
ctrl + , -> ctrl + e 변경
ctlr + e 코드 완성하기
ctrl + / 주석처리하기
h1*3 > h1 태그 3개
ol+ > 자식태그까지
ul+
dl+
table+
clrl + / 주석문
ul>li*3>a[href=#]
속성은 대괄호 []
ul>li*3>a[href=#]{버튼}
{중괄호} 태그내부에 글자(텍스트)
ul>li*3>a[href=#]{버튼$}
$ > 시리얼 번호
h2*3+p*2
+ > 형재관계
div.name
div#name
. class
# id
code정리하기
commands => apply source formatting
박스태그 행단위
인라인태그 줄단위로
ui-ux 모바일
뷰포트
user-scalalbe=yes 손가락으로 확대가능
width=device-width 접속한 장치에 가로크기에 자동 맞춤
ul>li*5>a[href=#]{menu$}
멀티미디어 태그 실습하기
양식태그
CSS 입문
'Python_WEB > HTML' 카테고리의 다른 글
| HTML5 - 190602 Basic Study 6(Membership page) (0) | 2019.06.02 |
|---|---|
| HTML5 - 190602 Basic Study 5 (0) | 2019.06.02 |
| HTML5 - 190602 Basic Study 4 (0) | 2019.06.02 |
| HTML5 - 190601 Basic Study 2 (0) | 2019.06.01 |
| HTML5 - 190601 Basic Study 1 (0) | 2019.06.01 |
