21.08.06

학습내용

트위치 페이지를 상단부와 왼쪽 영역을 실습했다. 해외 사이트라 최신 기술이 많이 사용된 편이라고 한다. 그리고 코드를 많이 숨겨둬서 따라하기 쉽지 않았다. 배치가 뒤틀리는 걸 수정하는 작업이 좀 어려워서 오늘은 더 이상의 진도를 나가지 않고 한 강의를 반복해서 들었다.

저녁 먹고 본문 영역 상단부를 실습하고 자바 스크립트 불리언 데이터 타입까지 익혔다.

▷ 트위치

210806 트위치 실습 코드


내 모니터 화면보다 큰 사이즈로 min-width를 설정해서 그런지 화면이 다 뜨지 않아서 브라우저 비율을 줄여서 캡쳐했다.


수업에선 건너뛴 검색창 효과를 추가했다. 어제 배운 모서리별 radius 설정법이 마침 들어있길래 사용해볼 수 있어서 좋았다.

css 초기화 작업

* {
	margin: 0;
	padding: 0;
    box-sizing: border-box;
}

html, body {
	width: 100%;
	height: 100%;
}

body {
	background-color: #0e0e10;
}

ol, ul {
	list-style: none;
}

a {
	text-decoration: none;
}

img	{
	vertical-align: top;
}

input {
	outline: none;
	border: none;
}

button {
	outline: none;
	border: none;
	background: transparent;
}

h1, h2, h3, h4, h5, h6, p, span, input, button, a {
	color: #fff;	
}

한동안 네이버 여러 페이지 실습을 했는데, 하나의 css파일로 하느라 오랜만에 초기화 작업을 하니까 몇 개는 까먹은 게 보였다. 다시 기억해야겠다.

  • box-sizing: border-box; : 배치작업을 수월하게 하려면 넣어야 한다.
.btn-purple {
	background-color: #9147ff;
	color: #fff;
}

.font-purple {
	color: #9147ff;
}
  • 트위치 브랜드 컬러를 나타내줬다.

상단부

실습중에 rem이라는 단위가 나왔다. 모르는 단위가 나오면 변환하는 사이트를 검색해보자.
https://nekocalc.com/rem-to-px-converter
아래의 링크는 em과 px 변환
http://pxtoem.com/

  • em과 rem은 큰 차이는 없다.

세 영역으로 나뉘었는데 가운데 영역이 정확하게 가운데가 아닌 오른쪽으로 약간 쏠려있다. 양 옆 영역의 크기가 다르기 때문에 발생한 현상이다. 세 영역의 부모 태그에 flex를 적용했으나 가운데 영역은 flex의 영향을 받지 않게끔 수정한다.

nav .nav-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  • flex의 영향을 받지 못하게 position: absolute;로 변경하고 x축 중앙정렬 공식을 사용한다. 
nav {
	position: fixed;
	width: 100%;
	height: 50px;
	background-color: #0e0e10;
	padding: 0 15px;
}
  • 상단 부분은 항상 고정되어야 해서 position: fixed;를 넣어야한다. 하지만 적용하고 나면 안의 것이 전부 틀어진다. 그래서 공간크기인 width: 100%;를 넣어준다. 케바케로 상황에 따라 3차원 포지션으로 작업할 땐 width가 필요할 때가 있다.
#top-nav .nav-center .search-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	width: 380px;
	height: 36px;
	overflow: hidden;
	border-radius: 5px;
}


#top-nav .nav-center .search-wrap input {
	width: calc(100% - 34px);
	height: 100%;
	background-color: #464650;
	border: solid 3px transparent;
	border-bottom-left-radius: 5px;
	border-top-left-radius: 5px;
	padding: 5px 7px;
}

#top-nav .nav-center .search-wrap input:hover {
	border: solid 3px #6e6e6e;
	border-bottom-left-radius: 5px;
	border-top-left-radius: 5px;
	transition: 0.2s;
}

