Happy Programmer

일단 돌이켜보면 간단하지 않았다.

기본 구성은 간단했지만 advanced와 nightmare는 말 그대로 악몽이었다.

83/84까지 달성 후 복잡함에 마지막 문제는 포기할 수 밖에 없었다.

우분투에 있는 기본 계산기로도 구현이 안된 기능을.. 실제로 사용하지도 않을 이상한 기능은 무리였다.

(1,0,0,.,.,1,2,5,2,+,1,2,+,1,5,-,-,2,3,-,1,4,4,2,/,2,3,/,/,1,2,*,2,3,Enter를 연속으로 누르면 -111.48956666666668이(가) 화면에 표시되어야 합니다.)

이론적으로는 수도코드를 작성해서 했으나 중간에 여러가지 기능들이 충돌해서 오히려 해결가능한 문제수가 줄어들기만 해서 원상태로 복구시킬 수 밖에 없었다.

오늘의 회고로 고쳐야 할 부분은

1.원하는 부분의 선택에 대해 더 공부해야한다.(가르쳐 주지 않은 부분이었다... ㅠㅠ css셀렉터가 아닌 내부 셀렉터 관련 수업자체가 뒤에 위치해있다)

2.함수 내부에 함수를 넣는 고차함수?도 더 공부해서 빠르게 구성할 수 있어야 한다.(고차함수도 뒤에있다..)

3.깃허브 이용 방법 또한 더 알아둬야 빠른 협업을 위한 기본이 될 것 같다.(요것도 검색해서 해결해야 했다)

4.반복,조건문은 충분히 잘 사용하고 있지만 그 내부 명령어들의 통일성과 컨벤션 규정에 대해 학습해 이것저것 충돌하지 않도록 해야하며 직관적이게 만들어야겠다.

5.주석은 생각나서 중간부터 달긴 했지만 초반엔 하나도 주석을 달지 않았고 후반에도 중간중간 까먹고 진행해버려서 주석이 없는 부분이 많다. 주석을 생활화해 원하는 부분도 빨리 찾을 수 있고 남이 봐도 쉽게 이해할 수 있게 작성해야겠다.

계산기는 스켈레톤에 기능들을 구현한 것이기 때문에 코드스테이츠 저작권상 83/84 가지의 동작 리스트를 올리기는 애매하다고 생각해 올리지 않았지만 깃허브에서 조회는 가능할 것이라고 본다.

8.VScode의 레이아웃을 Flexbox를 이용하여 구현할 수 있다.
10.숫자 버튼, 기능 버튼을 Flexbox로 각각 배치할 수 있다.
11.검색을 통해 다양한 CSS 속성을 적용할 수 있다.

8.구현할 수 있다!

10.원하는 위치로 배치할 수 있다

11.다양한 css를 알고 있으며 시간이 조금 걸릴지라도 원하는 기능을 적용할 수 있다!

듀토리얼에 맞춰서 제작을 하고 radius를 입히고 간격에 flex를 입혀서 비율대로 나뉘게 하고 색감은 색갈배치페이지에서 연분홍을 입력 후 추천되는 색들로 배치를 했으며 원하는 기능들을 추가로(듀토리얼은 기능이 더 적었고 색 배합도 달랐다.)추가해줬다.

https://app.haikei.app/ 배경도 사실은 그라데이션 이미지를 넣은 것이고 저 위에 숫자부분은 a+b=c형태의 2차 display :none상태인 계산입력부분도 따로 있는 상태이다.

어느정도 만족스러운 결과라고 생각했지만 동기분들의 과제를 보니 음성인식, 버튼클릭, 호버, 야간모드교체, 엄청난 디자인(쉐도우깍기, 색감배합 등).. 진짜 css를 단순하게 입힌 정도는 많치 않았다.

동기님이 알려주신 네트리파이, 깃, 배포 등을 추가적으로 학습하여 배포또한 했지만 다른 분들의 작품을 보면 조금 더 css에 창의력을 발휘했어야 했나..? 하는 아쉬움이 남는다.

추가적으로

아이콘은 frontawesome.com 

색 추출은  ColorZilla 확장프로그램 

예쁜 위치선정은 css-position

안티앨리어싱?은 transform : rotate(0.04deg) 

호버, 쉐도우 등이 있다.

