본문 바로가기

전체 글

(41)
2. border-image / border-radius border-image 요소의 테두리에 이미지를 그림 - border-image : source, slice, width, outset, repeat; 1. source : url(이미지 경로) 2. slice : 이미지를 구역별로 나눌 떄 사용할 슬라이스 크기 3. width : 테두리 이미지의 너비 4. outset : 이미지와 요소 외곽의 거리 5. repeat : 이미지를 테두리의 크기에 맞출때 모서리 조정방법 코드쳐보기
1. box-shadow / background / filter box-shadow 요소의 테두리를 감싸는 그림자 효과를 낼 수 있음. box-shadow : x, y, blur, spread, color, initial / inset / inherit - inset = 요소 안쪽에 그림자를 생성한다. 포지션값이 음수이면 right/bottom부터 시작한다. box-shadow: inset 10px 10px 5px gold; box-shadow: inset -10px -10px 5px gold; - 멀티 shadow box-shadow: 3px 3px red, -1em 0 .4em olive; Multi-background 하나의 선택자에 여러개의 background를 지정 할 수있다. .multi-bg-example { width: 100%; height: 400p..
4. SVG (Scalable Vector Graphics) SVG란? SVG는 수학적 기반으로하는 벡터 방식의 웹이미지를 표현하는 XML형식의 마크업 언어이다. PNG가 pixel단위로 구성되는 래스터이미지인 반면 SVG는 점, 직선, 곡선과 같은 형태로 구성되는 벡터이미지이다. SVG의 장점 1 HTML, CSS, JavaScript와 함께 동작할 수 있다. 이는 이미지를 에디터에서 직접 수정 및 확인 할 수 있다는 뜻이다. SVG의 장점2 벡터이미지 기반이다보니 깨지지 않는다. Hover 이미지에 사용하면 깨지지않는 이펙트로 사용가능. (주로 아이콘) SVG의 단점1 IE8 이하에서 지원되지 않는다. SVG의 단점2 사용하는데 수학적 계산을 요구하며, 상황에 따라 지나치게 복잡해지거나 크기가 커질 수 있다. 따라서 SVG 는 로고 또는 아이콘같은 단순화된 이..
3. WebG WebGL은 플러그인 없이 모든 웹 브라우저에서 대화식 2D/3D 그래픽을 랜더링하기위한 Javascript API. 요소에 사용할 수 있는 OpenGL ES 2.0을 준수하는 API를 도입하여 사용함. 벡터 데이터를 비트맵으로 바꾸는 래스터화 엔진이며 컴퓨터의 GPU에서 운영된다. GPU의 실행 명령을 수행하기위해 버텍스 셰이더, 프래그먼트 셰이더라는 함수들이 제공된다 FireFox Chrome Opera Safari IE Edge 4 이상 9 이상 12 이상 5.1 이상 11 이상 빌드10240 이상 - 버텍스 셰이더(Vertex shader) 각 정점의 위치를 계산하여 작성된 함수가 최종적으로 반환되는 정점을 기준으로 다양한 도형을 래스터화 할 수 있다. 래스터화 후 프래그먼트 셰이더 함수가 호출된..
2. <canvas> Text API 텍스트 컨텍스트 - fillText (text, x, y, maxWidth) -> 주어진 x, y위치에 텍스트를 채움 - strokeText (text, x, y, maxWidth) -> 주어진 위치에 외곽선 텍스트를 생성 - font = value (10px sans-serif) - textAlign = start / end / left / right / center - textBaseline = top / bottom / hanging / middle / alphabetic / ideographic - direction = ltr / rtl / inherit 텍스트 측정 - measureText() -> 해당 텍스트의 너비, 픽셀 등 정보를 포함하는 객체를 리턴.
1_2. <canvas> 스타일 색칠 - fillstyle = "#d8d8d8"; -> 도형의 내부를 칠함 - strokeStyle = "rgba(50,50,50, 0.5)"; -> 도형의 외곽선을 칠함 투명도 - globalAlpha = 0.2 -> 이후에 그려질 도형들에 대한 투명값 - rgba() -> 조금 더 제어가 쉽고 융통성 있는 투명값 선 두께 선 모양 -lineWidth = 양수 - lineCap = butt / round / square - lineJoin = round / bevel / miter (라인을 닫는 모서리부분의 굴곡을 참고)) - miterLimit ..? - getLineDash -> SetLineDash와 lineDashOffset로 정해진 대시패턴에 따라 대시라인을 사용 - SetLineDash ->..
1_1. <canvas> 기본도형 는 javascript를 사용하여 그림(그래프. 사진합성, 애니메이션)을 그리는 html요소이다. 기본적으로 width : 300px / height : 150px 로 지정되어있고 와 같이 초기 해상도를 고려하여 사이즈를 지정해야한다. 대체 콘텐츠 대체 컨텐츠를 제공하는 방법은 태그 안에 대체 컨텐츠를 삽입하는것이다. 를 지원하지 않는 브라우저에서는 대체 컨텐츠를 렌더링한다. 기본 사용법 - draw() 함수 -> 문서가 load이벤트를 수신하여 페이지를 로딩할때 실행 - if(canvas.getContext) -> getContext() 메소드의 존재여부를 테스트하여 를 지원하는 브라우저인지 검사. - var ctx = canvas.getContext('2d'); -> getContext() 메서드의 ..
7. HTML5 Parser Gecko에서는 최근 HTML5 기반의 새로운 파서(parser)를 도입했다. 이는 기존 파서보다 더 빠르고 html5 표준을 준수하며 많은 기능들이 추가되었다. 새로운 파서는 아래와 같은 사항이 개선되었다. SVG, MathML을 XML 네임스페이스 없이 HTML5페이지 내에서 inline형식으로 사용 가능하게 되었다. 파이어 폭스의 UI스레드와 독립적으로 작용하기 떄문에 브라우저의 반응성이 향상되었다. innerHTML 형식이 빠르다,,? 오래전부터 있었던 수십개의 버그사항이 수정되었다. html5 스펙은 이전의 html표준보다 더욱 상세한 설명을 제공하여, Gecko, WebKit, IE에서 보다 일관적으로 작동된다. 변경된 새로운 파서 - 태그 내의 좌측 꺽쇠 괄호를 토큰화 한다. 쉽게말해서 잘 ..