분류 전체보기 211

2. menu icon 애니메이션 변경

1. summary 기능 transition : action이 일어나는 시간 translateY : 세로로 내려감 rotate : 중심점을 기준으로 회전 display : 형태(block, inline)를 설정 cursor : 해당 tag에 접근시 커서 변경 toggle : event 발생시, 기존 class 유지한 후 class 존재하면 제거, 없으면 생성 출처 : https://www.w3schools.com/howto/howto_css_menu_icon.asp 2. 적용 이미지 3. 코드 html css .container { /* display : block으로 할 것인지 inline으로 할 것인지 정해줌 */ display: flexbox; /* cursor : 해당 div에 접근시 커서 변경 ..

web Language/css 2023.04.24

1. html 주요 tag

1. 목록 tag ul : 순서 없는 목록 tag ol : 순서가 있는 목록 tag li : 목록 요소 ol tag Facebook Tweeter Linked In ul tag Facebook Tweeter Linked In 2. 정의 목록 특정 용어와 그 정의를 표현할 때 사용하는 tag dl : 정의 목록 tag (list) dt : 정의 용어 tag (term) dd : 정의 설명 tag (description) 정의 용어1 정의 설명 tag1 정의 설명 tag2 정의 설명 tag3 정의 용어2 정의 설명 tag1 정의 설명 tag2 정의 설명 tag3 3. table tag table : table 전체 border[property] : 표테두리 두께 지정 th : 행 내부 제목 넣는 칸 rows..

web Language/html 2023.04.24

1. Icon bar

1. summary 기능 : 마우스 올리면 해당 link background color 변경 가능하도록 하기 출처 : https://www.w3schools.com/howto/howto_css_icon_bar.asp 2. 적용 이미지 가로 세로 3. 코드 html css /* 세로 모드 */ .icon-bar { width: 90px; background-color: #555; } /* 해당 class의 모든 a tag */ .icon-bar a { display: block; /* a : inline -> icon-bar div 내에서 위치 수정을 위해 block 처리 */ text-align: center; /*a : block -> 내부 img(inline) 요소 중간 정렬 */ padding: 1..

web Language/css 2023.04.23

6. JS 핵심 - 객체

1. 객체 생성 종류 2가지 빈 객체 생성한 후, 멤버(속성, 함수) 추가 객체의 생성과 동시에 멤버 추가 // 1. 객체의 생성방법 const person = {}; // property 추가 person.firstName = "join"; console.log(typeof person); // object // 2. 객체 생성 + 초기화 const myObject = { firstName: "join", }; console.log(typeof myObject); // object 2. 생성자로 객체 생성 생성자를 정의하면 객체를 편리하게 생성 해당 객체 호출시 객체 이름 { property, function} 출력 하지만 type은 object 주의 생성자라고 해도 결국에는 function일 뿐이다...

language/javaScript 2023.04.20

5. JS 핵심 - 함수

1. 함수의 선언과 함수 표현식 함수는 항상 값을 반환한다. return 값이 없더라도 undefiend를 반환한다. 함수 표현식 : 함수 앞에 변수 붙여주는 것 람다식 IIFE : 즉시 호출 함수 표현식 - 람다식과 유사, 일회용 // 1. 함수 선언 function add1(a, b) { return a + b; } console.log(add1(1, 2)); // 2. 함수 표현식 var add2 = function (a, b) { return a + b; }; console.log(add2(3, 4)); // 3.lambda식 // sort() comparator 했던 것 // 4. IIFE console.log( (function (a, b) { return a + b; })(5, 6) ); 2..

language/javaScript 2023.04.19

4. JS 핵심 - 조건문, 반복문

자바와 거의 동일 향상된 for문 생김새 다름 switch문 조건식, case 문 비교 === 사용 while() 조건식 for for(a of b) : 향상된 for문 - 이걸 자주 사용 for(var x in b) : b 객체 property 값 출력 // for of const array1 = ["a", "b", "c"]; for (const element of array1) { console.log(element); } // for in var person = { fname: "woo", lname: "wee", age: 25 }; for (const key in person) { if (Object.hasOwnProperty.call(person, key)) { console.log("key: ..

language/javaScript 2023.04.18

3. JS 핵심 - 배열

참고 // dir()은 개체의 모든 속성 및 메서드를 나열하는 JavaScript의 내장 메서드. // 주어진 객체의 모든 속성을 문자열 배열로 반환하며, 이를 통해 개발자는 개체를 탐색하고 디버그한다. console.dir(); 1. 배열 java와 달리 배열의 크기는 동적으로 변경가능하다. 하나의 배열에 여러 타입의 값을 저장할 수 있다. 배열도 객체이며, new 연산자로 생성할 수 있다. 배열 생성 방법 new Array() new Array(num) :num개 길이 생성 실제 공간은 확보하지 않는다. .length를 통해서 길이로는 인정된다. 동적 배열이여서 .length가 고정 값이 아니다. [1,2,3] : 값 바로 집어넣기 참고 - 객체 배열과 동일하게 생성한다. new Object(); o..

language/javaScript 2023.04.18

2. JS 핵심 - 연산자

1. 연산자 규칙 + : 문자열을 합치는 역할도 수행한다. 그래서 우선 순위가 문자열 합하기, 산술계산(type이 number일 때만) - : 산술계산에서만 사용. 그래서 모든 type을 number로 자동 형변환하는데 이때 number로 변환이 안되는 수는 NaN 반환 **: 제곱 JS는 문자열을 중요시하기 때문에 정렬관련된 부분들은 다 사전 순서이다. 비교 같은 일반적인 비교 연산자는 자동형변환을 하지 않는다. == : 비교연산자는 자동형변환을 해준다. != : 이것도 가능 === : 얘는 type 비교도 해주는 거여서 형변환 안됨 // 연산자 let a = 7 + "5"; // +는 string 합을 나타내는 연산자로 사용될 수 있어서 string 형식 합 console.log(a); /..

language/javaScript 2023.04.18

sql summary

용어 1. 용어, DML 1. 용어 1.1. 테이블 명명 테이블명과 컬럼명은 반드시 문자로 시작, 최대 30자 영문자, 숫자, 특수기호(_ , $ , #)만으로 구성 동일 사용자가 생성한 다른 객체의 이름과 중복되면 안된다. 예약어 사 code-is-me.tistory.com 용어 varchar2 char number date long raw longraw where 3. where, 연산자 주의 where title != null; -- 에러 where title is not null; -- 정상 작동 1. where where 에 들어가는 것 형식 값 연산자 subquery - subqueary 블로그에서 설명 where : 해당 조건일 때만 적용되는 문법 SELECT * FROM STUDENT.S ..

DB/sql 2023.04.18