📌 학습한 내용

---

트위치 실습

전체 코드 : 💾

상단 영역

• --color-text-base : 최신 브라우저에 등장하는 코드

• nav .nav-wrap .nav-left ul li:first-child a:after에 margin-top속성을 주면 <a>도 함께 내려온다.
  
  -> position: relative; 적용해서 top 사용
  

• px <-> em 변환 사이트 : http://pxtoem.com/

• 사이에 동일한 공백을 주는 flex-between을 이용해 배치해준 nav-center 영역이 각기다른 nav요소의 width 값으로 인해 정중앙에 배치되지 않는 현상 발생
  
  -> nav-center 부분을 flex의 영향에서 벗어나게 한 후, position: absolute;로 3차원으로 만들어 x축 중앙정렬 공식을 사용

nav .nav-wrap .nav-center {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

• postion; fixed;(3차원적인 특징을 가진 position) 적용시 적절한 width 값을 지정해주지 않으면 아래와 같이 레이아웃이 모두 틀어지게 된다.
  

왼쪽 영역

👉 실무 tip 1) 항상 해당 영역을 브라우저 크기에 관계 없이 full height로 유지하는 법

position: fixed;상태에서 top, right, bottom, left를 사용하게 되면 항상 브라우저를 기준으로 좌표 기준점 생성

-> 여기서 bottom: 0;을 적용하면 짧았던 영역의 길이가 브라우저의 세로 끝까지 채워지게 된다. (순수 3차원적인 특징을 가진 position에서만 발생)

=> height를 사용하지 않고 top, bottom을 이용해 전체 full size를 만들 수 있다. 해당 박스의 높이값은 브라우저의 높이에 따라 가변적으로 변화한다.

👉 실무 tip 2) 해당 영역에서만 스크롤을 생성하는 법

overflow-y: auto; 적용

📌 학습내용 중 어려웠던 점

---

📌 해결방법

---

📌 학습소감

---

꽤 긴 시간 동안 네이버 카피캣 작업을 했는데, 이제는 트위치라는 해외 사이트를 카피캣하니까 생각보다 더 새로웠다. 네이버 페이지 작업시에는 대부분 <header>, <main>, <footer>로 큰 구역을 나눠 주었는데, 트위치 카피캣에서는 <nav>와 <div>를 이용해 작업중이다. 또한 개발자 도구를 이용해 간단히 레이아웃의 형태나 속성값 등을 알아냈던 국내 사이트와 달리 해외 사이트는 카피캣 자체가 어렵도록 이루어져있어서 조금 고생을 했다. 하지만 그만큼 육안으로 체크해야할 부분이 많아 좀 더 수치같은 것을 눈에 익힐 수 있었다. 😗