목록HTML (105)
투케이2K
[개발 환경 설정] 개발 툴 : 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..
[개발 환경 설정] 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [외부 css 저장 폴더 경로] [소스 코드] [1] 이 브라우저 사용을 만족하십니까? 매우 만족 만족 보통 불만족 매우 불만족 [결과 출력] [html , css 분리 코드 파일 첨부] [전체 통합 코드 파일 첨부] [외부 css , js 파일 적용 참고] https://blog.naver.com/kkh0977/222449805186 63. (html/css/javascript/jquery) 외부 css , js 파일 생성 및 호출 방법 정의 - link , script [개발 환경 설정] 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [css 파일 생성 및 ..