CSS14 CSS animation 속성 animation 속성 - animation-direction : 애니메이션의 진행 방향을 설정 div { animation-direction : normal; /* 기본값, 애니메이션의 순방향 실행 (시작 -> 끝) */ animation-direction : reverse; /* 애니메이션의 역방향 실행 (끝 -> 시작) */ animation-driection : alternate; /* 애니메이션의 순방향으로 시작하고 마지막 키프레임에 도달하면 역방향으로 진행 (시작 -> 끝 -> 역방향 -> 시작 -> 끝 -> ...) */ animation-driection : alternate-reverse; /* 역방향으로 시작하여 순방향으로 진행 (끝 -> 시작 -> 역방향 -> 끝 -> 시작 -> .... 2024. 1. 22. CSS Module CSS Module 이란? CSS를 모듈화하여 지정된 컴포넌트 범위 내에서만 CSS가 적용되도록 하는 기술이다. 레거시 프로젝트에서 SPA 프레임워크를 도입할 때 기존에 적용 되어있던 CSS 클래스와 이름이 중복되어도 충돌이 절대 나지 않게 해준다. SPA프레임워크 컴포넌트 파일에서 CSSModule 파일을 불러올 때 CSS파일에 선언한 클래스 이름들이 고유 CSS 클래스 이름으로 변경 된다. React 에서 CSS Module 사용 방법 list.module.css .list {display:flex; align-items:center} .list p {font-size:18px; font-weight:bold;} .type1 {margin-top:20px;} #list_wrap {position: a.. 2024. 1. 16. CSS 방법론 📢CSS 방법론이란? CSS에서 클래스 네임을 지을 때 작성하는 방식 📌OOCSS (Object Oriented CSS) OOCSS는 CSS 모듈 방식으로 작성하여 중복을 줄이는 방식의 방법론 공통된 부분을 찾아 어디서나 재활용 할 수 있다는 장점이 있지만 다중 클래스 사용으로 인해 코드의 가독성이 떨어질 수 있다. 📌BEM (Block Element Modifier) BEM은 블록, 요소, 상태로 구분하여 클래스 이름을 작성하는 방식의 방법론 Block = 독립적으로 의미 있는 컨포넌트 Element = 블록에 속하는 부분, 하위 요소 Modifier = 블록이나 엘리먼트의 상태, 해당 요소의 스타일 변경 각 부분을 _ 로 구분하여 짓는다. 엄격한 네이밍 규칙을 따르며 클래스명이 용도와 형태를 잘 표현.. 2023. 12. 13. [CSS 속성] white-space Intro 공백 문자 HTML에서 연속된 공백은 표현되지 않음 따라서 white-space 속성으로 공백, 줄바꿈 등을 표시 white-space : normal default 속성으로 연속된 띄어쓰기, 들여쓰기, 줄바꿈 문자 모두 무시됨 white-space : nowrap 텍스트가 길어서 박스안에 가로 길이를 넘어가더라도 줄바꿈이 일어나게 하고 싶지 않은 경우 연속된 띄어쓰기, 들여쓰기, 줄바꿈 문자 모두 무시됨 white-space : pre 연속된 띄어쓰기, 들여쓰기, 줄바꿈 문자가 그대로 표현됨 소스 코드를 그대로 노출 시키고 싶을 경우 사용됨 white-space : pre-wrap 연속된 띄어쓰기, 들여쓰기, 줄바꿈 문자가 그대로 표현됨 pre 속성과 다른점은 자동으로 줄바꿈이됨 See th.. 2023. 10. 27. [CSS] 세모 만들기 See the Pen css triangle by jominh (@thatBamm) on CodePen. 높이와 너비를 0으로 설정하고 border 값으로 삼각형의 크기를 정한다. 2023. 9. 21. [CSS] font-size:clamp() 📢 font-size:clamp() 소개 font-size:clamp() 는 최소, 최대값 범위 내에서 font-size를 유동적으로 적용한다. font-size:clamp(최소, 기준, 최대) See the Pen clamp by jominh (@thatBamm) on CodePen. 2023. 7. 14. 이전 1 2 3 다음
