1차 스터디10 6. 자바스크립트 기초 문법 연산자 console.log(10+20); // 200 console.log("10"+"20") // 1020 : 문자열 덧셈은 concat console.log("10"-"20") // -10 var num=1; console.log(++num); // 2 console.log(10==20) // false console.log(10=="10") // true console.log(10==10 || 20==30) //true 조건문 var a=10; var b=20; if(a 2024. 3. 27. 5. 자바스크립트 기초 자바스크립트 소개 자바스크립트 : 동적인웹사이트제작시사용되는프로그래밍언어 변수 var fruit = “apple”; //변수 선언 및 초기화 fruit = "banana"; //수정 console.log (fruit) //출력 자바스크립트 사용법 데이터 타입 var str1 = "Hello World"; //문자열 var num1 = 10.0 //숫자 func1 = function(value) { console.log("func1"); } //함수 생성 func1(10); //함수 호출 var fruit = ["사과", "배"]; //배열 console.log(fruit[0]); //출력 fruit[0]="포도" //값 수정 var student = { // 객체 name: “inkwon”, age: 2.. 2024. 3. 27. 4. 모바일 웹사이트 만들기: 미디어 쿼리 활용 미디어 쿼리 소개 - 다양한 디바이스(pc, 탭, 폰,...) 에 대응되는 웹사이트 만들기 위해 사용되는 CSS 구문 미디어 쿼리 media - 가로폭이 최소 320px, 최대 800px 일 경우 내부 .media로 대체 미디어쿼리 사용 시 주의사항 viewport - 다양한 기기의 화면 상 표시되는 영역 - 미디어 쿼리 제대로 작동X ➔ viewport로 디바이스 너비/배율 설정 CSS 속성 상속 - none : 상속 원하지 않은 경우 2024. 3. 23. 3. 웹사이트에 생동감 부여하기 Transform - 특정 영역 rotate, scale - rotate : 회전 - scale : 확대, 축소 skew, translate - skew : 비틀기 - translate : 좌표 변경 prefix 접두사 - 다른 버전의 브라우저에서의 실행을 원할 경우 Transition - 특정 조건 property, duration - property : 효과 적용할 속성 - duration : 효과 나타나는 시간 timing-function, delay - timeing-function : 효과 속도 - delay : 특정 조건 hover - 이미 만들어진 클래스 : 마우스 올렸을 경우 종합 - 마우스를 올리면(hover) 1초 후(delay)에 width 값이 300px로 2초 동안(duration.. 2024. 3. 21. 이전 1 2 3 다음