[TDL] 04/04 Today's-Done-List

오늘 아침에는 병원 갔다 왔고, 집에서 점심, 저녁 요리해서 스카에 저녁 도시락 싸왔딩~
도시락 싸오는 건 돈 아끼고 참 좋은데, 요리를 해야 하고 또 치우는데 시간이 걸리니까 그만큼 스카에 늦게 오게 된다....
시간 관리하는 게 참 어렵다 어떻게 해야 조금 더 효율적으로 쓸 수 있을지 고민해봐야겠다

---

14:00 ~ 16:00 html 요소들 강의
오늘은 form 요소들(input, button, select 등)에 대해 공부했는데, 내가 몰랐던 input의 type들이 많다.
초반에 mdn을 읽어보지도 않고 그냥 아는 것만 무작정 사용했어서 이번 기회에 여러 요소들 적용해보면서
과거 프로젝트할 때 힘들게 적용했던 것들을, 알고 보면 input에 type만 변환해주어서 사용할 수도 있었겠구나
라는 생각을 또 한 번 해본다.. 

• 제출 또는 버튼을 생성할 때 input과 button 모두 type에 reset, submit, button이 있지만 button을 사용하는 이유 :
  input은 자식 요소를 가질 수 없기에 스타일을 적용하기 불편하며, 시멘틱 상으로도 button이 더 나음.
• input type의 reset을 사용해 form안에 입력한 데이터들을 모두 초기화 가능.
• radio button에서 name을 모두 다르게 하면 중복선택 가능하다. 따라서 name은 통일해야 하며 value를 추가해서 어떤 box를 선택했는지 확인할 수 있음.

• input에 autocomplete 요소를 사용하면 자동완성 기능을 적용.

• input에 type을 number, range로 설정하고, step을 추가하여 간격 지정을 할 수 있음.

• select 태그의 자식 요소 optgroup을 사용한다면, option들을 그룹화할 수 있고, label을 추가해서 설명도 추가 가능.
  
  

---

17:00 ~ 18:30 html/css 프로젝트 강의
네이버 주문하기 마크업 강의를 듣는 중.. 강의 듣기 전에 내가 먼저 마크업을 해보려 하였는데,
url을 똑같이 입력해도 나는 다른 ui가 떠서 결국 그냥 보기만 했다..
갑자기 집중력이 많이 떨어져서, 한 시간반 동안 집중했던 시간은 한 시간 조금 넘는 것 같다..ㅠ
저녁 먹고 나서는 조금 더 집중해보고, 이 강의는 딱히 어려운 부분이 없어 보이니 조금 빠르게 넘어가 보자

---

17:50 오후 회고 스터디 (1부 만족도 : 8.5, 2부 만족도 : 5)

---

20:00 ~ 21:30 html/css 프로젝트 강의

css로 위의 매장 탭 이미지를 스타일링하려면,
기본 border를 만들고, border 아래의 뾰족한 화살표 부분을

위의 코드와 같은 방식으로 해주면 적용이 되는데,
1. after 요소는 무조건 content를 짝꿍으로 데리고 다녀야 함.
2. position absolute를 추가하고, bottom을 줘서 살짝 아래쪽, left: 50% 를 줘서 가운데로 위치.
3. 근데, 그러면은 완전한 가운데가 아니고 살짝 오른쪽으로 위치하게 될 것이다. 그 이유는 해당 콘텐츠의 사이즈가 포함되어 50%로 적용되기 때문임. 그러므로 transform: translateX(-50%)를 주어, 정확히 가운데로 옮긴다.
4. width, height와 사이즈를 잡고 border, border-width로 테두리를 네면 중 두면에만 테두리를 준다.
5. 그리고선 transform: rotate(45 deg)로 해당 박스를 45도 꺾어서 화살표 모양으로 만들어 준 후,
6. 배경색을 매장의 박스 색과 동일하게 바꿔주면 끝!

---

가로 스크롤을 적용하기 위해서는 아래의 코드.
이런 스타일은 다른 컴포넌트에도 사용할 수 있도록 공통으로 빼서 모듈화 하는 것이 좋음!

---

22:00 ~ 23:00 자료구조 / 알고리즘 (Js ver.) 강의

아직은 알고리즘에 필요한 JS 기본 문법들 배우는 중.
예전에 한두 번씩은 봤던 문법들인데, 이제까지 제대로 잘 적용한 적이 많이 없는 것 같아서
그냥 복습 겸 처음부터 다 보는 중인데, 생소한 것들도 있어서 좋은 것 같음!

// 문자 표기
console.log("line\nfeed"); // output: line <newline> feed
console.log("carriage\rreturn"); // output: carriage <newline> return
console.log("backslash \\"); // output: backslash \
console.log("tab\ttab"); // output: tab  tab
console.log("smile \u{1F60D}"); // output: smile: 😍

// 문자열 길이: String.length

// 문자열 접근: String.charAt(index), String.chorCodeAt(index)

// 문자열 검색: String.indexOf(), String.lastIndexOf(), STring.includes(), String.startsWith()

// 문자열 변환: String.toUpperCase(), String.toLowerCase()

// 문자열 치환: String.replace()

// 문자열 추출: String.slice(), String.substring(), String.substr()

// 문자열 분할: String.split()

---

22:50 밤 회고 스터디 (1부 만족도 : 6, 2부 만족도 : 6)

총평 : 주말에 너무 쉬어서 그런 건지 오늘 전체적으로 집중을 못 한 거 같다ㅠ
부캠 점점 다가오는데 정신 차려서 더더더더더 집중해라!

---

[ 출처, 참고 : 제로베이스 프론트엔드 스쿨 ]