컴굥일지

코틀린 기초 더 배우기 배열 한 개의 변수에 여러 가지 데이터를 저장 fun main() { val numbers:IntArray = intArrayOf(1,2,3,4,5,6) val numbers2= intArrayOf(1,2,3,4,5,6) //타입 추론 val numbers3= arrayOf(1,2,3,4,5,6) //이렇게만 써도 됨 println(numbers3) // 배열의 주소가 출력된다. print(numbers3.contentToString()) // 내용을 스트링으로 바꾸어준다 println() for (element in numbers3){ print("${element+2} ") //이런다고 number3가 바뀌진 않는다 } println() println(numbers3[0]) /..

코틀린 객체 지향 프로그래밍 기초 OOP 소개 OOP : Object Oriented Programming ex) Java, C#, Kotlin... 5가지 기본 개념 변수와 타입 변수 : 저장 공간에서의 위치 (저장 공간을 나타내기 위해 고유의 이름이 필요 -> 이름으로 데이터에 접근) 흐름 제어 함수 코드를 분리해준다. 코드를 필요할 때 불러 쓸 수 있다. => 재사용이 쉽다 colletions 많은 요소를 한 군데에 저장해준다. 반복을 쉽게 사용할 수 있게 해준다. (상속을 포함한) 클래스와 객체 직접 데이터 타입을 만들게 해준다. 데이터 멤버와 메소드를 한 곳에 있게 해준다. 가독성있고 유지 가능한 코드를 쓸 수 있게 해준다. 클래스와 객체 클래스 != 객체 클래스 : 속성와 기술을 정의해주는 도..

코틀린 기초 안드로이드 스튜디오 실행 : ctrl + shift + F10 안드로이드 스튜디오 자동 정렬 : ctrl + alt + L 변수 그리고 val과 var의 차이점 앱 실행 시간 동안 정보 저장 방법에 가장 기본인 코드 // fun : 함수를 만드는 키워드 fun main() { // main() 앱 시작점을 알려주는 특별한 함수(그래서 왼족에 스타트버튼이 존재한다) // body에 실행하고 싶은 코드를 넣음 // var는 수정이 가능하다. => 변수(mutable variable) var myName = "Jini" myName="Kari" print("Hello " + myName) //출력 // val은 나중에 값을 바꿀 수 없다. => 상수(immutable variable) val my..

ch3.0 : CSS Preprocessors and Set Up SCSS란 CSS Preprocessor다. preprocessor에는 SCSS 말고도 다른 종류도 있다. (ex- stylus) SCSS는 css를 programming language처럼 만든다. SCSS는 compile 또는 build하는 과정이 필요하다. gulf는 compile하거나 transform 해주는 nodeJS 패키지이다. 새로운 코드를 오래된 코드로 바꾸거나, SCSS를 평범한 css로 바꿔준다. ch3.1 : Variable and Nesting const routes = { css: { watch: "src/scss/*", src: "src/scss/styles.scss", //여기서 일어나는 모든 일은 css로 c..

ch2.9 : Place Content justify-content는 grid 자체를 움직이는 것 justify-items는 cell의 배치를 논하는 것 align-content(수직) / justify-content(수평)을 한번에 쓸 수도 있다. place-content: end center; /*수직 수평*/ ch2.10 : Auto Columns and Rows .header { background-color: #2ecc71; align-self:end; /*child에 적용되는 property*/ justify-self:center; place-self: end center; /*위에 두개 한번에 적는 경우*/ } .grid { color: white; display: grid; gap: 5px..

ch2.5 : Shortcuts grid-row-start: 2; grid-row-end: 4; 위 코드는 grid-row : 2/4로 바꿀 수 있다. grid-row : 1/5는 grid-row : 1/-1로 바꿔 쓸 수 있다. 끝에서부터 -1, -2, -3 ... 으로 쓸 수 있다. 위의 방법처럼 시작과 끝을 적는 대신에 span을 쓸 수 있다. 얼마나 많은 cell을 가지고 있는지를 적으면 된다. 시작점이 필요할 때는 grid-row: 2 / span 2 처럼 적어도 된다. ch2.6 : Line Naming /*line에 이름 붙이기*/ .grid { display: grid; gap: 10px; grid-template-columns: [first-line] 100px [second-line] ..

ch2.1 : Life Before Grid flex box로는 grid 형태를 만들기 어렵다. ch2.2 : CSS Grid Basic Concepts .father { display: grid; /*grid 화면 생성 - father에서 해야함*/ grid-template-columns: 250px 250px 250px; /*3개 열 생성*/ grid-template-rows: 100px 50px 300px; /*3개 행 생성*/ column-gap: 5px; /*열 사이 간격*/ row-gap: 10px; /*행 사이 간격*/ } 행과 열의 간격이 동일하면 gap:10px로 적어도 된다. ch2.3 : Grid Template Areas grid-template-columns: 250px 250px..

ch1.4 : align-self and order align-items과 비슷한 일을 한다.(cross axis) 다만, 한 box에만 해당한다. .father { display: flex; flex-direction: row; /*default: row*/ /*Main Axis*/ justify-content: space-around; height: 100vh; } .child { width: 200px; height: 200px; background: peru; color: white; } .child:nth-child(2) { align-self: center; } .child:nth-child(3) { align-self: flex-end; } 위와 같이 코드를 쓰면 아래와 같은 결과가 나온다...

ch1.0 : Life Before Flexbox display: block; block은 element이고, block옆에는 어떠한 element도 올 수 없다. display: inline-block; block 속성을 유지하면서, 옆에 element가 올 수 있다. But, 가로로 block이 나열될 때, 옆에 이상한 공백이 생기게 된다. display: inline; inline은 box가 아니다. 유동적이기 때문에, width와 height가 없다. ex) text ch1.1 : First Rule of Flexbox flexbox에서는 children과 이야기 하지 않는다. flexbox에서 뭔가를 움직이고 싶을 땐, flexbox container를 만들어서 사용한다. flexbox cont..

졸업 프로젝트를 진행하면서 내가 진짜 아무것도 모른다는 것을 느꼈다. 그래서 뭐라도 해봐야겠다는 생각에서 강의를 듣기 시작했다. 어떤 것을 먼저 공부할까 고민하다가, 항상 프로젝트를 할 때 가장 곤란했던 CSS 레이아웃을 선택했다. 개인적으로 토이 프로젝트를 하려고 해도, css가 어려워서 항상 머리가 아팠다. 뭔가 코딩을 해서 쨘! 하고 돌렸을 때 결과가 예쁘게 잘 나와야 계속하고 싶은 마음이 드는데, CSS 조절이 잘 안 돼서 항상 보기가 불편했다. 반응형 web을 좀 제대로 구현해보고 싶은 마음도 있었다. 그래서 노마드코더에서 CSS Layout 강의를 구매해서 들어보기로 했다.