본문 바로가기

Python_WEB/HTML

HTML5 - 190601 Basic Study 3(Note)

반응형

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


&nbsp; -> 공백넣기

드림위버 단축키 ctrl + shift + spacebar


&copy; -> 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>


&lt;  <  less than

&gt; >  greater than

&nbsp;  공백

&copy;  ⓒ 

&amp;  &

&raquo; >>  자세히보기

&laquo;  <<


하이퍼링크

화면 이동하는 맵태그 구현하기


주석처리

<!-- 글자 -->

설명문, 프로그램코딩 주석문

브라우져가 실행(랜더링) 하지 않고 넘어간다.


네임 앵커, 맵 태그


<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 3(Note)  (0) 2019.06.01
HTML5 - 190601 Basic Study 2  (0) 2019.06.01
HTML5 - 190601 Basic Study 1  (0) 2019.06.01