천천히 느리게 천천히 느리게

1. 시작 ◎ 현재 많은 애플리케이션에 사용되는 모달을 만들어 보고 싶었다. 스터디 기간에 만들었던 자기소개 페이지에 my resume 버튼을 클릭하면 이력서 미리 보기 모달이 나오게 구현해보았다. 2. 레이아웃 정말 간단히 만든 레이아웃이다. 나중에 더 제대로 구현할 생각이다. 문득 모달을 만들어보고 바로 구현해본 거라 없어 보일 수 있다. 레이아웃을 먼저 구성한 후 css를 입혀보았다. css를 입히고 나름 모달 처럼 나왔다. 하지만 시작부터 모달이 나오는 문제가 발생하였다. 모달은 어떠한 클릭이벤트가 걸리면 나오기 때문이다. 이제 코드를 보면서 해결책을 봐보자. 3. 코드 ◎ html code my resume 안녕하세요 이력서 미리보기 모달창 닫기 .section_link class를 가진 div..

1. 시작 ◎ 위스타그램 login page를 마무리하고 main page 작업을 시작하였다. repl.it 에 있는 위스타그램 메인 페이지를 구현을 하였다. 2. 가이드 ◎ html, css header는 scroll 되어도 최상단에 fiexd 되어야 한다. hedaer와 main은 화면의 중앙에 위치하여야 한다. main을 두 개로 나누어 좌측에는 피드, 우측에는 스토리 및 팔로우 추천이 있다. 우측 정보들은 scroll 되어도 fiexd 되어야 한다. 피드는 하나만 만들어도 된다. ◎ javascript 댓글 input 창에 엔터 치거나 "게시"를 누르면 댓글이 추가되어야 한다. createElement로 요소를 생성해서, input에 입력한 값이 추가되어야 한다. 3. 레이아웃 ◎ 위스타그램 메인..

1. 시작 ◎ 위코드에서 프론트엔드 개발자를 희망하는 사람들은 HTML, CSS, Javascript repl.it 과제가 끝나면 인스타그램 클론 코딩 과제가 있다. 바로 "위스타 그램"이다. repl.it 에 있는 위스타그램 로그인 페이지를 먼저 구현을 하였다. 2. 가이드 ◎ html, css 로그인 전체를 감싸고 border가 적용된 div 태그가 필요하다. input tag 사용 (type은 text 또는 password, placeholder는 속성을 사용하여 "전화번호, 사용자 이름 또는 이메일" 등의 값을 넣어주면 된다.) button 태그를 사용 ◎ javascript id, pw에 각각 한 글자 이상 써야 버튼이 활성화되도록 해야 한다.(연한 파란색 -> 활성화되면 파란색으로!) 3. 레..

1. 문제 미국을 비롯해 전세계 대부분의 나라들이 생일을 기준으로 나이를 계산 합니다. 생일이 지나야 비로소 한 살을 더 먹게됩니다. 그에 비해 우리나라는 새해가 되면 모든 국민이 1살을 더 먹는 방식 입니다. 태어나면 1살 부터 시작하고 새해때 2살이 됩니다. 그래서 10월 이나 11월에 태어나는 아기들은 한두달 안에 2살이 되버리기도 하죠. 1살 차이도 크게 생각하는 우리나라 고유의 문화에 비롯한 계산법이 아닌가 추측해 봅니다. 미국이나 다른 나라가 사용하는 나이 계산법은 우리나라에서는 만나이 라고 하죠. getWesternAge 함수를 구현해주세요. getWesternAge 함수는 birthday 라는 인자(input)를 받습니다. birthday는 Date 객체이며 생일을 나타냅니다. 현재 기준으..

▶ 실수를 줄이자. 실수는 다 할 수 있다. 하지만 실수의 횟수가 많아지면 그만큼 시간 투자를 해야 한다. 1. 시작 ◎ 자기소개 페이지가 끝나고 우리 일레븐은 html&css의 실력을 높이기 위해 인스타그램 클론 코딩을 시작하기로 했다. 발표는 내일이다.. 오늘 급하게 했다ㅠㅠ.. 주말 쉬고 오랜만에 코딩을 했다. 보기에는 단순한 디자인이었는데 생각보다 어려웠다.. 아이콘 활용도가 많고 나중에 스크립트를 생각하면 어려운 과제라고 생각했다 2. 레이아웃 ◎ 예전에 코딩했을 때, 나는 html 구조를 조금 짜고, 바로 css를 입혀보고 다시 구조 짜고 css 입혀보고.. 이런 식으로 반복 작업을 하였다. 하지만 이 방법은 옳지 않았다. 시간을 너무 많이 잡아먹는다. 그래서 나는 우선적으로 Html로 레이아..

시점은 3.25(수요일) 일에 진행했던 이야기이다. ▶Code convention. 코드는 전체적으로 통일성을 지켜야 하며, 다른 사람이 보기 쉬운 코드가 좋은 코드다. 1. 시작 ◎ 자 이제 시작이야~ 전체 수정~ 화요일에 했던 코드를 전체 수정할 계획이었다. 막막했다.. 내일이 발표인데.. 아침 스탠드업을 끝나고 다시 템플릿을 찾기 시작했다. 템플릿을 하기 전 고려해야 할 점을 정리하였다. 자기소개 페이지는 보기 쉽게 구현해야 한다..(다른 사람들이 보기에 편해야 하며, 지나치게 화려하거나 많은 기능들이 있으면 오히려 독이 될 수 있다. 물론 내 생각이다.) 레이아웃 구성과 알맞은 css 사용 전체적인 통일감.(색, 폰트 등 통일성 있게 구현하기.) 카테고리를 어떻게 나눌지에 대한 고민 웹 접근성과 ..

화요일(3.24)에 시작했던 자기소개 페이지를 하면서 느낀 점을 좀 뒤늦게 작성한다. (친구들과 약속도 있었고.. 나름 바빠서..? 물론 핑계다.) ▶ 기획의 중요성! 기획을 제대로 안 하면 결국 제 자리 걸음. 더 악화될 경우 작업 전체 수정 1. 시작 ◎ 자기소개 페이지를 어떤 식으로 구현할지 고민을 많이 했다. 스터디를 시작하고 처음으로 발표를 해야 하는 과제이기 때문에 완성도 높은 페이지를 구현하고 싶었다. 노트에다 어떤 식으로 디자인을 하고, 어떠한 기능들이 있으며, 구조를 어떤 식으로 해야 할지 직접 그려보았다. 하지만.. 역시 디자인과 그림은 부족하다.. 너무 엉망이었다. 그래서 스케치 앱을 찾아봤는데 유료 스케치 앱과 무료로 며칠 쓰는 거밖에 없었기 때문에 방법을 바꿨다. 자기소개 페이지 ..