Dev/HTML, CSS, JS3 HTML 클래스 속성의 작명법 BEM (Block Element Modifier) 요소__일부분 : Underscore(Lodash) 기호로 요소의 일부분을 표시 HTML 삽입 미리보기할 수 없는 소스 요소--상태 : Hyphen(Dash) 기호로 요소의 상태를 표시 HTML 삽입 미리보기할 수 없는 소스 2022. 9. 9. [CSS속성] 전환(transition), 변환(transformation), Overwatch 21. 전환 1. 전환 효과를 사용할 속성 이름을 지정 transition-property all : 모든 속성에 적용 속성이름 : 전환 효과를 사용할 속성 이름 명시 2. 전환 효과의 지속시간을 지정 transition-duration 0s : 전환 효과 없음 시간 : 지속 시간(s)을 지정 3. 전환 효과의 타이밍(Easing) 함수를 지정 transition-timing-function ease : 느리게-빠르게-느리게 linear : 일정하게 ease-in : 느리게-빠르게 ease-out : 빠르게-느리게 ease-in-out : 느리게-빠르게-느리게 cubic-bezier(n,n,n,n) : 자신만의 값을 정의(0~1) steps(n) : n번 분할된 애니메이션 4. 전환 효과가 몇 초 뒤에 .. 2022. 2. 7. [CSS 속성] Flex 속성 정리 18. 플렉스(정렬) Container ~ 20. 플렉스(정렬) Items 1. Flex Items 묶음(줄 바꿈) 여부 flex-wrap nowrap : 묶음(줄 바꿈) 없음 wrap : 여러 줄로 묶음 wrap-reverse : wrap의 반대 방향으로 묶음 2. 주 축의 정렬 방법 justify-content flex-start : Flex Items를 시작점으로 정렬 flex-end : Flex Items를 끝점으로 정렬 center : Flex Items를 가운데 정렬 space-between : 각 Flex Item 사이를 균등하게 정렬 space-around : 각 Flex Item의 외부 여백을 균등하게 정렬 3. 교차 축의 여러 줄 정렬 방법 : 활용이 높지 않다. align-conten.. 2022. 1. 24. 이전 1 다음
