html5 및 css

선스타일

Context.strokeStyle=색상 및 그라데이션, 패턴
Context.lineWidth=선두께 기본1.0px
Context.lineJoin= bevel, round, miter(기본) = 두선이 만나 꺽이는 모서리부분 모양
Context.lineCap= butt(기본), round, square = 선 양끝부분 모양지정

globalAlpha=투명도, 1.0 =진함, 0.0=투명
패턴스타일createPattern(img, 반복형식) = 반복형식= no-repeat, repeat-x, repeat-y, repeat

그림자 스타일
shadowColor=색상
shadowOffsetX=수평 오프셋 기본0
shadowOffsetY=수직 오프셋 기본0
shadowblur=그림 흐림정도 기본0

globalCompositeOperation = 도형겹쳐지는 부분 처리

텍스트 그리기
Context.font = 스타일, 크기, 글자체
Context.textAlign = 수평 정렬( left, right, center, start, end)
Context.textBaseline = 수직 정렬 ( top, hanging, middle, alphabetic, ideographioc, bottom)

SVG = xml기반 2차원 벡터 그래픽
SVG=벡터(수학적식)
캔버스=비트맵(픽셀)

svg에서 사각형 = <rect x=”시작점x” y=”시작점y” rx=”20” ry=”49” width=”폭” height=”높이”/>
svg에서 원 = <circle cx=”중심x좌표”, cy=”중심y좌표”, r=”반지름”/>
svg에서 타원그리기 = <ellipse cx=”” cy=”” rx=”x축반지름” ry=”y축반지름” />
svg에서 라인 = <line x1=”” y1=”” x2=”” y2=”” />
svg에서 연결선 = <poluline points=”x,y 집합” />
svg에서 다각형 = <polygon points=”xy 꼭지점 집합” />

CSS3

CSS 사용의 장점
Cascading Style Sheets = 웹문서 출력을 외양을 지정하기 위해 글꼴, 색상,등 스타일기술 언어
다양한기능확장= 단순html을 css기능 추가 변경 가능
통일된 문서 양식 제공 =한번의 속성 정의로 여러문서에 적용가능
웹문서의 내용과 스타일정보의 분리=개별적수정가능=문서가독성, 수정용이
웹브라우저 로딩시간 단축=통일된 양식사용하기 떄문에 처리할 데이터양 감소

CSS형식

선택자{선언블록}
선택자 = selector : 스타일을 적용하려는 html의 요소
선언블록 = 선언; 선언; 선언;….  =  속성:값; 속성:값, …..
선언 : property : 지정한 선택자의 어떤 부분에 대해 스타일을 적용할 것인가 하는 부분
값 : value : 해당속성의 스타일의 값
P{color:red; font-size:10px;}

CSS적용 방법 3가지

임베디드방법 : 스타일 요소사용 : HTML안에 <style>안에 CSS선언해서 사용
인라인방법 : 스타일 속성사용 : <h1 css>, <div css> 태그안에 직접사용
링크방법 : 외부파일 사용 : <link> @import url(test.css) , 하나의 파일로 여러문서 동시 사용가능

CSS 적용 순서

스타일속성 > 스타일요소 > 링크 > 브라우저 디폴트
1순위 : 인라인방법
2순위 : 임베디드방법 <style>
3순위 : 링크방법 <link>

선택자

전체선택자 = 모든요소선택하여 스타일적용
* 별모양 사용 = 웹문서의 모든 요소에 적용

타입선택자 = 지정한 요소에만 스타일적용
스타일적용하고싶은 HTML요소이름 직접사용
만약 <table><tr><td>….</table> 이처럼 하위 요소에도 모두 동일하게 적용된다!

클래스선택자 = 지정한 클래스명을 사용한 요소만 스타일 적용


*여기를 보면 <h3>에서 class1과 header를 동시에 적용받는다.

아이디선택자 = 지정한 아이디명을 사용한 요소만 스타일 적용

