목록HTML (107)

투케이2K

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
43. (html/css/javascript/jquery) input file 및 FileReader 사용해 이미지 사진 업로드 수행 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] 업로드 초기화 /* =========================== */ [결과 출력] ​ ​ ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 웹페이지 로드 완료 상태를 나타냅니다 2. document.getElementById : 특정 객체 id..
FrontEnd 2021. 7. 14. 10:29
42. (html/css/javascript/jquery) viewport media 뷰포트 미디어 쿼리 반응형 기본 코드 작성

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ [결과 출력] ​ ​[브라우저] ​ ​ ​[모바일] /* =========================== */ ​ /* =========================== */ [요약 설명] ​ 1. viewport : 메타 태그로 반응형 뷰 포트 설정 실시 2. media : 실시간 반응형 뷰 포트 디스플레이 화면 크기 확인 3. min-wi..
FrontEnd 2021. 7. 12. 08:27
1. (spring/스프링) inteli j 사용해 html + spring 개발 환경 구축 및 oracle db 연결 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : inteli j 개발 언어 : spring /* =========================== */ ​ /* =========================== */ [방법 설명] ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ /* =========================== */ ​ /* =========================== */ [소스 코드] [application.yml >> DB 접속 경로, 서버 포트] spring: devtools: livereload: enabled: true datasource: driver-class-name: oracle.jdbc.OracleDriver url..
Spring 2021. 7. 5. 19:40
41. (html/css/javascript/jquery) body overflow , touchmove 사용해 스크롤 (scroll) 막기 및 허용 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. overflow : 스크롤 여부를 결정하는 css 속성입니다 2. bind : 이벤트 처리를 수행하는 메소드입니다 3. 모바일 터치 이벤트 동작 시 start, move 쪽에서 body 스크롤 막고, end 상태일 때 body 스크롤..
FrontEnd 2021. 7. 2. 08:05
40. (html/css/javascript/jquery) keyboard 키보드 활성 시 ui 밀림 , 줄어듬 현상 방지 및 zoom in 줌 효과 제거 방법

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 웹 브라우저 로딩 완료 상태를 확인합니다 2. window.g..
FrontEnd 2021. 7. 1. 16:25
39. (html/css/javascript/jquery) keyframes 사용해 css 속성 조작해 애니메이션 (animation) 동작 수행 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] one two three four /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [CSS 요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 ..
FrontEnd 2021. 6. 28. 08:56
38. (html/css/javascript/jquery) 반응형 tab 탭 화면 기능 구현 - display 사용

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] ONE TWO THREE FOUR /* =========================== */ ​ /* =========================== */ [결과 출력] ​ ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [CSS 요소 설명] 1. font-family : 폰트 표시 형태 스타일 지..
FrontEnd 2021. 6. 25. 08:23
37. (html/css/javascript/jquery) class 클래스 설명 및 input text 기본 구현, value 변경 및 확인

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] 텍스트 확인 텍스트 변경 /* =========================== */ ​ /* =========================== */ [결과 출력] ​ ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [CSS 요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 2. ..
FrontEnd 2021. 6. 22. 17:07
8. html input 주요 태그 모음 및 설명 사이트

/* =========================== */ [ 참고 사이트 ] /* =========================== */ ​ /* =========================== */ [사이트 주소] ​ http://tcpschool.com/html-tag-attrs/input-accept 코딩교육 티씨피스쿨 4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등 tcpschool.com /* =========================== */
참고 사이트 2021. 6. 22. 16:57
36. (html/css/javascript/jquery) box shadow 사용해 div 영역에 그림자 표시 수행 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] one two three four /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [CSS 요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 ..
FrontEnd 2021. 6. 22. 09:47
35. (html/css/javascript/jquery) canvas 캔버스 사용해 pc (피씨), mobile (모바일) 에서 전자 서명 기능 구현 - mouse , touch

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] URL 저장 그림 저장 지우기 /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [CSS 요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 2...
FrontEnd 2021. 6. 19. 09:45
34. (html/css/javascript/jquery) qrcode 라이브러리 사용해 QR 코드 생성 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] QR 생성 /* =========================== */ ​ /* =========================== */ [결과 출력] ​ ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [CSS 요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 2. width : ..
FrontEnd 2021. 6. 12. 19:11
33. (html/css/javascript/jquery) a 태그 하이퍼링크 기능 사용해 브라우저, 파일, 태그, 함수 이동 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] 브라우저 이동 파일 이동 태그 이동 함수 호출 /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [CSS 요소 설명] 1. font-family : 폰트 표시 형태 ..
FrontEnd 2021. 6. 11. 15:23
32. (html/css/javascript/jquery) font face 사용해 내부 저장된 파일 폰트 적용 실시 및 font family 속성 설명

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ [적용 (전)] ​ [적용 (후)] ​ [저장 경로] /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [CSS 요소 설명] 1. font-family : 폰트 표시..
FrontEnd 2021. 6. 11. 14:25
31. (html/css/javascript/jquery) 커스텀 팝업창 활성 및 전체 배경색 투명도 조절 실시 - display , z index , position fixed

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] 팝업창 호출 /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [CSS 요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 2. width : 가..
FrontEnd 2021. 6. 10. 14:08
30. (html/css/javascript/jquery) border radius 사용해 div 테두리 둥글게 만들기, 및 원형으로 만들기

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] #btn_container { width : 30%; height : 10%; margin : 0 auto; padding : 0; border : none; background-color : #026f2a; /* 컨테이너 배치 정렬 실시 */ float : top; position : relative; top : 15%; left : 0%; /* div 테두리 영역 둥글게 설정 : 각 모서리 모두 동일..
FrontEnd 2021. 6. 9. 17:57
29. (html/css/javascript/jquery) 텍스트 text 길이 초과 시 생략 처리 - table layout, white space, text overflow

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] TEST TEST TEST TEST /* =========================== */ ​ /* =========================== */ [결과 출력] ​ ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [CSS 요소 설명] 1. font-family : 폰트 표시 형태 스타일 ..
FrontEnd 2021. 6. 9. 15:02
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 2 3 4 5 6 Next