20230605(월)_JavaScript 팀 과제 진행

금일 달성 항목

1) JavaScript 팀 과제 진행 (영화 검색 사이트 기능 추가)
    : main화면 css 완성, subpage css구조틀 완성

2) 학습법 특강 참여

---

문제 해결 과정 1 

[문제]

영화 리스트 화면을 디스플레이 환경에 맞게 알아서 반응형 구조로 변경해야하는 상황이었습니다.

.mainTitle {
  width: 800px;
  color: palegoldenrod;
  background-color: black;
  text-align: center;
  margin: 0px auto 0px auto;
  font-size: 30px;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva,
    Verdana, sans-serif;
}

.search {
  width: 800px;
  margin: 0px auto 0px auto;
  padding: 10px 0px 10px 0px;
  text-align: center;
}

.search > p {
  display: inline;
  font-size: 20px;
  font-weight: bold;
}

.search > input {
  width: 500px;
  height: 30px;
}

.search > button {
  width: 50px;
  height: 35px;
}

.posterCard {
  border: 1px solid black;
  border-radius: 10px;
  width: 350px;
  height: 700px;
  margin: 50px auto 20px 5%;
  display: block;
  float: left;
  text-align: center;
  padding-top: 20px;
}

.posterCard > img {
  width: 300px;
  height: 400px;
}

.overview {
  margin: 0 10px 0 10px;
  text-align: left;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 7; /* 제한 글자의 줄을 7줄로 정해 두었음  */
  -webkit-box-orient: vertical;
}

 

[시도]

이미지와 카드의 width와 height값이 정해져있어서 화면에 맞게 변화하지 않는 것 같았습니다.

.posterCard {
  border: 1px solid black;
  border-radius: 10px;
  width: 350px;
  height: 700px;
  margin: 50px auto 20px 5%;
  display: block;
  float: left;
  text-align: center;
  padding-top: 20px;
}

.posterCard > img {
  width: 300px;
  height: 400px;
}

카드 영역을 추가하고 개인 과제리뷰에서 배운 코드를 사용하였습니다.

#card {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 2fr));
  gap: 1rem;
  padding: 2rem;
}

 

[해결]

처음에는 이미지가 엄청나게 크거나 확장되는 일들이 생겼는데 하나하나 눈으로 보면서 변경하니 금방 수정하였습니다.

 

/* 전체 폰트, 배경화면, 카드 색상 설정 */
:root {
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva,
  Verdana, sans-serif;
  --bg-header-color: #ececec;
  --bg-card-color: hsl(0, 0%, 100%);
}

/* 전체 설정 */
body {
  min-height: 100vh;
  background-color: var(--bg-header-color);
}

/* header 설정 */
h1{  
  margin: 0px auto 0px auto;
  height: 100px;
  display: flex;
  font-size: 30px;
  justify-content: center;
  align-items: center;
}

/* 검색 영역 설정 */
.search { 
  margin: 0px auto 0px auto;
  display: flex;
  
  width: 100%;
  max-width: 500px;
  
  overflow: hidden;
  height: 40px;
 
  background-color: #ffffff;
  border-radius: 10px;
  border: 1px solid rgb(0, 0, 0);
  box-shadow: rgba(200, 200, 200, 0.2) 0px 5px 8px;
}

.search > input {
  flex: 1;
  padding: 0 16px;
  outline: none;
  border: none;
}

.search > button {
  width: 60px;
  margin: 2px;

  border: none;
  color: #ffffff;
  
  border-radius: 8px;
  background-color: #000000;
  transition: transform 100ms ease-in;
}

.search > button:hover {
  transform: scale(1.04);
}

/* 카드 영역 설정 */
#card {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 2fr));
  gap: 1rem;
  padding: 2rem;
}

.posterCard {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 2fr));
  gap: 1rem;
  padding: 2rem;
  
  display: block;
  margin: 10px;
  padding: 10px;
  justify-self: center;

  border-radius: 10px;
  background-color: var(--bg-card-color);
  border: 1px solid rgb(0, 0, 0);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px;

  text-align: center;
  transition: transform 100ms ease-in;
}

.posterCard:hover {
  transform: scale(1.02);
}


#movieTitle {
  font-size: large;
  margin: 10px 10px 10px 10px;
}


.overview {
  margin: 0px 5px 0px 5px;
  text-align: left;
  font-size: small;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 7; /* 제한 글자의 줄을 7줄로 정해 두었음  */
  -webkit-box-orient: vertical;
}

.posterCard > img {
  width: 100%;
  border-radius: 10px;
}

 

[알게된 점]

css쪽은 눈으로 바로바로 보이기에 코드 수정이 생각보다 매우 쉬웠습니다... css가 아닌 기능구현을 할 줄 알아야하는데.. 걱정입니다.

 

 

---

특강

학습법 특강 - 최양임 튜터님

• 프로젝트 중심으로 학습이 필요
  : 강의만 듣는 방식의 학습은 크게 도움이 되지 않음
  : 안보고 구현하고 구조를 이해하는게 중요
• 로직과 코드에 대한 의도, 구현하는 기술, 스택에 목적과 근거 가지고 더 좋은 방법이 있는지 공부해야함 (코드리뷰로 학습)
  : 추가로 해당과정 (node.js) 선택한 이유 더 다른 대안이 없었는지 등등 생각해야함
• 소통할때 예쁘게 말하고 전달하는 바를 명확히 해야함, 데이터 또는 기술적인 근거를 바탕으로 소통
• 알고리즘 레벨 2 정도 풀수있으면 함
• 추후 노드, 리액트, 스프링 반에 따라서 과제가 분기될 예쩡
• 개발자는 학력을 많이 보지 않는 편