목록div (6)

투케이2K

79. (html/css/javascript/jquery) p 태그 텍스트 글자 수에 맞춰서 div height 높이 자동 조절 실시

[개발 환경 설정] ​ 개발 툴 : 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 영역 높이 조절 [결과 출력] ​ [요약 설명] ​ ​ ​
FrontEnd 2021. 8. 21. 15:50
71. (html/css/javascript/jquery) 동적으로 콘텐츠 div 레이아웃 생성 실시 페이지 page 이동 처리 실시

[개발 환경 설정] ​ 개발 툴 : 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
FrontEnd 2021. 8. 5. 10:10
44. (html/css/javascript/jquery) 부트스트랩 (bootstrap) 사용해 button , div 스타일 css 적용 실시 및 다중 클래스 적용 설명

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] Basic Primary Secondary Success Info Warning Danger Dark Light Link .bg-primary .bg-secondary .bg-success .bg-danger .bg-warning .bg-info .bg-light .bg-dark .bg-white [결과 출력] [요약 설명] ​ 1. 부트스트랩은 css 디자인을 편하게 해주는 프레임워크입니다 2. 부트스트랩은 태그 (div, button ...) 내에서 class를 사용해서 css 디자인을 적용시킵니다 3. 다중 클래스 지정 : class="클래스 클래스" 방식으로 다중으로 클래스를 지..
FrontEnd 2021. 7. 16. 15:59
37. (javascript/자바스크립트) document createElement 사용해 동적 div 레이아웃 생성

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. document.createElement : 특정 태그를 생성합니다 2. setAttribute : 특정 태그..
JavaScript 2021. 6. 9. 07:41
28. (html/css/javascript/jquery) 동적으로 div 레이아웃 생성 및 스타일 속성 지정 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] 동적 추가 /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 2. width : 가로 크기 ..
FrontEnd 2021. 6. 9. 07:37
27. (html/css/javascript/jquery) position , float 사용해 div 정렬 및 p 태그 텍스트 중앙 정렬 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] ONE TWO /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 2. width : 가로 크..
FrontEnd 2021. 6. 6. 11:31
Prev 1 Next