전체 글

[Javascript] 객체 & 배열

Day 11~~ 객체와 배열 개념 구글링해보고 실습하기 여기서 잠깐 이 전까지는 javascript를 그냥 html 파일 내에서 선언해서 사용했는데, 참고하는 강의를 옮기면서 파일 분리를 하고 console창(ctrl+shift+i)에서 띄우는 방식으로 진행했다. 객체(Object) : 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입 (쉽게 생각하면 붕어빵의 틀 같은 느낌) 객체의 특징 변수이나 하나의 객체에 많은 값이 포함될 수 있다. 중괄호 표기를 통해 객체를 생성할 수 있다. key : 문자열 or 기호 value : 모든 유형 가능 properties : 객체에서 명명된 값 객체 변수를 복사하면 참조가 복사된다. (객체가 복사되는 것이 아니다) 객체의 종류 배열 함수 객체 날짜 수..

[Android/안드로이드] 네이버 로그인 서비스 구현하기

step1. 애플리케이션 등록 (네이버 아이디 로그인 오픈 api 신청) https://developers.naver.com/apps/#/register 애플리케이션 - NAVER Developers developers.naver.com 위 사이트에 들어가서 해당하는 정보를 선택하여 애플리케이션을 등록한다. 안드로이드 package명은 Mainfest파일에서 확인가능하다. step2. SDK추가/개발 환경 설정 build.gradle(app) implementation 'com.naver.nid:naveridlogin-android-sdk:4.2.6' sdk추가 https://developers.naver.com/docs/login/sdks/sdks.md SDK 다운로드 - LOGIN 기능 추가 iOS9..

[Javascript] 조건문 / 반복문

Day 10!! 조건문 / 반복문 개념 구글링해보고 실습하기 조건문 if문 : 조건에 부합하는 경우 조건문 아래 내용을 실행한다. var num = prompt('점수를 입력하세요','0~100사이의 정수'); if(num >= 70){ alert('합격입니다'); } - prompt함수 : 사용자에게 문자열을 입력받은 함수 - if문에 부합하면 (num이 70보다 클 경우) 경고창에 합격이라고 띄워준다. if문을 응용해서 쓸 수 있는 것들은 if else, if else if 등이 있다. switch문 : 조건 경우(switch 뒤에 들어오는 조건)에 따라 명령을 각각 지정하는 구문 나머지는 다른 문법과 비슷해서 생략한다. - [new Date().getDay()] : 오늘의 요일을 숫자로 반환한다. ..

[javascript] 변수 선언(var), 디버깅(console.log)

Day 9 !! 변수 선언(var), 디버깅(console.log) 방법 찾아보고 실습하기 변수 선언 1. var : 중복 선언이 가능하다. 선언함과 동시에 값을 할당할 수 있다. ,(쉼표)를 통해 여러 개를 한 문장으로 선언할 수 있다. 지정된 초깃값 없이 선언된 변수는 undefined 값을 갖는다. var sum; // 변수 sum을 선언. undifined var a = 3; // 변수 a를 선언함과 동시에 3을 a에 할당 var b, c, d; var e = 1, f = 2, g = 3; // 여러 변수를 한 번에 선언 및 초기화 가능 위는 변수 var의 특징을 잘 보여준다. 디버깅(console.log) 디버깅이란? : 컴퓨터 과정에서 발생한 오류를 찾기 위해 소스 코드를 한 줄씩 따라가면서 ..

[WEB] html/css 레이아웃

Day8!! 오늘은 css의 마지막 날이다. html, css 레이아웃 구글링해보고 실습하기 레이아웃이란, 특정 공간에 여러 구성 요소를 보기 좋게 효과적으로 배치하는 작업을 의미한다. html 레이아웃 html에서는 아래의 방법으로 레이아웃을 작성할 수 있다. 이 외에도 table 요소를 이용한 레이아웃이 있지만 수정이 매우 어려워서 현재는 거의 사용하지 않는다. div 요소를 이용한 레이아웃 Header 영역 Nav 영역 Section 영역 Footer 영역 HTML5 레이아웃 웹 페이지의 레이아웃을 위한 별도의 새로운 요소(의미 semantic)를 제공한다. [header, nav, section, article, aside, footer] 오늘 배운 내용 1. html/css 레이아웃 div를 이..

[WEB/CSS] flexbox

flex : 요소들을 자유자제로 뮈치 시키는 속성 : flexbox는 구현이 어려운 레이아웃을 간단하게 구현할 수 있게 css3에 추가된 레이아웃 방식이다. : flex-grow, flex-shrink, flex-basis의 축약속성 구성 flexbox는 자식 요소인 flex item과 상위 부모 요소인 flex container로 구성된다. 기본 사용 세팅 flexbox를 만들기 위해서는 부모 요소에 display: flex 속성을 선언하면 된다. .flex_container { display: flex; } 속성 1) 부모 속성 (container) flex-direction : flexible item이 flex 컨테이너 안에 위치되는 방법 지정 [속성값 : row, row-reverse, colu..

[WEB] CSS 기본실습(2) (flex, gird 레이아웃)

Day 7 flex, grid 레이아웃 개념과 적용 방법 구글링해보기 1. flex : 요소들을 자유자제로 뮈치 시키는 속성 : flexbox는 구현이 어려운 레이아웃을 간단하게 구현할 수 있게 css3에 추가된 레이아웃 방식이다. : flex-grow, flex-shrink, flex-basis의 축약속성 0) flexbox - 구성 flexbox는 자식 요소인 flex item과 상위 부모 요소인 flex container로 구성된다. - 기본 사용 세팅 flexbox를 만들기 위해서는 부모 요소에 display: flex 속성을 선언하면 된다. .flex_container { display: flex; } 1) 부모 속성 (container) flex-direction : flexible item이..

