35일차
드디어 과제 제출이 완료되었다.🎉 그리고 다른 과제를 받았다...😭 강사님..?
(사실, 투덜거리기는 해도 혼자 했다면 미뤄두고 엄두를 내지 못했을 것이 확실하기에 이렇게 몰아세워주는 것이 좋다는 생각이 든다. )
지난 한주를 돌이켜봤을 때, 그저 한주가 너무 빠르게 갔다. 그리고 나는 무얼 공부했지? 라는 생각이 든다. 다른 분들은 마크업도 척척하고 자바스크립트를 이용해 프로젝트의 완성도도 높이는 것 같은데, 막상 코드를 짜려고 해도 막히고 아는 것 같은데 구현을 하지 못하고 하니 답답하기도 지금 부트스트랩을 공부해야하나? 다른 분들처럼 리액트를 시작해야하나? 자바스크립트의 기본기가 너무 부족한데? 등 헤매기도 했던 한주이었다.
무엇보다 과제를 핑계로 수업 내용을 복습하거나, 미리 선행학습을 하지 않게 되었는데 무엇이 중요하고 메인이 되어야하는지를 생각하며 다음 과제를 시작해봐야겠다.
오늘 할 일 목록
- 한 주동안 공부한 자바스크립트 내용 복습하기
프로젝트로 배우는 자바스크립트 유트브구성,무한스크롤패스트캠퍼스 - 부트스트랩 파트
오늘 배운 부분
- 메모리 누수 방지를 위해 removeaddEventListener을 해주는 것이 좋다.
- input의
autocomplete="off"자동검색 off 기능 - input의
caret-color속성 커서의 색상을 바꿀 수 있다. pointer-events: none를 이용하면 그 아래에 있는 엘리먼트를 클릭할 수 있다?- svg의 경우 path에 fill값을 통해 색상을 줄 수 있습니다.
- flex속성을 사용하면 나중에 반응형 구조를 만드는 것도 매우 수월해진다.
- ⭐::before요소를 이용한 레이아웃 구조 유지
.contents figiure .btn_view::before {
content: '';
display: block;
width: 100%;
/* 16:9의 유트브 비율을 맞추기 위해 미리 before을 깔아놓음 */
/* 그 안에 있는 elment는 absolute로 공중에 띄어서 before로 레이아웃이 유지되도록 설정 */
/* display: absolute를 주어도 아래에 있는 요소가 딸려올라가지 않게 된다. */
padding-top: 56.25%;
}
.contents figiure picture {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
}display: -webkit-box;,-webkit-line-clamp: 2~3줄까지도 말줄임이 가능하다.
display: -webkit-box;
/* 두줄~세줄까지도 말줄임이 가능하다 */
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.5;- 미디어쿼리와 flex를 이용한 반응형 디자인
.contents figure {
display: flex;
flex-flow: column wrap;
position: relative;
/* flex-grow , flex-shrink, flex-basis */
flex: 0 0 23%;
margin: 1%;
}
@media(max-width: 1024px) {
.contents figure {
flex: 0 0 31.333%;
}
}
@media (max-width: 767px) {
.contents figure {
flex: 0 0 48%;
}
}
@media (max-width: 480px) {
.contents figure {
flex: 0 0 100%;
margin: 0;
}
}
0seo