[FISH-NEWS] 프로젝트 기록
주저리
최대 5일 안에 완성하려고 했는데 할 수 있겠지..?
요즘 너무 약속이 많아서 그런지 하루종일 코딩에만 집중하거나 쉴 수 있는 시간이 없었다
수면의 질도 낮음.
어제 저녁에 정말 힘들었는지 임파선염도 도지고 여튼 몸상태 쓰레기...
하지만 나는 항상성이 강한 사람이기도 하고 몸상태 때문에 해야 할 일을 못하는 상황을 정말 싫어해서
웬만하면 그냥 하지만 오늘은 너무 힘들어서 공부하다 말고 책읽다가 낮잠잤다
자고 일어나니까 그나마 할만해져서 다행
휴
오늘 목표
딱히 오늘 목표같은게 없었는데 내일부터는 하루 목표를 정하고 해야 할 것 같다
진행 상황
CSS
breaking 부분까지 반응형으로 완료
내일 game 부분을 뺀 나머지 부분 css도 끝내는게 목표다
문제상황
1.
js를 활용해서 반응형으로 만들어갈 때 breaking 부분을 버튼을 누르면 슬라이딩 되는 형식으로 만들고 싶었다.
그래서 기본적인 생각은 원하는 div 박스를 기차놀이하듯 오른쪽으로 이어두고, 한 부분만 화면에 표시되도록 만든 후 나머지 부분은 overflow:hidden을 이용해서 가리려고 했다.
#breakings .breakings {
display: flex;
overflow: hidden;
}
그러나,, 화면이 동적으로 움직여지지 않았다.
당연한 말이지만 전체 viewport의 크기를 줄였을 때 원하는 대로 첫 번 째 박스만이 화면에 남아있는 것이 아니라 첫 번째 박스조차 overflow:hidden이 되어 반쯤 잘린 박스만 남게 되었다
그래서 어차저차 만지다보니
이렇게 breakings라는 섹션 안에 네 사진이 모두 꽉 차게 되었다
원하는 모양은 캡쳐한 부분에 사진 하나와 글 하나만 나와야 하는데.
overflow를 삭제하니 이렇게 되었다.
이 상황에서 breakings 안에 있는 img+span 세트를 하나로 묶고 있는 breaking에 퍼센트에이지를 주면 ex)70%. 전체의 70%정도로 원하는 세트만 나오게 할 수 있지 않을까 생각하고 breaking에 %를 줬지만
breaking 안에 있는 img에 값을 주어서 breaking을 채우는 img의 값만 70%가 되었을 뿐이다.
만약 이 img값에 margin:auto 를 주었다면 최소한 img가 가운데 위치했을까?
이제와서 이런 생각이 든다.
쓸모는 없지만.
- 문제 해결 과정
방법은 두 가지였다.
1. 기존에 생각했던 overflow:hidden을 활용한 이미지 슬라이드 방식을 바꿀 것인지
2. overflow:hidden을 이용할 수 있는 방법을 더 찾아볼 것인지.
처음에는 2번 방법으로 진행하려 하였으나 가지고 있는 img의 크기가 제각각이고 img의 크기를 일정하게 유지하면서 overflow:hidden을 활용하며 반응형으로 만드는 일을 택하는 것 보다 슬라이드 방식을 바꾸는 것이 현재 수준에는 더 적절하다고 생각해서 1번 방법을 택하게 되었다.
생각해 본 새로운 슬라이딩 방식
overflow:hidden말고 그냥 4개의 section 중 첫 section을 뺀 나머지를 html에서 삭제하고
js를 이용해서 필요한 img와 text를 불러와 html에 넘겨주는 방식으로 만들면 될 것 같아 이 방법을 택했다.
- 배운 점
원하는 부분이 속해있는 box를 잘 알아야겠다는 생각이 들었다.
실제로 border에 라인을 줬더니 알아보기가 편리했다.
overflow와 box에 관련된 css 지식들을 더 습득해야겠다는 생각이 들었다.
2. Css에 비율 주기
css에는 grid라는 좋은 격자구조?가 있다는 것을 알지만 일단 내가 지금까지 배운 것들을 활용해보기 위해
화면에 비율을 직접 주기로 했다(grid가 직접 주는건지 아닌지는 잘 모른다. 아직 안배움!)
막혔을 때 캡쳐는 해놓지 않아서 문제를 해결한 후 사진밖에 없기는 하지만 설명해보자면
고치기 전 비율은 제멋대로였다
오른쪽 큰 박스가 계속 실선으로 그어진 박스 밖으로 빠져나가며 화면을 이탈하기 일쑤였다.
그래서 화면에 비율을 주려고 계속 왼쪽 box에 60% 50% 등 비율을 계속 줬지만 바뀌지 않았다.
- 문제 해결 과정
그래서 드림코딩 엘리의 youtube 클론코딩에서 배웠던 '화면 비율 주기'를 이용하기로 했다
이 수업을 들으며 만들었던 css 파일을 열어보니
.youtube_upNext .nextVideo .img {
flex: 1 1 35%;
}
.youtube_upNext .nextVedio .nextVideoInfo {
display: flex;
flex-direction: column;
flex: 1 1 60%;
padding: var(--padding-size);
}
.youtube_upNext .nextVedio button {
flex: 1 1 5%;
}
이런식으로 flex: 1 1 5% 즉
flex-grow: 1
flex-shrink: 1
flex-basis: 5%
이렇게 활용했던 것을 볼 수 있었다.
grow와 shrink를 제외한 나머지 basis만 이용해도 될 것이라 생각해
왼쪽, 오른쪽 박스를 각각 flex:60%, flex40%를 주었더니
원하는 결과를 얻을 수 있었다.
- 배운 점
css..열심히 공부하자..
그리고 flex-grow, shrink, basis가 각 box에 미치는 영향을 따로 box들을 만들어서 확인해 볼 필요성을 느꼈다.
3. span의 감각
span에 margin-top:20px;을 계속 줘도 margin이 적용되는 것이 element에서는 보이는데 눈으로는 보이지 않았다.
- 문제 해결 과정
따라서 다른 문제는 없고 혹시 span 자체의 문제인가 싶어서 span에 background-color을 입혀보니
span은 하나의 box가 아니라는 사실을 내가 잊고 있었던 것을 깨달았다.
계속 box단위로 만지다 보니까 이렇게 기본적인것도 까먹는구나
조금 더 탄탄하게 기본기를 쌓아가야겠다.
여튼 현재 상황
이정도 만들었습니다
휴
사진은 프레스티지
영화를 안 본지 꽤 됐는데 프레스티지 다시보고 싶다.
얼른 자고 내일도 화이팅!!!