[WEB] CSS 기본실습(2)

Day6!! position, margin, padding 구글링해보고 실습하기 1. position : 웹 문서 안 요소들을 어떻게 배치할 지를 정하는 속성 (텍스트나 이미지를 원하는 위치로 배치할 수 있다) : static | relative | absolute | fixed | sticky static 요소를 문서 흐름에 맞추어 배치 relative 이전 요소(주로 부모 요소)에 자연스럽게 연결하여 위치를 지정 absolute 원하는 위치에 지정 fixed 지정한 위치에 고정하여 배치 sticky 위치에 따라 동작방식이 달라짐. 임계점 이전에는 relative와 같이 동작/ 그 이후에는 fixed와 같이 동작 2. margin : 테두리(border)와 이웃하는 요소 사이의 간격인 마진 영역의 크기..

[WEB] CSS 기본실습

Day 5~!! font-size, color, line-height 구글링해보고 실습하기 1. font-size 개념 : 글자 크기를 정하는 속성 [px, %, em, rem] - %, em : 부모 요소의 글자 크기에 대한 상대적인 글자 크기 (100%, 1em = 부모 글자와 사이즈 같다) - rem : html 요소의 글자 크기에 대한 상대적인 글자 크기 2. color 개념 : 글자의 색상을 정하는 속성 red, blue등 이미 정의된 색 #000, #FFFFFF 등의 16진수 색상 코드 rgb(255, 255, 255) 등의 rgb 색상 rgba(200, 100, 150, 0.5) 등의 알파(투명도)가 적용된 rgba 색상 3. line-height 개념 : 줄 높이를 정하는 속성 오늘 배운 ..

[WEB] HTML 기본실습(3)

Day4! 오늘 할 것은~~ id와 class에 대해서 구글링해보고 실습하기 id : 자주 사용하는 스타일에 적용하는 것 : 형태 ) #id_name{속성명: 속성값; 속성명: 속성값;} class : 자주 사용하는 스타일에 적용하는 것 : 형태 ) .class_name{속성명: 속성값; 속성명: 속성값;} id와 class의 차이점 : 우선순위가 다르다. ( id가 더 우선순위에 있다) : 즉, class와 id를 동시에 적용하면 id만 적용된다. 결과 오늘 배운 내용 1. id id의 형태는 #id_name{속성명: 속성값; 속성명: 속성값;} 2. class class의 형태는 .class_name{속성명: 속성값; 속성명: 속성값;}

[WEB] HTML 기본 실습(2)

Day 3 img/input/a 태그 구글링해보고 실습하기 1. : 다른 웹사이트로 가는 링크(하이퍼링크)를 걸어주는 태그 - 속성 1) href : 클릭 시 이동할 링크 2)target : 링크를 여는 방법 _self : 현재 페이지 _blank : 새 탭 _top : 최상위 페이지 2. : 이미지 태그 이미지의 src 속성 안에 사용한다. / alt 속성: 이미지 불러오기가 실패 할 때 화면에 보여질 글자 - 속성 1) arc : 이미지의 경로 2)width : 이미지 가로 크기 3)height : 이미지 세로 크기 3. : 입력창 의미 type은 해당 태그의 속성 type="text" 타입이라는 속성의 값이 text이다. - 속성 1) type : 입력 태그의 유형 type 속성값 기능 text 텍..

[WEB] HTML 기본 실습

벌써 Day2 !! 오늘 해볼 것은 div/span/p 태그 구글링해보고 실습하기 1. : 여러개의 태그를 구역으로 묶거나 나눌 때 사용하는 태그 > div가 다르면 별도의 줄로 나눠진다. 2. : div와 같이 여러개의 태그를 구역으로 묶거나 나눌 때 사용하는 태그. : div와의 차이점 ) 1) 자동 줄 바꿈이 되지 않는다. 줄 바꿈을 위해서는 태그를 사용해야 한다. 2) 박스 형태로 영역이 설정되는 div와 달리 줄단위로 영역이 설정된다. 3. : 문단을 넣을 때 사용하는 태그 결과물 오늘 배울 내용 1. p p는 문단을 넣을 때 사용하는 태그로, 굉장히 긴 텍스트를 넣을 수 있답니다~~ 엄청엄청나게 긴 텍스트도 가능해요 2. div 여러개의 태그를 구역으로 묶거나 나눌 때 사용하는 태그입니다. d..