HTML, CSS 기타

1. Css 에서 "box-sizing: border-box"라고 쓴 거는 padding을 디폴트로 상자 밖의 영역으로 인식하는 css한테 "내가 padding을 줘도 신경쓰지 마, 내 box 사이즈를 늘리지 말아줘"라고 한 거다

 

2. 닷(.)은 class를 지칭한다 

 

3. 스크린샷을 보면서 반복되는 모양들을 component로 만들고 따로 빼면 작업하기 아주 쉬워진다 

 

4. Html에서 주석은 <!-- -->로 처리한다 

 

5. id 쓰기보다 class명이 길어져도 그렇게 BEM 테크닉 쓰길 권고한다

 

6. 클래스명을 "user-component__title--not-bold" 이렇게 길게 써도 된다 

 

7. <span class="nav__notification badge">1</span> 이라고 쓰면 클래스가 2개 있는 것이다 

 

8. 같은 코드가 반복된다면 var로 만들어주는 게 좋다, 똑같은 코드 자꾸 만들지 않도록, 심지어 색깔이 반복돼도 var로 만들 수 있지 

 

9. Uppercase(대문자)는 디자인(보여지는 것)이기 때문에 <h6>등 보여지는 글자 쓸때는 HTML에서는 소문자로 짜고 만약 대문자로 표시가 필요하다면 CSS에서 대문자로 바꿔주면 된다

 

10. CSS에서 대문자로 바꿔주는 코드는 "text-transform: uppercase;"이다 

 

11. CSS에서 ".open-post__members .divider{

   width: 1px;

   height:100%;

}

라고 짠 건 open-post__members 중에서도 그 안에 있는 divider에 대해서만 해당 코드를 css에 반영하고 싶어서다, 혹시라도 다른 디바이더가 있을까봐 그렇다, 디바이더는 세로줄이 생기는 건가보다 

 

12. 가령 새로운 css components 파일을 만들어주려고 기존에 다른 파일의 일부로서 사용했던 find-icons라는 css 태그 전부의 이름을 바꿔주려면 코드를 잘라와서 새로운 파일에 붙여넣은 다음 블럭지정하고 Command+D 또는 Carl + D를 눌러서 같은 단어를 모두 선택한 뒤 이름을 icon-row로 바꿔줄 수 있다,

 

13. 이때 styles.css 파일에 @import "components/icon-row.css" 코드를 넣어주는 걸 잊지 말아라 

 

14. 그리고 html 파일에서 사용된 "find-icons"라는 클래스명을 "icon-row"로 바꿔주는 것도 잊지 말라

 

15. "I hope that by now you have realized how cool it is to have classes. Because they allow you to just create components (...)"

 

16. 클래스 만들어주고 컴포넌트 만들어주니까 다른 페이지에서 복붙하면 되고 거의 한 게 없자나! "I am a lazy motherf*cker! " 쿨니코 

 

17. 말풍선 만드는 데 좌상단 코너만 네모낳게 하고 나머지는 둥그렇게 하려면 아래와 같이 CSS 코드 짠다

   Border-radius: 15px;

   Border-top-left-radius: 0px;

 

18. CSS에서 아래와 같은 order 속성은 오로지 flex children에서만 적용된다

   .message-row-own .message__bubble {

     Order: 1;

    } 

   .message-row--own .message__time {

     Order: 0;

    }

   위와 같이 코드를 짜면 버블말풍선이 오른쪽으로, 시간이 왼쪽으로 간다

 

19. 그런데 18처럼 하면 코드가 길어지니까 아래와 같이 하면 훨씬 간결하다

   .message-row--own .message__info {

     Flex-direction: row-reverse;

    }

(Message__info는 message__bubble과 message__time을 합한 걸 칭했음)

 

20. 100vh, 100vw와 100%의 차이는? 

   100vh = the screen's height

   100vw = the screen's width

   100% = 100% of the PARENT

 

21. CSS에서 애니매이션 쓸 수 있다 

@keyframes hideSplashScreen {

   From {

     Opacity: 1;

   }

   To {

     Opacity: 0;

   }

}

 

.splash-screen {

   Background-color: var(--yellow);

   Position: absolute;

   Height: 100vh;

   Width: 100vw;

   Top: 0;

   Display: flex;

   Justify-content: center;

   Align-items: center;

   Font-size: 132px;

   Animation: hideSplashScreen 1s    ease-in-out    forwards;

}

 

