:: 'publishing/html' 카테고리의 글 목록

html5, xhtml, div video, picture

publishing/html

2017. 2. 26. 23:17

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

100%

canvas

geolocation

localstorage

media(video, audio)

이를 제외한 element 5%(아래 나열)

5%

div

header

footer

article

aside

nav(div로 감싸는게 아니로 nav로 감싸게 되어있음.) ---> 이름이 붙은 div들

section

-->element 태그들이 ie 9 이하에선 작동이 안된다.

하지만 아래 문장을 쓰면 호환이 가능하다.

<!--[if lt IE 9]>

<![endif]-->

lt가 부등호 '<'

IE 9보다 버전이 낮으면 참

<!--[if IE 8]>

익스플로러 버전 낮음. 업뎃.

<![endif]-->

조건주석문

! : 아니다(not) - 예) [if !ie] ie가 아니라면

lt : 작다(less than) - 예) [if le ie9] ie9보다 작다면

lte : 작거나 같다(less than equal) -- 예) [if lte ie8] ie8 보다 작건 같다면

gt : 크다(greater than) - 예) [if gt ie6] ie6보다 크다면

gte : 크거나 같다(greater than equal) - 예) [if gte ie7] ie7보다 크거나 같다

() : 우선처리

& : 그리고(and) - 예) [if (gte ie7)&(lt ie9)] ie7 이상이고 ie9미만이라면

| : 또는(or) - 예) [if (ie7)|(ie8)] ie7이거나 ie8이라면

출처: http://webdir.tistory.com/451 [WEBDIR]

html5

반응형웹 (유지보수가 힘들다)

--> ie 6, 7, 8 지원하지않고 ie 9, 10, 11을 쓴다.

xhtml (유지보수 쉽고, 그라데이션, 섀도우)

</video>

호환이 되기위해 확장자가 다른, 똑같은 비디오를 여러개 태그한다.

<source src="../video/Clouds - 7001.mp4" type="video/mp4"

autoplay = 들어가자마자 시작 . loop = 무한루프

스마트웹앱 p40

<img src="사진3.jpg" alt="flowers" style="width:auto;"

</picture>

창넓이 최소 650부터 사진

최소 465부터 사진2가 뜬다. 기본사진은 사진3.

progress

'publishing > html' 카테고리의 다른 글

headingmap, cite, figure, pre, details, datalist, blockquote, docttype, charset (0)	2017.02.26
blank, img, usemap, entity inline요소, block요소 (0)	2017.02.23
input 속성, html 유효성 검사 (0)	2017.02.23
inline 요소, table 태그 (0)	2017.02.23
에디터, html-list (4)	2017.02.20

,

headingmap, cite, figure, pre, details, datalist, blockquote, docttype, charset

publishing/html

2017. 2. 26. 15:36

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

1. document type difinition

http://www.w3schools.cpm/tags/tag_doctype.asp

<!doctype html> ->html5

html타입, 유효성검사할 버전을 구분한다.

thml 4.01 transitional

html 4.01 frameset ->transitional도 되고 frameset까지 허용

xhtml 1.0 frameset ->transitional도 되고 frameset까지 허용

xhtml 1.1 동아시아 지원

2. charset

http://www.w3schools.com/html/html_charset.asp

html4는 charset이 길다.

html5는 charset이 간결하다.

html5에서는 아무것도 쓰지않으면 UTF-8 기본문자인코딩됨

3. 헤딩맵

http://www.w3schools.com/html/html_headings.asp

4. p태그 단락

http://www.w3schools/html/html_paragraphs.asp

5. blockquote 인용문 출처

http://www.w3schools/html/html_quotation_elements.asp

6. ul과 li, ol과 li사이에 어떤 태그도 들어가면 안된다.

http://www.w3scools.com/html/html_list.asp

7. 알파벳 정의

http://www.w3schools.com/tags/default.asp

address태그 안에는 block요소를 사용할수 없다.

article, aside, audio -> 새로 추가되었음.

base는 head에 사용한다. <base href="000" target="_blank"> ->000에 주소

요즘은 input태그로 button 사용하지 않고 그냥 button태그를 사용한다.

<button type="button">Click me!</button>

type을 비웠을떄 기본으로 submit(전송)으로 정해지기 떄문에

범용버튼인 button으로 바꿔준다.

cite 인용태그

(Define the title of a work with the <cite> tag:)

