내용이 길어지는 것 같아서 글을 새로적어서 1, 2로 나누어 적어보았다!
CSS width, height (높이, 너비)
| 단위 | 설명 |
| px | 절대 크기: 모니터상의 한 점 |
| % | 상대 크기: 바로 윗 부모의 크기에 비례 |
| vw | 상대 크기: 뷰포트 너비의 1/100 |
| vh | vma상대 크기: 뷰포트 높이의 1/100 |
| vmax | 상대 크기: 뷰포트 너비, 높이 중 긴 쪽의 1/100 |
| vmin | 상대 크기: 뷰포트 너비, 높이 중 짧은 쪽의 1/100 |
CSS 여백
margin : 바깥쪽 여백
padding : 안쪽 여백
margin: [margin-top] [margin-right] [margin-bottom] [margin-left];
margin: [margin-top] [margin-left = margin-right] [margin-bottom];
margin: [margin-top=margin-bottom] [margin-left = margin-right];
margin: [margin-top = margin-bottom = margin-left = margin-right];
CSS position (위치 관련 스타일)
statci(기본값) : 문서를 요소의 일반적인 흐름에 따라 배치한다.
relative(상대적 배치) : top, bot, left, right 속성을 지정 가능(absolute를 포함하는 부모 요소로 주로 사용된다)
absolute(절대적 배치) : static이 아닌 조상 기준 상대적 위치에 배치한다.
fixed(고정값) : 부모 요소가 아닌 viewport를 기준으로 배치한다. (공간차지, 스크롤영향 받지않는다.)
CSS Material Design
스큐어모피즘 : 실제 사물처럼 질감, 광원까지 상세하게 디자인한다.
플랫디자인 : 색종이를 이어붙인 듯 평평한 디자인, 입체효과, 그라디언트, 세부장식 배제
머터리얼 디자인 : 2014년에 구글이 도입, 플랫디자인에 그림자로 깊이감 추가, 역동적인 애니메이션 활용
Material Design
1. 일관성있는 UX
- 어떤 기기나 앱을 사용하든 익숙한 사용자 경험
- 어떤 컨텐츠든 담을 수 있는 디자인
2. 의도 명확화
- 어떤 요소든 용도와 작동방법을 알기 쉽도록
- 뚜렷한 반응성 - 행위에 의한 결과를 쉽게 인지
#패스트캠퍼스 #내일배움카드 #K디지털크레딧 #바이트디그리 #프로그래밍기초
