:: '분류 전체보기' 카테고리의 글 목록 (4 Page)

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

,

cascading, position, z-index,

publishing/css

2017. 2. 25. 23:22

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

케스캐이딩

3가지규칙 -저작자

-명시도(1.id 2.클래스 3.p태그안의 a태그 4.a태그, !important(아주 강함)

-우선순(같은조건에 마지막이 우선)

overflow_float

위드 오토는 부모만큼

헤이트 오토는 컨텐츠만큼

overflow: hidden(넘어가면 안보여줌 주어진영역만큼만 보여줌)

visible(넘어가도 보여줌)

position

-static: 기본

-relative: 상대적(현재위치로부터.)(한번에 두값만 사용, 레프트탑. )

left:50%는 브라우저 창의 50%이동,

margin:0 auto;, left:50px;은 0 auto중간에서 50px이동

-absolute: 절대적(네가지 값사용 가능)

right:0; bottom:0;은 맨왼쪽 맨아래

right:50px; 맨 왼쪽에서 50px 이동(float은 밀지만 absolute는 밀지않고 그냥 이동)

-fixed: 고정적

position을 사용해야만 쓸수 있는 속성: top, right, bottom, left, z-index

<head>

<title>Document</title>

<style>

[class^="box"]{border:1px #f00 solid; position:absolute;}

.box1{background: #F00; left:0; right:50%; top:0; bottom:50%;}

.box2{background: #0F0; left:50%; right:0; top:0; bottom:50%;}

.box3{background: #00F; left:0; right:50%; top:50%; bottom:0;}

.box4{background: #000; left:50%; right:0; top:50%; bottom:0;}

</style>

</head>

<body>

</body>

z-index 높낮이 결정.

z-index:1; z-index:2; 릴렉티브 앱솔루트 픽스드 다 가능

상품 제목같은경우에 쓰임. h1,h2쓰기에 맞지않을때

선택상자로 영역잡은후 포토샵 알트s t-> 개별로 조정가능

엔터치고 컨트롤 쉬프트 c-> 컨트롤 엔-> 컨트롤 v

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

css, float . 스프라이드기법, multiple background, vendor prefix css0120 (0)	2017.02.24
css, class, id, boxmodel, margin, padding, background, gradation (0)	2017.02.24

,

css, float . 스프라이드기법, multiple background, vendor prefix css0120

publishing/css

2017. 2. 24. 23:40

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

background-attchment //모바일에서는 작동하지않는다.

'local' 기본값

background-size: w h; //호환성으로 인해서 벤더프리픽스를 해줘야한다.

cover는 가로값을 기준으로 화면을 맞춤.

벤더프리픽스 //css3속성이 어떠한 브라우저에서 적용이 안될때... 사용

-ms- //익스플로러

-webkit- //크롬 사파리

-moz- //파이어폭스

-opera- //오페라

멀티백그라운드 //css3속성

한 요소에 여러 이미지를 한번에 불러올수 있다.

백그라운드 개수는 상관없다.

,(콤마)로 구분해준다.

스프라이트 기법

네이버 뉴스스탠드(개발자모드) - top my뉴스 - style #lnb background url() 우클릭 - open link in new tap - 이미지저장

백그라운드 이미지를 활용, 버튼을 만든다.

다수의 이미지를 같은 페이지에 생성, 활용

이미지를 각개로 사용한다면 일일이 찾아서 바꿔야한다.

유지보수에 용이

리소스가 적게 사용된다

이미지 변형에 용이

이미지만 바꾸면 한번에 바뀐다.

1.float: 공중에 붕뜨다

2.float이 선언된 element는 컨텐츠가 피해간다.

3.float이 선언된 element는 먼저 작성된 element위로 뜰수없다.

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

cascading, position, z-index, (0)	2017.02.25
css, class, id, boxmodel, margin, padding, background, gradation (0)	2017.02.24

,

css, class, id, boxmodel, margin, padding, background, gradation

publishing/css

2017. 2. 24. 23:36

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

html 구조와 설계(뼈대)

css 스타일 디자인(살)

선택자

캐스케이딩

박스모델

디스플레이

위치제어:float,

position

overflow

vertical-align

line-height

css 주석방식

/*주석*/

속성:값; 속성:값;

id=주민등록번호같은

class=직업군

width값을 넣지않으면 width:auto

auto는 나의 부모만큼.

현재 박스의 부모는 바디

#box{width:100%; height:100px; border:1px red solid; margin-left:200px;}

--> 100%+100px(스크롤생김)

#box{width:auto; height:100px; border:1px red solid; margin-left:200px;}

--> 100px+auto

<style>

.menu{width:400px; height:200px, border:1px #f00 solid;}

.inner{border:1px f00 solid; width:auto; margin:10px;}

</style>

<body>

<div class="inner">메뉴리스트</div>

</div>

</body>

menu에 넓이는 절대값이고 값이 바뀔때마다 inner넓이를 auto로 하면 inner의 넓이가 margin10px로 자동으로 맞춰짐

=

height는 auto로 맞추면 컨텐츠만큼.(글씨를 넣거나하면 그만큼 늘어남)

height는 값을 주지않으면 오그라듬 (없음)

<head>

<style>

html{height:100%;}

body{height:100%;}

.box{border:1px #f00 solid; height:; height:100%;}

</style>

</head>

<body>

</body>

auto모르면

유지보수성이 덜어진다. 깨진다.

margin은 바깥여백. 위치이동X

margin:10px 20px 30px 40px; 시계방향으로 값이 들어감

:10px 20px-->2진수. 10 20 10 20 시계방향으로.

:10px 20px 30px-->마지막 left는 20px

왼쪽에 여백주고싶을때 margin-left10px 또는 margin:0 0 0 10

패딩과 규칙이 똑같음.

.box{border:1px #f00 solid; width:600px; height:100px; margin:0 auto;}

width값 절대값600에 margin 0 auto 0 auto 알아서 가운데 정렬.(브라우저 줄일때 margin이 변함)

.box{border:1px #f00 solid; width:auto; height:100px; margin:10px;}

width값 오토에 margin 10px 가운데 정렬.(브라우저 줄일때 margin10은 안변하고 width값이 변함)

border

border:1px #f00 solid

border-width:1px; border-color:#f00; border-style: solid;

border-width:1px 2px 3px 4px; border-color:red blue green orange; border-style: solid dotted dashed groove;

선을 없애려면 width값 0을 주거나 선은있는데 안보이게 할때 color에 transparent로 투명.

border:1px #f00 solid; border-bottom:0;

밑에만 없앨때

padding은 auto개념 X

/*css3*/

border-radius:10px(사각모서리에 라운드)

호환성이 낮다. css3라

http://www.w3schools.com/css/css_border.asp

.은 class를

#은 id를

max width 1024px; 1024이상으론 안커지고 이하로는 자유롭

min width 1024px; 1024부터는 크기 자유롭. 1024이하부턴 먹혀들어감

max height 200px; 텍스트에 맞춰늘어남. 최대200까지

min height 200px; 텍스트가 없어도 최소200. 그이상으로 늘어남

background

background-color:rgb(255,255,0);

#ff 00 00

0~9 A~F 16*16=256

255가 16진수로하면 ff

background-color:rgba(255,255,0,0.3);

a는 알파값 0.3 반투명--> css3에서밖에안됨

background-repeat:yes

no-repeat

repeat-x 가로로

repeat-y 세로로

background-position:50px 50px;

x y 절대값,상대값,지정값이 들어갈수도있다.

가로로 세로로 이동

background-position:right-top

right-botoom

left-top

left-bottom

centercenter

background-position:right 10px bottom 10px;

오른쪽에서10 밑에서 10떨어짐

gradation

http://www.colorzilla.com/gradient-editor/

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

cascading, position, z-index, (0)	2017.02.25
css, float . 스프라이드기법, multiple background, vendor prefix css0120 (0)	2017.02.24

,

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

,

node.js 설치, less compile !!

publishing/less

2017. 2. 21. 23:20

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

node.js 검색해서 official page에 들어가서

사진상 왼쪽꺼 설치!!

cmd에서 설치 명령어 npm install less -g

less 컴파일 명령어 lessc style.less style.css

lessc - less compile

style.less - 컴파일할 파일

style.css - 컴파일될 파일

->그럼 컴파일 성공~!

html head에 <link rel="stylesheet" href="./style(컴파일된 파일제목).css">

less에 // out: styles(컴파일된 파일제목).css, sourcemap: false, compress: true

주석달기

compress: true는 css 에서 한줄로 나오고(용량 적어짐)

false는 그대로 나옴(용량커짐)

,

에디터, 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 2 3 4 5 >

'분류 전체보기'에 해당되는 글 48건

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

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

cascading, position, z-index,

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

css, float . 스프라이드기법, multiple background, vendor prefix css0120

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

css, class, id, boxmodel, margin, padding, background, gradation

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

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

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

input 속성, html 유효성 검사

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

inline 요소, table 태그

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

node.js 설치, less compile !!

에디터, 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