Note

---

Important : BEM(Block Elements Modifier) 규칙을 따라 코드 작성하기. https://css-tricks.com/bem-101/

• 폰트 찾아쓸 수 있는 곳 https://fonts.google.com/

• 아이콘 찾아 쓸 수 있는 곳
  https://heroicons.com/
  https://fontawesome.com/

• Font Awesome

1.         <script
           src="https://kit.fontawesome.com/6478f529f2.js"
           crossorigin="anonymous"
       ></script>
       

이 코드를 바디 태그 가장 밑에 적으면 font awesome이 설치된다. 그러면 font awesome 사이트에서 마음에 드는 아이콘을 골라 코드에서 원하는 곳에 복붙하면 된다.

• HTML Shortcut
  "!" = html 기초 코드들 생성
  "link:css" = CSS 파일 연동 코드 생성
  ".classname*(원하는 div 개수) = classname을 클래스네임으로 하는 div이 적은 수만큼 생성된다.

• 우리가 원하든 원하지 않든 브라우저가 알아서 html에 적용시키는 스타일이 있다. (margin, padding 등등) 이걸 없애는 방법이 있는데, reset css 라는 것이다.
  https://cssdeck.com/blog/scripts/eric-meyer-reset-css/ 본 홈페이지에 있는 코드를 복사해서 CSS 폴더에 reset.css 파일을 따로 만든 후 거기에 붙여넣기 해주고, 사용하던 css 파일에 reset.css 파일을 import 해주면 된다. Then we can start from scratch. -> @import "reset.css";

• 파일 관리
  CSS 폴더에 style.css 파일을 하나 놓고 모든 html 파일엔 style.css를 연동시킨 후, 각 페이지에 맞는 css 파일을 따로 만들오 style.css에 import로 연동시키면 좀 더 효율적으로 코드 관리를 할 수 있다.
  

