목록display (15)

투케이2K

310. (javaScript) [자바스크립트] display none , block 사용해 컨테이너 표시 활성 및 비활성 처리

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : JavaScript [소스 코드] // [html 최초 로드 및 이벤트 상시 대기 실시] window.onload = async function() { console.log(""); console.log("========================================="); console.log("[window onload] : [start]"); console.log("========================================="); console.log(""); // [객체에 선언된 ID 지정] var container = document.getElementById("image_container"); // [설정된..
JavaScript 2023. 7. 24. 19:43
190. (ios/swift) touchesBegan , touchesMoved , touchesEnded 사용해 디스플레이 터치 이벤트 감지 실시

[개발 환경 설정] ​ 개발 툴 : XCODE 개발 언어 : SWIFT [소스 코드] ​ // MARK: - [사용자 터치 이벤트 발생 확인 실시] var touchCount = 0 override func touchesBegan(_ touches: Set, with event: UIEvent?) { // [터치 이벤트 값 초기화 실시] self.touchCount = 1 // [로그 출력 실시] print("") print("===============================") print("[ViewController >> touchesBegan() :: 사용자 디스플레이 터치 이벤트 시작]") print("[touchCount :: \(self.touchCount)]") print("=====..
IOS 2022. 9. 14. 17:02
41. (Objective-C/objc) AppDelegate 디바이스 화면 세로 방향 고정 처리 실시 - supportedInterfaceOrientationsForWindow

[개발 환경 설정] ​ 개발 툴 : XCODE 개발 언어 : OBJECTIVE-C [소스 코드] ​ // MARK: - [디바이스 세로 화면 고정 처리] -(NSUInteger)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window { printf("\n"); printf("==================================== \n"); printf("[HelloWorldAppDelegate >> supportedInterfaceOrientationsForWindow() :: 디바이스 화면 세로 모드 고정 실시] \n"); printf("==================..
Objective-C 2022. 7. 5. 11:00
80. (html/css/javascript/jquery) p 태그 텍스트 글자 수가 부모 div 영역 초과 시 overflow 스크롤 처리 실시

[개발 환경 설정] ​ 개발 툴 : 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; 처리 실시 [결과 출력] ​ [요약 설명] ​ ​ ​
FrontEnd 2021. 8. 23. 17:58
54. (html/css/javascript/jquery) 부트스트랩 (bootstrap) h 태그에 display 속성 사용해 제목 표시 실시

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ Display 1 Display 2 Display 3 Display 4 [결과 출력] ​ [요약 설명] ​ 1. display : 제목을 표시 할 때 자주 사용힙니다 2. display 속성 값에 따라서 크기를 설정할 수 있습니다 3. 부트스트랩 공식 사이트 : https://getbootstrap.com/docs/4.1/content/typography/ Typography Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more...
FrontEnd 2021. 7. 20. 09:05
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
11. (jquery/제이쿼리) Jquery 특정 객체 slideDown , slideUp 사용해 객체 펼침 및 접기 애니메이션 처리 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 웹브라우저 로딩 완료 상태를 정의합니다 (로딩 완료 후 상시 대기) 2. $(객체).cs..
Jquery 2021. 6. 18. 08:12
10. (jquery/제이쿼리) Jquery 특정 객체 fadeIn , fadeOut 사용해 객체 표시 및 숨김 애니메이션 처리 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 웹브라우저 로딩 완료 상태를 정의합니다 (로딩 완료 후 상시 대기) 2. $(객체)...
Jquery 2021. 6. 18. 08:00
9. (jquery/제이쿼리) Jquery 특정 객체 show , hide 사용해 객체 표시 및 숨김 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 웹브라우저 로딩 완료 상태를 정의합니다 (로딩 완료 후 상시 대기) 2. $(객체)...
Jquery 2021. 6. 18. 07:47
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
8. (html/css/javascript/jquery) display table 사용해 p태그 텍스트 수평, 수직 정렬 및 vw , vh 사용해 폰트 사이즈 반응형 크기 지정

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] 안녕하십니까! 만나서반갑습니다 /* =========================== */ [결과 출력] ​ ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 2. width : 가로 크기 지정 3. height : 세로 크기 지정..
FrontEnd 2021. 5. 25. 15:56
7. (html/css/javascript/jquery) display block 사용해 div 레이아웃 세로 정렬 수행 실시 - id 값 지정 사용

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 2. width : 가로 크기 지정 3. height : 세로 크기 지정 4. margin : 마진 (외부..
FrontEnd 2021. 5. 25. 14:11
5. (html/css/javascript/jquery) display flex 사용해 div 레이아웃 세로 정렬 수행 실시 - id 값 지정 사용

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 2. width : 가로 크기 지정 3. height : 세로 크기 지정 4. margin : 마진 (외부..
FrontEnd 2021. 5. 25. 11:30
4. (html/css/javascript/jquery) nth-child 자식 지정 방식 사용해 display inline-block 가로 정렬 수행 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 2. width : 가로 크기 지정 3. height : 세로 크기 지정 4. margin : 마진 (외부..
FrontEnd 2021. 5. 25. 11:11
3. (html/css/javascript/jquery) display inline-block 사용해 div 레이아웃 가로 정렬 수행 실시 - id 값 지정 사용

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