🔥 오늘의 목표

• h+c+j 실전퍼블리싱2 강의 진도 및 복습

---

📝 노트필기 및 정리

- 진도
1. 크롬 브라우저 다운로드 페이지

vertical-align: middle 이란 속성은
inline-block 요소에만 사용할 수 있다.

input은 inline-block 요소니까 사용 가능.

하지만 걍 간단하게 transform: translateY(-2px); 써도 됨.

애니메이션 부분

이케 이케 하면 .heading 부분이 완성. (?)

section(common)부분

다른거 다 빼고... float 부분만 보기.
float: left 주고 width: 50% 줘서 반반 나눴고,
높이값 없어졌으니까 부모요소에 overflow: hidden.
혹시라도 img의 크기가 클까?봐? width: 100%를 줬다.

read-more 부분

물론 a태그에 i태그를 넣어서 만들 수도 있지만..
그럼 html이 너무 길어지니까 이렇게 CSS에서 read-more에
before/after {content: '유니코드'} 를 줘서 만들면 html이 깔끔!

또한 trasform이라는 요소는 inline 요소에는 적용되지 않기 때문에,
inline요소인 before/after 를display: inline-block 으로 변환해 준 것도 매우 중요.

마무리

next-sectio에 scroll-behavior: smooth; 주고 마무리.

---

💭 느낀점

• 오늘 한 일은 무엇인가요?
  common section

• 중요한 것/기억해야 하는 것은 무엇인가요?

  label 태그에서 for 는
  input type="ㅇㅇㅇ" 아이디와 매칭시킬때만 사용함!
  그렇기 때문에,
  어느 텍스트를 눌러도 체크가 되게 하기 위해 label을 사용하려면
  label 태그에서 for 를 쓰지 않아야 한다.

  trasform이라는 요소는 inline 요소에는 적용되지 않는다!!!

• 내일 할 일은 무엇인가요?
  footer 섹션