자바스크립트 function
function sayhello(name, age) {
console.log("hello!", name, "i'm", age, "years old");
}
sayhello(han, 15);
-> hello! han i'm 15 years old
<before>
function sayhello(name, age) {
console.log("hello!" + name + "i'm" + age + "years old");
}
<coolthing>
function sayhello(name, age) {
console.log(` hello! ${name} i'm ${age} years old`);
]
----
const title = document.getElementById("title");
title.innerHTML = "hi! From JS"; -> id가 title인 것의 내용을 바꾼다.
title.style.color = "red"; -> id가 title인 것의 색을 바꾼다
condole.dir(title); -> console창에서 확인 할 event를 찾아볼수 있다. 객체인가
window.addEventListener("resize",function'sName);
여기서 finction;sName()으로 하게 되면 resize가 안되도 바로 fuction'sName함수가
호출되는 것이다 ()가 없어야 resize될떄 함수가 호출됨
2020년 1월 30일 목요일
2020년 1월 28일 화요일
전화영어 무료 테스트 4곳.
9:30 파고다 -필리핀 괜찮은것 같아. 대화가 매우 물흐르는 듯함
5일 필리핀 20분 225,000
미국 20분 336,000
9:50 민병철 - 매우밝음 웃음이 많았다.
5일 ??? 20분 198,000
10:10 이터폰
5일 필리핀 20분 158,400
미국 20분 254,400
11:20 ebs
화목요일 8시 스피쿠스 전화 2회무료
12:10 스피쿠스
5일 필리핀 20분 225,000
미국 20분 336,000
9:50 민병철 - 매우밝음 웃음이 많았다.
5일 ??? 20분 198,000
10:10 이터폰
5일 필리핀 20분 158,400
미국 20분 254,400
11:20 ebs
화목요일 8시 스피쿠스 전화 2회무료
12:10 스피쿠스
variable
create -> initialize(초기화) -> use
let a = 221;
let b = a - 5;
console.log(b);
변수의 값을 변하게 하지 않게 정하고싶다면
let 대신 const(constant 상수)를 사용하면 한번 정한 변수값을
실수로 다음에 바꿀 수 없다.
첫사용은 const , let은 꼭 필요할때만 사용!
string "텍스트"; boolean : true/false; number floats
camel case: 시작은 소문자로 daysOfWeek <- 처럼 스페이스가 필요한곳은 대문자로
Array는 []
const daysOfWeek = ["mon", "tue", "wed", "thu", "fri"];
console.log (dayOfWeek[1]); ->2번째 값을 출력
Object는 {}
const myInfo = {
name : "han",
age : 55,
gender : "male",
favFood [
{
name : "gogi",
fatty : true
},
{
name : "milk",
fatty : false
}
]
}
console.log(myInfo.favFood[1].fatty);
let a = 221;
let b = a - 5;
console.log(b);
변수의 값을 변하게 하지 않게 정하고싶다면
let 대신 const(constant 상수)를 사용하면 한번 정한 변수값을
실수로 다음에 바꿀 수 없다.
첫사용은 const , let은 꼭 필요할때만 사용!
string "텍스트"; boolean : true/false; number floats
camel case: 시작은 소문자로 daysOfWeek <- 처럼 스페이스가 필요한곳은 대문자로
Array는 []
const daysOfWeek = ["mon", "tue", "wed", "thu", "fri"];
console.log (dayOfWeek[1]); ->2번째 값을 출력
Object는 {}
const myInfo = {
name : "han",
age : 55,
gender : "male",
favFood [
{
name : "gogi",
fatty : true
},
{
name : "milk",
fatty : false
}
]
}
console.log(myInfo.favFood[1].fatty);
2020년 1월 27일 월요일
2020년 1월 21일 화요일
노마드코더의 ui 아이디어 얻는 방법
- dribbble.com 사이트에서 사람들이 올려놓은 것을 참고한다.
- pinterest.com 에서 관련 UI를 검색해서 참고한다.
- subtle patterns.com 다양한 패턴의 배경화면을 얻을 수 있다.
- uigradients.com 다양한 그라데이션을 적용가능
맘에 드는 사이트 들어가서
개발자 검사를 통해 코드를 가져온다.
ex> stripe.com 에서 hover 된 box-shape를 가져옴
.chat {min-height: 100vh; }
class:chat 인 div에 viewport(=screen)에 100%높이를 주는거임
- pinterest.com 에서 관련 UI를 검색해서 참고한다.
- subtle patterns.com 다양한 패턴의 배경화면을 얻을 수 있다.
- uigradients.com 다양한 그라데이션을 적용가능
맘에 드는 사이트 들어가서
개발자 검사를 통해 코드를 가져온다.
ex> stripe.com 에서 hover 된 box-shape를 가져옴
.chat {min-height: 100vh; }
class:chat 인 div에 viewport(=screen)에 100%높이를 주는거임
노마드코드 깃허브로 무료 호스팅하는법
1. github desktop에서 branch 생성하기 (이름은 무조건 gh-pages)
2. 깃허브에서 branch가 생성되었는지 확인 후 해당 url로 가보자
( http://사용자 닉네임.github.io/project name)
변경사항을 적용하는법
1. master branch 에서 변경사항을 commit 한다.
2. gh-pages 에서 update from master branch를 하고
3. master branch와 gh-pages branch 모두 push를 해준다
- gh-pages에 대한 추가 설명
index.html 파일은 무조건 필요하다
폴더에 대문자가 있어도 안될 수도 있다.
2. 깃허브에서 branch가 생성되었는지 확인 후 해당 url로 가보자
( http://사용자 닉네임.github.io/project name)
변경사항을 적용하는법
1. master branch 에서 변경사항을 commit 한다.
2. gh-pages 에서 update from master branch를 하고
3. master branch와 gh-pages branch 모두 push를 해준다
- gh-pages에 대한 추가 설명
index.html 파일은 무조건 필요하다
폴더에 대문자가 있어도 안될 수도 있다.
2020년 1월 16일 목요일
니꼴라스 코드 복습 후기
- 백그라운드를 css에 설정해준다
background-image: url("http://www.ddsafa/dsadsa/dsa");
background-size: contain / cover/ ... ;
background-repeat: no-repeat;
contain은 작은 이미지를 맞춰서 할수 있고
cover은 작은 이미지를 늘려서 맞춰준다.
-별모양은 전부 하나의 div에 넣어두고
.stat:last-child {
} 로 설정하는구나
- * {
box-sizing :border-box;
} -> padding을 추가하더라도 박스사이즈를 키우지 말아줘
-position : absolute;
는 position:static; 이 아닌 부모를 기준으로 움직인다.
만약 부모중 relative, absolute, fixed 가 없다면 body를 기준으로 움직인다.
background-image: url("http://www.ddsafa/dsadsa/dsa");
background-size: contain / cover/ ... ;
background-repeat: no-repeat;
contain은 작은 이미지를 맞춰서 할수 있고
cover은 작은 이미지를 늘려서 맞춰준다.
-별모양은 전부 하나의 div에 넣어두고
.stat:last-child {
} 로 설정하는구나
- * {
box-sizing :border-box;
} -> padding을 추가하더라도 박스사이즈를 키우지 말아줘
-position : absolute;
는 position:static; 이 아닌 부모를 기준으로 움직인다.
만약 부모중 relative, absolute, fixed 가 없다면 body를 기준으로 움직인다.
2020년 1월 12일 일요일
다시 일주일 ( 노마드 코드, 생각정리)
노마드 아카데미 7일차.
퀴즈와 실습이 병행되었을때는 확실히 뭔가 더 알아가는구나라는 느낌을 확실히 받을 수 있었다.
이론이 없어지고 실습위주의 첼린지로 바뀐 지금 뭐랄까 내가 기대했던것보다 아주 단순히
흘러가는 느낌을 받았다. 아마 내 이 수업이 당연히 낮은 기준의 수업이라 그럴 것이다.
항상 너무 힘 주지 않고 조금은 힘 풀수 있는 상태로 해쳐나가기 바란다.
베트남 건으로 공부를 시작한지 역시 7일차.
무엇을 준비해야 할지 갈피를 찾지 못하겠다.
페인트에 대해 공부를 하자니 내가 페인트 팔이도 아닌데.. 지금생각해보니 알아두는 것도 매우 좋은것 같다. 전반적인 페인트 공부라..
어찌해야할지 모를때 그냥 해보는 수밖에 없다고 어제 배웠다.
나머지 , 내가 무슨 준비를 해가든 큰도움은 안될 것이다.
낮은자세로 웅크리고 조금씩 조금씩 전진하는 것만 생각하자.
다시한번 거만해지지말자.
퀴즈와 실습이 병행되었을때는 확실히 뭔가 더 알아가는구나라는 느낌을 확실히 받을 수 있었다.
이론이 없어지고 실습위주의 첼린지로 바뀐 지금 뭐랄까 내가 기대했던것보다 아주 단순히
흘러가는 느낌을 받았다. 아마 내 이 수업이 당연히 낮은 기준의 수업이라 그럴 것이다.
항상 너무 힘 주지 않고 조금은 힘 풀수 있는 상태로 해쳐나가기 바란다.
베트남 건으로 공부를 시작한지 역시 7일차.
무엇을 준비해야 할지 갈피를 찾지 못하겠다.
페인트에 대해 공부를 하자니 내가 페인트 팔이도 아닌데.. 지금생각해보니 알아두는 것도 매우 좋은것 같다. 전반적인 페인트 공부라..
어찌해야할지 모를때 그냥 해보는 수밖에 없다고 어제 배웠다.
나머지 , 내가 무슨 준비를 해가든 큰도움은 안될 것이다.
낮은자세로 웅크리고 조금씩 조금씩 전진하는 것만 생각하자.
다시한번 거만해지지말자.
2020년 1월 9일 목요일
노마드 아카데미 수업 5일차
강의는 아주 쉽다.
듣고 이해하고 알아먹는건 너무도 간단하고 쉬워서 내가 똑똑한가라는
착각마저 들게 하는 수준이다.
하지만 노마더 아카데미의 핵심은 '실습과 퀴즈' !
매일 학습한 것을 바탕으로 퀴즈와 실습을 하게되는데
하는 순간 코딩의 현실을 느끼게 해준다.
배운대로 이렇게 이렇게 저렇게 짠!
뭐지 이게..... 왜안되지 이건...
아마 코드의 본질적인 속성을 이해하고 공부하지 않는 이상 한번에 무언가를
만든다는 것은 불가능 할 것이라고 생각된다.
가령, div코드가 어떤 상황에선 body를 따라가고 또다른 상황에선 parent 코드를 따라가는
지 너무도 많은 변수를 가지고 있다고 생각한다.
실습을 하는내내 비틀어진 div 위치를 옮기기 위한 코드를 찾고,
뒤로 숨겨진 div 위치를 바로 잡기위해 또 검색을 하는 과정이
실제로 코딩을 한다는 느낌을 받을 수 있는 참교육의 현장이라 생각된다.
강의 중 뜬끔없이 나온 nav의 정체가 궁금했던 어느 한 댓글의 대댓글로 니꼴라스는
그냥 기술적인 차이인거야! 라고 답했을 뿐 자세한 설명은 없다.
전형적인 한국인이로써 저게 무슨 가르친다는 자세야...
라고 순간 나도 생각했지만 실습을 거듭할 수 록 스스로 찾아야 하는 자세를 길러야
한다는 걸 2조2천억 퍼센트로 느낀다.
평생 한국의 떠다먹여주는 교육에 익숙해진 내가 스스로 무엇인가를 찾고
해결하는 능력을 키워주는 Nomard Academy에 감사함을 느낀다.
새로운 학습방법을 익히고자하는 분들께 추천드린다.
듣고 이해하고 알아먹는건 너무도 간단하고 쉬워서 내가 똑똑한가라는
착각마저 들게 하는 수준이다.
하지만 노마더 아카데미의 핵심은 '실습과 퀴즈' !
매일 학습한 것을 바탕으로 퀴즈와 실습을 하게되는데
하는 순간 코딩의 현실을 느끼게 해준다.
배운대로 이렇게 이렇게 저렇게 짠!
뭐지 이게..... 왜안되지 이건...
아마 코드의 본질적인 속성을 이해하고 공부하지 않는 이상 한번에 무언가를
만든다는 것은 불가능 할 것이라고 생각된다.
가령, div코드가 어떤 상황에선 body를 따라가고 또다른 상황에선 parent 코드를 따라가는
지 너무도 많은 변수를 가지고 있다고 생각한다.
실습을 하는내내 비틀어진 div 위치를 옮기기 위한 코드를 찾고,
뒤로 숨겨진 div 위치를 바로 잡기위해 또 검색을 하는 과정이
실제로 코딩을 한다는 느낌을 받을 수 있는 참교육의 현장이라 생각된다.
강의 중 뜬끔없이 나온 nav의 정체가 궁금했던 어느 한 댓글의 대댓글로 니꼴라스는
그냥 기술적인 차이인거야! 라고 답했을 뿐 자세한 설명은 없다.
전형적인 한국인이로써 저게 무슨 가르친다는 자세야...
라고 순간 나도 생각했지만 실습을 거듭할 수 록 스스로 찾아야 하는 자세를 길러야
한다는 걸 2조2천억 퍼센트로 느낀다.
평생 한국의 떠다먹여주는 교육에 익숙해진 내가 스스로 무엇인가를 찾고
해결하는 능력을 키워주는 Nomard Academy에 감사함을 느낀다.
새로운 학습방법을 익히고자하는 분들께 추천드린다.
2020년 1월 7일 화요일
-Trasition(트렌지션)
state(active,hover,visited,focus)가 바뀔떄 어떻게 바뀔지를 효과를 줌
ex.
.box:hover {
backgrounds-color: red;
transition: margin-rigth 5s(변화시간, 5초동안) .5s(대기시간, 0.5초 후에);
}
-Transformation(트렌스포메이션)
ex. transform: rotate(20deg);
transition과 함께쓰면 더욱 효과적인다.
-Animation(애니메이션)
.box {
width=500px;
height=500px;
animation: 1s NAME infinite 효과;
}
ex1. 줄어들고 끝
@keyframes NAME {
from{ transform:none; }
to{ transform: rotate(1turn) scale(.5, .5); }
}
ex2. 줄어들고 다시 커짐
@keyframes NAME {
0%{ transform:none; }
50%{ transform: rotate(1turn) scale(.5, .5); }
100%{transform:none; }
}
-media queries
body {
background-color:red;
}
@media screen and (min-width:320px) and (max-width:630px) {
body {
background-color : blue;
}
}
-> 화면이 줄어드면 배경화면이 파랑색으로 줄어들게 만들 수 있다.
state(active,hover,visited,focus)가 바뀔떄 어떻게 바뀔지를 효과를 줌
ex.
.box:hover {
backgrounds-color: red;
transition: margin-rigth 5s(변화시간, 5초동안) .5s(대기시간, 0.5초 후에);
}
-Transformation(트렌스포메이션)
ex. transform: rotate(20deg);
transition과 함께쓰면 더욱 효과적인다.
-Animation(애니메이션)
.box {
width=500px;
height=500px;
animation: 1s NAME infinite 효과;
}
ex1. 줄어들고 끝
@keyframes NAME {
from{ transform:none; }
to{ transform: rotate(1turn) scale(.5, .5); }
}
ex2. 줄어들고 다시 커짐
@keyframes NAME {
0%{ transform:none; }
50%{ transform: rotate(1turn) scale(.5, .5); }
100%{transform:none; }
}
-media queries
body {
background-color:red;
}
@media screen and (min-width:320px) and (max-width:630px) {
body {
background-color : blue;
}
}
-> 화면이 줄어드면 배경화면이 파랑색으로 줄어들게 만들 수 있다.
니꼴라스 카카오코딩 첫 코딩실습.
오늘 드디어 첫 코딩 실습이 나왔다.
결과는 3시간 걸렸다.....
그냥 보기에는 간단한 박스들의 배열과 위치조정인데
배운것을 활용하는 과정에서 생각과는 전혀다르게 흘러간다는 것을 느꼈다.
시작하자마자 좌절을 느낄 수 있다. 아 나는 코딩이랑은 전혀 소질이 없단말인가..
알려준 코드를 통해 착착하면 촥촥 적용될 줄 알았던 코딩이 계속해서 찾아보고 검색하고
적용해보고 다시지우고
왜 그런가 물어보기도 하고
난리란 난리는 다 피워야 박스 나열정도 할 수 있구나를 느낄 수 있었다.
코딩을 만만히 보지는 않았지만 자신감에 넘쳐 있던 나를 다시금 반성할 수 있는 아주 좋은
실습과제였던거 같다.
수업을 좀더 자세히 듣도록 노력할 것 이며, 배운 것도 철저히 복습해야겠다.
그냥 듣는 수업이 아니란 걸 일찍 깨우쳐준 노마드 아카데미에 감사한다.
결과는 3시간 걸렸다.....
그냥 보기에는 간단한 박스들의 배열과 위치조정인데
배운것을 활용하는 과정에서 생각과는 전혀다르게 흘러간다는 것을 느꼈다.
시작하자마자 좌절을 느낄 수 있다. 아 나는 코딩이랑은 전혀 소질이 없단말인가..
알려준 코드를 통해 착착하면 촥촥 적용될 줄 알았던 코딩이 계속해서 찾아보고 검색하고
적용해보고 다시지우고
왜 그런가 물어보기도 하고
난리란 난리는 다 피워야 박스 나열정도 할 수 있구나를 느낄 수 있었다.
코딩을 만만히 보지는 않았지만 자신감에 넘쳐 있던 나를 다시금 반성할 수 있는 아주 좋은
실습과제였던거 같다.
수업을 좀더 자세히 듣도록 노력할 것 이며, 배운 것도 철저히 복습해야겠다.
그냥 듣는 수업이 아니란 걸 일찍 깨우쳐준 노마드 아카데미에 감사한다.
2020년 1월 6일 월요일
니꼴라스 코코아 클론 코딩.
html파일 내부의 head 태그안에서 <style>을 통해 조정하는ㄴ 방법 internal
css파일을 새로 만들어서 head 태그안에 <link href="sytles.css" rel="stylesheet">
적용하면 external 방식
padding: 20px 10px; 상하 좌우
padding: 5px 10px 8px 20px; 는 상 우 하 좌(시계방향)
margin : border 외부의 간격을 조정
border: width style color;
block 은 크기에 상관없이 옆으로는 아무것도 허용하지 않는다. default 값
display : inline-block; 해주면 옆으로 가능
-박스는 둘중 하나를 선택해줘야한다.
display: inline; 은 텍스트의 값에따라 적용해주는 것
모든박스의 default 값은 position: static;
positon:fixed;는 스크롤 해도 계속 그자리에 따라댕김 고정됬기 때문에.
position:absolute; 는 부모관계 태그에 상응하는 태그를 기준으로 위치를 이동한다.
position:relative; 기준으로 자리잡음(relative가 없는 경우 본문body를 기준으로 이동)
display: flex; 부모태그에만 설정해주면 자식들이 알아서 inline-block처럼 정렬한다.
justify-content : ; 가로방향으로 설정을 가능하게
align-items: ; 세로방향을 설정
flex-direction: column; 은 세로방향으로 콘텐츠를 세워줌 row; defualt값 수평
row냐 column이냐에 따라서 justify-content 값과 align-items값이 가로/세로가뒤바뀜
flex-wrap: wrap; 으로 설정해주면 넘치는 부분에 대해서는 다음줄로 넘어감
div>div{$}*10
>는 div안에 div를 만든다 . {}는 div사이의 내용을 넣는다
div(span)
div다음에 span을 만든다( div 안과는 다름)
박스안에 내용을 움직이고 싶으로 그 해당 박스를 display:flex; 해주면 된다.
가상의 selector 해주는법 (해당 input에 class를 설정해 줘도 되지만)
<style> 안에서
input[type="password"] {
background-color : red;
}
box:last-child {} 하면 마지막 박스만 바꿔줄수 있다
box:nth-chiild(2 or 2n+1 or 3n+4) {} ()의 숫자로 몇번쨰를 바꿀것인가 정할 수 있다.
input + .box {} 는 둘이 형제라는 것
.container > .box {} 직계 자식만 해당함
ex>
<div class="container">
<div class="box">
<div class="box chilf"></div> <--이놈은 직계가 아니다
</div>
<div class="box"></div>
<div class="box"></div>
</div>
.box { background-color: red;} 그리고 써도됨
.box:hover {} 뭔가 위에 올라가면 색이 바뀌거나 지정된 일이 생김
.box:active {} 클릭 햇을경우
block 은 크기에 상관없이 옆으로는 아무것도 허용하지 않는다. default 값
display : inline-block; 해주면 옆으로 가능
-박스는 둘중 하나를 선택해줘야한다.
display: inline; 은 텍스트의 값에따라 적용해주는 것
모든박스의 default 값은 position: static;
positon:fixed;는 스크롤 해도 계속 그자리에 따라댕김 고정됬기 때문에.
position:absolute; 는 부모관계 태그에 상응하는 태그를 기준으로 위치를 이동한다.
position:relative; 기준으로 자리잡음(relative가 없는 경우 본문body를 기준으로 이동)
display: flex; 부모태그에만 설정해주면 자식들이 알아서 inline-block처럼 정렬한다.
justify-content : ; 가로방향으로 설정을 가능하게
align-items: ; 세로방향을 설정
flex-direction: column; 은 세로방향으로 콘텐츠를 세워줌 row; defualt값 수평
row냐 column이냐에 따라서 justify-content 값과 align-items값이 가로/세로가뒤바뀜
flex-wrap: wrap; 으로 설정해주면 넘치는 부분에 대해서는 다음줄로 넘어감
div>div{$}*10
>는 div안에 div를 만든다 . {}는 div사이의 내용을 넣는다
div(span)
div다음에 span을 만든다( div 안과는 다름)
박스안에 내용을 움직이고 싶으로 그 해당 박스를 display:flex; 해주면 된다.
가상의 selector 해주는법 (해당 input에 class를 설정해 줘도 되지만)
<style> 안에서
input[type="password"] {
background-color : red;
}
box:last-child {} 하면 마지막 박스만 바꿔줄수 있다
box:nth-chiild(2 or 2n+1 or 3n+4) {} ()의 숫자로 몇번쨰를 바꿀것인가 정할 수 있다.
input + .box {} 는 둘이 형제라는 것
.container > .box {} 직계 자식만 해당함
ex>
<div class="container">
<div class="box">
<div class="box chilf"></div> <--이놈은 직계가 아니다
</div>
<div class="box"></div>
<div class="box"></div>
</div>
.box { background-color: red;} 그리고 써도됨
.box:hover {} 뭔가 위에 올라가면 색이 바뀌거나 지정된 일이 생김
.box:active {} 클릭 햇을경우
직장인 체험기 2일차
아주 매우매우 운이 좋게 좋은 대표님들과 함께 일할 기회가 찾아왔다.
어느 대표님의 배려로 남들은 체험하기 쉽지 않은 경험들을 시작하게 되었다.
직장은 꿈에서조차 생각하지 않은 나인지라 아직은 모든거 어색하고
앉아있는 것 조차 서툰 것 같은 기분이다.
아침 7시 나를 위한 공부를 하기 위해 자리에 앉아 강의를 듣고 ,
어느 대표님의 배려로 남들은 체험하기 쉽지 않은 경험들을 시작하게 되었다.
직장은 꿈에서조차 생각하지 않은 나인지라 아직은 모든거 어색하고
앉아있는 것 조차 서툰 것 같은 기분이다.
아침 7시 나를 위한 공부를 하기 위해 자리에 앉아 강의를 듣고 ,
피드 구독하기:
글 (Atom)