• Measurement
  Page Ruler Redux(https://chrome.google.com/webstore/detail/page-ruler-redux/giejhjebcalaheckengmchjekofhhmal/related) 크롬 익스텐션을 써서 코드를 넣어줄 이미지 margin 등을 측정할 수 있다.

• Not Property (https://developer.mozilla.org/ko/docs/Web/CSS/:not)
  뭔가가 적용되는 걸 원하지 않을 때 사용하는 property. 아래와 같이 써준다. #login-form input type이 submit이 아니면 아래의 코드를 적용하라는 뜻.
  

• Form 이 가지고 있는 powerful한 attribute: Action and Method
  #Action: 어떤 페이지로 data를 보낼 건지 지정할 수 있다.
  #Method로 쓸 수 있는 두 가지 방식이 있다. 하나는 post이고 다른 하나는 get. Post는 백엔드 서버에 정보를 전송하는 방식, 쓰기 위해선 서버가 필요하다. Get 방식은 보안에 취약하다. 따라서 Username이나 password를 Get 방식으로 보내면 안 된다. GET 방식으로는 URL에 포함되어도 상관없는 정보들을 보낸다.

이런 식으로 form 태그에 method를 get으로 지정하고 input들에 이름을 준 후, 로그인 사이트에서 각각 input을 입력하면, action으로 작동되는 다음 페이지 friends.html의 url이 아래와 같이 뜬다. (입력한 인풋 각각 11314, 14141)

• Navigation Bar
  검색엔진 구글도 navigation을 찾아서 ul 안 li 안에 있는 link를 가져오게끔 설정되어 있다. 아래와 같이 Latest, Popular, March 2021 등등이 navigation.
  

(Shortcut) 아래와 같이 네비게이션 코드를 쓰려면 VSC에서 nav>ul>li*(필요한 li 개수)>a 를 적어준 후 엔터를 누르면 된다. 생성을 해준 직후 커서가 "" 안에 가 있을 것이다. 그때 #를 클릭해준 후 tab을 누르면 커서가 li 코드 안으로 들어가며, 거기에 리스트 이름을 적어주고 tab을 클릭하고 이 과정을 반복해 두 번째 사진과 같이 코드를 완성한다.

• 하이퍼링크 지정 색 없애는 법
  a 태그로 만든 링크가 걸린 텍스트 등은 기본은 파란색, 클릭 후는 보라색이 되는 것이 기본이다. 이 설정을 없애고 싶다면 color: inherit;을 해주면 된다. inherit은 작성하고 있는 부모 태그에게 설정을 상속받겠다는, 즉 부모 태그의 디폴트 컬러를 사용하겠다는 뜻.

• CSS 박스 사이즈 조정, box-sizing: border-box
  만약 박스 width를 250px로 설정하고 padding을 25px로 설정한다면 콘텐츠가 들어갈 곳을 250px로 유지하면서 padding을 25px로 만들기 위해 실질적인 박스 크기는 275px가 된다. 따라서 만약 아이콘이 가로로 네 개 있는 박스를 width: 100%, padding: 25px로 설정하면 아이콘 하나가 밀려나서 보이지 않을 수도 있는 것. 이 경우 "box-sizing: border-box"를 써준다. 이로 하여금 CSS에게 It doesn't matter if I put padding here. Do not modify the size of my box. 라고 말해주는 것이다. 이 코드를 첫번째 예시에 넣으면 전체 박스 크기를 250px로 유지하며 콘텐츠 영역은 225px, 패딩 25px가 되는 것.
  

• UPPERCASE
  대문자는 디자인이다. 때문에 HTML에서는 소문자로 작성해주고 CSS에서 대문자로 변경해준다. text-transform: uppercase;

• z-index
  z-index 속성으로 order of layers 지정할 수 있다. 이는 position: fixed/absolute; 등과 흔히 쓰인다(위 값들을 지정하면 레이어 형태로 계산되기 때문). By default, z-index is set to 0. 숫자가 낮을수록 맨앞에 온다
  ex. z-index: 1;

• border-radius 차이 주기
  각각 코너의 다른 border-radius를 주고 싶다면 예를 들어, border-top-left-radious: 0px; 이런 식으로 주면 된다.

• Modifier 사용
  만약 for example, 카카오톡 채팅창을 만들 때 수신/발신 message row에 차이를 주고 싶을 때, 만들어둔 수신 message row를 복붙해서 발신 message row를 만들되, class 명을 따로 추가해서 css에 변화를 줄 수 있다.

• display: flex, order 지정
  부모 태그가 flex display 지정되어 있는 자식 태그들이 나타나는 순서를 뒤집고 싶을 때, order을 사용하면 된다. order: 1; 이런 식으로. order: 0; 이 가장 먼저 나타난다.

• flex-direction: row/column-reverse;
  위의 방법은 태그를 많이 적어야 하므로 대신 부모 태그에 flex-direction을 활용해 row/column을 뒤집어줄 수 있다.

• VH/VW
  vh: viewport height
  vw: viewport width

예를 들어,

width: 100vw;
height: 100vh;

• 애니메이션 마지막 키프레임 유지하는 법

1. 본 애니메이션을 플레이하고 opacity 0, 마지막 키프레임 값이 애니메이션이 끝난 이후에도 계속 유지하게 하고 싶다?
   

2. forwards를 적어주면 된다.
   

3. 이렇게 한 경우 문제가 뭐냐면 겉으로 봤을 땐 opacity 0이 된 코드가 사라졌지만 그 html 코드는 아직 거기 있다는 것, 그렇게 되면 그 아래 깔린 다른 것들을 클릭할 수 없게 된다. 그렇다면 어떻게 해야할까? 간단한 것들에 대해선 아래와 같이 visibility: hidden;을 애니메이션에 추가해주면 된다. 하지만 실제로 html을 없애고 싶다거나 한다면 이렇게 해서는 안 되고 javascript를 써야할 것.

• Animation Delay
  창을 켰을 때 바로 애니메이션이 진행되는 게 아니라 좀 있다가 애니메이션이 진행되길 바란다면? animation-delay 속성을 쓰면 된다.

• "will-change" Property
  It tells your browser something is going to change. If you tell that, the browser sort of animate that animation better. 하트비트 만들 때 작은 넘버로 스케일하는 애니메이션 하면 shaky한 증상을 볼 수 있었다. 그떄 아래와 같은 식으로 어떤 곳에 변화가 있을 것인지 알려주면 더 나은 애니메이션을 얻을 수 있다.