211116 오늘공부 - 프론트엔드 스쿨 12일차

zeroto99·2021년 11월 16일
7

수업 내용 (이호준 강사님)

모든 내용 X
새로 알게된 내용, 헷갈리는 부분, 중요한 부분만 기재함

Grid

  • 코드펜 따라서 간단하게 만들어 보기

  • 카드를 hover했을 때 카드의 top,left 값 조절해서 떠오르게 하기

  • 카드의 그림자는 after로 생성한 후 top,left 값조절해서 입체감있게 만들기

  • 여기서 문제는 16번 카드처럼 hover하면 그림자도 함께 떠오른다는 것이다. 우리가 원하는 건 15번 카드처럼 카드만 떠오르는 것이다. 철썩 붙어오는 그림자를 떼줘야 한다.

  • 해결법
    그림자가 올라온 만큼 내려준다.
    원래 위치값 + 카드가 떠오른 값만큼 주면 된다.
.card:hover {
  top: -15px;
  left: -15px;
}

.card::after {
  top: 10px;
  left: 10px;
}  

.card:hover::after {
  top: 25px;
  left: 25px;
}  

수업 내용 (한재현 강사님)

모든 내용 X
새로 알게된 내용, 헷갈리는 부분, 중요한 부분만 기재함

과제 피드백 - 위니브 로그인, 모달창

  • 로그인 정보 미입력, 오입력의 경우에 input 바로 아래에 뜨는 에러 메세지는 스크린 리더기가 처음에
    아예 읽을 수 없게 display: none;처리했다가 필요할 때 block해주는 게 좋다.

  • 로그인 창 닫기 버튼에 alt는 그냥 "닫기"보다는 "로그인 창 닫기"와 같이 정확히 명시해주는 게 좋다.

  • 소셜 로그인 부분에 로고들은 float: left로 간단하게 처리할 수 있다. 코드가 한결 짧아진다.

과제 풀이 - 위니브 로그인, 모달창

  • 로그인 관련 button, input 등은 자주 쓰기 때문에 기본 형식을 만들어 둔다.
    모듈을 조립하는 것처럼 필요할 때마다 html구조에 껴놓고 css파일을 불러와서 쓰면 된다.

  • 모듈로 만드는 과정 예시
    modules.html에 필요한 모듈 마크업
    style_modules.css에 모듈과 관련된 css 작성
    모듈이 필요한 곳에 마크업 복붙해오고 css 파일 불러오기

  • inline요소는 vertical-align 기본값이 baseline이다.
    따라서 문자는 baseline에 맞춰 수직 정렬된다. g, j, p, q와 같은 문자들은 baseline을 벗어나 bottom까지 닿기 때문에 공백을 가지게 된다.
    imginline요소이기 때문에 문자 취급되어 똑같은 공백을 가지게 된다. 이로 인해 img를 사용하다 보면 이전 요소나 다음 요소 사이에서 알 수 없는 공백이 생기는 것이다.

    • 해결법
    1. display: block;
    2. vertical-align: top;

오늘의 TIP

새로 알게된 내용

  • 깃허브 페이지로 보고 싶은 파일들은 일일이 세팅안하고 기본 페이지 주소에서 보고 싶은 파일의 경로를 추가로 작성해주면 웹에서 볼 수 있다.

  • img가 만들어내는 여백을 없애는 방법에 vertical-align: top;도 있는지 처음 알았다. 신기방기
    까먹지 말고 애용해서 익히도록 하자.

  • 나 css effect 좋아하네... 앞으로 하루에 하나씩은 만들어 보는 걸로! 거창한 거 말고 간단한 거부터 차근차근 해서 벨로그랑 깃허브에도 업로드해야겠다. 재밌겠당😜

profile
일단 해버리는 사람 되기~~

0개의 댓글