분류 전체보기 (25) 썸네일형 리스트형 드로그 앤 드롭 1. 사용용도 사용자가 웹을 유동적으로 이용하기 위하여 사용 2. 코딩 방법 12 $("#drag").draggable();$("#drop").droppable(); Colored by Color Scriptercs.draggable() : 드래그 제이쿼리 API.droppable() : 드롭 제이쿼리 API 3. 실습 1. Element(html 정보)를 넣어준다. 12cs 2. css 정보를 넣어준다.123456789101112131415 #drag { width: 100px; height: 100px; background: #101010; cursor: pointer; } #drop { width: 100px; height: 100px; background: #505050; }Colored by C.. 삼항 연산자 1. 사용용도 간편히 조건에 따라 true, false 반환해주는 식 2. 코딩 방법 조건문 ? true 값 : false 값1 x == 4 ? console.log(alert("true")) : console.log(alert("false")); Colored by Color Scriptercs '?' 를 사이로 조건문과 반환값을 나눈다. ':' 를 사이로 true 값과 false 값을 나눈다. 3. 실습 1. Script 태그 안에 삼항 연산자 코드를 작성한다. 123456 var x = 3; x == 3 ? console.log(alert("true")) : console.log(alert("false")); Colored by Color Scriptercs 2. 결과 확인 3. 코드 바꾸기 123.. 해상도 별 너비, 높이 지정 method 1. 사용용도 사용자마다 다른 해상도를 맞추기 위해 사용 2. 코딩방법 1234567$(document).ready(function () { var ht = $(window).height(); var wt = $(window).width();});Colored by Color Scriptercsvar ht : "ht" 변수 지정$(window) : 사용자 창을 가리키는 객체("window" 객체는 객체의 계층 구조에서 최상위, 전역객체).height(); : 지정된 객체의 높이 값을 구함 var wt : "wt" 변수 지정$(window) : 사용자 창을 가리키는 객체("window" 객체는 객체의 계층 구조에서 최상위, 전역객체).width(); : 지정된 객체의 너비 값을 구함 3. 실습 1. Ele.. transform & transition 1. 사용 용도 Element(html 정보)를 다채롭게 만들기 위함 2. transform & transition(transform) Element(html 정보)의 모양이나 위치를 변형하는 속성 (transition) Element(html 정보)에 변형 효과를 주는 속성 3. 속성 실습1. Element(html 정보)를 넣어준다.12345 abc cs 2. css 정보를 넣어준다.123456789 #background { background : #000fff; } #main { font-size : 100px; background : #fff000; }cs 3. 결과 4. CSS 정보 변경12345678910111213 #background { background : #000fff; } #main.. display : inline & block 1. display Element(html 정보)의 어떤 형식으로 전시할지 정의하는 속성 2. inline & block(display:inline) Element(html 정보)를 inline 요소로 정의함 (대표적 inline 배치 tag : a, span) (display:block) Element(html 정보)를 block 요소로 정의함 (대표적 block 배치 tag : div, p) (display:inline-block) Element(html 정보)를 inline-block 요소로 정의함 3. 속성 실습1. Element(html 정보)를 넣어준다.123456789 abc def ghi jkl mno pqrColored by Color Scriptercs 2. css 정보를 넣어준다.12.. :link :visited :hover :active 속성 1. 사용 용도 정보의 알아보기 쉽게 정보에 효과를 주는 속성 2. 정의(:link :visited) a teg 에서 사용 가능:link = 방문 전 변화 상태:visited = 방문 후 변화 상태 (:hover :active) :hover = 마우스를 올려놨을 시 상태 변화:active = click 시 상태 변화 3. :link :visited :hover :active 속성 실습 1. 정보를 넣어준다.123456 코딩분해 Colored by Color Scriptercs 2. css 정보를 넣어준다. 1234567 a:link {background:yellow;} a:visited {background:black;} div {width:100px; height:100px; border:1px sol.. 960 Grid System 1. Grid System 요소 (Container, Column, Gutter) Container : 몇 개의 Column을 사용하는 Grid System 인지 정하는 것이다. Column : 실제 정보가 들어가는 부분이다. Gutter : Column의 양쪽에 들어가며 Column과 Column 간격에 을 주기 위함이다. 2. 960 Grid System (12 Column Grid) 한줄당 총 960px을 사용하며, 그림과 같이 Gutter는 Column의 양쪽에 위치하며 폭은 10px이다. Column의 폭은 Class name grid_1은 60px grid_2는 140px grid_12는 940px이다. (16 Column Grid) 한줄당 총 960px을 사용하며, 그림과 같이 Gutter는.. [JavaScript] Click Button [ 완성본 ] [ 예제 설명 ]1. 정사각형 박스를 만든다.2. 박스 위에 Button을 추가하여 'Click it' 이라 쓴다.2. 'Click it' Button을 누를시, 박스 안에 상단에 'Center' 라는 글씨가 박스 상단 중앙에 나온다. [ 코딩 ]123456789101112131415161718192021222324252627282930313233343536373839404142434445 JavaScript Button #click-button{ width: 70px; height: 50px; position: relative; top: -50px; left: 60px; } #BOX{ border: thin solid black; margin: auto; width: 200px; heig.. 이전 1 2 3 4 다음
