코드랩 레퍼런스

스케이러블 벡터 그래픽스(Scalable Vector Graphic, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML기반의 파일 형식으로, 1999년 W3C의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식입니다. Sample1 사각형과 보더값을 적용한 SVG입니다. Sample2 사각형에 보더 레디우스를 적용한 SVG입니다. Sample3 원형 SVG입니다. Sample4 타원형 SVG입니다. Sample5 폴리건 SVG입니다.

mo.js는 자바스크립트 애니메이션 플러그인 입니다. mo.js를 이용하면 애니메이션을 쉽고 퀄리티 있게 구현 할 수 있습니다. mojs.io CSS API Reference 속성 기본값 설명 el null 선택자 선택 x 0 translateX 속성 값 설정 y 0 translateY 속성 값 설정 z 0 translateZ 속성 값 설정 skewX 0 skewX 속성 값 설정 skewY 0 skewY 속성 값 설정 angleX 0 rotateX 속성 값 설정 angleY 0 rotateY 속성 값 설정 angleZ 0 rotateZ 속성 값 설정 scale 1 scale 속성 값 설정 scaleX 1 scaleX 속성 값 설정 scaleY 1 scaleY 속성 값 설정 opacity 1 투명도 속성 ..

mo.js는 자바스크립트 애니메이션 플러그인 입니다. mo.js를 이용하면 애니메이션을 쉽고 퀄리티 있게 구현 할 수 있습니다. mo.js 사이트 : mojs.io mo.js로 만든 사이트 : www.cartoonnetworkstudios.com Sample1 클릭하면 움직이는 기본 예제입니다. Mojs Click Sample2 클릭하면 크기가 작아지는 애니메이션입니다. Mojs Click Sample3 클릭하면 보더 속성 값을 변경하는 예제입니다. Mojs Click Sample4 여러가지 Shape 속성을 설정합니다. Sample5 여러가지 Shape 속성을 설정합니다. Sample6 요소의 위치를 랜덤으로 설정합니다.

anime.js는 자바스크립트 애니메이션 플러그인 입니다. anime.js를 이용하면 애니메이션을 쉽고 퀄리티 있게 구현 할 수 있습니다. animejs.com Sample1 클릭하면 이미지가 움직이는 예제입니다. Anime Click Sample2 움직이는 요소를 변수에 설정하는 예제입니다. Anime Click Sample3 여러개의 요소를 변수에 설정하는 예제입니다. Anime Anime Anime Click Sample4 CSS 속성을 적용한 예제입니다. Anime Click Sample5 CSS Transform 속성을 적용한 예제입니다. Anime Click Sample6 오브젝트 속성을 변경하는 예제입니다. {"prop":4,"prop2":"8%"} Click Sample7 오브젝트 속성을 ..

Parallax Style 속성 설명 Parallax Basic Parallax 사이트를 만들기 위한 기본 틀입니다. Parallax Basic - Menu Parallax 사이트의 기본 틀과 메뉴를 연동한 샘플한 입니다. Parallax - Dot Menu Parallax 사이트와 닷메뉴를 연동한 샘플입니다. Parallax - Dot Menu Style - Scale Parallax 사이트 닷메뉴 스타일 스케일을 이용한 샘플입니다. Parallax - Dot Menu Style - opacity Parallax 사이트 닷메뉴 스타일 opacity를 이용한 샘플입니다. Parallax - Dot Menu Style - box-shoadow Parallax 사이트 닷메뉴 스타일 box-shoadow를 이..

반응형 사이트를 만들 때 제일 많이 쓰는 기법이 컨텐츠 요소를 정 가운데 오게 하는 방법입니다. 이 방법에는 여러가지 방법이 있으며 각각의 장단점이 있습니다. 컨텐츠 요소를 가운데 오게 하는 방법에 대해서 정리해보겠습니다. 1. 인라인구조 가운데 정렬 : 가장 기본적인 방법이지만 이 방법은 한 줄(요소)일 경우에서만 해당이 됩니다. - 부모요소(인라인구조) : text-align : center; line-height: (height값과 동일하게) 2. 블록구조 가운데 정렬 : 가장 기본적인 방법이지만 이 방법은 한 줄(요소)일 경우에서만 해당이 됩니다. - 요소(블록구조) : margin:0 auto; width값 설정, line-height: (height값과 동일하게) 3. 요소의 성질을 table..

css를 통해서 글씨를 줄이거나 안보이게 하는 효과입니다. Sample1 한 줄 일경우 원하는 크기만큼 줄임효과를 보여줍니다. 한 줄 효과 문서에 대한 대체 링크를 설정합니다. 문서에 대한 저자 링크를 설정합니다. 문서에 대한 북마크 URL을 설정합니다. 문서에 대한 도움과 관련된 링크를 설정합니다. 문서에 대한 저작권과 관련된 링크를 설정합니다. 문서에 대한 다음 문서 링크를 제공합니다. 문서에 대한 링크를 사용하지 않을 때 설정합니다. 문서에 대한 대체 링크를 설정합니다. 문서에 대한 저자 링크를 설정합니다. 문서에 대한 북마크 URL을 설정합니다. 문서에 대한 도움과 관련된 링크를 설정합니다. 문서에 대한 저작권과 관련된 링크를 설정합니다. 문서에 대한 다음 문서 링크를 제공합니다. Sample2 ..

Parallax Style 종류 설명 Parallax Basic Parallax 기본 스타일입니다. Parallax Basic2 Parallax 메뉴 연동하기

Selectors 속성 설명 기본 선택자(Basic) * 전체 셀렉터는 전체 태그를 선택합니다. .class 클래스 셀렉터는 클래스 태그를 선택합니다. #id 아이디 셀렉터는 아이디 태그를 선택합니다. element 태그 셀렉터는 기본 태그를 선택합니다. element, element 다중 셀렉터는 여러가지 태그를 선택합니다. 계층 선택자(Hierarchy) Descendant Selector 자손 선택자 모든 자식을 선택합니다. Child Selector 자식 선택자는 바로 하위 자식만 선택합니다.(parent > child) Next Adjacent Selector 형제 선택자 다음 형제 태그를 선택합니다.(prev + next) Next Siblings Selector 형제들 선택자 다음 형제 모든..

Window Object Properties 속성 설명 closed window.closed는 브라우저 창이 닫혀 있는지 여부를 불린값으로 반환합니다. defaultStatus window.defaultStatus는 브라우저 창 상태 표시 줄의 기본 텍스트를 설정하거나 반환합니다. document document는 document 객체를 정의합니다. frameElement window.frameElement는 현재 브라우저 대신에 iframe 요소를 반환합니다. frames window.frames는 브라우저 사용된 프레임을 배열 형태로 설정합니다. history history는 history 객체를 정의합니다. innerWidth window.innerWidth는 브라우저 컨텐츠 영역의 가로 값을 반환..

HTML Question 글씨를 클릭하면 링크를 걸고 싶을 때 쓰는 태그는? 사이트의 기본 URL을 설정하고 싶을 때 쓰는 태그는? 짧은 글을 인용하고 싶을 때 쓰는 태그는? 긴 글을 인용하고 싶을 때 쓰는 태그는? 음성이나 분위기를 나타낼 때 쓰는 태그는? 기술적인 구문, 외국어, 사상, 생각, 선박이름 등을 나타낼 때 쓰는 태그는? 전문적인 용어나 학문적인 용어를 쓸 때 필요한 태그는? 작품의 제목을 정의할 때 쓰는 태그는? 생략된 글자가 있거나 약어가 필요할 때 쓰는 태그는? 저작권 또는 법적인 텍스트를 사용할 때 쓰는 태그는? 다른 사이트의 소스를 가져올 때 쓰는 태그는? 글씨를 굵게 표현하고 싶을 때 쓰는 태그는? 글씨를 강조하고 싶을 때 쓰는 태그는? 글씨의 중요성을 강조하고 싶을 때 쓰는 태..

CSS CSS(Cascading Style Sheets)은 HTML을 꾸며주는 스타일 시트입니다. 즉 웹 페이지를 꾸미고, 디자인 작업을 도와주는 언어입니다. CSS Syntax div { color : red; } CSS는 크게 선택자(seletor), 속성(property), 값(value)으로 구성되어 있습니다. 선택자(seletor) : 어떤 요소를 선택하기 위한 방법입니다. 속성(property) : 선택한 요소한테 속성을 줄 수 있습니다. 값(value) : 속성에 대한 값을 설정합니다. 기타 분류 HTML Description : HTML을 알파벳 순으로 정리 설명 HTML Element : HTML을 기능별로 정리 설명 CSS Description : CSS을 알파벳 순으로 정리 설명 CS..

HTML HTML(HyperText Markup Language)은 웹 페이지를 만들기 위한 언어입니다. HT - Hyper Text : 문서와 문서를 연결 M - Markup : 마크업, 태그 L - Language : 언어 즉 HTML이란? 문서와 문서로 연결된 태그 언어를 말합니다. 태그(Tag) 태그란 정보를 정의하는 방식을 정의합니다. 태그는 열린 태그()가 있습니다. 닫는 태그에는 "/" 있어야 합니다. 닫는 태그가 필요없는 태그도 있습니다. HTML5에서는 "/"가 생략이 가능합니다. 블록 요소/인라인 요소(Block/Inline) 블록요소는 박스, 인라인 요소는 텍스트를 의미합니다. 블록 엘리먼트(Block Element) 독립된 박스 영역으로, 한 줄에 하나에 블록 요소만 표현 할 수 있..

HTML 요소를 기능별로 정리하면 Main Root, Metadata, Content Sectioning, Text Content, Inline Text Semantics, Image and Multimedia, Embedded Content, Scripting, Demarcating Edits, Table Content, Forms, Interactive Elements, Obsolete and Deprecated Elements 같이 분류 할 수 있습니다. Main Root 요소 설명 버전 태그는 HTML 문서의 최상위 루트를 나타나태는 요소입니다. - Metadata 요소 설명 버전 태그는 문서의 모든 URL의 기본이 되는 기본 URL을 설정합니다. - 태그는 사이트의 헤더 요소들의 일반적인 정보를..

HTML 요소를 속성별로 정리한 태그입니다. Font 속성 설명 font font 속성은 폰트 스타일, 폰트 변형, 폰트 두께, 폰트 사이즈, 폰트 간격, 폰트 종류를 설정합니다. font-family font-family 속성은 폰트 종류를 설정합니다. font-size font-size 속성은 폰트 사이즈 속성을 설정합니다. font-size-adjust font-size-adjust 속성은 소문자를 기준으로 폰트 크기를 설정합니다. font-stretch font-stretch 속성은 텍스트의 크기를 정의합니다. font-style font-style 속성은 폰트의 스타일을 정의합니다. font-variant font-variant 속성은 글꼴을 변형을 정의합니다. font-weight font-w..

CSS는 선택자를 통해 요소를 선택할 수 있습니다. CSS Selector 태그 유형 설명 버전 . .class {color:#fff;} 클래스 선택자 CSS1 # .id {color:#fff;} 아이디 선택자 CSS1 * * {color:#fff;} 전체 선택자 CSS2 element p {color:#fff;} 요소 선택자 CSS1 element, element p, div {color:#fff;} 그룹 선택자 CSS1 element element div p {color:#fff;} 후손 선택자 CSS1 element > element div > p {color:#fff;} 이웃 선택자 CSS2 element + element div > p {color:#fff;} 자식 선택자 CSS2 element..

CSS는 길이를 표현하기 위한 다양한 단위들이 있습니다. Definition 상대단위 (px, em, ex, %, rem, vw, vh, vmin, vmax) : 어떤 기준을 통해 상대적으로 변할 수 있는 단위이며, 다양한 매체에 쓰기 적절합니다. 절대단위 (in, cm, mm, pt, pc) : 정확한 기준에 의해 고정된 단위이며, 출력 매체에 쓰기 적절합니다. CSS Units 단위 설명 px 모니터의 1dot이 1pixel을 의미하며, pixel은 해상도에 따라서 상대적인 크기를 갖습니다. em 부모 요소의 대문자 너비를 기준으로 상대적인 값을 갖습니다. ex 부모 요소의 소문자 너비를 기준으로 상대적인 값을 갖습니다. % 부모 요소의 길이를 기준으로 상대적인 값(%)을 갖습니다. rem 루트(ro..

Content Element는 HTML을 Meta, Self-closing, Block, Inline으로 분류한 요소입니다. Meta는 정보를 표현하는 메타데이터를 의미하고, Self-closing는 닫는 태그가 없는 태그를 말하며, Block은 박스 구조의 HTML 요소를 말하며, inline은 텍스트 성질의 HTML을 말합니다. HTML 마크업에 있어 Block과 Inline만 구별해도 코딩이 훨씬 더 수월해집니다. 속성 설명 Meta Closing Inline Block 태그는 하이퍼 링크를 정의합니다. meta closing inline block 태그는 생략된 글자나 머리글자를 표시하는데 사용합니다. meta closing inline block 태그는 생략된 글자나 약어를 표시하는데 사용합니다..

Event 속성은 자바스크립의 이벤트 기능과 같은 기능으로 HTML에도 이벤트 기능이 추가되었습니다. Window Event Attributes 속성 값(예) 설명 버전 onafterprint onafterprint="function()" 문서가 인쇄된 후 스크립 이벤트를 설정합니다. onbeforeprint onbeforeprint="function()" 문서가 인쇄되기 전에 스크립 이벤트를 설정합니다. onbeforeunload onbeforeunload="function()" 사용자가 현재 페이지에서 떠나기 전에 이벤트를 설정합니다. onerror onerror="function()" 페이지가 오류 났을 때 이벤트를 설정합니다. onhashchange onhashchange="function()" ..

Global 속성은 모든 태그에 적용이 가능한 속성입니다. Property 속성 값(예) 설명 버전 accesskey accesskey="h" 요소를 활성화하거나 포커스 할 경우 단축키를 설정합니다. - class class="name" 요소의 클래스 이름을 설정합니다. - contenteditable contenteditable="true" 요소 컨텐츠의 편집 여부를 설정합니다. contextmenu contextmenu="menu_id" 요소 컨텐츠의 메뉴를 설정합니다. 마우스 오른쪽 클릭하면 나타납니다. data-* data-global="text" 요소의 개인적인 속성을 설정합니다. dir dir="rtl" 요소 컨텐츠의 방향을 설정합니다. - draggable draggable="true" 요소..

HTML 태그는 컨텐츠의 종류에 따라 정의 할 수 있습니다. 이러한 요소는 콘텐츠 모델로 정의 할 수 있습니다. 컨텐츠 요소는 Metadata Content, Flow Content, Section Conetnt, Heading Content, Phrasing Content, Embedded Content, Interactive Content, Palpable Content 등으로 분류됩니다. 메타데이터 콘텐츠 (Metadata Content) 웹 문서와 관련된 정보를 표현하는 콘텐츠와 다른 문서와의 관계를 유지하는 콘텐츠입니다. 요소 설명 태그는 문서의 모든 URL의 기본이 되는 기본 URL을 설정합니다. 태그는 사용자가 호출 할 수 있는 명렁어를 설정합니다. 태그는 문서와 외부 파일 연결 할 때 설정..

CSS 호환성을 확인합니다. 속성 6 7 8 9 10 11 버전 align-content 3 align-items 3 all 3 animation 3 animation-delay 3 animation-direction 3 animation-duration 3 animation-fill-mode 3 animation-iteration-count 3 animation-name 3 animation-play-state 3 animation-timing-function 3 backface-visibility 3 background 1 background-attachment 1 background-blend-mode 3 background-clip 3 background-color 1 background-imag..

CSS를 알파벳순으로 정리한 태그입니다. 속성 설명 align-content align-content 속성은 콘텐츠의 상하 관계 정렬 상태를 정의합니다. align-items align-items 속성은 콘텐츠 내부의 정렬 상태를 정의합니다. align-self align-self 속성은 콘텐츠의 정렬 상태를 정의합니다. all all 속성은 요소의 속성을 초기화 또는 상속을 설정합니다. animation animation 속성은 움직임을 표현합니다. animation-delay animation-delay 속성은 요소가 로드된 후 애니메이션이 시작될 때 까지의 시간을 나타냅니다. animation-direction animation-direction 애니메이션 움직임 방향을 설정합니다. animatio..

HTML 요소를 알파벳순으로 정리한 태그입니다. 속성 설명 태그는 하이퍼 링크를 정의합니다. 태그는 생략된 글자나 머리글자를 표시하는데 사용합니다. 태그는 생략된 글자나 약어를 표시하는데 사용합니다. 태그는 페이지의 연락처 정보를 정의하는데 사용합니다. 태그는 애플랫 요소를 정의합니다. 태그는 이미지 맵의 영역을 정의합니다. 태그는 문서내에 독립적인 컨텐츠를 정의합니다. 태그는 문서내에 사이드 컨텐츠를 정의합니다. 태그는 오디오 파일을 정의합니다. 태그는 글씨를 두껍게 표현할 때 사용합니다. 태그는 문서의 모든 URL의 기본이 되는 기본 URL을 설정합니다. 태그는 문서의 기본 폰트, 사이즈, 종류를 설정합니다. 태그는 텍스트의 출력 방향을 브라우저가 판단해 표현합니다. 태그는 텍스트의 방향을 설정합니다..