*예제 코드1 (스스로 해석 해보기)
1. margin : white 화면 공백 자체의 가장 큰 가장자리
2. align -items:center; > 가장자리에 오는 이유는 'flex-direction'
3. display : flex; 를 사용하는 이유 > Header 자체가 모두 정렬되어야 할 레이아웃 요소
ex) header, h1, p 자체 요소가 모두 가운데로 와야함 > 해당 요소들의 모든 공통점이 Header class로 통용되기 때문
※ 반응형 디자인, 정렬/공간 분배에 사용된다.
*예제 코드2 (스스로 해석 해보기)
1) 로그인 폼 자체 카테고리를 정렬
2) 로그인 폼 내 input 요소에 부여할 것 확인
- 글자와 경계선의 폭, 글자 사이즈, 아래 선 표시 방법
3) transition : state에 따라 바뀌는 property가 있어야 함
- transition을 부여하고 아래의 input:focus가 실행되는 이러한 내용이 있어야 실행이 되는 것
- input의
4) :: placeholder
<transition>
| 타이밍(Easing) 함수 종류 | 효과 |
| ease-in | 느리게 출발하다가 점점 빨라짐 |
| ease-out | 빠르게 출발하다가 점점 느려짐 |
| ease-in-out | 느려졌다가 보통이었다가 느려짐 |
| linear | easing 하지 않고 일정함 |
<input:hover, active, focus>
| 구분 | 효과 |
| hover | 마우스가 올라갔을 때 |
| focus | 선택된 상태가 되었을 때 |
| active | 클릭 됐을 때 (활성화) |
> https://matthewlein.com/tools/ceaser
Ceaser - CSS Easing Animation Tool - Matthew Lein
Choose an easing type and test it out with a few effects. If you don’t quite like the easing, grab a handle and fix it. When you’re happy, snag your code and off you go. Now that we can use CSS transitions in all the modern browsers, let’s make them
matthewlein.com
Animista - On-Demand CSS Animations Library
Animista is a CSS animation library and a place where you can play with a collection of ready-made CSS animations and download only those you will use.
animista.net
> https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Using media queries - CSS: Cascading Style Sheets | MDN
Media queries allow you to apply CSS styles depending on a device's general type (such as print vs. screen) or other characteristics such as screen resolution or browser viewport width. Media queries are used for the following:
developer.mozilla.org
참고 블로그 : https://poiemaweb.com/css3-transition
CSS3 Transition | PoiemaWeb
트랜지션(transition)은 CSS 프로퍼티 변경에 따른 표시의 변화를 부드럽게 하기 위해 애니메이션 속도를 조절한다. 즉, 프로퍼티 변경이 표시의 변화에 즉시 영향을 미치게 하는 대신 그 프로퍼티
poiemaweb.com
> https://matthewlein.com/tools/ceaser
Ceaser - CSS Easing Animation Tool - Matthew Lein
Choose an easing type and test it out with a few effects. If you don’t quite like the easing, grab a handle and fix it. When you’re happy, snag your code and off you go. Now that we can use CSS transitions in all the modern browsers, let’s make them
matthewlein.com
Animista - On-Demand CSS Animations Library
Animista is a CSS animation library and a place where you can play with a collection of ready-made CSS animations and download only those you will use.
animista.net
> https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Using media queries - CSS: Cascading Style Sheets | MDN
Media queries allow you to apply CSS styles depending on a device's general type (such as print vs. screen) or other characteristics such as screen resolution or browser viewport width. Media queries are used for the following:
developer.mozilla.org
참고 블로그 : https://poiemaweb.com/css3-transition
CSS3 Transition | PoiemaWeb
트랜지션(transition)은 CSS 프로퍼티 변경에 따른 표시의 변화를 부드럽게 하기 위해 애니메이션 속도를 조절한다. 즉, 프로퍼티 변경이 표시의 변화에 즉시 영향을 미치게 하는 대신 그 프로퍼티
poiemaweb.com
*예제 코드3 (스스로 해석 해보기)
1) [ ] : 요소를 대상으로 지정하는 것
{ } : 요소의 스타일을 지정하는 것
2) input:not이 의미하는 것은 not을 제외한 모든 것에서 적용된다는 의미임_때문에 중복 적용하면 안됨
3) css cascading을 유의할 것(우선순위 법칙)
- not이 transition 발동 전 보다 위에 있어야함, 위에서부터 아래로 적용되는 구조에 따르면 border none에서 시작
(즉 border 자체가 없는 상황에서 색을 설정해도 적용될 수 없음)
4) color : inherit의 의미는 anchor(자식) 의 색상을 login-form(아버지)에서 상속 받는다는 의미
5) cursor의 종류 (https://cofs.tistory.com/212)
**전체 코드 혼자 작성해보기
'html, css' 카테고리의 다른 글
| [국비] HTML/CSS 복습 및 이해하기, 용어 정리 및 속성 이해하기 (0) | 2024.05.18 |
|---|---|
| [css] CSS BOX MODEL (0) | 2023.08.03 |
| ★[html/css] 코로나 속 복습 6-1~6-5까지_카카오톡 홈화면 예시 (8.2~8.3) (0) | 2023.08.02 |
| [html/css] Zoom talk 만들기_노마드코더보고 따라하기(CSS.5) (0) | 2023.07.30 |
| [css] BEM 사용하기 (0) | 2023.07.30 |