📌 학습한 내용
네이버 e스포츠 실습 2
전체 코드 : 💾
메인 왼쪽
1) article 영역
float을 이용해 영역 배치 작업
<div id="esport-main-article">
<div class="article one full">
</div>
<div class="article two half">
</div>
<div class="article three half">
</div>
</div>#esport-main-article .article {
float: left;
width: 50%;
height: 50%;
}
#esport-main-article .article.full {
height: 100%;
background-color: green;
}
#esport-main-article .article.two {
background-color: blue;
}
#esport-main-article .article.three {
background-color: pink;
}👉 여러 줄 말줄임 표시 넣기
(참고 사이트 1 : https://nalrarydesigner.tistory.com/entry/CSS3-displaybox-%EC%97%90-%EB%8C%80%ED%95%B4-%EA%B3%B5%EB%B6%80%ED%95%B4-%EB%B3%B4%EC%9E%90
참고 사이트 2 : https://developer.mozilla.org/ko/docs/Web/CSS/-webkit-line-clamp)
-
box-orient : vertical;: 박스를 수직방향으로 배치
box-orient : horizontal;: 박스를 수평방향으로 배치 (기본값)
box-orient : inherit;: body가 갖는 기본 속성을 상속받음 -
-webkit-line-clamp: 블록 컨테이너의 콘텐츠를 지정한 줄 수만큼으로 제한 (단, display 속성을-webkit-box또는-webkit-inline-box로, 그리고-webkit-box-orient : vertical;로 설정한 경우에만 동작) -
max-height: 속성의 최대 높이
2) '경기 다시보기'
3) '추천 뉴스'
:before가상 선택자 적용시 레이아웃이 뒤틀리는 현상 발생
-> solution_step 1.
가상 선택자 부분에position: absolute;를 적용해 레이어를 겹치게 만든다.
->#esport-news .article-wrap .right-lists li에는position: relative;적용
-> solution_step 2.
#esport-news .article-wrap .right-lists a에pdding-right속성 적용
-> 가상 선택자에top속성으로 적당한 위치 찾아주기
4) '많이 본 영상'
- '경기 다시보기' 영역 재활용
5) '전문가 칼럼'
6) '한국e스포츠협회'
메인 오른쪽
1) '많이 본 뉴스'
<a>에display: block을 적용하면 flex가 깨질 수 있음
1) 'e스포츠 경기 일정/결과'
하단 영역
👉 웹 폰트 적용하는 방법
-
사이트 전체 디자인에 사용되는 폰트가 동일한 경우
font-family속성을 사용해 폰트 명시
font-family: 사용할 폰트를 나열, 입력한 순서대로 우선순위가 적용됨 -
구글 웹 폰트 적용
(참고 사이트 : https://fonts.google.com/)
위의 사이트를 통해, 사용할 폰트에 대한 정보를<link>를 이용해 가져올 수 있음
💥 단, 적용시 폰트를 먼저 불러온 다음에, css파일을 연동시켜야 함 (위의 사진과 같은 순서)
-> 가져온 파일이 없는데, 폰트를 먼저 적용한다는 것은 말이 되지 x
📌 학습내용 중 어려웠던 점
- '경기 다시보기'의 코드를 재활용해 '많이 본 영상' 영역에 재활용
📌 해결방법
- 앞서 작성한 '경기 다시보기'의 코드를 재활용하기 위해 class 명을 추가해 css에 class 명만 바꾸어 사용하려 했지만, 생각한 대로 되지 않았다. 아마 id가 class보다 우선한다는 캐스케이딩에 의해 오류가 생긴듯 하다. 캐스케이딩에 대해 재복습하고 코드 재활용을 다시 시도해 봐야겠다.
📌 학습소감
강의에는 실제 페이지와는 다르게 스킵한 부분이 많았다. 하지만 복습을 위해서, 그리고 실제 페이지와 최대한 비슷하게 작업하기 위해 현 시점의 네이버 e스포츠 페이지를 참고해 강의에서 넘어간 부분을 전부 작업해 주었다. 때문에 시간은 평소보다 많이 걸렸지만 조금 지난 기억들을 되살릴 수 있었다. id는 하나의 파일에 중복되지 않아야 한다는 규칙을 어겼다는 것이 오늘 가장 마음에 걸리는 오류이지만, 혼자만의 힘으로 작성할 수 있게 된 영역이 늘어난 것에 대해 성장을 느낄 수 있는 하루였다. 🙂
