🔗BEM

Block__Element--Modifier

• 목적과 기능을 명확히 전달할 수 있다.
• 요소의 구조를 효율적으로 전달한다.
• CSS명시도를 항상 낮은 수준으로 유지하기 때문에 구체성으로 인한 코드의 길어짐을 방지할 수 있다.

출처 : https://velog.io/@kjwboa/CSS-CSS-%EB%B0%A9%EB%B2%95%EB%A1%A0-BEM-%EB%B0%A9%EC%8B%9D

🔗anti-aliasing

폰트가 더욱 부드럽게 보일 수 있지만, 선명함은 떨어질 수 있다.

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

/* 미지원 브라우저 안티앨리어싱 */
transform: rotate(0.03deg);

출처 : https://creativestudio.kr/1398

🔗Breakpoint

반응형웹에서 레이아웃을 구성할 때 기기별 뷰포트의 크기를 어떻게 결정할 지를 정의하는 것을 의미

🔗Bootstrap Breakpoint

Breakpoint	Class infix	Dimensions
X-Small	None	<576px
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px

🔗Tailwindcss Breakpoint : Responsive Design

Breakpoint prefix	Minimun width	CSS
sm	640px	@media (min-width: 640px) { ... }
md	768px	@media (min-width: 768px) { ... }
lg	1024px	@media (min-width: 1024px) { ... }
xl	1280px	@media (min-width: 1280px) { ... }
2xl	1536px	@media (min-width: 1536px) { ... }

🔗Pseudo-element

• ::Pseudo-element : CSS 의사 요소는 선택한 요소의 특정 부분에 스타일을 지정(다른상태일 때)
• :Pseudo-class : CSS 의사 클래스는 선택한 요소의 특수 상태를 지정하는 선택기에 추가된 키워드(내부의 일부분만 스타일줄 때)

출처 : https://developer.mozilla.org/ko/docs/Glossary/Pseudo-class
출처 : https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements