목록CSS (96)

투케이2K

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
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
2. (jquery/제이쿼리) Jquery 사용해 브라우저 사이즈 확인, 스타일 (style) 속성 값 확인 및 변경, 텍스트 (text) 값 확인 및 변경

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요약 설명] 1. 기본 문법 : $(선택자).동작함수(); 2. css : 자바스크립트에서 css 속성을 확인 및 변경할 때 사용합니다 3...
Jquery 2021. 6. 8. 10:56
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
26. (html/css/javascript/jquery) 드래그 앤 드롭 (drag and drop) 기능을 사용해 div 속성값 교체 실시 - 브라우저, 모바일

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /*=================== [브라우저 단 처리] ===================*/ /* 드랍할 위치 태그에 다른 이벤트가 발생하는 것을 방지 */ function allowDrop(evt) { evt.preventDefault(); }; /* 드래그 시 이벤트 함수 */ function drag(evt) { /* 선택한 div id 값 확인 */ dragId = evt.target.id..
FrontEnd 2021. 6. 4. 10:56
25. (html/css/javascript/jquery) onclick location href 사용해 특정 태그, url, 파일 이동 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​
FrontEnd 2021. 6. 2. 17:44
24. (html/css/javascript/jquery) highlight color 사용해 클릭 이벤트 발생 시 파란색 영역 테두리 박스 표시 하이라이트 제거 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [CSS 소스 코드] /* 부모 div 스타일 지정 */ #static_header_container { width : 100%; height : 100%; margin : 0 auto; padding : 0; border : none; background-color : #92b9d6; /* 컨테이너 배치 정렬 실시 */ float : top; position : relative; top : 4%; left : 0%;..
FrontEnd 2021. 6. 2. 13:20
23. (html/css/javascript/jquery) 배경 색상 그라데이션 적용 실시 - background linear gradient

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 2. width : 가로 크기 지정 3. ..
FrontEnd 2021. 6. 1. 16:59
22. (html/css/javascript/jquery) scrollbar 사용해 웹 브라우저 스크롤 바 스타일 설정 실시 - 스크롤 바 히든 및 정상 스크롤 동작 처리

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 2. width : 가로 크기 지정 3. ..
FrontEnd 2021. 6. 1. 16:36
21. (html/css/javascript/jquery) 자바스크립트 사용해 p 태그 텍스트 확인 및 변경 , css style 속성 변경 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] 안녕하세요 /* =========================== */ ​ /* =========================== */ [결과 출력] ​ [JS 호출 (전)]​ ​ [JS 호출 (후)]​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [CSS 요소 설명] 1. font-family : 폰..
FrontEnd 2021. 6. 1. 10:29
20. (html/css/javascript/jquery) 마우스 hover 올림 , 마우스 커서 cursor 스타일 정의 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 2. width : 가로 크기 지정 3. ..
FrontEnd 2021. 6. 1. 09:38
19. (html/css/javascript/jquery) 자바스크립트 function 함수 , window.onload 사용해 클릭 이벤트 정의 실시

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