고민과 느낀점
디자인은 어렵다 ㅠ
- 이미지를 자꾸 검색해보고 참고할만한 디자인을 자꾸 봐야할 것 같다
- 색상 조합 참고하는 사이트를 이용해보자
사용자 경험을 위한 기능적 요소인가? 디자인 요소인가? 모두 포함하는가?
- 단순 디자인 요소가 너무 많아지면 오히려 사용자 경험에 부정적인 영향을 줄 수 있을 것 같다
로고 이미지 배치
- img 태그를 다른 버튼요소와 같이 정렬해서 해보려 했지만 잘 안됨
=> position absolute (해당 요소에) 와 relative (부모 요소에), top, right, left, bottom 을 이용해서 원하는 공간으로 위치시킴 - 기존 이미지의 강한 색감은 opacity로 조절함
더 해볼 것들
CSS Grid
참고 : https://studiomeal.com/archives/533
Figma 피그마 사용법 (섹션3에서 좀 배울 예정)
https://designer-story.tistory.com/
https://www.youtube.com/playlist?list=PLfrKiHMMe1chZTU89gcXsslf7vld8nodK
CSS로 육각형, 삼각형 만들어보기
clip-path와 들여쓰기
https://youtu.be/O1zJGvoXL-w?list=PLZ5oZ2KmQEYgwUA_krjYGqPLb1y3PF4LP
https://bennettfeely.com/clippy/
https://www.cssportal.com/css-clip-path-generator/
https://dev.to/afif/responsive-hexagon-grid-without-media-query-57g7
네온사인 라이트 효과 버튼 및 애니메이션 (box-shadow 활용)
https://youtu.be/OU6x-P9g1Ik?list=PLZ5oZ2KmQEYgwUA_krjYGqPLb1y3PF4LP
https://www.youtube.com/watch?v=6xNcXwC6ikQ
https://www.youtube.com/watch?v=_13a3r6MYeM
https://www.youtube.com/watch?v=ex7jGbyFgpA
https://www.youtube.com/watch?v=xnltEHWWjiM&t=38s
맥북 기본 폰트 사용
font-family: 내역을 보다보면 system ui 가 있음! 그걸로 사용
사용자 지정 CSS 속성 사용
https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties
https://www.daleseo.com/css-variables/
배경이 보이게 투명하게 만들기고 텍스트는 살리기
rgba 로 하는 법, #컬러넘어6자리 뒤에 2자리로 적용 가능
곱셈, 나눗셈 등 기호 엔티티로 적용해보기
https://velog.io/@zerone/HTML-%EC%97%94%ED%8B%B0%ED%8B%B0Entity-%EC%99%84%EC%A0%84%EC%A0%95%EB%B3%B5
입체적 도형 효과
perspective / transform-style (div 여러개로 적용함)
또는 border outset 으로도 가능
https://developer.mozilla.org/ko/docs/Web/CSS/border-style
radial-gradient 효과는?
keyframe animation 효과
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations
https://www.youtube.com/watch?v=bbvQ90mVj-4&t=355s
https://www.youtube.com/watch?v=PP0Os0UvMCs
https://www.youtube.com/watch?v=AKgkKv0qKgw
flex basis 관련
basis 를 auto로 두면 contents 길이에 따라 요소 크기가 영향을 받음
배우고 익힐 건 정말 많다
