Front-End Study89 10장_자바스크립트 함수 다루기 10.1 함수란 어떠한 목적을 가지고 작성한 코드를 블록문 안에 모아둔 것 // 기본 형식 function gugudan() { for(let i = 1; i '전역 스코프 오염' 현상 발생 즉시 실행 함수를 통해 방지(한번 실행 후 메모리에서 제거) 2023. 12. 5. 9장_자바스크립트 기초 문법 살펴보기_2 9.4 조건문 다루기 if, else, else if 문 소괄호 안의 조건식을 기준으로 평가 후 실행 // if문 if(조건식){ // 조건식이 참일 경우 실행 } // else문 if(조건식){ // 조건식이 참일 경우 실행 } else{ // if문의 조건식에 해당하지 않을 경우 실행 } // else if문 if(조건식1){ // 조건식1이 참일 경우 실행 } else if(조건식2){ // 조건식2가 참일 경우 실행 } else{ // 위의 조건식들에 해당하지 않을 경우 실행 } switch 문 소괄호 안의 값과 일치하는 case문이 있을 경우 실행 switch(key){ case value1: // key === value일 경우 실행 break; case value2: // key === va.. 2023. 12. 4. 9장_자바스크립트 기초 문법 살펴보기_1 9.1 변수와 상수 데이터를 저장하는 공간 변수 말 그대로 변하는 수를 지칭, 값이 변하는 데이터의 저장, 관리 공간 // 예시 var num = 10 + 20; // 각각의 의미 var // 키워드 num // 식별자 = // 연산자 10 + 20 // 표현식 ; // 세미콜론 1. 키워드 : 역할이나 기능이 정해진 특별 단어(예약어) 2. 식별자 : 변수, 함수 등에 부여되는 이름(변수 생성 키워드와 사용시 '변수명'이라고도 불림) 3. 연산자 : 연산작업에 사용 4. 표현식 : '평가', 표현식을 실행해 하나의 결과값을 도출 5. 값 : 더 이상 평가 불가능한 데이터를 지칭 6. 세미콜론 : 하나의 '문법'이 종료됨을 의미 7. 선언 : 키워드를 사용해 식별자를 지정하는 행위 8... 2023. 12. 3. 8장_자바스크립트 시작하기 8.1 자바스크립트 코드 작성 방법 HTML 파일과 자바스크립트 연결하기 내부, 외부 스크립트 방법을 통해 연결 document.write("외부 스크립트 방법"); //script.js 파일(동일 폴더 위치) script 태그는 항상 body 태그 종료 직전 위치에 사용 -> 웹 브라우저가 코드를 순차적으로 해석하기 때문에 효율성 증가 8.2 프로그래밍 시작 전 알아두기 주석 // 한줄 주석 /* 여러 줄 주석 ... */ 자바스크립트 오류 확인 방법 자바스크립트는 인터프리터 방식으로 실행 콘솔(console) 창을 통해 오류 인지 후 해결 2023. 12. 3. 7장_효과적인 레이아웃을 위한 CSS 속성 다루기 7.1 플렉스 박스 레이아웃으로 1차원 레이아웃 설계하기 1차원 방식으로 고안된 효과적 레이아웃 설계 스타일 속성 플렉스 박스 레이아웃 살펴보기 - 주축(main axis) : 플렉스 박스 진행 방향과 수평한 축 - 교차축(cross axis) : 주축과 수직한 축 - 플렉스 컨테이너(flex container) : display 속성값으로 flex, inline-flex가 적용된 요소 - 플렉스 아이템(flex item) : 플렉스 컨테이너의 자식요소 item-1 item-2 item-3 item-4 .flex-container{ width:300px; height:200px; background-color:#c4c4c4; border:1px solid black; } .flex-item{ color:.. 2023. 12. 1. 6장_CSS 필수 속성 다루기_3 6.7 애니메이션 속성으로 전환 효과 제어하기 정지된 이미지를 연속적으로 보여주어 움직이는 것처럼 적용 키 프레임 정의하기 애니메이션 효과를 전환 효과에 부여하기 위해 키 프레임을 정의 /*기본 형식*/ @keyframes { 0%{/*CSS 코드*/} n%{/*CSS 코드*/} 100%{/*CSS 코드*/} } /*예시*/ @keyframes bgchange{ 0%{background-color:red;} /*시작 시점의 배경은 빨간색*/ /*25%, 50% 등과 같이 중간 지점도 얼마든지 정의가능*/ 100%{background-color:blue;} /*종료 시점의 배경은 파란색*/ } /*위 예시와 동일한 문법*/ @keyframes bgchange{ from{background-color:red.. 2023. 11. 29. 이전 1 ··· 10 11 12 13 14 15 다음