투케이2K

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

[ 개발 환경 설정 ] ​ 개발 툴 : 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 : 백그라운드 속성을 지정합니다