Kdt0 nam hyeon jun #68
Conversation
✅ Deploy Preview for velvety-puppy-c1029b ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for mellifluous-gnome-003496 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
style.css 에는 자주 사용되는 CSS 속성을 정리해서 추후 주로 사용하는 속성 및 값의 경우 따로 파일을 만들어서 관리하는 것이 |
| body { | ||
| margin: 0; | ||
| } | ||
|
|
||
| .mb0 { | ||
| margin-bottom: 0; | ||
| } | ||
|
|
||
| .mb15 { | ||
| margin-bottom: 15px; | ||
| } | ||
|
|
||
| .xsmall-text { | ||
| font-size: 10px; | ||
| } | ||
|
|
||
| .small-text { | ||
| font-size: 12px; | ||
| } | ||
|
|
||
| .weight400 { | ||
| font-weight: 400; | ||
| } |
There was a problem hiding this comment.
이 부분이 공통적으로 사용하는 부분을 중복 최소하하기 위한 부분이군여. 저도 추후 채택해봐야겠습니다 -!
index.html
Outdated
| </div> | ||
| <div class="section__price-list"> | ||
| <div class="section__price-name"> | ||
| <p class="price-badge white-text thick">1개월 무료</p> |
There was a problem hiding this comment.
여기 태그에 padding 속성이 밑줄 그어져 있는데, 어떤 이유일까요
There was a problem hiding this comment.
그 이유는... 스타일 시트 main.css 내 해당 부분 스타일 중에서 padding 부분을 주석처리했기 때문입니다... 사용하지 않는 코드들 마지막에 정리한다고 했는데도 못 보고 넘어간 부분들이 있었네요.
index.html
Outdated
| <li> | ||
| <img src="./assets/image/icons8-done.svg" alt=""> | ||
| <p>무광고로 음악 감상하기</p> | ||
| </li> |
There was a problem hiding this comment.
이 부분 주변에 흰색 배경이 넘치는 듯한? 부분은 혹시 어떤 부분인지 알 수 있을까요?
There was a problem hiding this comment.
grid로 나눈 영역 내에서 li 태그들을 포함하는 section__price-ul 클래스 부분에 border가 제대로 적용이 안되어 있었네요.. 이 부분도 리팩토링하면서 다시 수정하려고 합니다!
|
스타일관리에 신경을 써주신 코드라 느꼈습니다! |
main.css
Outdated
| .section__download-banner article { | ||
| display: flex; | ||
| flex-direction: column; | ||
| /* justify-content: center; */ |
There was a problem hiding this comment.
마지막에 정리하면서 사용하지 않는 스타일이나, 주석 처리한 코드들을 제거했는데 미처 확인 못한 부분이 있었네요ㅠㅠ 확인해주셔서 감사합니다!
style.css
Outdated
| .fs20 { | ||
| font-size: 20px; | ||
| } | ||
|
|
||
| .fs24 { | ||
| font-size: 24px; | ||
| } | ||
|
|
||
| .fs40 { | ||
| font-size: 40px; | ||
| } | ||
|
|
||
| .thick { | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| .black { | ||
| background-color: black; | ||
| } | ||
|
|
||
| .white { | ||
| background-color: white; | ||
| } | ||
|
|
||
| .white-text { | ||
| color: white; | ||
| } | ||
|
|
||
| .black-text { | ||
| color: black; | ||
| } | ||
|
|
||
| .gray-text { | ||
| color: gray; | ||
| } |
기획 의도
링크
구성
회고