<p><cite>The Scream</cite>by Edward Munch. Painted in 1893.</p>

html5에서만 가능하기때문에 기존에는 자바스크립트로 구현했다.

</details>

summary에 있는 정보가 접힌다.

이제 embed지원 X

이미지 태그를 사용할때 감싼다.

작성된 형태 그대로 보여지게 하는 태그! ex)약관에 쓰면 좋다.

http://www.w3schools.com/tags/default.asp

빨간색은 이제 사용하지 않기로함. 비추천요소

빨간로고5는 html5 버전

'publishing > html' 카테고리의 다른 글

html5, xhtml, div video, picture (2)	2017.02.26
blank, img, usemap, entity inline요소, block요소 (0)	2017.02.23
input 속성, html 유효성 검사 (0)	2017.02.23
inline 요소, table 태그 (0)	2017.02.23
에디터, html-list (4)	2017.02.20

,

blank, img, usemap, entity inline요소, block요소

publishing/html

2017. 2. 23. 23:15

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

blank 새탭으로 열림

현재위치의 폴더로부터 나가서 readme텍스트를 연다.

width만 넣거나 height만 넣으면 알아서 비례해서 맞춰짐. -> 하지만 이미지에 대한건 css에서 조절

img태그를 a태그로 감싸면 이미지를 누를때 사이트링크가 연결된다.

width, height및 속성style은 유효하나 style을 쓰는것을 추천한다.

(http://www.w3schools.com/html/html_images.asp)

alt는 문법적으로도 필요하지만 이미지를 볼수 없는 환경에서도 충분히 그 이미지에 대한 정보를 제공해 주어야 하기 때문에 쓰는것이 좋다.

-usemap

</map>

entity(entitycode.com)

한영자 ＠☆ <> & -> 나오긴하지만 웹표준에 맞지 않기때문에 entity로 써줌

&로 시작 해서 ;으로 끝

부등호 lt gt

곱하기 times

나누기 divide

HTML 요소는 크게 block element와 inline element로 나눌 수 있다.

block dyth

css를 통해 스타일을 변경하지 않았다면 블럭요소는 화면의 가로폭 전체를 차지하는 직사각형 모양을 가진다. 모든 인라인요소는 블럭요소 안에 속해 있어야하며, body요소에 바로 담길수있다.

inline: inline요소들은 block요소들을 감쌀수 없다.

block: h1~6 p ul li ol dl dt dd *div

blockquote 요소와 같은 일부 블럭요소는 인라인 요소뿐 아니라 다른 블럭요소를 포함할수있다.

반면 p요소와 같은 블럭요소는 다른 블럭요소를 포함할 수 없다.

address article aside audio canvas fieldset figure footer form header pre section table video

inline: a strong em i u ins del sup sub *span

abbr acronym b br button cite img input label map object q select

인라인요소는 블럭요소(p 등) 안에 담겨야하며, 여러 인라인 요소가 서로 중첩될수있다.

<p>
    요기 <a href="dailydiy.tistory.com">이 링크를 클릭하면 <strong>내 블로그</strong>로 이동</a> 한다!
</p>

'publishing > html' 카테고리의 다른 글

html5, xhtml, div video, picture (2)	2017.02.26
headingmap, cite, figure, pre, details, datalist, blockquote, docttype, charset (0)	2017.02.26
input 속성, html 유효성 검사 (0)	2017.02.23
inline 요소, table 태그 (0)	2017.02.23
에디터, html-list (4)	2017.02.20

,

input 속성, html 유효성 검사

publishing/html

2017. 2. 23. 22:52

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

text 한줄입혁창

password ***패스워드입력창

radio 단일선택 ex)남녀 -name은 같은것으로.

checkbox 다중선택 ex)취미

file . 파일을 올릴떄 찾는 형식

button 하이퍼링크는 이동할떄. 버튼은 링크가 아닌 범용적인것.

reset 내용을 일괄적으로 초기화시킬떄

submit input내용을 다른곳으로 전송시킬떄.

textarea 여러줄입력창

select

input type="" name="userid" placeholder="아이디" value="" 입력후 전송하면 입력 내용의

이름:userid value값만 입력 required(요구)입력창을 채우라고 뜬다.

form(action클릭하면 넘어간다.

method='get' get은 주소창에 다보인다. post는 주소에 안뜬다.)- 개발자몫

////

email @빠지면 입력X

number 숫자만

color

date firefox에선 호환 X

