퍼블리싱(44)
-
Bootstrap: text, color
기본적으로 css에서 사용되는 명령어를 그대로 따른다. text text alignment .text-{breakpoint}-{start/center/end} text transform .text-{lowercase/uppercase/capitalize} font size .fs-* 1~6, h*태그의 사이즈와 같음 font weight .fw-{bold/bolder/normal/light/lighter} font style .fst-{italic/normal} line height .lh-* .lh-{sm/lg/base} reset color .text-reset 해당 요소의 색 대신 부모 요소의 색상을 상속 text decoration .text-decoration-{underline/none/lin..
2021.01.21 -
Bootstrap : columns ( alignment, order, offset, margin )
column은 그리드의 플렉스박스에 해당하기 때문에, 플렉스박스의 속성들을 적용시킬 수 있다. Alignment vertical .align-items-{start/center/end} 부모선택자 row와 함께 사용해서 전체 줄을 세로 정렬 .align-items-self-{start/center/end} col과 함께 사용해서 한 줄에 하나씩 정렬, 1 row의 높이가 늘어남. horizontal .justify-content-{start/center/end/around/between/evenly} flex의 가로 정렬 기능과 같은 작용. column breaks column을 아래위로 나누는 방법 3가지 실습 [ 992px 이상 : 한줄에 2칸 , 992px 이하 : 한줄에 4칸 ] 결과 확인 하기 ..
2021.01.21 -
Bootstrap: layout ( breakpoints, containers, grid )
기본적으로 부트스트랩은 자바스크립트, css를 이용한 프레임워크로 이미 지정되어있는 함수들을 불러서 사용한다. breakpoints Breakpoint Class infix Dimensions X-Small None div.row>div.col 을 기본으로 테이블형식으로 레이아웃을 작성 xs
2021.01.21 -
jQuery: animate, stop, finish, delay
animate() $("선택자").animate({ 속성:값, 속성:값 },시간,효과, 콜백함수); * 콜백함수 : 앞의 애니메이션 효과가 끝난 뒤 처리할 문장 * 효과 : easing 효과를 선택하여 쓸 수 있는데, 효과가 이미 저장되어있는 ui jQurey를 다운 받아서 사용 - 효과 확인 : https://easings.net - 다운로드 : https://jqueryui.com/ * animate 에서 background-color 사용을 위해서는 color.js가 필요 https://github.com/jquery/jquery-color jquery.color.plus-names-2.1.2.min.js 를 다운 받으면 영문색상이름에 헥사코드가 지정되어 있어 편리함 스크립트 연결 순서는 기본 제이..
2021.01.21 -
Bootstrap: 기본, 설치방법
부트스트랩 모바일 환경에 적합한 반응형 웹 만드는 데에 혁신적, GitHub 오픈소스 제품 사용법 1. 다운로드 2. CDN (contents Delivery Network) 3. Bower 패키지 이용 부트스트랩 공식 홈페이지 http://getbootstrap.com/ Bootstrap The most popular HTML, CSS, and JS library in the world. getbootstrap.com 부트스트랩 한국어 버전 http://bootstrapk.com/ 부트스트랩 · 세상에서 가장 인기있는 모바일 우선이며, 반응형인 프론트엔드 프레임워크. 프리프로세서 부트스트랩은 평범한 CSS 로 제공합니다만, 그것의 소스코드는 2개의 인기있는 CSS 프리프로세서인 Less 와 Sass 를..
2021.01.20 -
jQuery: basic effect 제이쿼리 기본효과, sliding, fade
기본효과 1. show() display:block 의 효과 2. hide() display:none의 효과 3. toggle() show()와 hide()의 반복 () 들어가는 값은 시간을 milisecond 단위로 적거나, fast, slow를 사용할 수 있다. $(".hide").click(function(){ $("div").hide(1000); }) $(".show").click(function(){ $("div").show("fast"); }) $(".toggle").click(function(){ $("div").toggle(1000); }) slide 효과 1. slideUp() - $("선택자").slideUp(시간,콜백함수()); 2. slideDown() - $("선택자").slide..
2021.01.18