#top-nav .nav-center .search-wrap input:focus {
	background-color: #0e0e10;
	border: solid 3px #9147ff;
	border-bottom-left-radius: 5px;
	border-top-left-radius: 5px;
	transition: 0.2s;
}
  • 어제 배운 모서리별로 둥글기 선택하는 법을 이용했다.
    border-top-left-radius, border-bottom-left-radius 이다.
  • 처음에 border: solid 3px transparent;를 설정하는 걸 잊고 그냥 진행했다가 hover할 때마다 검색칸이 들썩거리는 걸 보고 추가해줬다.

왼쪽 영역

.main-container {
	width: 100%;
	min-width: 1340px;
	padding-top: 50px; -> 후에 삭제
}

  • 해결을 위해 왼, 오 영역 전부를 감싸는 main-container 영역에 padding-top을 사용했다. 50px은 상단부의 높이값만큼이다. 그런데 나중에 왼쪽 영역을 다 작성한 후 이 코드를 삭제했다.

  • min-width : 브라우저 크기를 줄였을 때 이 숫자 이하로는 더 이상 줄어들지 않게 할 수 있다. (트위치나 G9 사이트가 그러하다.)

container 영역 안쪽을 보기 위해 브라우저 크기를 줄이다가 상단 영역이 이상하게 틀어지는 것을 발견해서 역시 min-width를 설정했다.

왼쪽 영역도 상단부와 같이 늘 고정되어있다. position fixed를 적용한다.

첫째인 상단부가 fixed로 3차원이고 둘째인 왼쪽영역(노란색) main-container는 2차원이다. 그래서 겹침 현상이 발생한다.

- 실무 tip!

.left-area {
	position: fixed;
	width: 240px;
	background-color: #202024;
	top: 50px;
	bottom: 0;
	left: 0;
	overflow-y: auto;
}

  1. height를 사용하지 않고 어떤 영역을 브라우저 크기와 상관없이 항상 풀 height로 유지되게끔 만들고 싶을 때
    position: fixed;는 브라우저가 좌표기준점. 일단 상단 영역 높이가 50px이므로 top 50px을 적용해서 겹치지 않게 했다. 거기다 bottom을 0으로 하면 강제로 밑에까지 공간을 늘려주게 되는 것이다. top 50px지점부터 bottom 0까지 높이값이 생기는 것이다. 이 값은 브라우저 크기에 따라 공간이 달라지는 가변값이다. 순수 3차원 포지션에서만 쓸 수 있는 현상.. 추가로 왼쪽에 딱 붙게끔 left 0도 적용했다.

  2. 왼쪽 영역과 오른쪽 영역에 각각의 스크롤을 넣고 싶을 때
    overflow-y: auto;를 넣어준다. 스크롤이 필요한 상황에서만 발생한다.
    내가 만든 스크롤은 브라우저에서 지원하는 스크롤이고 트위치 스크롤은 자바 스크립트로 만든 스크롤이다.
    하지만 css와 html레이어 조합으로 이 문제를 해결할 수 있다. 그치만 입문자 입장에선 어려울 수 있다.
    → 스크롤 적용했을 때 컨텐츠가 밀리지 않길 원한다면 다른 사람들이 만들어둔 기능을 검색해서 사용하면 된다.
    jquery scrollbar로 구글링
    https://gromo.github.io/jquery.scrollbar/demo/basic.html

오른쪽 영역 상단부

스크롤이 상단부는 포함하지 않는다. 실제 페이지에선 오른쪽 영역에서만 스크롤이 생긴다.

오른쪽 영역은 상단부와 왼쪽 영역 밑에 깔리기 때문에 안 가려지게 만들어야 한다. 여러 방법이 있지만 실습에선 오른쪽 영역 전체에 position: absolute;를 사용했다.

.content {
	overflow-y: auto;
	position: absolute;
	background-color: yellow;
	top: 50px;
	left: 240px;
	
	bottom: 0;
	right: 0;
}

  • 위에서 배운 공간을 늘리는 방법을 사용해서 영역을 만든 것이다.

  • 그런데 공간을 저렇게 하면 상단부를 포함한 영역에서 스크롤이 생긴다. overflow-y: auto;를 쓰면 된다. y축 기준으로만 필요한 상황에서 스크롤을 발생시킨다. 생긴 스크롤은 해당 컨텐츠 내부에서만 생긴다. 다만, 이제 컨텐츠가 밀리는 현상이 발생하는 걸 감안하고 만들어야 한다.

