오늘 일정

• 지하철에서 노션을 통해 개구리 flex게임 하기
• 위코드 9:10am 출첵, 커피 마시기
• 블로그 정리
• CSS & html 마지막 repl 끝내기
• 최종정리

---

지하철에서 개구리 게임을 하다.

제목이 조금 이상 할 수 있다.
노션에 있는 게임인데 개구리가 나뭇잎에 들어가면 성공~!

justify-content 속성

• justify-content:
• flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.
• flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
• center: 요소들을 컨테이너의 가운데로 정렬합니다.
• space-between: 요소들 사이에 동일한 간격을 둡니다.
• space-around: 요소들 주위에 동일한 간격을 둡니다.

  display: flex;
  justify-content:flex-end;

개구리 귀엽죠?

대충 이런 게임이다 ! 어떤분이 만드셨는지 너무 잘 만드셨다.

align-items 속성

• flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
• flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
• center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
• baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.
• stretch: 요소들을 컨테이너에 맞도록 늘립니다.

flex-direction 속성

• row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.
• row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.
• column: 요소들을 위에서 아래로 정렬합니다.
• column-reverse: 요소들을 아래에서 위로 정렬합니다.

flex-wrap 속성

• nowrap: 모든 요소들을 한 줄에 정렬합니다.
• wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.
• wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.

1차 HTML & CSS 레플릿 전체완료 (02.15 ~ 02.18(점심까지))

Code Review

레이아웃 최종 확인해보자

결과물

(1) 색상박스는 class 속성값이 'colorBox'인 <div>로 구현해주세요.
(2) '#709fb0' 컬러값이 적힌 작은 박스는 span 태그로 하되, 마우스가 색상박스에 올려졌을 때만 보여질 수 있도록 해주기 위해 hover 선택자와 opacity CSS 속성을 이용해 봅시다.
(3) heart 버튼과 업로드 날짜 텍스트는 하단에 div 태그를 만들어 flex 속성을 이용해 간격을 유지해주세요.
(4) heart 버튼은 <button> 태그를 이용해 주세요.

---

이걸 내가 만들 수 있을까 막상 하다보니까 막히는 부분도 있었다.
그래도 같은 팀원인 승옥님에게 도움을 많이 받았다. 감사합니다 : )

정리를 해보자.

 <div class="container">
      <div class="colorBox">
        <span class="hov">#709fb0</span>
      </div>
      <div class="line">
        <button class="btn"><i class="fas fa-heart"></i> 451</button>
        <span>3days</span>
      </div>
    </div>
    </div>

큰 박스 > 작은박스 > 버튼박스
아이콘은 font Awesome를 사용해서 하트를 가져왔다.
그 밑에 span으로 텍스트를 사용했다.

CSS 부분 헷갈린 부분

hover 누구 요소에 줄것인가?

hover 부분에서 span태그로 .hov 클래스 만들었다. 전체 감싸진 컨테이너에 오퍼시티를 줘서 적용이 되지 않았었고, 두번째 박스 즉, 부모 요소에 적용시키니까 두번째 박스를 클릭 했을때 호버를 할 수 있게됨

.colorBox:hover .hov{
  opacity: 1;
}
.hov{
  opacity: 0;
  background-color: #578291;
  color: white;
}

.line{ /* 하트아이콘 버튼과 3days span태그 영역 */
  display: flex;
  justify-content: space-between;
  margin-top: 20px; 
}

개구리 flex게임에 나온걸 여기서 쓰게 되었다.
space-between 속성을 사용하면 요소들 사이에 동일한 간격을 줘서 편리하다.

---

오늘 하루 점검

• 1차 레플릿 최종완료
• 2차 레플릿 시작 ㅠ ㅠ 자바스크립트 문제10까지 진행완료
• 블로그 마무리
• 내일 자바스크립트 열심히 풀자 ! ! !