이번 일지에서는 자바스크립트의 기초을 활용해 예제를 공부해보겠습니다. Q. 0부터 n-1까지 더하는 함수 만들기 function get_sum(n){ let sum = 0; for(let i = 0; i < n; i++){ sum = sum + i; // = (sum += i) } return sum } let result = get_sum(150) console.log(result) Q1. 포도는 몇개일까? let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기'] let count = 0 for(let i = 0; i < fruit_list.length; i++){ let fruit = fruit_list[i] if (fruit == ..
이번 일지에서는 자바스크립트의 기초 문법에 대해 공부한 내용을 기록하였습니다. 기존 공부하던 자바 언어와 비슷한 점이 많은 문법이었습니다. let num = 250 let = 변수를 선언하는 문법 num = 변수의 이름 250 = 변수에 넣을 값 console.log(num) >> 250 출력 여기서 num = 1000 으로 재할당해주면 재할당된 값이 출력됩니다. let a = 1 let b = 2 let c = a + b console.log(c) >> 3 console.log(a * b) 처럼 곱셈도 가능합니다. let first = 'gnob' let last = 'ong' console.log(first + last) // 문자열 더하기 가능 // gnobong console.log(first +..
자바스크립트에 대한 공부를 '앱개발' 과 더불어 해나가고자 합니다. 이번 일지에서는 기본적인 개념과 앱 서비스의 전반적인 개요에 대해 공부한 내용을 기록하였습니다. * 앱 서비스를 만든다 는 것은 "클라이언트와 서버를 모두 만든다는 것"을 의미합니다. 여기서 클라이언트는 '사용자가 보는 화면 (어플)' 을 말합니다. 앱 서비스는 전반적으로 데이터가 담겨있는 서버에서 데이터를 요청하고 데이터를 응답하는 과정을 말합니다. 앱을 개발하기 위해서는 안드로이드 또는 IOS를 선택해 개발할 수 있습니다. 둘은 OS(즉 환경)이 다르기 때문에 각기 다른 개발 기술이 필요합니다. 안드로이드는 Java 와 Kotlin, iOS는 Swift라는 기술로 개발이 가능합니다. 1. 안드로이드와 iOS를 각각 개발하는 것 = 네..
강의를 참고해 객체에 간단한 애니메이션을 주는 방법에 대해 알아봅니다. 먼저 CSS에는 애니메이션에 쓰일 Animation 속성이 있는가 하면 간단하게 바꿀 수 있는 Transition 과 Transform 속성이 있습니다. Transition은 속성을 서서히 변화시키는 효과, Transform은 객체를 회전시키거나 크기 조절, 이동, 기울임 등을 지정할 수 있는 속성입니다. Introduction Transition transition : property timing-function duration delay | initial | inherit property : 속성을 정할 수 있습니다. ex) width, background 등을 포함할 수 있습니다. timing-function : 트랜지션의 속도..
강의를 참고해 홈페이지 디자인, UI를 만들어봅니다. 간단하게 들어갈 요소와 구성, 레이아웃은 어떻게 할 것인지 생각해봅니다. 이번 실습에서는 Float Layout 방법을 사용해 요소들을 배치할 것입니다. Introduction Float Layout은 요소들을 좌측이나 우측에 위치시킬 수 있는 옵션입니다. float: left | right 필요한 요소 : 버튼 = 로그인 / 회원가입 / 마이페이지 / 주문배송 조회 / 장바구니 / 이용안내 / 고객센터 / 게시판 등 로고(버튼 좌측에 위치하도록 함) 가장 먼저 보여질 Top Bar 부분 전체 코드 (Editing_homepage.html) 로그인 | 회원가입 | 마이페이지 | 주문배송 조회 | 장바구니 | 이용안내 | 고객센터 | myshop 소개 ..
강의를 참고해 절대 위치와 상대 위치에 대해 알아봅니다. 절대 위치와 상대 위치는 position 위치에 대한 요소를 의미합니다. 절대 위치는 다른 객체에 영향받지 않고 지정한 위치나 속성에 따라 고정값을 가지는 위치를 의미합니다. 절대값이며, 부모 요소를 기준으로 위치를 정하게 됩니다.상대 위치는 자신의 위치에서 상대적인 위치로 이동이 되는 속성입니다. 다른 객체를 이용할 수 있고, 간단히 이동하고자 할때 사용하기도 합니다. Introduction 보통 도형이나 박스 혹은 객체들을 만들어줄때 크기나 위치를 지정해주기도 합니다. 크기 속성으로는 width (너비 - 가로) 와 height (높이 - 세로) 속성이 있고,위치 속성으로는 position : absolute | relative 외로 left ..
강의를 참고해 박스에 스타일을 적용합니다. 태그 내에 box-shadow 속성을 적용하여 박스에 그림자를 적용하고, 태그 내에 border, border-color, border-width 등의 속성을 이용해 테두리를 적용합니다. Introduction 박스 그림자 속성은 box-shadow 를 통해 지정해 줄 수 있습니다. box-shadow: none | x-position y-position blur spread color | inset | initial | inherit 이러한 문법을 가지는데, 왼쪽부터 none : 그림자를 적용하지 않음 x-position : 가로에 대한 그림자 위치를 나타내며, + 시 오른쪽에 그림자가 생기고, - 시에는 왼쪽에 그림자가 만들어집니다. (필수) y-positi..
강의를 참고해 선택자에 대한 예제를 실습해봅니다. 간단한 실습이며, h1 = 적용하고자 하는 태그 test1 = 임의 클래스명 { color : blue } = 지정하고자하는 속성 전체 코드 (class_selector.html) 가벼운 마음으로 배우는-녹색 가벼운 마음으로 배우는-파란색 가벼운 마음으로 배우는-빨간색 Result 다음은 구조 선택자입니다. 구조 선택자는 '일반구조 선택자'와 '형태구조 선택자'로 나뉩니다. 일반구조 선택자에서는 홀수나 짝수번째에 다른 스타일을 적용하고자할때 사용합니다.'요소의 class 특성에 기반해 요소를 선택하는 선택자' 입니다. 형태구조 선택자에서는 일반구조 선택자와는 다르게 태그의 형태를 구분합니다. 특정 태그를 선택하여 스타일을 적용하게됩니다. 선택자 형태 : ..
