투케이2K

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

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [설 명] ​ [m, p 의 의미 - 마진, 패딩] - m : Margin을 의미 - p : Padding을 의미 [t , b , l , r ,x , y 의 의미 - 위치 설정] - t : top을 의미 - b : bottom을 의미 - l : left을 의미 - r : right을 의미 - x : x축 -> left , right을 의미 - y : y축 -> top , bottom을 의미 [0, 1, 2, 3, 4, 5, auto 의 의미 - px, rem] - 0 : 0 - 1 : .25rem( font-size가 16px이면, 4px) 크기 - 2 : .5rem( font-size가 16px이면..

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ 좌측정렬 중앙정렬 우측정렬 양쪽정렬 일반 Lowercased Uppercased Capitalized text-primary text-secondary text-success text-danger text-warning text-info text-light text-dark text-white h1. Bootstrap heading h2. Bootstrap heading h3. Bootstrap heading h4. Bootstrap heading h5. Bootstrap heading h6. Bootstrap heading [결과 출력] ​ [요약 설명] ​ 1. p-속성 : p ..

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ col-md-4 col-md-8 col-sm-3 col-sm-3 col-sm-3 col-sm-3 col-md-4 col-md-8 col-sm-3 col-sm-3 col-sm-3 col-sm-3 [결과 출력] ​ [요약 설명] ​ 1. 컨테이너는 CSS에서 배운것 처럼 화면구성요소들을 묶기 위한 틀 입니다 2. 컨테이너는 보통 태그들을 중첩해 사용하는 형식을 취하며 부트스트랩도 동일합니다 3. container : 반응형으로 동작하며 고정폭을 가지고 있습니다 (자동 마진 크기를 가지고 있습니다) 4. container-fluid : viewport 전체 폭을 모두 차지하는 컨테이너 박..

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ col-md-4 col-md-8 col-sm-3 col-sm-3 col-sm-3 col-sm-3 col-md-4 col-md-8 col-sm-3 col-sm-3 col-sm-3 col-sm-3 [결과 출력] ​ ​ [요약 설명] ​ 1. 컨테이너는 CSS에서 배운것 처럼 화면구성요소들을 묶기 위한 틀 입니다 2. 컨테이너는 보통 태그들을 중첩해 사용하는 형식을 취하며 부트스트랩도 동일합니다 3. container : 반응형으로 동작하며 고정폭을 가지고 있습니다 (자동 마진 크기를 가지고 있습니다) 4. container-fluid : viewport 전체 폭을 모두 차지하는 컨테이너..

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ .col .col .col .col-sm-3 .col-sm-3 .col-sm-3 .col-sm-3 col col col col [결과 출력] ​ [요약 설명] ​ 1. 컨테이너는 CSS에서 배운것 처럼 화면구성요소들을 묶기 위한 틀 입니다 2. 컨테이너는 보통 태그들을 중첩해 사용하는 형식을 취하며 부트스트랩도 동일합니다 3. container : 반응형으로 동작하며 고정폭을 가지고 있습니다 (자동 마진 크기를 가지고 있습니다) 4. container-fluid : viewport 전체 폭을 모두 차지하는 컨테이너 박스입니다 5. 부트스트랩의 그리드는 flexbox(Flexible ..

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ New Item 3 Link1 Link2 Link3 [결과 출력] ​ [요약 설명] ​ 1. 컴포넌트는 부트스트랩에서 정의한 UI 요소로 버튼, 경고창, 네비게이션바 와 같이 화면 구성에 필요한 요소들을 정의해둔 클래스 집합입니다 2. BS 컴포넌트는 적절한 태그와 클래스의 조합으로 이루어져 있습니다 3. badge : 스마트폰 아이콘에 숫자 뱃지 모양을 설정합니다 4. Navbar : 여러 컴포넌트를 묶어 구성한 네비게이션 바 컴포넌트입니다 [컴포넌트 종류] ​

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ No shadow Small shadow Regular shadow Larger shadow [결과 출력] ​ [요약 설명] ​ 1. shadow : 그림자 효과를 부여하는 클래스로 입체감있는 박스 컨테이너를 만들때 효과적입니다 2. 기본적으로 shadow-* 형식으로 크기와 함께 사용하게 됩니다 3. margin, padding 은 각각 m , p 를 선언해서 사용합니다 4. sides : 상하좌우를 지정하며, 비워둘경우 4방향 모두를 지정합니다 (top(t),bottom(b), left(l), right(r), x, y) 5. size : 0~5, auto 를 사용하며, 3을 기..

[ 개발 환경 설정 ] ​ 개발 툴 : 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++ 개발 언어 : jquery /* =========================== */ ​ /* =========================== */ [소스 코드] // 특정 태그 css 스타일 속성 지정 및 확인 [ex : body 태그] $("body").css("height", "100%"); // [css 속성 지정] $("body").css("height"); // [css 속성 값 확인] // 특정 클래스 css 스타일 속성 지정 및 확인 [ex 클래스명 : CID] $(".CID").css("height", "100%"); // [css 속성 지정] $(".CID").css("h..

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : jquery /* =========================== */ ​ /* =========================== */ [스타일 속성 관련 메소드] ​ ​ /* =========================== */

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ [결과 출력] ​ ​[브라우저] ​ ​ ​[모바일] /* =========================== */ ​ /* =========================== */ [요약 설명] ​ 1. viewport : 메타 태그로 반응형 뷰 포트 설정 실시 2. media : 실시간 반응형 뷰 포트 디스플레이 화면 크기 확인 3. min-wi..

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* [style css 파일 수정 실시] */ .swal-wide{ width:250px !important; } /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명]..

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : 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 : 폰트 표시 형태 스타일 지..