URLSearchParams 인터페이스는 URL의 쿼리 문자열을 대상으로 작업할 수 있는 유틸리티 메서드를 정의 -MDN-

이게 왜 나왔냐....하면 회사에서 받은 로그인 페이지 구현을 위해 외부 api를 사용하고 있던 중이었다. 처음엔 그동안 했던 것처럼 url,body,res값 등을 입력했는데 통신만 하면 status code 200 ok가 되지만 response 값이 null이 나왔다.

난 이걸 일주일이 넘게 헤매고 있었는데 본부장님이 해결책을 주셨다. 외부 api라서 그동안 우리가 알던 get,post와 의미가 다르다고 말씀해 주셨는데 아직 이해가 다 되지 않아서 이 부분은 더 공부할거다.

결국엔 찾은 해답이 URLSerachParams()를 바디값에 넣어주는 것이었다.

아직도 왜? 라는 말밖에 나오지 않는다. 공부할 게 너무 많다.

우물 밖을 나오니 처음 겪는 일들이 많아졌다. 회사에서 무언가를 알려주실 때마다 새로운 단어들도 넘쳐났다. 그것들을 모두 내것으로 만들어서 더 성장하자!

렌더링이 클라이언트 쪽에서 일어나는 방식. →브라우저에서 자바스크립트로 콘텐츠를 렌더링 하는 것.

자바스크립트가 모두 다운로드 되고 실행되기 전까지 사용자는 볼 수 없다.

• 브라우저에서 빈 html 파일을 내려받은 후 사용자의 요청에 따라 js 코드를 통해 렌더링 하는 방식
• 초기에 js 파일을 모두 내려받기 때문에 로딩 속도가 오래 걸린다.
• 필요할 때만 데이터를 서버에 요청하므로 페이지 전환이 빠르고 서버에 부담이 적다.
• 하지만 처음 html 파일이 비어있어 검색엔진최적화(SEO)에는 문제가 있다.

📌 SSR (Server Side Rendering)

서버에서 렌더링 준비를 마친 상태로 클라이언트에 전달하는 방식.

서버에서 이미 렌더가능한 상태로 클라이언트에 전달되기 때문에 사용자는 자바스크립트가 다운로드 되는 동안 볼 수 있다.

• 서버에서 모든 파일을 다 읽어들인 후에 클라이언트에 보여지므로 초기 사용자에게 보여지는 화면 속도가 빠르다. 즉, 검색엔진최적화에 효과적이다.
• 페이지를 다시 새로고침 할 때마다 모든 페이지를 재렌더링 하기 때문에 화면 깜빡임 현상이 나타난다.

위코드를 시작하기전 나는 바리스타를 하다가 몸의 이상을 느껴 퇴사를 하고 새로운 일을 알아보고 있었다. 처음엔 오래할 수 있는 일을 찾다가 웹디자인이라는 것을 알게되고 국비학원에 등록해 배우기 시작했다.
그곳에서 디자인뿐만 아니라 퍼블리싱도 배우면서 처음 개발이란 걸 배우게 되었다. 이때 '왜 코드가 안되지..' 하다가 결국엔 해결하고 희열을 느껴, 이 길로 가보자! 하고 마음먹은 후 더 공부할 수 있는 곳을 찾다가 위코드에 오게 되었다.

개강을 하면 동기들과 첫 인사를 하고 바로 공부를 시작하는데 이때 인사한 옆자리 동기와는 이제 친구가 될 정도로 가까운 사이가 되었다. 그만큼 이곳은 동기가 많은 힘이 되는 곳이라는 것을 느꼈다.
레플릿을 풀고, 위스타그램 과제를 하면서 고비가 많이 왔었다. 이 때 멘탈이 많이 나갔는데 동기들의 격려로 많이 이겨냈다.
본격적으로 리액트를 배울때는 너무 신기했다. 들어가기전에 동기들과 다같이 인강을 들으면서 미리 예습했는데 그게 도움이 많이 되었다. 커리큘럼을 나가면서 100% 이해는 안되지만 넘어가는 과정들이 처음엔 받아들여지지 않았지만 혼자 공부하는게 아닌 다같이 하는 과정이기에 안된다고 머물러 있을 수 없었다.

