투케이2K

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : javascript [소스코드] ​ [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window onload : 웹 브라우저 로딩 완료 상태를 나타냅니다 2. new Array : 배열 형태로 데이터를 저장합니다 3. new Object : 오브젝트 형태로 데이터를 저장합니다 (json 가능) 4. findIndex : 찾으려는 데이터를 포함하고 있는 인덱스 값을 반환합니다 (0부터 시작 / 없으면 -1값) */

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스코드] ​ [text-shadow: 1px 1px 1px #000;] text-shadow 를 사용해서 텍스트 글자에 그림자 표과 적용 실시 [text-shadow: 2px 2px 2px #000;] text-shadow 를 사용해서 텍스트 글자에 그림자 표과 적용 실시 [text-shadow: 2px 2px 5px #000;] text-shadow 를 사용해서 텍스트 글자에 그림자 표과 적용 실시 [결과 출력] ​ [요약 설명] ​ ​ ​

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스코드] ​ [p 태그 : letter-spacing: 10px;] letter-spacing : 텍스트 자간 (가로 간격) 사이즈를 설정할 수 있습니다 [p 태그 : letter-spacing: 5px;] letter-spacing : 텍스트 자간 (가로 간격) 사이즈를 설정할 수 있습니다 [p 태그 : letter-spacing: 0px;] letter-spacing : 텍스트 자간 (가로 간격) 사이즈를 설정할 수 있습니다 [p 태그 : letter-spacing: -1px;] letter-spacing : 텍스트 자간 (가로 간격) 사이즈를 설정할 수 있습니다 [결과 출력] ​ [요약 설명] ..

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스코드] ​ [div : height:10%; display: block; overflow: auto;] [p : display: table-cell;] 부모 div 스타일 height 지정 및 display block 설정, overflow 길이 초과 auto 처리 실시 자식 p 태그 스타일 display: table-cell; 처리 실시 [결과 출력] ​ [요약 설명] ​ ​ ​

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스코드] ​ [div : height:3%; display:table; table-layout:fixed;] [p : overflow: hidden; text-overflow: ellipsis; white-space: nowrap;] 부모 div 스타일 height 지정 및 텍스트 영역 초과시 히든 처리 실시 [div : display:table; table-layout:fixed;] [p : 텍스트 영역 초과 시 히든 처리 않함] 부모 div 스타일 height 지정 없음. p 태그 텍스트 글자 수에 맞춰서 자동으로 div height 영역 높이 조절 [결과 출력] ​ [요약 설명] ​ ​ ​

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스코드] ​ [vertical-align: top] [text-align: center] p 태그 텍스트 vertical-align: top; 속성 값은 수직 (세로) 방향 기준으로 위쪽에 정렬을 실시합니다. p 태그 text-align: center; 속성 값은 수평 (가로) 방향 기준으로 텍스트 중앙 정렬을 실시합니다 [vertical-align: middle] [text-align: center] p 태그 텍스트 vertical-align: middle; 속성 값은 수직 (세로) 방향 기준으로 중앙에 정렬을 실시합니다. p 태그 text-align: center; 속성 값은 수평 (가로) 방향 ..

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스코드] ​ [text-align: left] [line-height: 20px] p 태그 텍스트 text-align: left 속성 값은 수평 방향 기준으로 왼쪽으로 정렬을 실시합니다. p 태그 line-height: 20px; 속성 값은 수직 방향 기준으로 줄 간격 높이를 설정 합니다 [text-align: left] [line-height: 40px] p 태그 텍스트 text-align: left 속성 값은 수평 방향 기준으로 왼쪽으로 정렬을 실시합니다. p 태그 line-height: 40px; 속성 값은 수직 방향 기준으로 줄 간격 높이를 설정 합니다 [text-align: left] [pa..

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스코드] ​ [결과 출력] ​ [요약 설명] ​

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스코드] ​ [text-align: left] p 태그 텍스트 text-align: left 속성 값은 수평 방향 기준으로 왼쪽으로 정렬을 실시합니다. p 태그 vertical-align: middle; 속성 값은 수직 방향 기준으로 중앙 정렬을 실시합니다. 텍스트를 히든 처리 안하고 그냥 표시할 경우는 table-layout: fixed 설정을 하면 안됩니다. [text-align: right] p 태그 텍스트 text-align: right 속성 값은 수평 방향 기준으로 오른쪽으로 정렬을 실시합니다. p 태그 vertical-align: middle; 속성 값은 수직 방향 기준으로 중앙 정렬을 실..

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스코드] ​ TEST 20px; TEST 10px; TEST 8px; [결과 출력] ​ [요약 설명] ​ ​ ​

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스코드] ​ [결과 출력] ​ [요약 설명] ​

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : jquery [소스 코드] ​ [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window onload : 웹 브라우저 로딩 완료 상태를 나타냅니다 2. text() : 선택한 요소의 텍스트 내용을 설정하거나 반환합니다 3. html() : 선택한 요소(HTML 마크업 포함)의 내용을 설정하거나 반환합니다 4. val() : 양식 필드의 값을 설정하거나 반환합니다 */

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스코드] ​ hello hello hello [결과 출력] ​ [요약 설명] ​

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [요약 스크립트 소스코드] ​ /* [페이지 생성 부분] */ var pageName_Array = new Array(); // 생성된 페이지 이름 저장 배열 function createContentLayOut() { console.log(""); console.log("[createContentLayOut] : [start]"); console.log(""); // [for 반복문을 수행하면서 div 생성 실시] for(var i=1; i

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ [결과 출력] ​ [이미지 파일 첨부] ​ ​

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ 1 2 3 4 5 [결과 출력] ​

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [style 소스 코드] ​ ​ ​ [body 소스 코드] ALL FONT BOLD FONT Italic FONT [폰트 저장 경로] ​ [결과 출력] ​ [요약 설명] ​ [font-face 및 font-family 추가 설명] 1. font-face : 폰트 설정 2. src : 사용할 폰트 경로를 지정할 때 사용 3. format : 폰트 확장자명 타입 지정 시 사용 (.ttf : truetype / .ttf .otf : opentype) (.svg : svg / .woff : woff) 4. font-family 글꼴 유형 (sans-serif : 삐침 없고 굵기가 일정 고딕계열) (serif :..

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ ​ [결과 출력] ​

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [css 소스 코드] /* [html, body 영역 스타일 지정] */ html, body { width : 100%; height : 100%; margin : 0; padding : 0; border : none; /* [모바일 스크롤 시 부드럽게 처리] */ overflow:scroll-y; -webkit-overflow-scrolling:touch; } /* [body 스크롤바 메인 스타일 지정] */ body::-webkit-scrollbar { width: 0px; background-color: #c1c1c1; } /* [body 스크롤바 thumb 스타일 지정] */ body::-webk..

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ /* [html, body 영역 스타일 지정] */ html, body { width : 100%; height : 100%; margin : 0; padding : 0; border : none; /* [모바일 스크롤 시 부드럽게 처리] */ overflow:scroll-y; -webkit-overflow-scrolling:touch; } /* [body 스크롤바 메인 스타일 지정] */ body::-webkit-scrollbar { width: 0px; background-color: #c1c1c1; } /* [body 스크롤바 thumb 스타일 지정] */ body::-webkit..