Kimyeongkyung

실전프로젝트가 시작된지 3주차에 접어들었다. 매번 회고록을 쓸때마다 느끼지만 시간이 정말 빠르다. 첫주차에는 기획한다고 순식간에 지나갔고, 2주차부터는 슬슬 작업에 들어가서 지금은 어느정도 기능이 구현이 된 상태다. 기획 멘토링과 더불어 기술 멘토링도 받으면서 프로젝트를 만드는데 있어서 도움을 받고 있는데 다행히도 진도가 늦는편이 아니어서 기획단계에서 시간을 많이 쓴 것 같아 조급했던 마음이 조금은 여유로워진 것 같다. 이번주 토요일에는 중간발표회가 예정되어 있어서 발표회 전에 어느정도 기본기능은 구현을 해둘 생각이라 열심히 달려야 할 것 같다. WIL(Weekly I Learned) Q. 이번 주차에서 기술적으로 막혔던 부분 A. 랜덤 닉네임을 구현하는 부분에서 시간을 많이 잡아먹었던 것 같다. inp..

벌써 8주차 회고날이다. 실전 프로젝트 주간이 시작된지 열흘째다. 생각해본 아이디어들을 공유하고 괜찮은 아이디어를 찾는 과정이 생각보다 일사천리로 진행됐어서 시작이 좋다고 생각했다. 하지만 점점 구체화를 할수록 선택한 아이디어에 문제점들이 발견됐고, 우리는 결국 기존 아이디어를 엎고 새로운 아이디어로 바꿔야 했다. 이번에 바꾼 아이디어는 기존에 찾아보기 힘든 아이디어였기 때문에 괜찮다고 생각했다. 그런데 기술 멘토링을 통해 아이디어를 바꾸라는 대답이 돌아왔다. 또 고민에 고민을 거듭한 결과 드디어 아이디어가 확정되었다. 디자인을 공부하는 분들이 꿈을 이뤄가는 과정에서 버려지는 수많은 습작들을 필요로 하는 사람들에게 판매를 하는 플랫폼을 만들기로 했다. WIL(Weekly I Learned) 실전 프로젝트..

class와 id의 차이점을 설명해 주세요. id와 class의 차이는 id는 유일한 요소에 적용할 때, 그리고 css는 복수의 요소에 적용할 때 사용한다는 점이다. 하나의 id는 한 문서에서 한 번만 사용이 가능하지만, 하나의 class는 여러 번 사용이 가능하다. 우선순위는 id가 class보다 높다. float가 어떻게 동작하나요? float 속성은 현재 위치의 왼쪽이나 오른쪽으로 shift되어 배치되는 박스의 일종이다. 이 때 컨텐츠는 float 속성이 적용된 요소의 주변에 위치하게 된다. 클리어링(Clearing)에는 어떤 것들이 있으며, 각각은 어떨 때 사용하나요? float 속성의 영향에서 벗어나기 위해 사용하는 clear 속성은 float의 특성을 지워주는 역할을 한다. 총 4가지 값이 있..

오늘은 항해를 시작한지 48일째다. 클론코딩 주차를 무사히 끝냈다. 우리는 클론코딩할 웹서비스를 당근마켓으로 정했고, 열정적인 팀원분들을 만나게 되어 아주 만족스러운 서비스가 탄생되었다. 기록의 의미로 구현영상을 첨부한다. 실제 당근마켓은 웹에서 거래글을 올릴수가 없지만 우리는 웹에서도 가능하도록 웹 중심의 당근마켓을 구현했다. 드디어 실전프로젝트 주간이 시작되었고, 아직은 실감이 잘 나지는 않는다. 6주간의 긴 여정이 남아있지만 정신없이 달려왔던 7주를 돌이켜보면서 조금은 숨을 돌릴 수 있게 된 것 같다. 좋은 사람들을 만나서 많이 배울 수 있었고, 스스로도 많이 성장한 것 같아서 뿌듯하기도 하다. 아직 한참 부족하지만 차근차근 남은 여정을 잘 버텨보려고 한다. 지금 우리 팀은 실전 프로젝트 아이디어를..

column-gap : 칼럼 사이의 좌우 간격 설정 row-gap : 칼럼 사이의 상하 간격 설정 grid-template-row : 행(row)의 배치 grid-template-columns : 열(column)의 배치 ex) grid-template-columns: 200px 200px 500px; 3개의 칼럼을 각각 200px, 200px, 500px로 만들겠다는 의미 grid-template-columns: 1fr 1fr 1fr fr : 숫자 비율대로 트랙의 크기를 나눔 => 균일하게 1:1:1 비율인 3개의 칼럼을 만들겠다는 의미 grid-template-columns: 100px 2fr 1fr; 맨 왼쪽 칼럼은 100px로 고정, 나머지 두개의 칼럼은 2:1의 비율로 창을 늘리거나 줄일 때 유..

Button .imgbox label { display: inline-block; padding: .5em .75em; color: #999; font-size: inherit; line-height: normal; vertical-align: middle; background-color: #FDFDFD; cursor: pointer; border: 1px solid #EBEBEB; border-bottom-color: #E2E2E2; border-radius: .25em; } .imgbox input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); bor..