[TIL] #09 Weeggle | Wecode - 3Day

DamHo Bae·2021년 2월 17일

TIL WeCode 개발자 위코드 프론트엔드

위글이라는 검색창 만들기 !!

📝 Code review

오늘 일정

아침 밥 챙겨 먹기
위코드 9:20am 출석
커피 한잔 후 노트북 세팅
Replit 과제 수행
프론트엔드 개발자가 하는 일
TFT
모각코

공통세션

프론트엔드 개발자가 하는 일 By지영님

프론트엔드 개발자는 디자인 감각이 필요하다는건 오해였다.
나는 사실 고등학교 시절 디자인과를 졸업하였고 디자인에 관심이 많았다.
그래서 인지 프론트엔드가 더 끌리는 부분도 있었을 것이다.

결론 :

디자인 감각은 있으면 좋지만, 없어도 그만...
프론트엔드는 유저에 보여지는 것들이 많기 때문에 더 멋있다고 느낀다.

TFT ?

거짓 1개 진실2개 총 3가지 중 거짓 하나를 찾는 것이다.
Zoom을 통해 멘토님들이 진행을 했고, 짧은 시간동안 간단한 소개 정도를 했다.

Weegle 검색창

설명은 아래 주석에 작성.

*{
  box-sizing: border-box;
  //전체 박스 사이즈를 보더 박스로 고정시켰다.
}
.weegle img{
  display: block;
  width: 75%;
  margin: 0 auto;
  //먼저 위글이라는 이미지를 블록형태로 만든 후//
  //width를 75%정도 설정했고,//
  //마진 0 auto를 통해 자동으로 설정하게 했다.//
}
.sch{
  position: relative;
  width: 500px;
  border: 1px solid 
}
input{
  width: 100%;
  border: 1px solid
  #dfe1e5; /*  */
  padding: 10px 12px 10px 40px;
  font-size: 17px; 
  border-radius: 24px;
  //보더 라디우스 => 테두리를 24px만큼 둥글게//
}
.sch img{
  position: absolute;
}
.fasfa{
  position: relative;
}
.fa-search {
  position: absolute;
  left: 20px;
  top: 10px;
  color: #AFAFAF;
}
.fa-keyboard {
  position: absolute;
  right: 40px;
  top:10px;
}
.fa-microphone{
  position: absolute;
  right: 20px;
  top: 10px;
  color: #4F86EC
}
.a1{
  position: relative;
  color: #88898C;
}
.content{
  display: flex; /* 플렉스를 사용해서 좀 더 간편하게 */
  flex-direction: column;
  /* 로우 방향에서 행으로 */
  justify-content: center; /* 가운데 정렬 */
}
.a1{
  display: flex;
  justify-content: center;
  width: 100%;
  position: relative;
}
.a1 > button{
  margin: 0 10px; //버튼 부모 태그 밑에 자식 버튼 마진을 주면 양쪽 버튼에서 너비가 주어진다.//
}
.section{
  border-radius: 3px;
  padding: 10px;
  border: 0;
}
  .section2{
  padding: 10px;
  border-radius: 5px;
  border: 0;
}