목록FrontEnd (106)
투케이2K
[ 개발 환경 설정 ] 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] pt-4 p-5 m-5, pb-5 [결과 출력] [요약 설명] 1. spacing : 박스모델에 필요한 margin, padding 을 지정하기 위한 유틸리티 클래스 입니다 2. margin, padding 은 각각 m , p 를 선언해서 사용합니다 3. sides : 상하좌우를 지정하며, 비워둘경우 4방향 모두를 지정합니다 (top(t),bottom(b), left(l), right(r), x, y) 4. size : 0~5, auto 를 사용하며, 3을 기준으로 부트스트랩의 기본 설정값의 0.25, 0.5, 1.5, 3 배율을 크기를 가지게 됩니다 (rem) 5. rem ..
[ 개발 환경 설정 ] 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] Width 25% Width 50% Width 75% Width 100% Width auto [결과 출력] [요약 설명] 1. w-25 : 가로 크기 25% 를 의미합니다 (자동 크기 부여) 2. p-3 : p는 패딩의미이며, 크기는 0, 1, 2, 3, 4, 5, auto 가 있습니다 3. bg-info : 백그라운드 속성을 지정합니다
[ 개발 환경 설정 ] 개발 툴 : 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="클래스 클래스" 방식으로 다중으로 클래스를 지..
/* =========================== */ [ 개발 환경 설정 ] 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ /* =========================== */ [소스 코드] 업로드 초기화 /* =========================== */ [결과 출력] /* =========================== */ /* =========================== */ [요약 설명] /* [JS 요약 설명] 1. window.onload : 웹페이지 로드 완료 상태를 나타냅니다 2. document.getElementById : 특정 객체 id..
/* =========================== */ [ 개발 환경 설정 ] 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ /* =========================== */ [소스 코드] /* =========================== */ [결과 출력] [브라우저] [모바일] /* =========================== */ /* =========================== */ [요약 설명] 1. viewport : 메타 태그로 반응형 뷰 포트 설정 실시 2. media : 실시간 반응형 뷰 포트 디스플레이 화면 크기 확인 3. min-wi..
/* =========================== */ [ 개발 환경 설정 ] 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ /* =========================== */ [소스 코드] /* =========================== */ /* =========================== */ [요약 설명] /* [JS 요약 설명] 1. overflow : 스크롤 여부를 결정하는 css 속성입니다 2. bind : 이벤트 처리를 수행하는 메소드입니다 3. 모바일 터치 이벤트 동작 시 start, move 쪽에서 body 스크롤 막고, end 상태일 때 body 스크롤..
/* =========================== */ [ 개발 환경 설정 ] 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ /* =========================== */ [소스 코드] /* =========================== */ /* =========================== */ [결과 출력] /* =========================== */ /* =========================== */ [요약 설명] /* [JS 요약 설명] 1. window.onload : 웹 브라우저 로딩 완료 상태를 확인합니다 2. window.g..
/* =========================== */ [ 개발 환경 설정 ] 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ /* =========================== */ [소스 코드] one two three four /* =========================== */ /* =========================== */ [결과 출력] /* =========================== */ /* =========================== */ [요약 설명] /* [CSS 요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 ..
/* =========================== */ [ 개발 환경 설정 ] 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ /* =========================== */ [소스 코드] ONE TWO THREE FOUR /* =========================== */ /* =========================== */ [결과 출력] /* =========================== */ /* =========================== */ [요약 설명] /* [CSS 요소 설명] 1. font-family : 폰트 표시 형태 스타일 지..
/* =========================== */ [ 개발 환경 설정 ] 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ /* =========================== */ [소스 코드] 텍스트 확인 텍스트 변경 /* =========================== */ /* =========================== */ [결과 출력] /* =========================== */ /* =========================== */ [요약 설명] /* [CSS 요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 2. ..
/* =========================== */ [ 개발 환경 설정 ] 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ /* =========================== */ [소스 코드] one two three four /* =========================== */ /* =========================== */ [결과 출력] /* =========================== */ /* =========================== */ [요약 설명] /* [CSS 요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 ..
/* =========================== */ [ 개발 환경 설정 ] 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ /* =========================== */ [소스 코드] URL 저장 그림 저장 지우기 /* =========================== */ /* =========================== */ [결과 출력] /* =========================== */ /* =========================== */ [요약 설명] /* [CSS 요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 2...
/* =========================== */ [ 개발 환경 설정 ] 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ /* =========================== */ [소스 코드] QR 생성 /* =========================== */ /* =========================== */ [결과 출력] /* =========================== */ /* =========================== */ [요약 설명] /* [CSS 요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 2. width : ..
/* =========================== */ [ 개발 환경 설정 ] 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ /* =========================== */ [소스 코드] 브라우저 이동 파일 이동 태그 이동 함수 호출 /* =========================== */ /* =========================== */ [결과 출력] /* =========================== */ /* =========================== */ [요약 설명] /* [CSS 요소 설명] 1. font-family : 폰트 표시 형태 ..
/* =========================== */ [ 개발 환경 설정 ] 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ /* =========================== */ [소스 코드] /* =========================== */ /* =========================== */ [결과 출력] [적용 (전)] [적용 (후)] [저장 경로] /* =========================== */ /* =========================== */ [요약 설명] /* [CSS 요소 설명] 1. font-family : 폰트 표시..
/* =========================== */ [ 개발 환경 설정 ] 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ /* =========================== */ [소스 코드] 팝업창 호출 /* =========================== */ /* =========================== */ [결과 출력] /* =========================== */ /* =========================== */ [요약 설명] /* [CSS 요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 2. width : 가..
/* =========================== */ [ 개발 환경 설정 ] 개발 툴 : 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 테두리 영역 둥글게 설정 : 각 모서리 모두 동일..
/* =========================== */ [ 개발 환경 설정 ] 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ /* =========================== */ [소스 코드] TEST TEST TEST TEST /* =========================== */ /* =========================== */ [결과 출력] /* =========================== */ /* =========================== */ [요약 설명] /* [CSS 요소 설명] 1. font-family : 폰트 표시 형태 스타일 ..
/* =========================== */ [ 개발 환경 설정 ] 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ /* =========================== */ [소스 코드] 동적 추가 /* =========================== */ /* =========================== */ [결과 출력] /* =========================== */ /* =========================== */ [요약 설명] /* [요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 2. width : 가로 크기 ..
/* =========================== */ [ 개발 환경 설정 ] 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ /* =========================== */ [소스 코드] ONE TWO /* =========================== */ /* =========================== */ [결과 출력] /* =========================== */ /* =========================== */ [요약 설명] /* [요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 2. width : 가로 크..