Chapter1. 레이아웃
1.레이아웃이 필요한 이유를 이해한다.
0.레이아웃을 위한 HTML을 만들 수 있다.
Chapter2. Flex
3.display: flex; 를 자식 요소가 아닌 부모 요소에 적용해야 함을 이해한다.
4.flex-direction 을 이용하여 요소를 정렬할 방향을 결정할 수 있다.
5.justify-content 와 align-items 를 이용하여 수평-수직 정렬을 결정할 수 있다.
6.flex-grow 를 이용하여 요소를 얼마나 늘릴 것인지 결정할 수 있다.
7.flex-basis 를 이용하여 요소의 기본 크기를 결정할 수 있다.
8.VScode의 레이아웃을 Flexbox를 이용하여 구현할 수 있다.
과제. 계산기 목업 만들기
9.HTML로 계산기에 필요한 구조를 짤 수 있다.
10.숫자 버튼, 기능 버튼을 Flexbox로 각각 배치할 수 있다.
11.검색을 통해 다양한 CSS 속성을 적용할 수 있다.

1.레이아웃을 잡아둬야 제대로 된 분할 및 설계를 할 수 있기 때문에 어디를 어떻게 나눌지 먼저 그려보는 것은 중요하다.

2.가로에서 세로로 (세로 분할 후 가로분할 진행을 말한다) 내려갈 수 있다.

3.display: flex;는 부모 요소에 사용하여 내부를 정렬하는 기능이기 때문에 자식요소에 사용하는 의미는 없다.

4.row/column/row-reverse/column-reverse 등을 원하는 기능대로 사용할 수 있다.

5.justify-content:(row/column)과 align-items : (stretch/start/end/center)를 이용하여 수평-수직 정렬을 결정할 수 있으나 baseline에 대해서는 잘 모르겠다.@

6.flex-grow로 각 항목별 비율을 설정해 크기를 결정할 수 있다.

7.flex-basis를 이용해 각 항목별 비율조절을 통해 크기를 결정할 수 있다.

0. 할 수 있지만 부족한 상태 @@

9.구조를 짠 상태

10.flex를 이용해서 배치하였으나 만족스럽지 않은 상태다 @

11.검색을 통해 css를 적용 중에 있으나 내일까지 과제가 진행되며 아직은 목업단계라 css 설정이 미흡하다@@

오늘은 레이아웃과 와이어프레임 그리고 flex에 대해 배운 후 바로 목업제작에 들어갔는데 생각했던 것 보다 이상하게 적용되는 것들이 많고 내부 구조도 보기와는 다르게 복잡하게 짜여있으며 완성 결과 또한 마음에 들지 않아 중간에 만드는 형태 또한 바꿔버렸다. 내일은 다른 방식으로 와이어프레임을 새로 만든 후 css도 적용해봐야겠다.