부제 : wecode에서 2차 프로젝트 끝💦

Wescanner 팀 깃허브

🏨 프로젝트명 : Wescanner

🏨 프로젝트 기간 : 22.07.04 ~ 22.07.15

🏨 프로젝트 구성 : frontend - 3명, backend - 1명

🛫 리스트 페이지

기능목표

• 각 필터 조건 눌렀을 시 필터링 기능 구현 ✅
• 티켓 부분 등급을 별 아이콘으로 나타내기 ✅
• 호텔 주소마다 지도에 마커 나타내기 ❌...

• 필터, 티켓, 지도 세부분으로 나눠서 레이아웃을 나눴다.

• 필터 부분은 무료취소를 제외하고는 상수데이터를 만들어 map() 함수를 돌렸다.

• 티켓 리스트 안에 등급을 별 아이콘으로 나타낼 때 반복문을 사용해 기능 구현했다.

• 구글지도API 를 이용해 화면에 나타냈지만 각각의 주소를 지도안에 나타내는 기능을 구현하지 못했다.... 공부해서 다시 해보자 꼭..ㅠㅠ

🛫 공유하고 싶은 코드

필터링 지옥에 빠진 2차 프로젝트.... 무료취소, 가격, 등급, 여행자유형 조건을 다 눌렀을 때 모든 필터가 적용될 수 있도록 조건들을 쌓아서 가져가야 하는 기능이라 기억에 많이 남는다...!!

🛫 전체 영상

🛫 2차 프로젝트를 마치며....

옆에 동료의 힘이 중요하다는 것을 다시 한번 깨닫게 된 계기가 되었다. 팀원 한 분(의지하고있던 지훈신...ㅠㅠ)이 코로나에 걸려 중간부터는 나오지 못하게되면서 내 멘탈이 흔들렸지만, 남아있는 팀원들과 '욕심내지 말고 할 수 있는데까지 해보자' 하며 서로 으쌰으쌰해서 마음을 다잡았다. (결국 나만 잘하면 되는거였다)

1차 때 안해봤던 기능을 하면서 시간을 많이 쓰게 되었다. 필터를 만만하게 봤던 내자신을 한 대 때리고 싶었다... 멘토님과 팀원들, 동기들이 없었다면 끝까지 가지 못했을 기간이었다. 하지만 배운점도 많기에 잊고 싶은 기억은 아닌 날들이었다...!!! 이러한 과정들을 겪으면서 발표 전 날 영상을 찍을 때 2주동안 각자 자리에서 고생한 팀원들에게 너무 고맙고 미안했다.

이번 프로젝트의 경험을 잊지 않고 후에 더 발전해있는 사람이 되자 혜림아!!!

위코드에서 첫번째 프로젝트로 LUSH를 클론코딩하기로 했는데 나는 그 중 Nav, Footer, 장바구니 페이지를 리액트로 구현했다.

WISH KOREA팀 깃허브

❗️ 프로젝트명 : WISH KOREA ❗️ 프로젝트 기간 : 2022.06-20 ~ 2022.07.01 ❗️ 프로젝트 구성 : frontend - 4명, backend - 1명

1. Nav

• 목표 : 레이아웃 및 마우스오버 기능 구현

-마우스를 지정한 카테고리에 올리면 하위 카테고리가 나올 수 있도록 기능구현을 했고, 마이페이지 아이콘에도 마우스를 올리면 로그인, 회원가입을 할 수 있는 박스가 나오도록 구현했다.

2. Footer

푸터에는 특별한 기능구현을 넣지 않고 반복되는 코드를 map() 함수를 이용했다.

