투케이2K

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ 1 2 3 4 5 [결과 출력] ​

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [style 소스 코드] ​ ​ ​ [body 소스 코드] ALL FONT BOLD FONT Italic FONT [폰트 저장 경로] ​ [결과 출력] ​ [요약 설명] ​ [font-face 및 font-family 추가 설명] 1. font-face : 폰트 설정 2. src : 사용할 폰트 경로를 지정할 때 사용 3. format : 폰트 확장자명 타입 지정 시 사용 (.ttf : truetype / .ttf .otf : opentype) (.svg : svg / .woff : woff) 4. font-family 글꼴 유형 (sans-serif : 삐침 없고 굵기가 일정 고딕계열) (serif :..

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ ​ [결과 출력] ​

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [css 소스 코드] /* [html, body 영역 스타일 지정] */ html, body { width : 100%; height : 100%; margin : 0; padding : 0; border : none; /* [모바일 스크롤 시 부드럽게 처리] */ overflow:scroll-y; -webkit-overflow-scrolling:touch; } /* [body 스크롤바 메인 스타일 지정] */ body::-webkit-scrollbar { width: 0px; background-color: #c1c1c1; } /* [body 스크롤바 thumb 스타일 지정] */ body::-webk..

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ /* [html, body 영역 스타일 지정] */ html, body { width : 100%; height : 100%; margin : 0; padding : 0; border : none; /* [모바일 스크롤 시 부드럽게 처리] */ overflow:scroll-y; -webkit-overflow-scrolling:touch; } /* [body 스크롤바 메인 스타일 지정] */ body::-webkit-scrollbar { width: 0px; background-color: #c1c1c1; } /* [body 스크롤바 thumb 스타일 지정] */ body::-webkit..

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [외부 css 저장 폴더 경로] ​ [소스 코드] ​ [1] 이 브라우저 사용을 만족하십니까? 매우 만족 만족 보통 불만족 매우 불만족 [결과 출력] [html , css 분리 코드 파일 첨부] [전체 통합 코드 파일 첨부] [외부 css , js 파일 적용 참고] ​ https://blog.naver.com/kkh0977/222449805186 63. (html/css/javascript/jquery) 외부 css , js 파일 생성 및 호출 방법 정의 - link , script [개발 환경 설정] 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [css 파일 생성 및 ..

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [css 파일 생성 및 호출 방법] ​ ​ ​ ​ ​ ​ ​ ​ ​ [js 파일 생성 및 호출 방법] ​ ​ ​ ​ ​ ​ ​ ​ ​ [소스 코드 : head 태그 내부 삽입] ​

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ /* [공통 : 폰트 글씨체 변경 실시] */ /* 1. 문법 : font-family: font [폰트이름] 또는 [글꼴 유형] | initial [기본값 설정] | inherit [부모 요소의 속성값을 상속받음] 2. 폰트 이름 : 글꼴 이름에 띄어쓰기가 있으면 작은 따옴표 또는 큰 따옴표로 감쌉니다 3. 글꼴 유형 : serif = 삐침 있는 명조계열의 글꼴 / sans-serif = 삐침 없고 굵기가 일정한 고딕계열의 글꼴 monospace : 글자 폭과 간격이 일정한 글꼴 / cursive : 손으로 쓴 것 같은 필기계열의 글꼴 fantasy : 화려한 글꼴 4. 예시 - 독자..

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ 사용자 회원가입 ID Password 영문과 숫자를 조합해서 비밀번호를 입력해주세요 Email @ 주소까지 모두 입력해주세요 ex : test123@test.com 개인 정보 동의 With supporting text below as a natural lead-in to additional content. 회원 가입 [결과 출력] ​ [요약 설명] ​ 1. Forms : 컨트롤 요소(control element)를 그룹 지어 양식 레이아웃을 만들 수 있습니다 2. 부트스트랩 공식 사이트 : https://getbootstrap.com/docs/4.1/components/forms/

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ Button with data-target Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Dropdown button Action Another action Something else here [결과 출력] ​ [요약 설명] ​ ​

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ Card Header and footer Special title With supporting text below as a natural lead-in to additional content. 자세히 보기 Special title With supporting text below as a natural lead-in to additional content. 자세히 보기 Special title With supporting text below as a natural lead-in to additional content. 자세히 보기 [결과 출력] ​ [요약 설명] ​ 1. card : ..

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ Left Middle Right Top Middle Bottom [결과 출력] ​ [요약 설명] ​ 1. btn-group : Bootstrap에서 그룹 버튼을 만들 수 있습니다, 기본 가로 2. btn-group-vertical : 세로 방향으로 그룹 버튼을 생성합니다 3. 부트스트랩 공식 사이트 : https://getbootstrap.com/docs/4.1/components/button-group/

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ Link Button Large button Large button Small button Small button Block level button Block level button [결과 출력] ​ [요약 설명] ​ 1. btn : Bootstrap의 사용자 정의 버튼 스타일을 사용할 수 있습니다 2. btn-크기 : 버튼 크기를 지정할 수 있습니다 3. 부트스트랩 공식 사이트 : https://getbootstrap.com/docs/4.1/components/buttons/ Buttons Use Bootstrap’s custom button styles for actions in..

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ Well done! Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content. Whenever you need to, be sure to use margin utilities to keep things nice and tidy. Well done! Aww yeah, you successfully read t..

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ 번호 이름 나이 [결과 출력] ​ [요약 설명] ​ 1. table : 테이블 속성을 설정합니다 2. thead-dark : 테이블 헤더 속성을 설정합니다 3. dyn_tbody : 동적으로 테이블 데이터를 생성합니다 (자바스크립트 확인 필요) 4. Pagination : 쪽수 매기기 의미로 여러 페이지에 걸쳐 있음을 나타냅니다 5. justify-content : 페이징 레이아웃을 중앙 정렬을 실시합니다 6. 부트스트랩 공식 사이트 : https://getbootstrap.com/docs/4.1/content/typography/ Typography Documentation and..

[ 개발 환경 설정 ] ​ 개발 툴 : 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 전체 폭을 모두 차지하는 컨테이너..