분류 전체보기
-
JavaScript 함수 개요 및 작성법JavaScript/JavaScript 2019. 12. 23. 22:26
191223 수업 내용 정리 함수 어떤 기능을 가진 최소한의 작업 단위(특정 목적을 가짐, 계산, 저장, 조회, 출력 등) 함수 작성 양식 function funcName() {} 함수명은 카멜 케이스(camelCase)로 작성 카멜 케이스(Camel Case) : 첫글자는 소문자, 이어지는 부분은 대문자로 작성 ex) camelCase 함수의 종류 사용법에 따른 분류 내장함수 : 프로그래밍 언어에 이미 들어있는 함수 사용자정의 함수 : 사용자가 새롭게 만드는 함수 기능에 따른 분류 매개변수 X, 반환값X : 단순하고 반복적인 기능 수행, 일일이 보고할 필요 없음 function print() {document.write("단순-반복 기능 수행 ")} print(); //함수 호출 매개변수 O, 반환값X..
-
JavaScript 변수의 개요 및 작성법JavaScript/JavaScript 2019. 12. 21. 02:44
191220 수업 내용 정리 변수의 개요 및 작성법 변수 : 사용자로부터 값을 입력받아 저장하는 공간(메모리) 변수 선언 : 데이터가 들어갈 공간을 만들어주는 것 ▷형식) var 변수명(임의 지정 가능, 보통 명사형) = 저장할 값(하나의 값만 가능); 여러 개의 변수를 var 옆에 연속으로 작성 가능 ex) var a = 10, b = 5, c = a > b; (일종의 축약문) 변수 선언만 하고 값을 추후에 할당하는 것도 가능함 ex) var a; a=5; 변수명은 대소문자를 구분함 but, 주로 소문자 사용 변수명 : 영문+숫자+특수기호(&, _) 조합 가능, 단 숫자로 시작할 수 없음 Camel Case : 변수명을 두 단어 이상으로 지정할 때, 가장 앞 글자는 소문자로, 뒤에 오는 단어의 앞 글자..
-
JavaScript 개요 및 주석(comment)JavaScript/JavaScript 2019. 12. 21. 02:07
191219 수업 내용 정리 JavaScript 간단한 개요 html문서 내부에 작성(head or body 내부) 자바스크립트(소스파일) → 컴파일 X (에러체크 어려움) → 실행 ※ 일반적인 컴퓨터 언어(컴파일 언어) 동작 방식 : 문법에 맞게 내용 작성(source file) → 컴파일(comfile, 컴퓨터가 알아듣는 문장으로(2진수) 변환) → 메모리(RAM)에 올려서 실행(Run) 함수형 언어로 구성(JAVA의 Method와 유사) 플랫폼(운영체제)과 상관없이 실행 됨 ∵엔진이 브라우저에 있음 따로 파일을 만들어 불러 올 수 있음 주석 처리 한 줄 주석 : //주석 처리되는 문장 여러줄 주석 : /* 주석 처리되는 여러 줄의 문장들 */ 점점 중요성이 커지고 있는 자바스크립트의 간단한 개요와 ..
-
CSS3 속성 몇 가지, AnimationFront-end/CSS 2019. 12. 21. 01:43
191220 수업 내용 정리 CSS3 속성 몇 가지 border-radius : 테두리의 둥글기를 지정, 숫자가 커질수록 원에 가까워짐 box-shadow : 오른쪽 그림자 크기, 아래쪽 그림자 크기, 번지는 정도, 색상 ex) box-shadow:10px 10px 30px #666666; 오른쪽 10px, 아래쪽 10px 크기, 30px 넓이로 퍼짐, #666666 색을 가짐 background-size : width height; text-shadow : 텍스트 그림자 지정, 들어가는 값은 box-shadow와 동일 색상을 rgba(r, g, b, a)로 지정하면 4번째 값에 opacity(투명도 : 0 ~ 1)를 부여할 수 있음 animation animation-duration : 작동시간(초) ..
-
CSS Position, Float, Pre, Vendor PrefixFront-end/CSS 2019. 12. 19. 23:48
191219 수업 내용 정리 position 속성 - 위치 설정 속성(width, height와 같이 사용) 1. static : 작성한 순서대로 화면에 배치, default 2. absolute : 절대 좌표 지정, 포함되어 있는 요소의 기준점 기준 ( default = 브라우저 좌측 상단 ) ex) div {position: absolute; top: 0px; left: 0px;} (크기 지정 필수, 편의상 생략, 아래의 예들도 동일) → 해당 div태그가 브라우저 좌측 상단에 위치 3. relative : 상대적인 좌표 지정, 기준 default = 요소가 만들어지는 흐름 안에서 이전 요소의 끝부분이 원래 있어야 할 위치 ex) div {position: relative; top: 10px; lef..
-
CSS 배경(Background), 문단 속성, 단위Front-end/CSS 2019. 12. 19. 23:19
191219 수업 내용 정리 배경 속성 background : 배경 상위 속성 ▷하위 속성 - 1. background-color : 색상 2. background-image : url(이미지파일 경로) 3. 이미지 반복 속성 : repeat-x (가로로 반복 출력) repeat-y (세로로 반복 출력) no-repeat (반복 안 함) 4. fixed : 이미지 고정 5. background-position : x-position y-position; 이미지 위치 지정 ▷ 가로 위치 값 : left, center, right, 백분율, 길이 세로 위치 값 : top, center, bottom, 백분율, 길이 ex) background: color url() repeat fixed position; →..
-
CSS Box Model - 여백, 테두리Front-end/CSS 2019. 12. 19. 23:06
191219 수업 내용 정리 여백 속성 margin : 해당 태그의 바깥쪽 여백 / padding : 안쪽 여백 ▷ top, right, bottom, left 시계방향으로 여백 지정 ex) margin: 10px 15px 10px 15px; → 상하 10px, 좌우 15px의 바깥쪽 여백을 가짐 ▷ margin-top 처럼 개별적으로 지정할 수도 있음 ▷ margin: npx; 과 같이 하나의 값만 주면 전방위로 npx만큼의 여백을 적용 ▷ margin: npx auto; = margin-top/bottom:0px; margin-left/right:auto → 상하는 0px, 좌우는 해당 태그가 중앙에 오도록 자동으로 설정됨 ※ padding도 margin과 동일한 방식으로 작용 - 두 여백의 차이점을..