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

wecode

• 1차 프로젝트 회고록

  Trainings/clone project 2020. 6. 6. 17:45

  1. 프로젝트 소개 https://www.rimowa.com/kr/ko/unique 리모와 유니크 러기지 고객 맞춤 제작을 소개합니다 | 리모와 리모와 유니크를 소개합니다 - 당신의 여행만큼 특별한 맞춤 러기지를 만드는 새로운 방법. 리모와 공식 웹사이트에서 확인하세요. www.rimowa.com 프로젝트를 하기 일주일 전에 각각 1명씩 사이트를 추천하는 시간이 있었다. 그때 리모와라는 사이트를 이번 처음 알게 되었고, 사이트를 처음 봤을 때부터 엄청 이쁘다고 생각을 했지만 설마 되겠어라는 마음으로 투표만 해놓았다. 그러고 나서, 클론 프로젝트 사이트와 팀원이 공개되었을 때, 리 모아라는 곳에 내 이름이 있었고 프론트 3명, 백엔드 2명 총 5명이서 프로젝트를 진행하게 되었다. 싫지는 않았지만, 이걸 어..

  Read More
• 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