본문 바로가기

분류 전체보기

(383)
[javascript] 변수 및 데이터형 알아보기 변수란? "값을 저장하는 상자" 라고 생각하면 됩니다. 변수에는 한번에 1개의 데이터 값만 저장할 수 있습니다. 새로운 데이터가 입력되면 기존의 값은 삭제됩니다. 변수명 작성시 주의사항 1. 대-소문자 구분 : 변수명을 소문자로 만들고 출력할 때 대문자로 입력하면 '정의되지 않은 변수'라고 오류 발생. var num = 100; document.write(NUM); // 대,소문자 구분으로 인한 오류가 발생합니다. 2. 변수명 맨 앞에는 영문, _, $ 등만 가능 var number = 2; //OK var _numberis = 4; //OK var $num = 10; //OK var 3num = 0; // NO 3.변수명에는 영문, $, _, 숫자만 포함 가능 var the% = 100 ; NO 변수에..
[CSS3] transition 속성 전환 transition 속성 전환 transition은 background, color, height, witch, transformation 등의 속성들에 애니메이션을 적용 하는것. transition : property duration timingfunction; property : 애니메이션 시킬 속성을 사용함. duration : 시작해서 끝날 때까지 시간을 초 단위로 지정함. timingfunction : 속도 변화를 기술하는데 큰 차이를 느끼기 어렵지만 다음 항목들이 있다. linear : 등속 cubic-bezier(0, 0, 1, 1)과 같음. ease : 느리게 시작했다가 빨라졌다 다시 느려짐. cubic-bezier(0.25, 0.1, 0.25, 1)과 같음 ease-in : 점점 빨라짐...
[CSS3] 2D Transform 2D Transform 이동(translate), 회전(rotate), 크기변경(scale), 기울임(skew)등의 효과를 줄 수 있다. h1{ width:300px; height:300px; margin:20px; padding:20px; border:1px solid #dddddd; } .transformTest_translate{ background:#e8e8e8; transform : translate(500px, -360px); -moz-transform : translate(500px, -360px); -webkit-transform : translate(500px, -360px); -ms-transform : translate(500px, -360px); -o-transform : trans..
[CSS3] box-sizing:borderbox, content-box CSS .boxMenu{width:100%; padding:0;} .boxMenu::after{content:""; display:block; clear:both;} .boxMenu li{list-style-type: none; float:left; width:50%; text-align:center; padding:20px; background:#f8f8f8; border:10px solid #dddddd; } .bBox li{ box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } .cBox li{ box-sizing:content-box; -moz-box-sizing:content-box; -webkit-..
[CSS3] 컬럼 나누기 colume-count, column-gap, column-rule CSS .multipleColume{ background:#ffffe6; width:768px; height:768px; padding:20px; text-align: justify; column-count:3; /*박스의 내용을 3단으로 */ column-gap:40px;/*각 단의 간격 */ column-rule:2px dotted #000000; /* 단과 단사이에 구분선 */ } See the Pen CSS3 column example by daeyun (@daeyun) on CodePen.
[CSS3] Animation CSS p.test { animation:myfirst 5s infinite; -moz-animation:myfirst 5s infinite; -webkit-animation:myfirst 5s infinite; -o-animation:myfirst 5s infinite; } @keyframes myfirst { 0% {background:#ffffff; width:150px; height:150px; } 25%{background:#ffff66; width:175px; height:175px; } 50%{background:#ffaa00; width:200px; height:200px; } 75%{background:#ff6600; width:225px; height:225px; } 100%{backg..
안녕하세요 Hello, thereI’m Daeyun, to be a Developer from the Korea. I work for the TAX Accountant and we build web apps for devices, big and small. focusing all her efforts on creating new products for this thing called ‘The Internet’.I am passionate about web application development, technology, art, design and typography. I have a hardwired desire to be better, an instinct for good design, a strong ambi..