const TITLE_LIST = [
  { id: 1, title: '스카우트' },
  { id: 2, title: '회사소개' },
  { id: 3, title: '개인정보처리방침' },
  { id: 4, title: '영상정보관리지침' },
  { id: 5, title: '이용약관' },
  { id: 6, title: '고객센터' },
];

const COPY_LIST = [
  {
    id: 1,
    text: '서울특별시 강남구 테헤란로 427 위코드 | 운영자: 주식회사 위시코리아',
  },
  { id: 2, text: '대표이사 : 정진관(Backend Developer)' },
  { id: 3, text: '사업자 등록번호:523-34-20226' },
  { id: 4, text: '통신판매업 신고번호 : 2022-안중영-02857' },
  { id: 5, text: '개인정보보호책임자 : 정예지' },
];

리스트에 해당하는 내용들을 가독성과 유지보수를 위해 상수데이터로 작성했다.

3. Cart

• 기능목표
  • 체크박스 전체선택 및 개별선택 ✅
  • 선택한 상품 삭제 및 전체삭제 ✅
  • 선택한 상품 수량이 총 주문금액에 적용되는 기능 구현 ✅

1. 제품 리스트를 백엔드와 통신 전 mock data를 이용해 나타냈다.
2. 반복되는 리스트 부분을 map()함수를 이용해 구현했다.
3. 수량버튼을 ProductCount 컴포넌트로 따로 만들어 관리했다.

• 공유하고싶은 코드

  const [checkedBox, setCheckedBox] = useState([]);
  // const [isAllchecked, setIsAllChecked] = useState(false) 처음 작성한 코드
  const isAllChecked =cartList.length !== 0 && cartList.length === checkedBox.length;//리팩토링 후 작성한 코드
  
  const handleCheckAll = () => {
    setCheckedBox(cartList.map(el => el.cart_id));
    if (isAllChecked) {
      setCheckedBox([]);
    }
  }; //전체 체크박스
  
  const handleCheck = e => {
    const { id, checked } = e.target;
    setCheckedBox([...checkedBox, Number(id)]);
    if (!checked) {
      setCheckedBox(checkedBox.filter(item => item !== Number(id)));
    }
  };//개별 체크박스
  

>체크박스 기능구현 중 전체 체크박스와 개별 체크박스를 각각의 state로 저장했는데 리팩토링 중 하나의 ```state```로도 계산이 가능하다는 리뷰를 받고, 4시간동안의 고민 끝에 팀원의 도움으로 ```state```가 아닌 변수에 저장하는 방법을 알게되었다. <br>
리액트 하면  ```state```에 저장하는것을 당연하게 생각했던 점을 반성하게 되었다. _~~역시 정답은 없는 개발의 세계...~~_ 


<br>