- background 속성
이런 식으로 한 줄로 정리 가능하다. 

background: yellow url() no-repeat center;

배경 이미지가 공간보다 훨씬 커서 확대돼서 나타날 경우
background-size: cover; : 굉장히 많이 사용되는 배경 이미지 삽입 방법. 가로 세로 비율은 유지한 채 자동으로 이미지가 삽입된다. 자연스러운 효과를 준다.


예시 사이트
https://startbootstrap.com/previews/agency

주의점은 보통 이미지 제작할 때 중앙에 주요 컨텐츠가 몰리게끔 작업한다. 그리고 background-position: center;는 공간 안에서 이미지 중심부를 고정한다.

background: yellow url() no-repeat center;
background-size: cover;

이렇게 많이 사용되는 2줄은 특정 공간을 가득 채우는 이미지를 쓸 때 사용하므로 기억하자.

트위치 페이지 오른쪽 영역에서 가장 위에 있는 영역에 다음과 같은 속성을 적용했다.

.content #content-banner {
	position: relative;
	width: 100%;
	height: 350px;
	background: url(../img/notebook.jpg) no-repeat center;
	background-size: cover;
}

.content #content-banner .layer {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);

	top: 0;
	left: 0;
}

.content #content-banner .layer .txt-wrap {
	position: absolute;
	top: 170px;
	right: 200px;
}

그리고 결과물은 이렇다.

.main-container {
	width: 100%;
	min-width: 1340px;
}

분명 main-container에 min-width값을 적용했는데 내부 컨텐츠가 계속 줄어들고 있다.

그 이유는 왼쪽, 오른쪽 영역 모두 3차원이라 자식들의 가로나 세로 높이를 부모가 정확히 인지를 못하는 상황이라 그렇다. 그래서 main-container에 position: relative;를 쓴다. 더불어 height: 100%;도 적용한다. 그러면 main-container 크기가 브라우저 현재 높이를 기준으로 잡히고 레이어 뒤틀림도 없어지게 된다.

트위치가 간단해 보이지만 어렵다. position 개념이 반드시 필요한 실습이다.

▷ 자바 스크립트

- 연산자 (어제에 이어서)

+=, -=, *=, /=, %= 

var	num20 = 20;
-
//num20 = num20 + 10;
  자기 자신에게 +10 하고 다시 자신한테 할당하는 형태
num20 += 10;
  • +10을 해서 변경된 값을 변수에 넣어줄 건데 그 변수가 자기 자신인 셈. 자기 자신에게 새로운 값을 업데이트할 때 아랫줄 코드처럼 쓸 수 있다.
  • 사칙 연산 기호가 많아서 수업에서 += 설명만 했다. 개념 자체는 나머지 등호에도 통용된다.

비교 연산자 >, <, ==, ===, !=, !==, <=, >=
어떤 숫자를 비교했을 때 어느 쪽이 크고 작고 같은지

var a = 10;
var b = 20;
var c = 30;
-
console.log(a > b);
console.log(a < b);
console.log(a >= b);
console.log(a <= b);
-
각 결과는 false true false true로 나타난다.
  • 결과값이 true/false로 나타나는 데이터가 boolean. 비교 연산자를 사용하면 항상 결과값은 boolean으로 나타난다. 
console.log(a == b);
console.log(a === b);
-
위에서 정한 변수에 따라 결과는 둘다 false
----
console.log(a != b);
console.log(a !== b);
-
위에서 정한 변수에 따라 결과는 둘다 true
  • ==, === 둘 다 같다는 의미
  • !=, !== 는 두 개의 값이 다른지 비교하는 연산자
    - 등호 개수에 따른 차이
var num10 = 10;
var num20 = 20;
-
var str10 = "10";
var str20 = "20";
-
console.log(num10 == str10);
console.log(num10 === str10);
-
결과값은 위는 true, 아래는 false
  • 등호 3개를 사용하면 값을 더 엄격하게 따진다. 비교하는 대상의 데이터 타입이 같은지까지 따진다.
