1.학습한 내용

(1) 페이지 실습
어제에 이어 네이버 게임 (https://game.naver.com/) 페이지의 왼쪽 중간 영역에 대해서 학습하였다.

게임 라운지 인기글까지 작업을 하였고, 과거에 실습하였던 부분들과 비교하였을때 어려운점이나 특이점은 없었다.

(2) 학습한 내용
flexbox.help site를 이용한 배치
매 실습마다 사용했던 flexbox 자동배치 사이트를 통해 작업을 하였다.


css code

.game-flex-between {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	/*align-content: stretch;*/
}

.game-flex-start {
	display: flex;
	/*flex-direction: row;*/
	flex-wrap: wrap;
	/*justify-content: flex-start;*/
	align-items: center;
	/*align-content: stretch;*//

}

font-weight 주의할점
font-size와는 다르게 수치를 입력할때 (px)이 들어가면 안된다.

button-circle (가장 하단 center에 있는 원 부분) 작업

css code

.game-section .btn-circle {
	position: absolute;
	width: 55px;
	height: 55px;
	background-color: #ffffff;
	border-radius: 50%;
	box-shadow: 0 2px 30px 0 rgb(0 0 0 / 6%);

	bottom: -27.5px;

	/* 중앙 정렬 공식 */
	left: 50%;
	transform: translateX(-50%);
}

여기서 상기해야 할 부분은 중앙정렬 공식으로 왼쪽에서 50% 떨어져있게 그리고 지정한만큼 x축으로 이동하는 transform: translateX(-50%)을 활용한다.

css box model 레이아웃 강의 복습중 center 배치하는 수많은 공식들을 정리할수 있었고,

https://css-tricks.com/centering-css-complete-guide/

위 site를 통해서 수많은 formula로 연습을 해보았다.

id class 선택자의 우선순위를 활용한 실무 Tip

HTML code

	<!-- 게임 라운지 인기글 도면작업 -->

				<div id="game-section-1" class="game-section">

					<div class="section-title-wrap">
						<h2 class="font-19">게임 라운지 인기글</h2>

						<div class="section-btn-wrap">
							<a href="#" class="active">전체</a>
							<a href="#">Joined</a>		
						</div>
					</div>

HTML code 에서 같이 div tag안에 ic로 game-section-1과 class로 game-section로 선택자들이 지정되어 있다.

class로 다른 영역에 공통으로 적용되는 css를 game-section으로 묶어두고 향후 style에서 수정할 부분이 있는 경우는 우선순위가 높은 id 선택자로 지정이 된 game-section-1을 통해 부분적인 수정이 가능하다.

따로 class선택자 부분을 삭제하거나 주석처리 할 필요가 없다.

2. 실습

깃허브 소스코드:

naver 게임 -2 ( 상단-왼쪽-게임라운지 인기글 ) 실습 HTML
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/53

naver 게임 -2 ( 상단-왼쪽-게임라운지 인기글 ) 실습 css
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/54

3. 어려웠던 내용 & 해결방법

특별히 어려운 것은 없었다.

4.소감

강의 분량이 2시간 30분짜리가 통으로 금요일 분량인줄 알았는데 강의를 듣다가 div tag의 오류가 생겨서 troubleshooting을 못하고 있었는데, 금요일 분량은 1시간짜리의 분량이었다.

사실 9일(월요일)분량을 한꺼번에 학습을 하고 있었는데, 아무리 구조를 뜯어보고 div tag를 옮겨도 배치자체가 꼬여버려서 새로 강의를 다들었다. 그래서 월요일 학습분량은 사실상 복습만 하고 올리면 되는 부분이였다.

주말에 css layout 부분에 대한 복습도 완료를 하였는데, 중요한 것은 가장많이 쓰고 있는 div tag에 대한 올바른 배치인 것 같다.

현재 git에 대한 서적을 빌려 학습을 진행하고 있는데, 이번주안에 끝나는대로 velog에 따른 section을 만들어 학습에 대한 내용을 올릴 예정이다. 그리고 javascipt에 대한 학습도 책을 보면서 기본기를 쌓고 있는데 정규 학습에 대한 속도를 한템포 빠르게 가져가면서 8월안에는 완전히 끝낼수 있도록 하겠다.