Jieunny의 블로그

➰ 주요 구현 기능 📣 Bare Minimum Test ✔️ 기본적인 기능 구현 📣 Advanced Challenge Test ✔️ 숫자 버튼 누르고 화면에 숫자 입력 구현 if (target.matches('button')) { if(display.textContent === '0'|| previousKey === 'operator'){ //아직 어떠한 버튼도 안누른 경우 display.textContent = buttonContent; //누른 숫자를 화면에 띄운다. } else{ display.textContent = display.textContent + buttonContent; //숫자 하나를 누르고 다음 숫자를 누를 경우 ex) 70 } previousKey = 'number'; } • 첫 ..

➰ 6일차 오늘은 페어 활동시간이 개인 공부 시간보다 많이 예정되어 있었는데, 우리 그룹은 생각보다 빨리 해결해서 개인공부 할 시간도 충분히 있었다. 내가 잘하는 편은 아니지만 아직 기초부분이라 그런지 쉽게 풀 수 있었다. 어제 한번 훑어보면서 처음 하시는 분들은 어려울 것 같다고 생각했는데 오늘 설문조사 비율을 보니 생각보다 많은 분들이 잘 하시는 것 같다. 페어분은 비전공자셔서 최대한 이해하기 편하고 세세하게 알려드리고 싶었는데 페어분께서도 그렇게 느꼈는지는 모르겠다..뭔가 머릿속에서는 그려지는데 말로 설명하려니 어려운 기분.. 그래도 페어분께서 내가 설명하는 거에 반응도 잘해주시고 적극적으로 들어주셔서 너무 감사했다. 첫 페어가 좋은 기억으로 남을 것 같다🥰 오늘 첫 페어와의 활동이 끝나는 날이라 ..

➰ 3일차 같은 5일차 3-4일이 없는 건 주말이기 때문 주말은 안쓸래 쉬게해줘.. 전에 하던 CSS 마무리하고 계산기 목업도 먼저 해봤다. 페어 활동 때 풀 연습문제도 미리 한번 보구.. 계산기 기능 구현도 하고있다. 미리미리 해놓으니까 마음이 편한 거같아서 그냥 냅다 하는 중 계산기 레이아웃이 미세한 차이로 삐뚤어져서 너무 화났지만.. 이것저것 건드려봐도 왜인지 아무래도 모르겠어서 일단 포기했다~! 하루종일 자습이었는데 나쁘지 않은 것 같다. 내 페이스대로 공부할 수 있어서 내일은 페어 활동이 대부분인데... 내일도 힘내서 잘 지나가야지 언젠가 페어 활동이 익숙해지는 날이 오기를🥺

📣 계산기 목업 ✔️ flex 이용하기 ✔️ 레이아웃 신경쓰면서 깔끔하게 📣 와이어프레임 ✏️ 의문점.. ✔️ 버튼 맨 마지막줄에서 '0' 에 flex: 2 줬는데 왜 윗줄이랑 미세하게 다른지? 뭐가 잘못되서 미세하게 차이가 나는지 모르겠다. 0.2px 차이,,(해결!) 버튼요소에 flex: 1 이렇게 주지 말고 flex: 1 0 auto 이렇게 주면 basis가 컨텐츠 크기만큼 되서 계산기가 들쑥날쑥 해지는데 이때 max-width를 설정해 주면(비율을 설정해야하므로 %값으로 준다.) 버튼 요소가 그 크기는 못넘기 때문에 원하는 크기로 설정 가능하다. ✔️ flex 속성을 이렇게 남발해도 되는지? ➰ 그냥 혼자 미리 해본거라 페어 활동 때 페어님이랑 의논 해봐야지..

📣 Flexbox 사용해서 VScode 레이아웃 만들어보기 icon1 icon2 icon3 box1 box2 box3 box1 box2 html { height: 100%; /* 박스들을 화면에 꽉 채우기 위해서 부모요소 높이 주기 */ } body { margin: 0; padding: 0; background: #fff; color: #4a4a4a; height: 100%; /* 박스들을 화면에 꽉 채우기 위해서 부모요소 높이 주기 */ } .container { width: 100%; /* 화면에 가로 꽉 채우기 */ height: 100%; /* 화면에 새로 꽉 채우기 */ display: flex; /* 자식 요소인 3개의 div를 가로로 배치하기 위해 부모요소에 flex 주기 */ } .col..

📣 와이어 프레임 웹 또는 앱을 개발할 때 레이아웃의 뼈대를 그리는 단계 단순한 선이나 도형으로 단순한 구조만 보여주기 화연의 영역을 구분하는 일 ➰ 각 영역에서 사용할 주요 태그 적기 📣 목업 (Mock-up) 실제 작품이 작동하는 모습과 동일하게 HTML을 작성 하드코딩하는 방식 ➰ 변수를 하나하나 입력해주는 방법 📣 HTML 구성하기 ✔️ 수직분할 & 수평분할 1. 수직분할 : 화면을 수직으로 구분해서 콘텐츠가 '가로'로 배치되게 한다. 2. 수평분할 : 분할된 각각의 요소를 구형으로 구분해서 내부 콘텐츠가 '세로'로 배치되게 한다. 1, 2를 차례로 진행한다. ✔️ 레이아웃 리셋 HTML 태그들이 기본적으로 가지고 있는 스타일을 초기화 해주는 것 * { box-sizing : border-box;..