위 내용은 큰것(div와 flex로만 적용하려고 했던 모습으로 입력칸, AC/+/-/%칸, 숫자칸, /*-+=칸 네가지로 나눈 후 플렉스 적용 도중 페어와 방향을 선회해 아래 바탕으로 바꿨다.

아래에 첫번쨰를 기준으로(왼쪽 라인은 fadding, margin을 0으로 설정해 왼쪽에 붙어있는 바탕화면이 보여서 그렇다) 원본, css, css2등이 있다. 글자가 뚱뚱해서 weight값을 낮춰보는 시도도 해야겠다.

Chapter1. 웹 개발 이해하기
1.웹 개발에 있어서 HTML, CSS, JavaScript의 역할을 각각 설명할 수 있다.
2.VScode에서 폴더를 열고 새로운 파일을 생성할 수 있다.
3.VScode를 이용하여 작성한 HTML, CSS를 브라우저에서 확인할 수 있다.
Chapter2. HTML 기초
4.HTML을 CSS를 적용하고, JavaScript로 개발할 수 있게(Programmable) 작성할 수 있다.
5.HTML이 "구조를 표현하는 언어" 라는 의미를 자신의 언어로 표현할 수 있다.
6.HTML의 구조와 문법에 대해서 이해하고 적용할 수 있다.
7.<div>, <span> 요소가 무엇이고, 어떤 차이가 있는지 설명할 수 있다.
8.<ul>, <ol>, <li> 요소가 무엇이고, 언제 사용해야 하는지 알고 있다.
9.<input> 요소에 type 을 설정하여 다양한 종류의 <input> 요소를 활용할 수 있다.
10.시멘틱 요소를 적재적소에 사용하여 사람과 컴퓨터가 읽기 쉬운 시멘틱한 HTML 문서를 작성할 수 있다.
Chapter3. HTML 심화
11.만들고 싶은 앱의 와이어프레임을 그려볼 수 있다.
12.와이어프레임을 보고 HTML로 코딩할 수 있다.
13.<div> 요소 또는 <section>, <header> 등의 시멘틱 요소로 영역을 구분하는 이유를 이해할 수 있다.
14.HTML 문서에서 언제 id 혹은 class를 사용해야 하는지 이해할 수 있다.
15.id와 class를 목적에 맞게 사용할 수 있다.
16.사람과 컴퓨터가 읽기 쉬운, 의미 있는(Sementic) HTML 문서를 작성할 수 있다.

1.HTML은 구조적인 설계 및 내용물(text)이 들어가며 CSS는 배치 및 꾸미기를 할 수 있고 JavaScript는 기능들을 추가할 수 있다. 집으로 예시를 들자면 html은 집안 구조, css는 인테리어, javascript는 전기 및 인터넷 등 가전제품 추가라고 볼 수 있다.

2.가능하다.

3.live server를 통해 실시간으로 확인하며 진행할 수 있다.

4.개발할 수 있게 작성할 수 있는 것에 대한 의미는 모르지만 html에 css를 입혀 꾸미고 javascript로 기능들을 동작하게 id, class 속성들의 값을 필요에 따라 지정할 수 있다.

5.1번에서 설명했지만 자세하게 들어가자면 html만 보고서도 이게 어떤 페이지인지 어떤 내용인지는 다 알아볼 수 있는 뼈대가 된다. 보통 작성할 때는 구조를 나눈 후 내용을 각자 다 작성하고 그 위치를 css로 조절하고 JavaScript로 기능을 추가하는 방식으로 진행한다.

6.아직 모든 내용을 학습하지 않아 확신할 수 없지만 새로운 태그들을 무난히 적용할 수 있다.

7.div요소는 한 줄 자체를 모두 차지하고 span요소는 그 크기만큼의 자리를 차지하는 태그이다. 보통 묶음으로 하위 태그들을 관리할 때는 div요소를 많이 차지하는데 div는 줄 자체를 차지하기 때문에 크기조절등을 신경쓰지 않아도 되는 편리함이 있기 때문이 아닐까 생각한다.

8.ul은 순서 미지정, ol은 순서나열이며 li는 자식태그로 내부에 배치시 자동으로(ol시) 1,2,3등 순서가 매겨진다.

9.checkbox, Text, Radio 등 원하는 기능의 input요소를 사용할 수 있다.

10.시멘틱 요소(h1, header 등)를 어떻게 사용하느냐에 따라 협업에서 이해하기 쉬운 작성 및 검색엔진에 원하는 내용을 강조할 수 있음을 이해하고 필요한 세부기능을 검색해 추가적으로 적용할 수 있다.

11.창을 보며 각 작동 및 내용 별로 구분해 어떤 태그를 이용해 나눠야 할지 추측이 가능하며 각 부위별 분류를 할 수 있다.

12.간단한 내용은 가능하지만 공부가 더 필요하다

13.10번에서 언급한 내용이지만 같은 기능을 낼 수 있다고 해도 보는 사람의 이해를 돕고 그 위치에 추천되는 기능을 사용해야 본인의 의도와 맞는 데이터 처리가 가능하다고 생각한다.

14.고유한 값들에는 id를 넣지만 여러가지의 동시 처리가 필요한 항목들에는 class를 넣어준다.

15.가능하다

16.참고를 보면서 하면 가능하지만 아직 부족하기 때문에 어느정도 연습이 더 필요할 것 같다.

html의 여러 태그들과 시맨틱요소 그리고 속성들에 대해서 공부했다.

태그들의 자식 태그도 있고 태그 내부에 속성도 한두가지가 아니고 

굳이 일반 태그를 써도 되는 부분들도 시맨틱 요소들의 위치를 고려해 사용하는 방법들 까지 

내용은 전체적으로 쉽지만 입력하는 방식들이 다른 부분들이 많아 고려할 것은 오히려 더 많은 것 같았다.

반복문이 조건넣는 방식 몇가지만 알면 그 뒤로는 의사코드로 해결이 된다면 이건 반대로 설계도를 미리 생각해서 나열하고

그 내부를 태그를 통해 구현해야 한다고 할까?

문제만 풀고도 이제 어느정도 원하는 대로 사용할 수 있다고 확신한 조건문, 반복문등과는 다르게 html은 뒤에 진행되는 과정들을 열심히 실습하며 적응을 더 해야 할 것 같다.

다음주에 바로 계산기를 구현한다고 하는데 기능뿐 아니라 디자인도 고려한 계산기를 만들고 싶다.