*id속성은 = 요소의 정체성을 나타냄. 중복사용안되고 오직 한번만 사용가능.
단, 여러 번 사용한다고 에러가 발생하는건 아닌데, javascript를 사용하게되면 문제발생할수있음

속성선택자 = 지정한 속성표현에 해당하는 속성을 가진 요소만 스타일적용
요소의 속성값에 대한 것을 찾아 선택




가상선택자 : 가상선택자는 2가지가 있다 (가상클래스, 가상요소)
웹문서에는 존재하지않지만 어떤 상황이 발생한 경우 적용하도록 임시로 선택자 지정/사용
가상클래스 : 콜론 사용( : )
링크= :link, :visited
사용자동작 = :hover, :active, :focus
UI = :enabled, :disabled, :checked
부정 = :not
트리구조 = :root, :nth-child, :nth-last-child, :first-child, :last-child, :nth-of-type, :first-of-type, :only-child, :only-of-type, :empty

가상요소 : 콜론 두개 사용 ( :: )
::first-letter, ::first-line, ::before, ::after

색상표현

HSL색모델
색조(Hue)=반사광
채도(Saturation)=순수한 스펙트럼색=선명도
밝기(Lightneess)=빛의 에너지크기=밝기

글꼴
Font-family=폰트종류
font-size=글자크기
font-style=스타일
font-variant=작은크기의 대문자
font-weight=굵기
Font=글꼴관련 속성 일괄지정
@ font-face=사용자 정의 글꼴

/line-height값은 슬래쉬 필수


Text-align = justify(양쪽맞춤)

Text-align-last =텍스트 마지막줄 정렬 방식 지정  * text-align:justify를 가진 요소에만 동작

text-justify=텍스트 양쪽 맞춤할떄 어떻게 처리할지 지정 text-align:justify를 가진 요소에만 동작
auto=브라우저에 맞게 결정
none=양쪽맞춤 안함
inter-word=단어 사이 간격
distribute=인접한 각 글자(문자)사이 간격 조정
Text-indent=첫 줄 들여쓰기
Text-decoration=줄 장식 지정
overline=글자의 위에 윗줄
underline=글자 아래 밑줄
line-through=취소선

Text-transform = 텍스트 알파벳 표시
none=그대로
capitalize=첫 글자들만 대문자
uppercase=전부다 대문자
lowercase=전부다 소문자
Letter-spacing=글자 사이 간격
Word-spacing=단어 사이 간격
Line-height=문장 줄 간격
Text-shadow=텍스트 그림자 효과
Text-overflow=영역벗어난 텍스트 표시방법
clip=자름 안보임
ellipsis= …으로 생략표시

Vertical-align=요소(사진) 수직 정렬 방식


White-space = 공백문자 처리방식
normal=연속해서 나오는 공백, 탭, 줄바꿈 모두 1개의 공백으로 처리, 크기에 맞춰자동줄바꿈처리
nowrap=줄바꿈 안됨.
pre=연속된 공백,탭,줄바꿈 모두 원문 그대로 다 표시함.
pre-wrap=pre처럼 모두 유지되지만 크기에 맞춰 자동줄바꿈도 됨
pre-line= 연속된 공백 1개의 공백으로 처리하고, 크기에 뭦춰 자동 줄바꿈

Word-break = 줄바꿈 규칙
keep-all = 공백 기준으로 줄바꿈 하이픈 미적용
break-all = 강제로 글자 사이에서 막 줄바꿈
Word-wrap=단어가 길어서 줄바꿈 할떄 분리해서 줄바꿈 할지 여부
break-word = 강제로 줄바꿈함.
Position = 위치 설정방식
static = (기본)정상적인 흐름에 따라 요소 배치
absolute=브라우저 윈쪽 상단 모서리 기준으로 이동
relative=현재위치를 0.0 으로 하고 이를 기준으로 이동
fixed=뷰포트 기준으로 이동
Visibility = 박스표시여부, 숨겨진것도 자리는 차지함 투명하게!!, 테이블은 없어짐!
Float=해당요소 왼쪽/오른쪽에 배치함
table-layout =셀안의 내용 크기에 따라 셀크기 변화 (auto, fixed)

