[배운내용]

네이버 게임 - e스포츠 페이지 실습

일정 섹션

• 섹션의 타이틀은 border로 묶인 공간 위에 위치하고, border-radius가 적용된 박스안에 해당 날짜의 경기가 있다. 그 경기는 각각 선으로 구분되어 있는데 이 선은 공간안에서 너비의 전체에 적용되지않고 중간에 떠있는 형태로 선이 그어져있다.
  또 진행중인 경기에 대해서는 시간 부분에 a태그가 적용되 경기라이브 영상으로 이동한다.
  

  ① html

  <div id="esport_schedule">
  	<h2>e스포츠 경기 일정/결과</h2>
  	<div class="schedule_wrap">
  		<div class="schedule_header esport_flex_between">
  			<button class="arrow arrow_left"></button>
  			<span>06.05 토</span>
  			<button class="arrow arrow_right"></button>
  		</div>
  		<div class="schedule_body">
  			<ul>
  				<li>
  					<h3>PWS : EAST ASIA PHASE 2 Wild Card W5</h3>
  					<div class="status_wrap esport_flex_center">
  						<span class="status">진행중</span>
  						<span class="time">10:00</span>
  					</div>
  				</li>
  				<li>
  					<h3>PWS : EAST ASIA PHASE 2 Wild Card W5</h3>
  					<div class="status_wrap esport_flex_center">
  						<span class="status">진행중</span>
  						<span class="time">10:00</span>
  					</div>
  				</li>
  			</ul>
  		</div>
  	</div>
  </div>

② css

#esport_schedule h2{
	font-size: 18px;
}

#esport_schedule .schedule_wrap{
	margin-top: 15px;
	border: solid 1px gray;
	border-radius: 8px;
}

#esport_schedule .schedule_wrap .schedule_header{
	padding: 10px 15px;
	border-bottom: solid 1px gray;
}

#esport_schedule .schedule_wrap .schedule_header .arrow{
	width: 20px;
	height: 20px;

}

#esport_schedule .schedule_wrap .schedule_header .arrow.arrow_left{
	background-color: yellow;
}

#esport_schedule .schedule_wrap .schedule_header .arrow.arrow_right{
	background-color: greenyellow;
}

#esport_schedule .schedule_wrap .schedule_header span{
	font-size: 18px;
	font-weight: 800;
}

#esport_schedule .schedule_body{
	padding: 17px 0;
}

#esport_schedule .schedule_body li{
	/*padding: 17px 0;*/

}

#esport_schedule .schedule_body li:first-child:after{
	content: '';
	display: block;
	width: calc(100% - 40px);
	height: 1px;
	background-color: rgba(0, 0, 0, .05);

	margin: 17px auto;

}

#esport_schedule .schedule_body li h3{
	font-size: 14px;
	margin-bottom: 12px;
	text-align: center;
}

#esport_schedule .schedule_body li .status_wrap:hover{
	cursor: pointer;
	background-color: lightyellow;
}

#esport_schedule .schedule_body li .status_wrap .status{
	background-color: rgba(255, 0, 0, .1);
	border-radius: 3px;

	margin-right: 4.5px;
	padding: 2px 4px;

	color: red;
	font-size: 11px;
	font-weight: 500;
}

#esport_schedule .schedule_body li .status_wrap .time{
	position: relative;
	top: -2px;
	font-size: 15px;
	font-weight: 700;
}

• 공간 안에 h2로 먼저 타이틀을 적어준 후, 새로운 div를 만들어 그 안에 다른 컨텐츠 들을 넣는다.
• h2아래의 div에 border, border-radius를 적용해주고, 날짜 아래에도 border-bottom을 적용한다.
• li에 border-bottom으로는 짧은 선을 넣을 수 없기 때문에 after를 이용해서 짧은 선을 넣어준다.
• li태그에 padding을 적용하면, after로 넣은 선도 li의 일부로 적용되기 때문에 레이아웃이 깨지게 되므로, li바깥쪽인 .schedule_body에 패딩을 적용해 준 후, after값에 위아래로 마진값을 준다. + 중간 정렬을 하기위해 좌우는 auto값을 준다.

폰트 적용하기

(1) font-family

• font-family: Arial, Times, Sans-serif;
  : 글자 서체를 적용하는 속성. 첫 번째 서체를 적용하고, 그 서체가 해당브라우저에 없거나 적용할 수 없다면 그 다음 서체로 대체된다. 어떤 브라우저에서도 항상 적용되는 Sans-serif는 고정으로 마지막에 넣어주어야한다.

(2) 구글폰트 적용하기
: 구글폰트에 있는 서체들을 링크를 걸어서 적용할 수 있다.

• 구글 폰트에 있는 서체 중 원하는 서체를 선택하여 select하면 오른쪽에 선택된 서체가 표시된다.
  이때, font-weight를 선택하는데 css를 적용할 때 가져온 값만 적용된다.
  
• 해당 링크를 html-head부분에 적용해준다.
  이때, css코드를 가져오는 링크 상단에 적용해야하며 순서를 바꾸면 안된다.
  
• css부분에 font-family로 적용해준다.

네이버 오디오 페이지 실습

3차원 요소 영역 크기 설정하기

div{
width: 100%;
height: 100%;
background-color: blue;
}

기본적으로 위와 같은 방식으로 너비값과 높이값을 설정해 영역의 크기를 설정한다. 그러나 3차원 영역일 경우 공간의 상하좌우 위치를 설정하여 크기를 설정할 수 도 있다.

div{
position: absolute;

left: 0;
right: 0;
top: 0;
bottom: 0;

background-color: green;
}

위와 같이 left, right 값에 0을 주면 너비 100%와 같고, top, bottom에 0을 주면 높이 100%와 같은 값이 되어 영역이 설정된다.

[어려웠던 점]

오늘 배운 3차원요소 영역 크기 지정하는 방법이 조금 어려웠다. 하지만 아직 초급수준에서는 몰라도 괜찮은 수준이라고 하셔서 이런게 있구나 하고 이해했다. 상하좌우지점을 하나씩 맞춰서 한다는게 깨질우려가 많지 않을까 걱정되고 궁금하지만 다음에 조금더 레벨이 올랐을 때 활용할 기회가 오면 좋겠다.

[학습소감]

오늘도 새로운 레이아웃을 만들어보아서 좋았다. 이런 레이아웃을 잘 구성해서 만드는 것이 중요할 것같다. 그리고 서체도 깨지지 않도록 주의해야겠다.