<전체영상>
![](https://velog.velcdn.com/images/_woo/post/90954f3e-795d-4bad-9199-cf775463c36a/image.gif)



## 4. 회고

### 4-1. 좋았던 점
>* 매일 아침 스탠드업 미팅을 통해 누구 하나 빠지지 않고 전체가 소통하면서 과정을 공유하는 점이 좋았다. 
* Trello를 활용하면서 실제 협업에서 쓰이는 툴들을 사용할 수 있던 점이 너무 좋았다.
* 맡은 페이지들을 시간분배를 적절하게 해서 기간내로 마무리 지은 점에서 스스로 뿌듯했다. 
* 프로젝트를 하면서 협업 마인드를 배우게 되었다. 

### 4-2. 아쉬웠던 점
> 처음해보는 프로젝트이다보니 기간내에 끝내야한다는 생각에 늦게까지 하다보니 빠르게 마무리되고, 시간이 지나고보니 우선순위 파악이 어려웠다. 다음 프로젝트때는 우선순위를 파악하고 전체적인 흐름을 파악해나가면서 작업을 해나가야겠다.

### 4-3. 위코드 한달간의 회고
>
프로젝트를 하면서 코드를 대하는 태도가 달라졌다. 그동안 위스타그램과 레플릿 문제를 접하면서 안풀리면 ~~_'나는 왜이렇게 못할까'_~~, ~~_'이 직종이 안맞나'_~~ 하면서 우울해했는데 이제는 우선 문제를 생각해보고, 검색을 하고, 그럼에도 안풀리면 질문을 하는 코드를 놓지 않는 태도로 바뀌었다.
한달 전 나의 모습과 생각한다면, 포기를 쉽게 하던 내가 팀원들에게 피해를 주고싶지 않은 마음이 크다보니 태도가 바뀌게 된 계기가 된 것 같았다.
결국엔 이러한 태도가 나에게 부정적인 영향은 끼치지 않는다는 점과 프로젝트로 인해 더 나아진 모습으로 변한 점에서 2주의 기간동안 아쉬웠던 부분보단 얻은게 많은 기간이 되었다.  

display 속성은 요소를 어떻게 보여줄지를 결정한다.

1. block

• 기본적으로 가로 영역을 모두 채우며, block 용소 다음에 나오는 태그는 줄바꿈이 된 것처럼 보인다.
• width, height 속성을 지정할 수 있다.
  
  

2. inline

• block 속성과 다르게 줄바꿈이 되지 않고, 컨텐츠를 감싸게 된다.
• width, height 속성을 지정할 수 없다.
  
  

3. inline-block

• inline 과 block을 합쳐놓은 속성이다.
• 기본적으로 inline 속성을 가지고 있지만, 크기를 바꿀 수 있다.
  
  

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="block">block</div>
    <div class="inline">inline</div>
    <div class="inline-block">inline-block</div>
    <script src="index.js"></script>
  </body>
</html>

div{
  margin-bottom: 10px;
}

.block{
  display: block;
  background: pink;
}

.inline{
  display: inline;
  background: yellow;
  width: 200px;
}

.inline-block{
  display: inline-block;
  background: skyblue;
  width: 200px;
}

inline 속성에서 width 값을 지정해도 적용되지 않는 것을 확인했다.

*position *: 요소의 위치를 정의하며, top, bottom, left, right 속성과 함께 사용하여 위치를 지정한다.

• relative (상대위치) : 기본 위치를 기준으로 좌표 프로퍼티(top, bottom, left, right)를 사용하여 위치를 이동시킨다.

<!DOCTYPE html>
<html>
<head>
  <style>
    body { margin: 0; }
    .parent {
      width: 150px;
      height: 150px;
      background: #bcbcbc;
      border: 1px solid #bcbcbc;
      margin: 50px;
    }
    .relative-box {
      position: relative;
      top: 50px; left: 50px;
      background: #2E303D;
      color: #e55c3c;
      font-weight: bold;
      text-align: center;
      line-height: 150px;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="relative-box">relative box</div>
  </div>
</body>
</html>

박스가 배치될 때 다른 블록 요소에 영향을 주지 않고 배치된다.

• absolute (절대위치) : 부모 요소 또는 가장 가까이 있는 조상 요소(static 제외)를 기준으로 좌표 프로퍼티(top, bottom, left, right)만큼 이동한다. 즉, relative, absolute, fixed 프로퍼티가 선언되어 있는 부모 또는 조상 요소를 기준으로 위치가 결정된다. 따라서 부모 요소를 배치의 기준으로 삼기 위해서는 부모 요소에 relative를 정의해야한다.

<!DOCTYPE html>
<html>
<head>
  <style>
    body { margin: 0; }
    .parent {
      width: 200px;
      height: 200px;
      background: #bcbcbc;
      border: 1px solid #bcbcbc;
      margin: 50px 0 0 300px;
      position: relative;
    }
    .absolute-box {
      position: absolute;
      height: 200px; width: 200px;
      top: 50px; left: 50px;
      color: #e55c3c;
      font-weight: bold;
      text-align: center;
      background: #2E303D;
      line-height: 200px;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="absolute-box">absolute box (in parent)</div>
  </div>
  <div class="absolute-box">absolute box (no parent)</div></body>
</html>

다른 블록 요소의 배치에 영향을 주고 본문 요소와 겹칠 수 있다.

• fixed (고정위치) : 부모 요소와 관계없이 브라우저의 viewport를 기준으로 좌표프로퍼티(top, bottom, left, right)을 사용하여 위치를 이동시킨다.

<!DOCTYPE html>
<html>
<head>
  <style>
    body { margin: 0; }
    .fixed-box {
      position: fixed;
      color: #e55c3c;
      font-weight: bold;
      text-align: center;
      background: #2E303D;
    }
    .sidebar {
      width: 50px;
      height: 100%;
      top: 0;
      right: 0;
      padding-top: 100px;
    }
    .footer {
      width: 200px;
      width: 100%;
      height: 50px;
      bottom: 0;
      left: 0;
      line-height: 50px;
    }
  </style>
</head>
<body>
  <div class="fixed-box sidebar">fixed box (side-bar)</div>
  <div class="fixed-box footer">fixed box (footer)</div>
</body>
</html>

스크롤이 생성되어도 사라지지 않고 지정한 위치에 있다.

Semantic Tag : 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다.
Semantic Web : 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 의미와 관련성을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.

• Semantic Tag는 자신이 사용된 의미를 명확히 전달하는 요소로, form, table, img 등이 있다.

다음으로는 HTML5에 추가된 Semantic 요소들이다.

• Non-Semantic 요소로는 div, span 등이 있으며 이 요소들은 의미가 없는 요소들이다.

이 개념들을 토대로 위에 질문에 답을 하면,

img태그와 background-image 속성을 추가해서 이미지를 넣을 때 웹브라우저에서 나오는 모습은 동일하지만, img태그를 사용하면 의미있는 정보를 가진 웹페이지가 되고, background-image 속성을 사용하면 단순히 이미지를 첨부하는 것 뿐, 아무런 의미가 없다. 즉, 사용자가 정보를 얻으려 할 경우에는 img태그를, 단순히 웹페이지를 꾸미는 용도로는 background-image 속성을 사용하는 것이 좋다.

참고(https://poiemaweb.com/html5-semantic-web)

공유기를 사용하는 환경에서 웹서버를 구동하는 법

1. Router (공유기)

• WAN(Wide Area Network) : 인터넷에 소속되어 있어 광역 네트워크라 불린다.

• LAN(Local Area Network) : 각각의 장치들이 LAN에 연결이 되면 같은 네트워크에 소속되어 지역 네트워크라 불린다.

  
  

  즉, 공유기는 LAN 네트워크와 WAN 네트워크 사이에서 중개자의 역할을 하며, 각각의 컴퓨터들이 공유기에 연결되면 자동으로 ip가 부여되고 공유기에도 ip가 부여된다.

WAN 안에서 ip는 전세계 누구나 접속가능해서 public ip address라 하며,
LAN 안에서 쓸 수 있는 ip는 private ip address라 한다.

2. NAT (Network Address Translation)

사설 ip를 쓰는 컴퓨터에서 외부 인터넷으로 접속하는 기술.

1. 내 컴퓨터에서 신호를 주고 공유기가 요청을 받음.
   
2. 공유기는 WAN을 통해 외부로 신호를 보냄. 2-1. 내 컴퓨터 ip를 공유기 안에 기록. 2-2. 요청한 컴퓨터 주소는 외부에서 접속을 못하므로 NAT 기술로 주소를 public ip address로 변경 후 외부로 전송.
   
3. 외부에서 public ip address로 응답 후 공유기는 내 컴퓨터가 요청했던 것을 파악 후 그 주소로 응답.
   
   

3. PORT - FORWARDING

port : 특정 컴퓨터에 접속했을 때 각각의 서버를 식별할 수 있는 것.
port forwarding : 공유기로 들어오는 포트 번호가 무엇이냐에 따라 내부 네트워크에 있는 특정한 머신의 특정 포트로 포워딩 할 수 있다.

public ip address에 누군가 접속을 하면 공유기에서 private ip address로 보낸다.

4. Dynamic & Static IP Address

• Dynamic IP Address : 유동 ip라 불리며, 공유기를 껐다가 다시 키면 ip주소가 변경되는 단점이 있다.
  

• Static IP Address : 고정 ip라 불리며, 내 컴퓨터에 ip를 고정부여한다.

5. DHCP (Dynamic Host Configuration Protocol)

인터넷에 연결되어 있는 컴퓨터 내에 설정을 자동으로 할당해주는 프로토콜

DHCP server를 통해 ip를 세팅하는 설명은 생활코딩 내에 자세히 나와있어서 대체한다. 역시 설명 잘해주신다...

참고 : 생활코딩

오늘날 우리가 사용하는 인터넷 안에서 검색을 하고 문서를 받는 웹의 기본 개념에 대해 알아보았다.

1990년대에 팀 버너스 리에 의해 → 웹페이지를 만드는 편집기 개발 → 세계 최초의 웹 브라우저인 'World Wide Web'(www) 개발 → info.cern.ch(웹의 시작점) 웹 서버 개발

이후 인터넷이 대중화가 되고 점점 더 발전하게 되었다.

💻Client & Server

웹서버 컴퓨터에 index.html 파일 안에 저장되어있는 코드가 담겨있고, 웹브라우저 컴퓨터에는 index.html 파일이 도착하고 해석한 후 화면에 표시하면 우리가 흔히 보는 웹을 보게된다.

두 대의 컴퓨터가 서로 정보를 주고 받을 때 요청하는 컴퓨터를 Client, 응답하는 컴퓨터를 Server라 한다.

예를 들어,

사용자의 컴퓨터에 설치된 프로그램은 게임 클라이언트,
게임회사 서버 컴퓨터에 설치되어 있는 프로그램은 게임 서버라 한다.

💻 Hosting

1. 내가 만든 파일을 업로드한다.
   
2. 파일을 업로드하면 소스코드가 웹호스팅으로 업로드 되어서, 웹호스팅에 설치되어 있는 웹 서버를 활성화 한다.
   
3. 도메인의 이름을 부여한다.
   
4. 방문자가 도메인에 접속하면 웹서버가 파일을 읽는다. → 웹서버가 방문자에게 소스코드 전송
   
5. 방문자의 웹브라우저에 웹페이지가 표시되면 완료.
   
   

참고 : 생활코딩

1.&nbsp&nbsptext-typing

• 한 글자씩 나타나도록 적용

• 무한반복하는 타이핑 적용

홈화면에 인사말을 자바스크립트로 구현해내고 싶어서 유노코딩 영상을 참고했다.

  <section class="home" id="sec1">
     <h1 class="text"></h1>
   </section><!--sec1/--> 

/*sec1*/
#sec1{
    background: url(../images/back.jpg) no-repeat center;
    background-size: cover;
}
#sec1 h1{
    position: absolute;top:30%;left:48%;
    transform: translate(-30%,-48%);
    color:#fff;
    font:lighter 60px 'Dongle';
    border-right: 1px solid #fff;
    animation: cursor 0.5s ease infinite;

}
@keyframes typing{
    0% {
      width: 0%;
    }
    50% {
      width: 100%;
    }
    100% {
      width: 0%;
    }
  }

@keyframes cursor {
    50% { border-color: transparent;}
  } /*커서가 깜빡이는 효과를 주기위해 적용*/

 const content = "안녕하세요,  우혜림입니다.";           //효과를 주고자 하는 텍스트 선언
 const text = document.querySelector(".text");     //효과를 주고자 하는 태그 선택
 let i = 0;                      //문자열 하나하나의 인덱스 접근을 하기 위한 사용하는 숫자열 데이터

 function typing(){                  
   text.textContent += content[i++];    //h1태그에 컨텐츠 내용을 추가 i가 올라가면서 하나씩 추가
   if(i > content.length){     //i가 컨텐츠의 길이보다 길어졌을 때 멈추기 위해
    text.textContent = ""   // 모든것을 초기화하고 다시 시작하도록 만들기 위해 컨텐츠는 없애고
     i = 0;                  //i는 0으로 리셋
   }
 }
 setInterval(typing, 300);   //(주기적으로 동작해주고 싶은 함수 이름, millisecond)

📌완성본

2.&nbsp&nbspchatbot

페이지에 없는 정보들을 chatbot 기능으로 나타냈다. codewithrandom 사이트에서 클론코딩 겸 연습을 하다가 재밌는 기능을 발견해서 자기소개 페이지에 적용했다.

<p id="btn"><img src="./images/chat.png" alt=""></p>

    <div id="glass">
      <h1>Chatbot</h1>
      <h2>저에게 무엇이든 물어보세요!</h2>
      <div class="input">
        <input type="text" id="userBox" onkeydown="if(event.key === 'Enter'){talk()}" placeholder="질문을 입력하세요.">  
      </div><!--input/-->
      <p id="chatLog"></p>

      <p id="close">X</p>
    </div><!--glass/-->

/*chat*/
#glass{
    width: 500px;
    height: 350px;
    background:url(../images/chatback2.jpg)no-repeat center;
    background-size: cover;
    padding: 50px;
    color:#fff;
    border-radius: 9px;
    box-shadow: 10px 10px 10px rgba(45,55,68,0.3);
    backdrop-filter: blur(50px);
    line-height: 1.5;
    position: fixed;
    top:30%;left:30%;
    text-align: center;
    font-family: '배달의민족 한나는 열한살';
    display: none;
 }
 #glass h2{
     font-size: 20px;
     margin-top: 20px;
     color:#fff;
 }
 #glass p{
     font-size: 20px;
     color: #fff;
     line-height: 1.5;
 }
 .input{
     width: 500px;
     height: 70px;
     margin: 40px auto;
 }
 .input input{
     width:400px;
     height:70px;
     border:none;
     padding: 0 0 0 40px;
     font-size: 18px;
     border-radius: 20px;
 }
 #close{
     position: absolute;
     top: 10px;
     right:10px;
     font-size: 25px;
     border: none;
     background: none;
     color:#fff;
     cursor: pointer;
 }
 #btn{
     position: fixed;
     bottom: 0;
     left: 0;
     cursor: pointer;
 }
 #btn img{
     width:8%;
 }

position:fixed 를 사용하여 전체 페이지에서 같은 위치에 이미지가 고정되도록 적용했다.

function talk(){
  let know = {
      "안녕하세요" : "안녕하세요, 만나서 반갑습니다👊🏻",
      "사는 곳이 어딘가요?" : "저는 경기도 화성시에 거주하고 있습니다.",
      "무엇을 하고 있나요?" : "프론트엔드개발을 위해 공부하고 있습니다.",
      "개발을 시작하게 된 계기가 있나요?" : "10년, 20년후에도 계속 할 수 있는  분야를 알아보다가<br>웹디자인&웹퍼블리셔 교육을 듣게 되었는데,<br>그때 개발의 매력을 느끼면서 본격적으로 시작하게 됐습니다.",
      "취미가 뭐에요?" : "평소에 영화보는것을 좋아하고, <br> 스트레스 쌓일 땐 블럭조립 하는 것,<br> 날씨 맑을 때 걷는것을 좋아해요!",
      "대답해 주셔서 고맙습니다!" : "질문해주셔서 감사합니다🙏🏻",
      "안녕히 계세요" : "다음에 또 만나요👊🏻"
  };

  let user = document.getElementById('userBox').value;
      document.getElementById('chatLog').innerHTML = user + "<br>";
      if(user in know){
          document.getElementById('chatLog').innerHTML = know[user] + "<br>";            
      }else{
          document.getElementById('chatLog').innerHTML = "죄송합니다. 그 질문은 대답할 수 없습니다. <br>";
      }
}

///////////////열고 닫는 기능////////////

document.getElementById('btn').addEventListener('click',function(){
  document.getElementById('glass').style.display = 'block'
});

document.getElementById('close').addEventListener('click',function(){
  document.getElementById('glass').style.display = 'none'
});

기존의 없던 클릭해서 열고 닫는 기능을 추가했다.

📌완성본

❗️느낀점

어느덧 스터디도 4주가 지났다. 지난 4주간 기본 문법을 공부하고 간단한 Repl.it만 풀다가 직접 페이지에 적용하려니 부족한 실력과... 구글링의 소중함을 다시 한번 느낌!!!.. 직접 친 코드는 열고 닫는 코드 뿐이라 하면서 자괴감이 느껴졌다.. 클론코딩을 해보는것도 좋은 경험이 될거라는 말을 뼈저리게 느낀 주였다!! javascript를 공부한지도 이제 4주차고, 앞으로 갈길이 멀기에 조급해 하지말자 다짐했지만 직접 적용하고 보니 흔들리게된다.. 그러니 멘탈 잡고 더 열심히 하자!!!! 하다 보면 나아질거라 믿는다.

:hover 는 사용자의 마우스가 요소 위에 올라가 있을 때 구현된다.

내일배움 수료 후 3개월만에 다시 코딩을 했다. 머리도 굳고, 손도 굳고.. 그와중에 스터디 과제로 자기소개페이지를 html, css를 이용해서 뒤죽박죽 만들었다.(javascript는 나중에 추가할 예정이다!!) 다음의 이미지는 섹션의 한 부분으로 hover 속성을 적용하기 전의 화면이다.

<section class="like" id="sec3">
    <h2>LIKE</h2>
    <div class="like_in">
      <ul>
        <li>
          <img src="./images/em.jpg" alt="">
          <p>🥤커피</p>
        </li>
        <li>
          <img src="./images/et.jpg" alt="">
          <p>🥩곱창</p>
        </li>
        <li>
          <img src="./images/m.jpg" alt="">
          <p>🍔빅맥</p>
        </li>
        <li>
          <img src="./images/tr.jpg" alt="">
          <p>📸여행</p>
        </li>
        <li>
          <img src="./images/gy.jpg" alt="">
          <p>❣️이상형❣️</p>
        </li>
        <li>
          <img src="./images/tr2.jpg" alt="">
          <p>🐶친구</p>
        </li>
      </ul>
    </div><!--like_in/-->    
   </section><!--sec3/-->

/*sec3*/
#sec3{
    background-color: #F9EBDE;
    padding-top: 5%;
}
#sec3 h2{
    color:#815854;
}
.like_in{
    width: 1000px;
    height: 600px;
    margin: 3% auto;
}
.like_in li{
    width: 240px;
    height: 240px;
    float: left;
    margin:30px 45px; 
}

.like_in li p{
    text-align: center;
    font-family: 'Hi Melody';
}
.like_in li img{
    width: 230px;
    height: 230px;
    border-radius: 50%;
    border: 3px solid #815854;
}

여기에 <li> 태그 전체에 hover를 적용해 이미지와 폰트가 한번에 움직일 수 있도록 추가했다.

.like_in li:hover{
    transform:translateY(-5px);
    transition: 0.5s;
}

transform : 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있는 속성.
translateY() : 현재 위치에서 요소를 y축으로 이동.

마우스 커서를 이미지에 올리면 수직으로 위로 올라가는 것을 나타내기 위해 transform:translateY 속성을 이용하고, 그 값에 마이너스 값을 주어 역방향으로 이동하는 형태를 구현했다. 이때 부드러운 움직임을 위해 transition 속성을 이용했다.

❗️느낀점

• html을 잊지말자.

• css의 다양한 속성(flexbox, grid, animation..등)을 사용하지 못한 아쉬움이 있다..

• 개인적으로 연습하자

• javascript를 이용한 구현도 해보고싶다!!!