21.08.03

학습 내용

네이버 e-sports 페이지 header와 main의 상단부, 왼쪽 영역까지 실습했다.

그리고 오늘부터 일단 Java Script 강의를 조금씩 들어보려고 한다. js는 css강의를 전부 다 듣고 들으려고 했는데 css랑 좀 별개의 개념이라는 얘기를 듣고 시험삼아 오늘 1강만 들어보고 계획을 세워야겠다.
→ 밤에 조금 들어봤는데 개념 수업이라 기록하면서 들으니까 시간이 꽤 오래 걸린다. 하루에 30분 정도 들어도 오래 걸릴 것 같다. 매일 조금씩 진도를 나가는 쪽으로 계획을 수정해야겠다..

210803 네이버 이스포츠 실습 코드

- header 영역

스크롤을 내려도 고정된 영역이다. position: fixed;를 사용했다. 3차원이 된 것이다. 대신 이 뒤에 오는 main 영역은 2차원이라서 형제 지간 레이어 겹침 현상 때문에 main에는 padding-top을 사용해야 header에 안 깔린 내용을 볼 수 있다. z-index 개념이다.

상단부는 스크롤을 내려도 고정되어야 하므로 z-index를 가장 높게 설정해준다. 실습에서 99999를 넣었다.

#esport-header {
	position: fixed;
	width: 100%;
	background-color: #151618;

	border-bottom: solid 1px grey;

	left: 0;
	top: 0;

	z-index: 99999;
}

- main 영역

main은 평소처럼 왼쪽, 오른쪽만 있는 게 아니라 상단부 영역이 따로 있다. 상단부, 왼쪽, 오른쪽 총 3개의 영역으로 이뤄져있다.

- main의 가장 상단부

실제 페이지에선 이미지와 글씨가 떨어져있고 글자 부분이 오른쪽 상단에 와있다. 그렇게 만들기 위해 flex속성을 바꿔준다.

#esport-main-top .live-wrap a {
	align-items: flex-start;
}

- 왼쪽 영역

왼쪽 영역과 오른쪽 영역을 나누고 두 영역을 띄우는 법은 개발자마다 다르다. 영역 공간을 줄이든지 padding으로 띄우든지 하면 된다.

실제 페이지에서 이런 레이아웃은 css 그리드 속성을 사용했다는데 입문자 입장에서 그리드 개념이 복잡하다. 그래서 일단은 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 {
	overflow: hidden;
	width: 100%;
	height: 468px;
	background-color: grey;
	border-radius: 10px;
}

#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;
}

▶ 전체를 감싸는 가장 큰 영역에 overflow: hidden;을 적용하고 그 안의 영역에 float: left;를 적용했다. 그리고 안쪽 영역들의 width와 height를 %로 적용하면서 숫자를 조절해서 적절하게 배치한다.

▶ 공간을 다 만든 후엔 배경 컬러가 필요없고 one two three half라는 클래스 역시 필요없으므로 삭제

- tip!
전에도 기록한 거지만 항상 자기만의 기준을 갖고 속성을 순서대로 쓰자. 강의에선 overflow나 display, float, position 등을 가장 상단에 쓰고 그 다음에 공간을 만들고 그 다음 배치작업, 마지막으로 폰트와 관련된 속성을 적었다.

많이 본 영상 영역은 수업 때 넘어가서 혼자 만들었다.

글자가 2줄이 넘어가면 말 줄임 표시를 하고 싶다?
(익스플로러에선 적용이 안 될 수도 있는 방식)
다음과 같은 코드를 써보자
display: -webkit-box;
overflow: hidden;
max-height: 숫자px;
-webkit-line-clamp: 숫자; : 몇 번째 줄부터 말 줄임 표시를 적용하겠단 뜻
-webkit-box-orient: vertical;
text-overflow: ellipsis;

• 3줄이 넘어가면 말 줄임 표시를 하게 한다면 line-clamp와 max-height을 조정해주면 된다.

▶ Java Script

: 웹 사이트의 주요 기능/주요 애니메이션 효과를 만들 때 사용된다. 인터랙티브한 효과를 구현할 때 사용..

- JS 예시 & 활용 영역

어느 영역에, 어떻게 사용되는지 보려면 애플 공홈에서 imac 24형 페이지를 보자.

https://greensock.com/
링크의 products탭에서 GSAP 클릭, 상단의 애니메이션 효과 구현에도 js 활용할 수 있다.

• 하이브리드 앱
  이전에는 js가 웹 사이트 영역에서만 사용가능했으나 시간이 지나 발전하면서 이젠 js만 잘 공부해도 html, css, js 언어를 기반으로 안드로이드/아이폰 앱을 제작할 수 있게 됐다.

• node.js
  js언어로 구성되어 있는 서버 개발을 도와주는 도구. 예전엔 서버 개발에 특화된 개발 언어로 제작했지만 이젠 js언어만 잘 알고 있으면 js를 기반으로 제작된 이 툴을 활용해서 서버 개발 작업도 할 수 있다.

• 자바스크립트 Iot
  사물 인터넷 기술 활용에도 js활용 가능

▶ JS만 잘 알아도 굉장히 다양한 범위에서 사용 가능.

- JS의 가장 큰 특징

조금 더 인간에게 친숙한 개발 언어인 high level language 중 하나다. 그래서 입문 단계에서 빠르게 습득할 수 있다.
※ low level language는 기계가 이해하기 쉬운 언어

JS를 공부할 땐 크게 3가지 분야로 공부하는 게 좋다.
→ 일이 생겨서 조금밖에 못 들었기 때문에 여기서부턴 내일 이어서 듣기로 하겠다.

어려운 내용

왼쪽 영역을 만들 때 첫 영역이었던 큰 영역을 3개로 나누는 파트가 낯설게 느껴졌다. 돌이켜 보면 예전에 float 개념을 배울 때 비슷한 실습을 해봤었는데 실제 페이지에서 이와 같은 영역이 나오니까 어떻게 하는지 당황스러웠다. 강의를 보니까 float을 사용해서 쉽게 풀어나갔다. 위에도 적어뒀듯이 영역별 색을 지정해서 알아보기 쉽게 하고 overflow와 크기를 %를 이용해서 설정하면 된다.

해결 방법

강의를 보고 이해했다.

느낀 점

점점 배운 것의 반복인 게 느껴지지만 막상 혼자 해보면 꼭 하나씩 꼬이는 부분이 생긴다. 어떤 날은 아무 문제 없이 완성하는데 어떤 날은 갑자기 하나 이상해지면 와르르 틀리고 그런다.

그러다가도 쉬고 나서 다시 코드를 들여다보면 해결책이 나올 때가 많다. 아직도 연습과 경험치가 많이 필요하다.

JS처럼 꼭 배워야할 다른 것들도 많아서 힘내서 해야겠다.

이따 밤에는 JS 강의 진도를 좀 뺄 것이다.
→ 밤에 일이 생겨서 강의를 조금밖에 듣지 못했다. 그리고 개념 수업이다보니 기록할 것도 많아서 생각보다 진도가 빠르게 나가지지 않는다. 실습보다 더 오래 걸릴 것 같으므로 계획 조정이 필요할 것 같다.