본문 바로가기

Frontend57

03. JavaScript 변수 (Variable: var, let, const) ○ 값(data, value) 표현 ① 상수(constants) : 고정 불변의 값 document.write(3); document.write(-4); document.write("A"); document.write('가'); ② 변수(variable) : 변하는 값 - 변수를 선언할 때는 변수명 앞에 변수 타입을 붙임 - 변수명은 영어, 숫자, 일부 특수문자(_, $)만 사용가능 - JavaScript 변수 타입 : var, let, const / nothing - var를 가장 많이 사용, let과 const는 2015년에 새로 생긴 변수타입 var a=3; //a라는 변수를 선언하고, 3을 저장 var b;//b라는 변수를 선언 b=10;//b에 10을 저장 document.write(a+b);/.. 2022. 4. 25.
02. JavaScript 연산자 (operator) ○ 연산자 Operator - 이식성이 풍부하다 - 대입, 산술, 비교, 논리, 결합, 증감 연산자 등 - 연산자는 JavaScript 외의 언어(JAVA, PYTHON, DB 등)에서도 거의 비슷하게 사용 - 연산 우선 순위 : ( ) → 증감 → 산술 → 비교 → 논리 → 대입 ○ 산술 연산자 - +(더하기), -(빼기), *(곱하기), /(나누기), %(나머지) document.write(6+3);//9 더하기 document.write(6-3);//3 빼기 document.write(6*3);//18 곱하기 document.write(6/3);//2 나누기(몫) document.write(6%3); //0 나머지(6을 3으로 나누었을 때 나머지) document.write(3/5); //0.6 d.. 2022. 4. 25.
01.JavaScript 기본 문법, 자료형 ○ JavaScript (자바스크립트) - 웹브라우저에서 interpreter 방식으로 해석되는 스크립트 언어 - HTML문서를 좀 더 역동적으로 동작시킬 수 있음 - 웹페이지의 3요소 : 구조(HTML) + 표현(CSS) + 동작(JavaScript 또는 웹프로그래밍언어) - jQuery : JavaScript를 라이브러리화 해 놓은 오픈소스 ○ JavaScript 기본 문법 - 대소문자를 구분 - 종결문자 ; - 주석 : // (한 줄 주석), /* */ (여러 줄 주석) - 자바스크립트 코드 작성 영역 선언 : (나 영역에 선언가능) - js파일 import : ○ Data Type (자료형) ① 숫자형 (Number) - 숫자, 따옴표없이 ② 문자형 (String) - 반드시 ' '(작은 따옴표).. 2022. 4. 25.
10. CSS RWD(Responsive Web Design) & Media Queries ○ 반응형 웹 디자인 (RWD; Responsive Web Design) - 다양한 화면 크기에 맞게 웹사이트의 레이아웃(Grid)이 달라지는 웹페이지 - PC, 스마트폰, 태블릿 등 접속하는 기기에 따라 화면의 크기가 자동으로 변하도록 디자인 - 모든 장치에서 HTML문서를 잘 보이게 하기 위해 뷰포트 설정 필요 ( 08. HTML 메타(meta) 요소 참고) ○ 미디어 쿼리 (Media Queries) - 반응형 웹을 구현하기 위한 핵심기술 중 하나 - 화면 사이즈를 인식해 크기마다 각각 다르게 CSS를 적용하는 것 - 보통은 스마트폰, 태블릿, PC 3가지 화면 정도를 구분해줌 @charset "UTF-8"; /* layout.css */ /* https://www.w3schools.com/css/.. 2022. 4. 8.
09. CSS Transition & Animation ○ 트랜지션 (Transition) - 속성의 스타일이 변하는 속도를 조절 - 이벤트에 의해 발생함 - transfrom과도 같이 사용 가능 (08. CSS Transform 참고) - 형식 : transition: (속성) 시간 (변화효과) ; 마우스를 올리면 시계방향 80도 회전&색변화(1초동안) 마우스를 올리면 너비가 300px로 변화(0.5초동안) HTML 삽입 미리보기할 수 없는 소스 ○ Animation - 트랜지션과 비슷하게 속성의 스타일을 변화하게 하지만 보다 세부적으로 조절 가능 - 이벤트 없이 시작, 정지, 반복을 조절가능함 - 형식 : @keyframes 애니메이션이름 { from {애니메이션 시작 스타일} to {애니메이션 끝 스타일} } 5초동안 너비가 100px에서 500px로 .. 2022. 4. 7.
08. CSS Transform ○ Transform(변형) - 웹 문서의 텍스트나 이미지를 변형(이동, 회전 등) - 2차원 변형(2D Transforms) : 수평, 수직으로만 (x축) - 3차원 변형(3D Transforms) : 수평, 수직, 앞뒤로 (y축) - 형식 : transform: 변형함수; ○ 2D Transforms ① rotate - 지정한 각도만큼 회전 - 형식 : transform: rotate(각도); - 각도는 "숫자deg"로 표현 - 각도가 양수면 시계방향, 음수면 반시계방향 B I N S ② skew - 지정한 각도만큼 기울기 - 형식 : transform: skew(x축각도); transform: skew(x축각도, y축각도); transform: skewX(x축각도); transform: skewY(.. 2022. 4. 6.