본문 바로가기

web

 (71)
0615 / javascript - 연산자 연산자는 피연산자와 연산자로 나뉨. 4가지 법칙을 기준으로 연산 ------- var n1 = 10; var n2 = 3; console.log(n1, n2); // 덧셈 var plus = n1 + n2; console.log('plus:', plus); // 뺄셈 var minus = n1 - n2; console.log('minus:',minus); // 곱셈 var multi = n1 * n2; console.log('multi:', multi); // 나눗셈 var divide = n1 / n2; console.log('divide:', divide); // 숫자 -> parseInt() / parseFloat() // Math().ceil / Math().floor / Math().round ..
0614 / javascript 변수와 함수 - javascript 변수와 함수 // 이름() -> 함수 호출 // 이름(매개변수) -> 함수를 호출할 때에는 매개체가 되는 변수를 넣는다. // 매개변수(parameter) -> 인수(argument), 인자(parameter) 사실 같은 아이를 지칭 // 숫자 : number var type = typeof(n); console.log(n, type); // 문자 : string var t = 'text'; type = typeof(t); console.log(t, type); // 불리언(boolean) : true, false var bool = true; console.log( bool ); var nn = null; type = typeof(nn); console.log(nn, type);..
0614 / javascript 기초개념 2 - javascript 기초개념 2 웹표준 javascript? html문서와, css를 컨트롤하기 위해 만들어진 웹 프로그래밍언어 프로그래밍 언어의 조건 : 변수선언 가능, 타입, 조건, 반복문, 함수 등 연산이나 공식 등이 존재해야하는 형태 html,css를 상황에 맞게 변경,생성,삭제 등이 가능 절차 지향이자, 객체지향(oop), 함수언어 변환가능, 일급객체 c, java와는 전혀 다른 언어 live script -> 개명 : javascript (java와는 상관 없음) ecmascript(w3와 함께) -> es5 -> es6~ ------------------------------- // 변수 : 어떠한 값을 저장하기 위한 이름, 대입처리해주는 임시 이름/값 // ES5 // 변수의 이름을 생..
0614 / javascript 기본요소 - javascript 기본요소 1. head내부에 작성한 코드는 body요소가 생성되기 전에 작성하므로, body의 요소를 인식할 수 없다. 2. body요소가 먼저 구현이 된 이후에 script코드가 작성되는 것이 사용자입장에서 속도가 더 빠른것이라 인식. 3. script는 css와 다르게 내용이 존재해야 그 기능을 수행. 4. script는 태그를 모른다. ' '따옴표가 풀리면서 태그로 인식함. -------------------- document.write('body 끝나는 위치에 작성'); // 1. 웹문서에서 가장 많이 사용하는 기법, // 2. body요소를 읽은 후에 처리할 수 있는 기능. // 3. 하지만 웹표준은 각 언어별로 문서를 구분해야한다.(html,css,javascript분리..
0609 / responsive web design (rwd) 반응형웹 (pc) * e_pc @media screen and (min-width:960px) { /* 가로 기준 960px */ /* common class */ .container { width:100%; max-width:1200px; max-width:75rem; height:auto; margin:auto; } /* ============================================ */ #wrap { height:1200px; background-color: #ffc; } #headBox { position:fixed; top:0; left:0; z-index:1500; width:100%; height:auto; background-color: #333; } .headBox_innerwrap { ..
0609 / responsive web design (rwd) 반응형웹 (tablet) * d_tablet @media screen and (min-width:768px) and (max-width:959px) { #wrap { height: 700px; background-color: #fcf; } #headBox { position:fixed; top:0; left:0; z-index:1500; width:100%; height:60px; height:3.75rem; background-color: #333; } .headBox_innerwrap { width:100%; height:auto; padding:10px 1rem; box-sizing: border-box; } h1 { float:left; width: 174px; height: 42px; background-color: #..
0609 / responsive web design (rwd) 반응형웹 (smartphone_horizontal) * c_smartphone_horizontal @media screen and (min-width:480px) and (max-width:767px) { /* 가로 기준 480px */ #wrap { height: 900px; height:56.25rem; background-color: #aca; } #headBox { position:fixed; top:0; left:0; z-index:1500; width:100%; height:60px; height:3.75rem; /* padding:10px 1rem; box-sizing: border-box; */ background-color: #333; } .headBox_innerwrap { width:100%; height:auto; } h1 { flo..
0609 / responsive web design (rwd) 반응형웹 (smartphone_vertical) * b_smartphone_vertical @media screen and (max-width:479px) { /* vw단위 기준 : 320px */ html, body { width:100%; min-width:320px; } #wrap { height: 500px; background-color: #0cf; } /* headBox ============================= */ #headBox { position: fixed; top:0; left:50%; z-index:1500; transform:translateX(-50%); width:100%; height:40px; height:2.5rem; height:12.5vw; /* 원수치로 환산시 : 12.5/100*320 */ /* ov..

티스토리툴바