TIL#3. 진짜 추운 오늘 그리고 더 바빠진 오늘

오늘도 미라클 모닝은 실패...역시 기적이란 없는 것 인가?🙏
그래도 미라클까진 못갔지만 한시간정도 시간여유가 생겨서 블로그(checkpoint)를 조금 작성하다가 위코드로 출발

진짜 세상 추운 오늘
핫팩을 붙이고, 손에 쥐고왔는데도 극한추위
과연 봄날은 오는가..

10-12시

오전타임 목표는! HTML&CSS checkpoint 기술블로그 작성 완료할것!

• 점심먹기 전에 제출 완료! (아직 오늘 끝내야할 checkpoint 두개 더 남은것이 함정)
• 레이아웃 (position속성, inline vs block, float)
  참고: https://velog.io/@realsong/HtmlCSS-CheckPoint2.-%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83-position%EC%86%8D%EC%84%B1-inline-vs-block-float

12-13.5시

위코드 소개해 준 영승옹과 점심

• 벤또맛집 발견(우마쿠라)
• 기다려랑 프론트엔드 개발자되서 은혜갚아주겠다

13.5-16.5시

repl.it 쉬운거 같았던 태그도 숨겨져있던 기능(?)이 자꾸나온다..양파같은 녀석들

• 리스트에 border-left 값과 padding갑을 적절히 조정해서 그럴싸한 와꾸를 만들수있다.
  
• input태그의 type이 text인 placeholder 글자색을 빨강으로!

input[type="text"]::placeholder{
  color: red;
}

• @media 브라우저 사이즈 조건걸고 css 적용하기

@media only screen and (min-width: 320px) and (max-width: 480px) {
	/* ruleset for 320px - 480px */
}

참고 : https://www.notion.so/CSS-19-Responsive-Web-9f3aef95748e4f27977f75f7dbd07a69

• 앞서 숙지한 postion을 잘 지지고 볶아서 검색화면 만들기
  searchbar 를 relative로 선언하고 아이콘들을 absolute로 하여 input 안에있는 것 처럼 모이게 위치했다

      <div class="searchbar">
        <input type="text" name="" id="">
        <i class="fas fa-search"></i>
        <span class="searchbar__right">
          <i class="far fa-keyboard"></i>
          <i class="fas fa-microphone"></i>
        </span>
      </div>

16.5-18.5시

커뮤니티! 친해지길바래~
재밌었지만...2시간 내내 이어폰을 꽂고있었더니 귀가...귓구멍이 흡

18.5-19.5시

한게없어보이는데 또 밥시간 너무 배고파
사전스터디 멤버들이 감사히도 끼니를 챙겨주셔서 오늘 저녁은 배달 본도시락

19.5-21.5시

• flex안쓰고 <div> 속 작은<div> 가운데 정렬하는 법!
  (ps.감사합니다 승옥님😊)
  부모 박스에 padding값을 주고, box-sizing:border-box; 를 필히! 넣자
  
• hover 동작시 다른 태그/엘리먼트에 css 적용하기

#colorbox 에 마우스오버 할때 컬러정보 나타나게!
.colorBox:hover .colorInfo{
   .
   .
   .
}

<div class="colorBox">
	<span class="colorInfo">#709fb0</span>
</div>
<div class="bottomBox">
	<button><i class="fas fa-heart"></i>451</button>
	<span>3days</span>
</div>
#css
.colorInfo{
  opacity: 0;
  position: absolute;
  bottom: 15px;
  background-color: #578291;
  padding: 3px 10px;
  color: white;
}
.colorBox:hover .colorInfo{
  opacity: 1;
}

참고: https://blog.naver.com/PostView.nhn?blogId=parangbee&logNo=221739061995&categoryNo=0&parentCategoryNo=0&viewDate=¤tPage=1&postListTopCurrentPage=1&from=menu

오늘하루 어땟나?
듀얼모니터 너무 좋다
그런데 모니터를 사고나니 모니터 받침대가 필요하네? 키보드 손목받침대도..필요하고
뭐 그건 그렇고 오늘 하루도 알차게 바빳다. 간단한 html&css 과제에서 아직 버벅버벅이는 내 스스로를 보며 이게 진짜 두달뒤에 내가..뭐가되있긴하려나 여전히 의심스럽지만 의심 할 시간에 뭐라도 공부하고 정리하자!

낼은 뭐가 달라져야할까
TIL...실시간으로 써놓을테다....ㅂㄷ...
매일 하루를 마감하고 정리하려하니...하루가 너무 긴탓에 오늘일도..기억 조각 모음ㅠ