html 유효성검사

firefox 부가기능 플러그인 html validator

checked="enable"은 처음보일때 체크되어있는것.

<p>성별:

<input type="radio" name="gender" value="man" checked="enable">남

<input type="radio" name="gender" value="woman">여

</p>

input이 들어가면 라벨 필수!(아이디 선택하면 입력창 연결

label id는 다른 input id랑 같으면 x

input이 들어가면 label vlftndp fieldset(input항목에 대한 설명이 들어있는것)으로

무조건 감싸줘야한다. 양식임!!

button에는 라벨 X

fieldset 양식

legend

필드셋, 레전드 무조건 들어간다.

HTML5에

color

date

datetime

datetime-local

email

month

number

range

search

tel

time

url

week 가 추가되었다.

크롬이외에 브라우저에 호환이 안되는것들이 있다.

HTML4 -> XML문법 = XHTML(규칙이 엄격, 소문자만!)

'publishing > html' 카테고리의 다른 글

headingmap, cite, figure, pre, details, datalist, blockquote, docttype, charset (0)	2017.02.26
blank, img, usemap, entity inline요소, block요소 (0)	2017.02.23
inline 요소, table 태그 (0)	2017.02.23
에디터, html-list (4)	2017.02.20
GIT 저장소 (4)	2017.02.20

,

inline 요소, table 태그

publishing/html

2017. 2. 23. 22:30

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

-inline element-

<strong> -> 읽을때 강조, 악센트

<b> -> 디자인상의 굵기, bold라 강조, 악센트 X

<em> -> 기울임꼴,하이톤으로 읽힌다.

<i> -> 디자인상의 기울임

<del> -> delete. 취소선. 원래 가격이 수정되었을떄, 품목이 바뀌었을때,

취소된 내역을 바꿔줄때

<ins> -> insert. 밑줄. 추가시킬때.

<sup> -> 위첨자

<sub> -> 아래첨자

<u> -> 언더바

<q> ->

" " (쌍따옴표). 00왈.

형광표시

<abbr> 약어. <abbr title="hello world">HW</abbr> 라고 쓰고

HW에 커서를 올리면 툴팁으로 타이틀이 나온다.

HW ->커서 올려보시오

웹표준 -> 올바른 태그사용.(접근성 용이하게, 웹호환성)

접근성 - 누구나 웹을 이용할수있게

환경적 요인(인터넷이 느리거나)

장애인(행동장애, 지적장애, 후천적장애)

-> 여러줄

<!주석> -> 한줄

td{title$}*4

-table-

border width

summary 제목설명

caption 표 제목, 이름 ->table의 필수항목, summary는 필수X

td table date 행안의 열

tr table row 표안의 행

th (bold, center) 머리?

thead . tbody . tfoot

-> tfoot을 맨위로 올려도 문서장으로는 변화가 없다.

대신 맨밑으로 보이지만 읽을땐 제일 먼저 읽는다.

colspan 행합치기 (옆합치기)

rowspan 열합치기 (위아래합치기)

scope="col" th에만 scope를 걸어준다. 해당되는 헤드를 읽고 바다를 읽는다.

="row" col은 밑으로 row는 옆으로

scope="rowgroup"

headers id값

'publishing > html' 카테고리의 다른 글

headingmap, cite, figure, pre, details, datalist, blockquote, docttype, charset (0)	2017.02.26
blank, img, usemap, entity inline요소, block요소 (0)	2017.02.23
input 속성, html 유효성 검사 (0)	2017.02.23
에디터, html-list (4)	2017.02.20
GIT 저장소 (4)	2017.02.20

,

에디터, html-list

publishing/html

2017. 2. 20. 21:01

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

Edit

프론트 페이지 Atom

나모웨에디터 Sublime text

드림위버 Web stom

에디터플러스 . Ultra edit

노트패드++

<html lang="en"> 속성

속성,프로퍼티 밸류

euc-kr: 한글자당 2바이트

utf-8: 한글자당 3바이트, 다국어 가능

utf-16: 4바이트

입력후 컨트롤 슬래쉬하면 주석잡힘

주석은 보이지않음

ctrl + D 커서 2개잡힘

ctrl + alt + Q open in browser

<p></p>는 단락나눌때.

<br /> 단일태그, 줄바꿈용도

ul 순서가 없는 목록(메뉴항목순서가 상관없을때)

ol 순서가 있는목록(1.2.3.)

li list들의 item(안에 다른 태그 추가가능)

dl 디피니션 리스트/용어에대한 리스트

dt 용어에 대하 타이틀

dd 용어에 대한 정의 및 설명 또는 제목

ul안에 li 이태그들 사이엔 어떤 태그도 들어와선안된다. br이나 p태그 등

li안에 <li><p></p></li> 가능

ul을 ol로 바꾸면 숫자순서

<ol>

<li>아메리카노

<ol>

</ol>

</li>

<li>애플망고스무디</li>

</ol>

<ul>

<li>name

<ul>

<li>seojeong</li>

<li>seoyeon</li>

<li>seoyeong</li>

</ul>

</li>

<li>first

<ul>

</ul>

</li>

</ul>

<dl>

<dt>latte</dt>

<dt>latte</dt>

<dt>latte</dt>

</dl>

'publishing > html' 카테고리의 다른 글

headingmap, cite, figure, pre, details, datalist, blockquote, docttype, charset (0)	2017.02.26
blank, img, usemap, entity inline요소, block요소 (0)	2017.02.23
input 속성, html 유효성 검사 (0)	2017.02.23
inline 요소, table 태그 (0)	2017.02.23
GIT 저장소 (4)	2017.02.20

,

GIT 저장소

publishing/html

2017. 2. 20. 20:57

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

<저장소>

SVN

GIT:해외에서 가장 많이 사용.오픈소스로 전세계로 공유가능

CVS

머큐리얼

GUI(그래픽ui) cmd-커멘드라인 ui

cmd

>cd(파일이름)

뒤로가기:cd ..

cd 이름: 들어가기

/는 경로

ls: 목록

ls -al

만들어지거나 수정된거에대한 권한

mkdir study

study라는 폴더가 만들어짐

폴더안에 git init

폴더안에 git 저장소 생성

git status git에대한 상태

빨간색-저장소에 담겨있지않음

git add readme.txt(이름.확장자)

리드미텍스트파일을 저장소에 담고싶음

(add후 commit add는 선택한것 commit은 집어넣기)

git commit 추가하기

git commit -m"frist commit"

추가하려니 계정추가하라함

계정추가하기

git config --global user.email "fksdud377@nate.com"

아무말없으면 정상적으로 추가

이름추가

git config --global user.name "Kwonseojeong"

readme.txt를 변경후저장.

git add *

*은 모든것을 의미, 전체를 선택(목록이 많을때)

git commit -m "second commit"

git log

리스트 보기

html

하이퍼 텍스트 마크업

html2.01

3.01

4.01-xhtml-5

<div>Hello World</div>

태그

element=요소

23p

변경

<html>

<head>

</head>

<body>

</body>

</html>

저장소에 저장할때

상태확인하고

git add *

git commit -m "Hello project2"

git status

git log(수정된거보임)

생활코딩-프로젝트관리

(저장소만들기)

https://opentutorials.org/course/1492/8045

gitlab(폐쇄적-회사내)

github(오픈소스라는 명목하에 이런 저장소를 무료제공)

붙여넣기 shift insert

github에서

서버 추가한뒤로는 변경,선택,추가후 git push라고만 씀

집에와서 github

git clone (주소)

변경후 git push

학원컴에서 git pull(받는것)

'publishing > html' 카테고리의 다른 글

headingmap, cite, figure, pre, details, datalist, blockquote, docttype, charset (0)	2017.02.26
blank, img, usemap, entity inline요소, block요소 (0)	2017.02.23
input 속성, html 유효성 검사 (0)	2017.02.23
inline 요소, table 태그 (0)	2017.02.23
에디터, html-list (4)	2017.02.20

,

< 1 >

'publishing/html'에 해당되는 글 7건

html5, xhtml, div video, picture

'publishing > html' 카테고리의 다른 글

headingmap, cite, figure, pre, details, datalist, blockquote, docttype, charset

'publishing > html' 카테고리의 다른 글

blank, img, usemap, entity inline요소, block요소

'publishing > html' 카테고리의 다른 글

input 속성, html 유효성 검사

'publishing > html' 카테고리의 다른 글

inline 요소, table 태그

'publishing > html' 카테고리의 다른 글

에디터, html-list

'publishing > html' 카테고리의 다른 글

GIT 저장소

'publishing > html' 카테고리의 다른 글

category

최근에 달린 댓글

달력

링크

티스토리툴바

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31