투케이2K

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

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : jquery [소스 코드] ​ [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window onload : 웹 브라우저 로딩 완료 상태를 나타냅니다 2. css : jquery 사용해 css 속성을 변경합니다 3. slideUp : 슬라이드 업 애니메이션을 적용합니다 4. slideDown : 슬라이드 다운 애니메이션을 적용합니다 5. fadeOut : 서서히 사라지는 애니메이션을 적용합니다 6. fadeIn : 서서히 나타나는 애니메이션을 적용합니다 */

[개발 환경 설정] ​ 개발 툴 : 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 파일 생성 및 ..

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [css 파일 생성 및 호출 방법] ​ ​ ​ ​ ​ ​ ​ ​ ​ [js 파일 생성 및 호출 방법] ​ ​ ​ ​ ​ ​ ​ ​ ​ [소스 코드 : head 태그 내부 삽입] ​

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ /* [공통 : 폰트 글씨체 변경 실시] */ /* 1. 문법 : font-family: font [폰트이름] 또는 [글꼴 유형] | initial [기본값 설정] | inherit [부모 요소의 속성값을 상속받음] 2. 폰트 이름 : 글꼴 이름에 띄어쓰기가 있으면 작은 따옴표 또는 큰 따옴표로 감쌉니다 3. 글꼴 유형 : serif = 삐침 있는 명조계열의 글꼴 / sans-serif = 삐침 없고 굵기가 일정한 고딕계열의 글꼴 monospace : 글자 폭과 간격이 일정한 글꼴 / cursive : 손으로 쓴 것 같은 필기계열의 글꼴 fantasy : 화려한 글꼴 4. 예시 - 독자..

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ 사용자 회원가입 ID Password 영문과 숫자를 조합해서 비밀번호를 입력해주세요 Email @ 주소까지 모두 입력해주세요 ex : test123@test.com 개인 정보 동의 With supporting text below as a natural lead-in to additional content. 회원 가입 [결과 출력] ​ [요약 설명] ​ 1. Forms : 컨트롤 요소(control element)를 그룹 지어 양식 레이아웃을 만들 수 있습니다 2. 부트스트랩 공식 사이트 : https://getbootstrap.com/docs/4.1/components/forms/

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ Button with data-target Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Dropdown button Action Another action Something else here [결과 출력] ​ [요약 설명] ​ ​

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ Card Header and footer Special title With supporting text below as a natural lead-in to additional content. 자세히 보기 Special title With supporting text below as a natural lead-in to additional content. 자세히 보기 Special title With supporting text below as a natural lead-in to additional content. 자세히 보기 [결과 출력] ​ [요약 설명] ​ 1. card : ..

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ Left Middle Right Top Middle Bottom [결과 출력] ​ [요약 설명] ​ 1. btn-group : Bootstrap에서 그룹 버튼을 만들 수 있습니다, 기본 가로 2. btn-group-vertical : 세로 방향으로 그룹 버튼을 생성합니다 3. 부트스트랩 공식 사이트 : https://getbootstrap.com/docs/4.1/components/button-group/

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ Link Button Large button Large button Small button Small button Block level button Block level button [결과 출력] ​ [요약 설명] ​ 1. btn : Bootstrap의 사용자 정의 버튼 스타일을 사용할 수 있습니다 2. btn-크기 : 버튼 크기를 지정할 수 있습니다 3. 부트스트랩 공식 사이트 : https://getbootstrap.com/docs/4.1/components/buttons/ Buttons Use Bootstrap’s custom button styles for actions in..

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ Well done! Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content. Whenever you need to, be sure to use margin utilities to keep things nice and tidy. Well done! Aww yeah, you successfully read t..

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ 번호 이름 나이 [결과 출력] ​ [요약 설명] ​ 1. table : 테이블 속성을 설정합니다 2. thead-dark : 테이블 헤더 속성을 설정합니다 3. dyn_tbody : 동적으로 테이블 데이터를 생성합니다 (자바스크립트 확인 필요) 4. Pagination : 쪽수 매기기 의미로 여러 페이지에 걸쳐 있음을 나타냅니다 5. justify-content : 페이징 레이아웃을 중앙 정렬을 실시합니다 6. 부트스트랩 공식 사이트 : https://getbootstrap.com/docs/4.1/content/typography/ Typography Documentation and..