[대구AI스쿨] 21.08.13 개발일지

임채업·2021년 8월 12일

□ 네이버 e스포츠 3/3

★ 작성코드

1. 메인 오른쪽 영역

● 사각형의 네 꼭지점 중, 원하는 곳만 radius값 적용하기

예시)

#esport-news-view li .image-wrap .rank {
    position: absolute;
    background-color: #4e41db;
    border-bottom-right-radius: 4px;

    padding: 4px 10px;

    top: 0;
    left: 0;

    font-size: 13px;
    color: #fff;
    font-weight: 800;
}

● 결과 스크린샷(특정 부분에만 border-radius 적용)

● 폰트 서체 지정하기

font-family를 사용하여 폰트 서체 지정 가능
브라우저마다 적용 가능한 폰트가 달라서 여러 개의 폰트를 적용함
sans-serif는 모든 브라우저에서 적용 가능한 폰트

예시)

* {
    font-family: Arial, Times, sans-serif;
}

● 구글 폰트 웹에서 받아서 사용하기 – https://fonts.google.com/

① 구글 폰트에서 원하는 서체를 선택하기
② 원하는 폰트 weight style을 선택하고 link를 복사하여 코드에 붙여넣기(※ CSS link보다 위에)
※ 폰트마다 적용가능한 weight가 각각 다름

예시)

[html]

<head>

    <meta charset="utf-8">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/style.css">

</head>

[CSS]

* {
    font-family: 'Nanum Gothic', sans-serif;
}

● 결과 스크린샷(많이 본 뉴스)

● 결과 스크린샷(경기 일정/결과)

□ 네이버 오디오클립 1/3

1. 오디오클립 상단 영역

● 활성화된 메뉴 하단에 밑줄 생성하는 방법 중 하나

3차원 공간(position: fixed, relative, absolute)에서 이용하는 방법
top, bottom, left, right를 이용하여 공간을 만듬

예시)

[html]

<ul class="audio-flex-end">
    <li><a href="#" class="active"><span>홈</span></a></li>
    <li><a href="#"><span>랭킹</span></a></li>
    <li><a href="#"><span>연재 채널</span></a></li>
    <li><a href="#"><span>오디오북</span></a></li>
    <li><a href="#"><span>카테고리</span></a></li>
    <li><a href="#"><span>이벤트</span></a></li>                        
</ul>

[CSS]

#audio-header .audio-nav-left li a {    
    display: block;
    font-size: 17px;
    padding: 12px 13px 17px 12px;    
}

#audio-header .audio-nav-left li a.active {
    font-weight: 700;
}

#audio-header .audio-nav-left li a span {
    position: relative;
    display: inline-block;
    height: 21px;
}

#audio-header .audio-nav-left li a.active span::after{
    display: block;
    position: absolute;
    content: '';     
    border-bottom: solid 3px #222222;
    border-radius: 1.5px;

    z-index: 1;

    left: -4.5px;
    right: -5.5px;
    bottom: -22px;
}

● 결과 스크린샷(오디오클립 상단 영역)