위와 같은 변수일 때
console.log(num20 != str20);
console.log(num20 !== str20);
-
결과는 순서대로 false, true
  • num20과 str20은 데이터 타입을 떠나서 안에 들어가는 내용물이 같다. 그래서 != 결과값은 false, !==가 true인 이유는 두개의 데이터 타입이 다르기 때문에 같지 않다는 비교가 옳아서 나타난 결과
  • 안전하고 오류없이 코딩하고 싶다면 ==와 !=는 사용을 안한다고 기억해야한다. ===, !==만 기억하자.

논리 연산자
: AND(&&), OR(||)

var num30 = 30;
var num40 = 40;
var num50 = 50;
-
console.log(num30 === num40 && num30 === num50);
console.log(num30 === num40 || num30 === num50);
-
결과는 둘 다 false
  • and 연산자(&&)는 조건 모두가 참인 경우에 참을 반환
  • or 연산자(||)는 앞의 결과가 참 또는 뒤에 나오는 결과가 참이면 참을 반환, 모든 조건 중 하나만이라도 참이면 참을 반환한다.
  • console.log는 건드리지 않고 변수 var50의 데이터를 30으로 변경할시 false, true로 결과값이 바뀐다.
  • 당연히 여러 조건을 추가 가능하다.
  • 안의 비교 연산자는 다른 것도 다 적용된다.

▶ 데이터 타입

이전에 배운 문자열, 숫자에 이어서

불리언(boolean)
: true, false 이 2개가 끝이다.

console.log(true);
console.log(false);
console.log(1 === 2);
console.log(10 < 20);
console.log(10 === 20 || 20 === 30);

  • 직접적인 트루, 펄스 말고도 비교 연산자나 논리 연산자도 포함한다. 비교/논리 연산자는 결과값이 불리언 데이터 타입으로 나타나기 때문이다.

  • true, false가 나타나는 상황 자체를 기억하는 게 좋다.

  • 물론 변수 안에 트루/펄스라고 작성할 수도 있다.

var bool = true;
bool = false
  • 보통 불리언 데이터 타입은 논리 연산자와 결합해서 쓴다. 예시로 로그인할 때 아이디나 비번 둘 중 하나라도 틀리면 로그인 시켜선 안 된다. 이런 경우에 논리 연산자와 불리언 데이터 타입을 활용한다.

어려운 내용

상단부와 왼쪽 영역 내용을 만드는 건 늘 해왔던 대로 하면 됐지만 자꾸 틀어지는 배치를 고치는 과정이 어려웠다. 특히 상단부의 가운데 영역을 position absolute로 한 후 브라우저 크기를 줄이니까 상단부 배치가 틀어진 걸 min-width로 고치는 법과, 순수 3차원으로 height를 쓰지 않고 풀 사이즈로 만드는 법이 좀 어려웠다. 혼자 만들 때는 생각나지 않을 방법들이었다.

해결 방법

강의를 반복해서 들으면서 개념을 숙지했다. 당장은 그렇지만 반복 연습을 통해 외우면 될 것 같다.

느낀 점

트위치를 보니까 평소의 네이버가 얼마나 개발자들에게 친절한 사이트인지 알겠다. 트위치는 전체적으로 따라하기 까다로웠다. 상단부 자체는 네이버에서 연습한 것과 많은 차이가 없었지만 틀어지는 배치를 고치는 작업이 전체적으로 까다로웠다. 여태껏 css 진도를 많이 나가두기도 했고 오늘은 걸리는 부분도 있어서 2회 반복해서 들었다.

-> 심야 공부 후 느낀 점..
트위치 레이아웃 실습하면서 position 공부를 더 빡세게 해야겠다고 느낀다. 그래도 저번부터 나름 공부를 해서 여태까지 수업은 어느 정도 따라왔는데 오늘 트위치 수업을 들으며 이걸 혼자서 하려면 엄청 헤맬 것 같다는 생각을 많이 했다. 그리고 자바스크립트 수업은 아직 정말 기본 개념뿐이지만 뭔가 어렵다.... 열심히 해야겠다.

모던 자바스크립트 Deep Dive 17장-생성자 함수에 의한 객체 생성
Javascript Math

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage