study

버튼을 말풍선 모양으로 만들기

input에서는 :after과 :before 사용이 안 된다.

근데 모두가 말풍선 모양을 만들 때 :after을 사용한다. 😓

button type="button"을 사용했다.

.before을사용해야함

킄. 😋😋 웃겼다. 내가 만들고 싶은 모양 빼고 다 나와.

좀 오래 걸렸다.... 이게 그렇게 어려운 건 아닌 것 같은데. 나는 말풍선에 테두리도 주었어야 해서 :before도 사용했다.

어떤 식이냐면, 일단 텍스트가 들어갈 네모를 만들고, :after로 삼각형을 뒤에 붙인다. (네모 배경색과 같은) 그리고 `:before'로 더 큰 삼각형을 붙이고, 그 친구는 말풍선 테두리와 똑같은 색깔로 지정한다. 그러면 더큰 삼각형 앞에 작은 삼각형이 있고, 자연스럽게 말풍선 모양이 된다.

최종 코드

  button {
    position: relative;
    width: 122px;
    height: 25px;
    font-size: 10px;
    background: #ffffff;
    border-radius: 15px;
    box-shadow: 1px 2px 2px 0.2px gray;
  }
  ,
  button:after {
    
    left: 98.5%;
    top: 23.8%;
    border: solid;
    content: "";
    position: absolute;
    border-color: rgba(255, 255, 255, 0);;
    border-left-color: #fff;
    border-width: 6px;
  }
  ,
  button:before {
    left: 99.3%;
    top: 15%;
    border: solid;
    content: "";
    position: absolute;
    border-color: rgba(0, 0, 0, 0);;
    border-left-color: #000;
    border-width: 7.5px;
  }

border-left-color를 방향 따라 바꿔주면 된다.
삼각형 뾰족한 부분이 오른쪽이길 바라면 border-right-color을 하면 된다.

---

반응형 웹이란

반응형 웹을 만들고 싶었다. 원래는 웹앱을 만들려 했지만 아무리 생각해도 반응형 웹이 더 멋지고 편했다. 예시로는 자가진단 사이트를 들 수 있다.

깔끔히

하려고 호출부에서 미디어 쿼리를 작성했더니

src\container\Login.js
  Line 5:18:  React Hook "useMediaQuery" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function  react-hooks/rules-of-hooks
  Line 8:16:  React Hook "useMediaQuery" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function  react-hooks/rules-of-hooks

Search for the keywords to learn more about each error.

최상단에서 userMediaQuery를 호출할 수 없다는오류가났다. 어카지 ㅠ