border-collapse = 테이블테두리와 셀테두리 합칠지 여부
border-spacing=인접한 셀 테두리 사이 지정
caption-side=태이블 캡션위치(top, bottom)
empty-cells=빈셀 표시여부(show, hide)
border-radius=테두리 각 모서리 둥글게 (xxxx/yyyy)
box-shadow=박스 그림자 (inset 내부그림자)
outline = 테두리 밖의 윤곽선

background-attachment=스크롤에 따른 배경 이미지 움직임 여부(scroll, fixted)   
background-origin=배경이미지가 시작되는 기준 위치
background-repeat=이미지 반복 여부

선형그라데이션
Linear-gradient 12시가 0도임.
끝 방향을 잡고 색깔 끔.
yellow, blue
to bottom, yellow, blue
180deg, yellow, blue
0deg, blue, yellow
to top blue, yellow
전부다 같음.

방사형 그라데이션
Radial-gradient
Transform=변형
translate=이동
rotate=회전
skew=기울임
scale=크기

그라데이션 함수
createLinearGradient
createRadialGradient
addColorStop
createPattern

CSS전환 transition 아래2개는 필수로 써야함!
transition-property = 속성의 이름
transition-duration = 전환되는 시간

다단=column
column-gap = 다단 선 두께
column-rule = 두꺠 점선 색깔
column-span = 다단을 무시할지 말지
column-fill = 다단별로 내용을 어떻게 채울지 여부 밸런스있게할지..

Transform = 요소 형태, 크기, 위치 변경시키는 것
이동(translate)
회전(rotate)
크기(scale)
기울임(skew)
사용예제) transform : translate(10,20)
Perspectivbe 3D공간에서 원근감 부여


비디오
Duration=총 재생시간
defaultPalybackRate=기본 재생속도 지정 배율
palybackRate=현재 재생속도 지정 배율

드래그가 가능함 = draggable=true 드래그는 가능하나 놓으면 다시 돌아감
드래그앤드롭=으로 전달되는 데이터 처리 = dataTransfer
dragstart = 전달데이터저장 = setData()
dragover= 다른요소위로 드래그 하고 있을떄 = 기본값을 취소하고 드롭허용=preventDefault
drop= getData()

audio속성 = src, autoplay, controls, loop, muted, preload
vidio속성 = audio속성 + width, height, poster
*poster란 비디오가 로드되기 전 or 비디오 데이터가 설정되어 있지 않을떄 보여줄 이미지

isContentEditable 속성→ 요소가 편집 가능한 상태로 지정되 있으면 true, 아니면 false 반환

execCommand 메서드 → 편집 가능 모드로 지정된 상태에서 다양한 편집 기능

contenteditable 속성 → 웹 문서의 특정 요소만을 편집 가능하도록 지정 

designMode = 웹문서 전체를 편집

미디어
① playing 이벤트 → 미디어 파일이 일시정지 또는 버퍼링을 위해 멈췄다가 재생을 시작할 때.

② progress 이벤트 → 미디어 파일을 다운로드하고 있을 때 지속적으로 발생

③ timeupdate 이벤트 → 현재 재생 위치가 바뀌었을 때 발생, 재생 중에 지속적으로 발생

seeking 이벤트 → 사용자가 미디어 파일의 새로운 위치로 이동/건너뜀을 시작할 때 발생

FileReader객체
① loadend 이벤트 → 성공/실패에 상관없이 읽기가 완료되었을 때 발생
② load 이벤트 → 읽기가 성공적으로 완료되었을 때 발생
③ loadstart 이벤트 → 데이터를 읽기 시작할 때 발생
④ progress 이벤트 → 데이터를 읽고 있는 도중에 지속적으로 발생