2023.SEPT.16(THU) 슈퍼코딩 부트캠프 신입연수원 Day 4
✅ DAILY REPORT
📌 TO-DO LIST
- submit blog post 중간보고, 일일보고
- 슈퍼코딩 19, 20, 21, 22강
- 18강: CarrotMkt header
- 19강: footer
✅ Today I Learned
CarrotMkt Chat page
당근마켓에서 채팅 페이지를 HTML, CSS 사용하여 만듦.
https://github.com/soheeparklee/sc_project_carrotMkt_improved.git
✅ MENTORING_멘토링
🐝 취업 관련 꿀팁
- 지원 사이트
- 로켓펀치
- 링크드인
- 원티드
- 사람인
- 더브이씨(투자 단계, 투자 받은 라운지, 투자 규모 파악하기)
포지션, 테크 스택 키워드로 검색하기
취업 카테고리
- 컨텐츠: SNS, Streaming, Portal, Information, Community
- 커머스: Delivery, Shopping, P2P Market(개인판매), Crowd Funding, Platform(결제포함)
- 핀테크: Pay/PG, Banking, Stock, P2P Lending(허가받은업체만투자하고싶은개인들이빌려주는대출플랫폼), Cryptocurrency(블록체인,암호화폐)
- 모빌리티: Mobility, Car Sharing, Navigation, Self-driving(자율주행)
코딩 공부 사이트
- 유데미
- 앙마코딩
- 패스트캠퍼스
- 중퇴한 영훈이
- 우아한 코스
테크 블로그(기술면접)
https://gyoogle.dev/blog/ https://github.com/JaeYeopHan/Interview_Question_for_Beginner
Book recommendation for code-review
https://product.kyobobook.co.kr/detail/S000031741573
Book for writing Blog
https://www.yes24.com/Product/Goods/79378905
Book for CS
https://product.kyobobook.co.kr/detail/S000003114660 https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=300406950 https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=277386060
✅ Trouble Shooting
🔴 opacity:0 VS display:none
opacity: 0을 주었더니 opacity:1로 만들었을 때도 화면이 클릭되지 않았다. button들을 클릭할 수 없어 난감했다.
🟡 What I tried_스스로 시도해 본 것들
button에 문제가 있는 줄 알고 div로 바꿨다가, atag으로 바꿨다가…난리부르스
🟢 What I learned_알게된 점
opccity: 0은 화면을 클릭할 수 없게 만든다.
화면을 띄우지 않게 만드는 다른 방법은 display: none;
🔴 css사용해 item을 어딘가에 붙여버리기
CarrotMkt의
footer을 만드는데footer을 페이지 밑에 붙여야했다! 근데 방법을 모름.
🟡 What I tried_스스로 시도해 본 것들
align-itmes: end로 해결해보려고 했으나 안 됨!
🟢 What I learned_알게된 점
item의 위치를 어딘가로 딱! 정해버릴 떄는 position을 사용한다.
1
2
position: fixed;
bottom: 0;
🔵 I should work on_ 부족한 점
- css positions를 더 자주 project에 적용하며 써봐야겠다.
- 아니면
margin-top을 줘서 아래로 내리거나.
🔴 css item이 잘려보임!!!
CarrotMkt의
footer끝이 잘려보이는 문제footer을 밑에 붙였는데 끝이 잘린다! 왜 그러지?
🟡 What I tried_스스로 시도해 본 것들
margin-right: 20px;
padding-right: 20px;
width: 100vw;
width: auto;
width: 100%;
다 해 보았으나 계속 잘림! 그리고 footer이 이상한 곳으로 막 이동함. position속성 때문에 그런 것 같음.
1
2
width: 95%;
justify-content: space-between;
width: 95%;로 해결을 해 두었음.
🟢 What I learned_알게된 점
- how to reset CSS
🔴 가려졌으면 하는 부분들이 안 가려지고 스크롤을 내리면 보임
@media screen을 사용해 크기 조절을 했는데, 보이지 않았으면 하는 부분들이 보임
🟢 What I learned_알게된 점
<div class="size-adjust">사이즈를 조정해 주세요</div> @media screen 을 적용할 div를 HTML가장 아래에 두기
그럼에도 불구하고 scroll을 하면 아래 footer이 보임 ㅠㅠ
<div class="size-adjust">사이즈를 조정해 주세요</div>
이 div를 position: fixed로 준다.
그러면 cursor을 내려도 div가 cursor을 따라옴.
🔵 I should work on_ 부족한 점
- CSS
position으로 할 수 있는 기능들이 많다.
🔴 특정 class안에 또 특정 class에만 효과를 주고 싶음
icon에 마우스hover했을 때는 아이콘에transform적용되는데,text에hover하면 아이콘 반응 없음.
🟠 Mistakes I Made_헷갈리거나 실수한 점
기존 코드
1
2
3
4
footer-box-icons:hover {
transform: scale(1.2);
transition: all 1s ease;
}
🟢 What I learned_알게된 점
1
2
3
4
.footer-box:hover .footer-box-icons {
transform: scale(1.2);
transition: all 1s ease;
}
X 가
hover되었을 때, Y 에animation,transform효과 주는 방법 글자는 안 커져서 더 좋음.
만약 글자까지 커지게 하고 싶으면?
글자까지 포함된
div에hover기능 추가하면 되지.
1
2
3
4
.footer-box:hover {
transform: scale(1.2);
transition: all 1s ease;
}
☑️ Summary of the Day
I managed to Debug and Post a lot today.
My first clone-coding project in Super Coding as CarrotMkT was successful.
However, my time-management was not so efficient…
I am going to bed at 2am!!
💟 참조
Framework VS Library https://www.freecodecamp.org/news/the-difference-between-a-framework-and-a-library-bd133054023f/