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

📘 오늘 배운 것

---

트위치 왼쪽 영역

오늘의 중요한 내용 ⭐

• position: fixed;에서 top, bottom을 사용할 경우의 특징

  • top: 50px; 50px 만큰 밑으로 내려오게 됨
  • bottom: 0; 강제로 top 50px부터 bottom까지의 사이 공간이 늘어지게 된다.
  • 브라우저 기준 좌표기준 생성
  • 이 현상은 순수3차원 만이 가진 특징
  • fixed 뿐만 아니라, absolute를 사용해도 동일하게 나타낼 수 있음
  • 높이값이 가변값으로 바뀐다.

• 왼쪽 영역에 대해서만 스크롤 생성

  • 트위치 스크롤은 자바스크립트 이용한 것
  • css로 활용하고 싶다면, overflow-y 태그 사용
    

• codepen 사이트 활용

  • https://codepen.io/
  • 간단한 프론트엔드 코딩 가능한 사이트
  • 코딩테스트 가능
  • 까다로운 세팅 없이 React, Angular, Backbone, BootStrap 등의 기술 사용

연습 결과

❔ 궁금했던 것

---

• position 속성 ?

💡 해결 방법!

---

• 참고 사이트 http://tcpschool.com/css/css_position_position
  

🌱 공부를 마무리하며,

---

3차원 position에 대한 개념을 다양한 방법으로 활용할 수 있다는 것을 알 수있었다.