🐣 주니어 개발일지 - 트위치 카피캣 # 1

📘 오늘 배운 것

---

트위치 상단 부분

설계 전 확인 사항

• 접었다 펼쳐지는 부분
  • 자바스크립트 활용
• 왼쪽, 상단 영역 고정
  • position :fixed; 적용해야한다는 것

기억해야 할 것

• CSS 초기화 작업

  • a태그
    • 언더바 삭제
    • 폰트 흰색으로 설정
      
  • 배경색 초기화
    • background-color: transparent;

• 바 만들기

  • position: relative사용해 margin값, top값을 주어 간격 맞추기
    

• input, button 만들기
  

  • placeholder : 화면 상에는 그 문자열이 보이지만, 버튼을 클릭했을 때 아무 값도 전송되지 않음
    
  • * 전체에 box-sizing: border-box; 적용
    • 배치작업을 수월하게 하기위해 미리 적용하는 것이 좋다!

• rem 단위 (해외사이트로 네이버사이트와 다른 수치들이 많이 나옴)

  • 1rem = 16px
  • 단위 변환 사이트 http://pxtoem.com/
  • em과 rem의 큰 차이는 없다.
    

• 손가락 모양 표시
  

• (참고용) color-text-base

  • 최신브라우저용

연습 결과

❔ 궁금했던 것

---

1) em / rem 단위의 차이 ?

💡 해결 방법!

---

1) 기준이 되는 값이 다름
rem 은 최상위 태그의 font-size 값이 기준 / em 은 현재 요소의 font-size 값이 기준
참고사이트 http://triki.net/prgm/3250

🌱 공부를 마무리하며,

---

해외사이트의 경우 검사 기능으로 확인하는데 한계가 있어 카피캣에 어려움이 있었다.
최대한 비슷하게 카피캣 해보는 것에 집중해 학습하였다.