여기서 마지막에 "forwards"는 마지막 keyframe을 기억하길 원해서 달아주는 것이다, 

이걸 안 하면 다시 opacity1으로 돌아와 화면을 꽉 채워버림

 

22. 근데 21로 하면 다른 섹션을 클릭할 수 없다, 왜냐하면 그게 안 보이지만 화면을 계속 꽉 채우고 있는 상태라 다른 항목을 클릭할 수 없게 된다, 그래서 21에서 @keyframes 에서 visibility: hidden;을 달아준다 

 

@keyframes hideSplashScreen {

   From {

     Opacity: 1;

   }

   To {

     Opacity: 0;

     Visibility: hidden;

   }

}

 

.splash-screen {

   Background-color: var(--yellow);

   Position: absolute;

   Height: 100vh;

   Width: 100vw;

   Top: 0;

   Display: flex;

   Justify-content: center;

   Align-items: center;

   Font-size: 132px;

   Animation: hideSplashScreen 1s    ease-in-out    forwards;

}

 

Visibility: hidden은 마우스에 걸리지 않게 사라져주는 거다, 그래도 html은 여전히 거기에 있다

그래서 뭔가 진짜 숨기고 싶거나 html을 없애고 싶으면 JavaScript가 필요하다

JavaScript는 뇌니까! 

여기서는 그냥 브라우저가 해당 element를 무시하도록 처리만 해 둔 거야 

 

23. Animation을 좀 딜레이 하고 싶으면 아래와 같이 추가한다

 

@keyframes hideSplashScreen {

   From {

     Opacity: 1;

   }

   To {

     Opacity: 0;

     Visibility: hidden;

   }

}

 

.splash-screen {

   Background-color: var(--yellow);

   Position: absolute;

   Height: 100vh;

   Width: 100vw;

   Top: 0;

   Display: flex;

   Justify-content: center;

   Align-items: center;

   Font-size: 132px;

   Animation: hideSplashScreen 0.4s    ease-in-out    forwards;

   Amination-delay: 2s;

}

 

24. 채팅방숫자가 돌아가면서 움직이게끔 애니메이션 달고 싶으면 아래와 같이 css 추가하면 된다

@keyframes notificationAnimation {

   0% {

     Transform: none;

   }

   50% {

     Transform: translateY(-5pm). RotateY(360deg);

   }

   100% {

     Transform: none;

   }

}

 

.nav__notification {

   Position: absolute;

   Left: 15px;

   Bottom: 15px;

   Animation: notificationAnimation 2s   Ease-in-out   Infinite;

}

 

25. Will-change라는 property를 쓰면 브라우저가 뭔가 바뀔 거라고 말해줘서 애니메이션이 좀 더 나아진다, 일종의 브라우저를 돕는 행위로, 브라우저가 컴퓨터의 그래픽카드를 이용해 애니메이션을 가속화할 수 있게 된다, 다만 will-change를 모든 애니메이션에 쓰진 않아도 된다, 뭔가 shaky하거나 이상하게 느껴지면 써주면 좋다 

 

26. FaceIn도 유용한 애니메이션이다

@keyframes fadeIn {

   From {

     Transform: translateY(30px);

     Opacity: 0;

   To {

     Transform: none; 

     Opacity: 1;

   }

}

 

.main-chat {

   Margin-top: 120px;

   Display: flex;

   Flex-direction: column;

   Align-items: center;

   Animation: fadeIn 0.8s  linear;

}

이건 아래에서 위로 face-in되게 하는 애니메이션이다 

 

27. 사람들이 우리 웹사이트를 모바일로만 들어오도록 하려면, 모든 html에 아래와 같이 추가해도 된다 

<div id="no-mobile">

   <span>Your screen is too big ㅠㅠ</span>

</div> 

그리고 no-mobile.css를 components에 만들고 styles.css에 @import한다

그리고 no-mobile.css에는 아래와 같은 코드를 짠다

#no-mobile {

   Position: absolute;

   Z-index: 99;

   Height: 100vh;

   Background-color: var(--yellow);

   Width: 100vw;

   Display: flex;

   Justify-content: center;

   Align-items: center;

   Font-size: 32px;

   Top: 0;

}

 

@media    screen  and (max-width: 645px) {

   #no-mobile {

       Display: none;

   }

}

위와 같이 미디어 query를 쓰면 모바일 화면을 초과하면 스크린이 너무 크다는 메시지를 보여준다