📌 학습한 내용
트위치 실습 2
전체 코드 : 💾
컨텐츠 영역
-
.content-container로 컨텐츠 영역을 중앙 정렬 -
상단 영역과 왼쪽 영역이 3차원 속성을 가지고 있으면서 고정되어 있는 상태
->position: absolute;속성을 줘서 공간을 늘려준다.
.content {
position: absolute;
top: 50px;
left: 240px;
bottom: 0;
right: 0;
}
-> 여전히 새로 스크롤이 상단영역까지 걸쳐있음.
-> overflow-y: auto 적용 : y축 기준으로만 필요한 상황에 스크롤 발생
👉 background 속성
background: 관련 속성을 한 줄로 작성 가능 (속성값의 순서는 관계 x)
background: url(../img/game.jpg) no-repeat center; background-size: cover;: 만들어 둔 영역 안에 이미지를 다 채울 수 있도록, 자동으로 이미지를 확대/축소 (단, 이미지의 가로, 세로 비율은 유지된다), 일반적으로 이미지의 센터에 컨텐츠가 몰리게 제작,
background-position: center
min-width: 1340px;을 적용했는데도, 내부 컨텐츠가 줄어듦
-> 왼쪽 영역과 컨텐츠 영역이 각각 3차원적 특징을 갖고 있기 때문에 자식들의 width를 부모가 제대로 인식하지 못함
=>.main-container에position: relative;와height: 100%적용
하단 영역
.footer-bottom은 영역 내의 요소들을 가운데로 정렬하기 위한 박스
CSS 추가 설명
reset.css
: 기존의 (html 태그가 갖고 있는) 모든 css 속성들을 초기화 시켜주는 코드, 모든 태그들이 갖고 있는 속성값들은 브라우저 마다 조금씩 차이가 있음 -> 'reset.css'는 이러한 차이나는 속성값들을 모두 초기화 시켜줌 (캐스케이딩의 원리가 html에서 css파일을 불러 올 때도 동일하게 적용됨)
(참고 사이트 : https://meyerweb.com/eric/tools/css/reset/)
normalize.css
: 기존의 디자인을 조금씩 가공한 코드 (reset.css와 다르게 완전 초기화는 아님), 브라우저 마다 기본적으로 들어가는 css 디자인에 차이가 나는데, normalize.css는 그 오차를 줄이고, 버그를 줄이는 방향으로 스타일을 재정의
(참고 사이트 : https://necolas.github.io/normalize.css/8.0.1/normalize.css)
=> 개발자의 취향에 따라 사용함
css 변수
: 일괄적인 코드 수정작업에 편리, 직관적인 코드 작업 가능 단, 익스플로러에서는 제약이 크다. (지원x),
(Twitch에서는 css변수 사용이 빈번)
(⬆ Twitch 예시)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 추가 설명</title>
<!-- <link rel="stylesheet" type="text/css" href="css/reset.css"> -->
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1>Hellow World</h1>
</body>
</html>/* 변수 설정
:root -> 모든 가져다 쓸 수 있는 변수 */
:root {
--black: #18181a;
--purple: #9147ff;
--font-size-40: 40px;
}
h1 {
background-color: var(--black);
font-size: var(--font-size-40);
color: var(--purple);
}
/* 특정 영역 내에서만 사용 가능한 변수
-> css의 선택자를 활용해, 변수의 영향력이 발휘될 수 있는 범위를 지정 가능*/
#intro {
--font-color: blue;
--font-size: 50px;
}
#intro p {
font-size: var(--font-size);
color: var(--font-color);
}
#footer p {
font-size: var(--font-size);
color: var(--font-color);
}
📌 학습내용 중 어려웠던 점
-
컨텐츠 영역의
img에:hover선택자를 지정해 이미지를 움직이는 작업에서,image-wrap으로 감싸준 영역이 함께 움직이지 않고img만 움직이는 현상 발생 -
컨텐츠 영역 각 섹션에
border-bottom으로 만들어준 구분선에 겹치게 '더보기' 버튼을 만들어 주었다. 해당 버튼의 배경색은 컨텐츠 영역의 배경색과 동일하게 해 마치 구분선이 반으로 나눠진 듯한 효과를 주었다. 하지만 추가적으로:hover선택자를 이용해 배경색을 rgba를 이용해 적용했더니, 마우스 오버시에는 배경 선이 그대로 비춰져 나타났다.
📌 해결방법
-
기존의 html 태그들만으로 설정해주고 싶었지만, 잘 작동되지 않아서
image-wrap을image-wrap-sub으로 한 번 더 감싸주었다. 생각보다 간단하게 해결되었다. -
실제 Twitch 사이트에서는 'show more' 버튼을 기준으로 좌우에 각각 구분선이 배치되어 있었다. 마우스 오버시에 색상을 투명하지 않게 다른 색으로 설정하는 방법도 있었지만 여전히 부자연스러웠다.
📌 학습소감
python과 R 을 공부할 때만 사용했던 '변수명'을 css에서도 사용할 수 있다는 것은 처음 알아서 감회가 새로웠다. 특히 Twitch 를 카피캣 하면서 '이런식으로 속성값을 숨기는 건 어떻게 하는건가?'하는 의문을 계속해서 가졌는데, 페이지를 완성하면서 알게 되어 속이 후련하다. 😊
