✔ TODAY
19일에 맞은 백신접종의 여파로 밀린 진도를 뒤늦게 해결하는 중이다... 지난 시간에 네이버는 끝내고 이제 트위치를 카피한다.
트위치 1편 1/2 - 트위치 상단
✔ 학습한 내용
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: #ffffff;
}#top-nav
#top-nav .nav-wrap .nav-left ul li{
height: 50px;
font-size: 20px;
padding: 0 20px;
}
#top-nav .nav-wrap .nav-left ul li a{
display: block;
width: 100%;
height: 100%;
line-height: 50px;
}
#top-nav .nav-wrap .nav-left .more {}
#top-nav .nav-wrap .nav-left .more a {
display: block;
height: 50px;
font-size: 20px;
line-height: 50px; 중앙
}li에 width값을padding를 넣지 않아도 공간이 나오고 그걸 중앙에 넣는 겂
#top-nav .nav-wrap .nav-left ul li:first-child a:after{
display: inline-block;
position: relative;
content: '';
width: 1px;
height: 30px;
background-color: grey;
margin-left: 20px;
top: 8px;
}1rem=16px
http://pxtoem.com/
#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;
background-color: yellow;
}
#top-nav .nav-center .search-wrap input{
width: calc(100% - 34px);
height: 100%;
background-color: grey;
}
#top-nav .nav-center .search-wrap .btn-search{
width: 34px;
height: 100%;
background-color: darkgrey;
}버튼만들기 flex 주의하기
#top-nav .nav-center .search-wrap{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
이거 안 넣으면 엉망징창
#top-nav .nav-center{
position: absolute;
left: 50%;
transform: translateX(-50%);
} space-between 사용시 nav .nav-center 부분이 정홯히 사이트의 중앙에 정렬이 안담 양쪽 같은 거리를 두기 때문
해당 선택자가 flex값에 영향을 받지 않고 중앙정렬를 할 수 있도록 위의 코드를 넣는다.
transform: translateX(-50%); 공부하기
#top-nav .nav-right .btn-purple{
margin-left: 10px;
width: 53px;
height: 30px;
border-radius: 5px;
text-align: center; 여기
line-height: 30px; 여
font-size: 12px;
}
#top-nav{
position: fixed; 상단고정을 위해서 입력 하지만 이것만 녛어면 기존 만든 레이어가 다 어그려짐 - 크기 규정이 없기 때문
width: 100%; - 이걸 추가 같이 입력하면 해결
height: 50px;
background-color: #0e0e10;
padding: 0 15px;
}
3차원에 width이 없으면 안의 콘테츠의 값으로 픽시드의 크기가 정해진다.
해당사이트는 전과 달리
바디안에 헤더/메인/풋터의 구분이 없다.
지구와 비슷한 구조
#top-nav {
position: fixed;
width: 100%;
height: 50px;
background-color: #0e0e10;
padding: 0 15px;
min-width: 1340px;
}min-width: 특정지점에서 더이상 줄어들지 않도록 하낟.
넣지 않으면, 창의 넓이를 줄였을때 안의 줄어들면서 안의 레이어들이 겹쳐 일그러지게 된다.(넓이가 상대 비율이기깨문 게다가 nav-center의 경우에는 창의 중앙에 오게 되엉 ㅣㅆ기에 최소 넓이를 설정해야 그 안의 넓으로 들어갈때 레이어가 줄어들지 않는다 움직이지 않는 상태롤 만든다.
스크룰 에 대해 공부하기
left-area
탑-네비가 3차원 >컨테이너가 2차원 이기땨문에
컨테이너 안에 있는 left-area가 탑네비강 겁치게 된다. 이때 컨테이어 안에 padding-top를 넣고 사후 어느정도 left-area가 작성이 되면 지운다.
.left-area {
position: fixed;
width: 240px;
background-color: #202024;
top: 50px;
bottom: 0;
left: 0;
overflow-y: auto;
}어느 사이즈의 브라우저든 해당영역은 풀사이즈로 유지하게 만든다.
해당영역이 움직이지 않기 때문에 fixed를 설정한다.
height값 제거
컨테이너의 padding top 제거 > 상단 부분 겹침
css실무팁
어느 사이즈의 브라우저든 해당영역은 풀사이즈로 유지하게 만든다.
top:50px 상단 크기만큼 내린다 (fixde뷰의 기준)
bottom:0 공간이 강제로 내려진다 순수 포진션 3차원일때 발생
브라우저의 길이에 따라 가변적으로 바뀐다.
left:0 왼쪽에 딱 붙게
overflow-y: auto; 스크룰을 발생하게 하고 싶다.
스크룰이 필요한 상황에섬 ㄴ 생김 레이어가 틀이짐
방지하기 위헤서 조정이 필요함 .txt-wrap에 줄임
자바스크립에서도 스크룰을 만들수 있다. 여기에서는 말하는건 브라우저에서 순수하게 지원하는 스크룰
✔ 학습한 내용 중 어려웠던 점 또는 해결못한 것들
✔ 해결방법작성
