08.11 네이버 e스포츠

네이버 e스포츠 웹페이지 실습
실습코드 깃허브 링크

---

• 각각의 li들을 디자인하고, flex-start로 가로 정렬하였다.

.esport_flex_start {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	align-content: stretch;
}

• 한칸 전체가 클릭범위였기 때문에 html 구조를 짤 때 a태그로 감쌌다.

---

• ul과 li 태그로 전체적인 구조를 잡았다.
• li태그 안의 내용물은 span/h2/div 구조로 쌓았다.
  
• 'live'와 '진행중'은 flex/space-between을 사용하여 가로로 정렬시켰다.
  
• 첫번째 li와 마지막 li의 모서리 부분이 둥글게 처리되어서 first-child와 last-child라는 가상선택자를 이용하여 border-top-left-radius/bottom-left-radius 등으로 지정하였다.

.timeline_wrap li:first-child { 
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
} 
.timeline_wrap li:last-child { 
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

(지금 일지를 쓰면서 정리해보니 첫번째와 마지막 li의 모서리를 처리하기보다는 li를 
 감싸고 있는 ul자체에 모서리 처리를 했으면더 깔끔한 코딩이 되지않았을까라고 생각되었다.)

---

• 이 부분을 코딩할때는 전체를 감싸고있는 li자체에 border-radius를 지정하였다.
• 클릭범위가 li전체였기때문에 내용물을 a태그로 감쌌다.

---

학습소감

모서리를 둥글게 처리하는 border-radius에서 더 세부적으로 border-top-left/border-top-right 등으로 어느 부분을 둥글게 할건지를 정할 수 있다는 것을 알게되었다. 그리고 header부분을 코딩할 때, 글자를 강조하는 active를 조절한다던가, 일정등에서 쓰일 수 있는 슬라이더를 조정하는 자바스크립트도 한번 다뤄보고 싶어졌다.