태기의 개발 Blog 태기의 개발 Blog

위코드

• CSS - 개구리 게임(2)

  CSS/CSS 2020. 4. 29. 10:48

  Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 저기에 있는 개구리들을 연못 색깔에 알맞게 배치해야 한다. 처음에는 flex-direction: column; 속성을 이용해서 가로를 기준으로 수직 정렬을 시킨다. #pond { display: flex; flex-direction: column; } 이제 여기서, 저 개구리 무리들을 밑으로 내리기만 하면 된다. 그러면 align-items: flex-end; 속성을 적용시켜보자. #pond { display: flex; flex-direction: column; align-items: flex-end; } 하지만, 개구리 무리들이 오른쪽으로 이동되었다. 이유를 찾아보니, Flex의 방향이..

  Read More
• CSS - flex 개구리 게임(1)

  CSS/CSS 2020. 4. 28. 17:26

  Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com flex 속성을 익히고자 Flexbox Froggy라는 게임을 했다. 1단계에서 9단계까지 순조롭게 진행되었다. 하지만, 10단계에서 막혔는데 어떤 문제였느냐..? 바로! 이 개구리들을 같은 색깔의 연못에 올려놔야 한다. 일단, flex-direction: row-reverse;로 접근했다. #pond { display: flex; flex-direction: row-reverse; } flex-direction: row-reverse; 속성으로 가로 정렬에서 역순으로 배치하기에 성공했다. 이제 이 개구리들을 옆으로 옮기기만 하면 되는데, justify-content: flex-start를..

  Read More
• CSS - 인스타 클론(1)

  CSS/CSS 2020. 4. 28. 16:53

  보이는 사진처럼 로그인 폼을 만들었다. 하지만, 보이는 것처럼 input 태그와 button태그에 그림자가 껴있는 걸 볼 수 있다. 로그인 * { box-sizing: border-box; } body { background-color: rgba(var(--b3f, 250, 250, 250), 1); min-height: 100vh; display: flex; align-items: center; } .login-form { margin: 0 auto; display: flex; flex-direction: column; background-color: white; border: 1px solid rgba(var(--b6a, 219, 219, 219), 1); width: 350px; height: 30..

  Read More
• Semantic 태그에 대해서

  Trainings/세션 정리 2020. 4. 25. 21:18

  Semantic 태그란 무엇인가? 브라우저와 개발자 모두가 그 의미를 명확히 알 수 있게 하는 태그를 바로 Semantic 태그라고 부른다. 예를 들어, 태그나 태그는 내용에 대해서 아무 의미를 알 수 없다. 하지만, , 태그와 같은 태그들은 내용을 명확하게 알 수 있게 해 준다. : 주로 머리말, 제목을 표현하기 위해 쓰인다. : 네비게이션이라고 부르고, 주로 메뉴에 사용되고 위치에 영향을 받지 않아 어디에서든 사용이 가능하다. : 본문 콘텐츠를 담고 있고, 안에 을 넣는 것도 가능하다. : 이 콘텐츠를 분류한다면 이 태그 안에는 실질적인 내용을 넣습니다. 예를 들어, 뉴스로 예를 들면 정치/ 연예/ 사회의 대분류는 이고, 정치의 기사 내용과 연예의 기사 내용들을 에 넣는 것이라 보면 된다. : 사이드..

  Read More
• CSS - flexbox 정리

  CSS/CSS 2020. 4. 25. 16:47

  일기 및 회의록 더보기 오늘은 위코드 4일차가 되는 날이다. 계속 repl.it에서 자바스크립트 문제만 풀어나가고 있었다. 오후 3시 쯤에 html/css QnA 시간이 있어서 QnA를 들으러 위워크 8층 회의실에 들어갔다. QnA시간에 html이 무엇인가?, html, css, javascript를 하나로 표현하세요. 이런 질문들을 해주시는데 아무말도 할 수 없었다. 거기서 나는 너무 repl.it의 과제 풀기에만 급급했고, 정확한 개념을 숙지하지 못했다. html과 css에 대해 전반적으로 정리를 해주셨고, 그 중 flexbox라는 것을 설명 해주셨는데 잘 모르는 내용이라 어려웠지만 많이 쓰이는 속성들 위주로 알려주셨다. 또, 공부하는 방법이나 여러 가지 조언을 해주셔서 굉장히 좋았다. 이 QnA가 ..

  Read More
• 개발자 도구에 대해서

  Trainings/세션 정리 2020. 4. 24. 21:22

  Chrom 개발자 도구란? HTML, CSS JavaScript와 같은 언어들은 서버로부터 컴파일이 되어져서 실행이되는게 아니라 브라우저에서 실행이되는 언어이다. 브라우저가 해석을 잘하고 있는지 확인하기 위해 크롬 개발자도구와 같은 툴을 사용한다. 크롬 개발자 도구의 단축키는 ctrl + shfit + I 이다. 크롬 개발자 도구에서 element탭, style탭, network탭, Application탭 총 4가지를 많이 사용한다. 로컬스토리지, 세션스토리지, 쿠키 차이점 웹 개발을 하다보면 자동 로그인이나, 자동 로그아웃등 세션이나 쿠키같은 임시 저장 기능을 사용해야 할 경우가 많다. 쿠키는 서버측과 클라이언트측 양쪽에서 쿠키 데이터를 사용하는 api가 존재하고, 소멸시간을 지정 할 수 있다. 세션스..

  Read More
• 자바스크립트 - javascript ES6란?

  JavaScript/기본 2020. 4. 23. 21:27

  ES6란 무엇인가? 바로 ES6는 ECMA Script 2015를 의미한다. ES는 ECMA Script의 줄임말이며, ECMA Script는 JavaScript를 표준화시키려고 탄생했다. 그렇다면 왜 생겨난 것인가? JavaScript의 역사는 점점 깊어지고, 문법의 보완이 필요하면서 버전별로 문법을 확장시키고 브라우저는 특정 버전의 기능별로 지원할 수 있도록 ES가 명세를 확정해왔다. 그렇다! 그래서 ECMA Script는 JavaScript를 표준화시키고, 규격화하기 위해 만들어진 것이다. 현재는 ES10 버전까지 나왔고, 주로 쓰이는 것은 ES6인데, 6은 버전 이름이며 ES 2015라고도 한다. 2015년에 ES6버전이 최종으로 나왔기 때문에 그렇게 불린다.

  Read More
• 자바스크립트 - String타입

  JavaScript/기본 2020. 4. 22. 19:43

  String 타입 자바스크립트의 String 타입은 텍스트 데이터를 나타내는데 사용한다. String의 각 요소는 String의 위치를 차지한다. 예를 들어, 첫 번째 요소는 0번 인덱스에 있고, 다음 요소는 1번, 그 다음 요소는 2번... 같은 방식이다. String의 길이는 String이 가지고 있는 요소의 개수이다. 문자 길이 배열의 길이를 알아낼 때, 쓰는 속성은 length라는 속성이다. 하지만, 문자인 String형도 length라는 속성으로 길이를 알 수 있다. 회원가입을에서 아이디나 이름이 10자가 넘어갔는지 체크하거나, 핸드폰 번호를 잘 못 입력했을 때 등 자주 사용하는 속성 중 하나이다. if (phoneNumber.length !== 10 && phoneNumber.length !=..

  Read More