[FISH-NEWS] 프로젝트 기록

주저리

날씨가 갑자기 추워져서 능률 떨어지는중

여름아가지마... 가을옷 좋기는 한데 너무 추워...

2주에 한번씩 기력회복을 위해 3일간 푹 쉬어주는데 이번은 쉬고 나서도 너무 힘들어서 페이스를 다시 돌리기가 힘들었다.

저번주 금~일을 쉬고 월요일은 대충 보내고 화요일은 식재하러 가서 코딩할 시간이 많지 않았다.

+ 수요일에 쓰고 있었는데 동생이 방에 와서 노느라 못썼다 ㅎ

 

내가 만드는 프로젝트도 재미있지만 수업을 듣고 새로운 것을 배우는 것도 너무 재미있어서 수업듣기에 많은 시간을 할애해서이기도 하다.

 

 

 

오늘 목표

오랜만이어서 그런지 목표는 생각하지 않고 했다

대충 생각한 목표는 breaking 부분에 있는 문제들을 해결하는 것

문제

1. breaking 부분 안에 들어있는 이미지 사이즈가 각각 달라서 보기에, 그리고 이용하기에 좋지 않다

2. breaking 에 들어있는 버튼을 눌러 breaking 요소를 바꿀 때마다 글자의 길이 때문에 전체 페이지가 움직인다.

 

 

 

문제 상황

1. breaking 부분 안에 들어있는 이미지 사이즈가 각각 달라서 보기에, 그리고 이용하기에 좋지 않다

#breakings .breakings {
display: flex;
flex-direction: column;
width: 90%;
margin: auto;
}
 
.breaking .breaking__img {
width: 100%;
height: auto;
margin: auto;
}

이렇게 하면 전체가 다 나오지만 height가 중구난방

 

 

이렇게.

이미지마다 사이즈가 다 달랐다,

 

 

 

 

• 문제 해결 과정

 

• 1.

Brekaing 이미지 사이즈의 문제

HTML

<section class="breakings">
<section class="breaking">
<div class="breaking__info">
</div>
</section>

</section>
</section>

JS

 

 

아... 어떻게 했더라..

일단 이게 전 코드인데

html에서

breakings 안에 breaking.

breaking 안에 image가 들어있고

breaking__info 안에 span과 h2가 층층이 들어있었다.

왜 이렇게 만들었는지는 모르겠는데 여튼 그랬다

그래서 일단 html에서

breakings 안에

1. breaking section 안에 img

2. breaking__info 안에 span과 h2

로 나누어줬다,

=> 이미지의 부모 요소인 박스를 통해 이미지의 사이즈를 조정하기 위해서.

 

그 후 CSS에서

 CSS

#breakings .breaking {
width:100%;
height:400px;
overflow: hidden;
display:flex;
}
.breaking .breaking__img {
width: 100%;
height: auto;
margin: auto;
width:100%;
object-fit:none;
}

box의 display를 flex를 두고

height를 auto에서 400px로 변경했다.

그 안에 있는 img의 object-fit을 none으로 잡았더니

 

 

얼추 비슷하게 사이즈가 통일되었다.

'얼추 비슷'한 이유 : 애초에 이미지 크기들이 너무나도 중구난방이어서.

해결 방법을 아신다면... 슬쩍 알려주시면 감사하겠습니다.

 

CSS에서 헷갈리는 부분들을 다 모아놓은 글을 쓸 예정이기 때문에 부족한 부분을 보강하는 그 때에 명확한 답을 얻을 수도 있을 것이다.

 

 

 

• 2. 

Breaking span의 문제

 

span의 길이가 저마다 달라서 breaking 부분의 이미지와 span을 넘길 때마다 전체 페이지가 span의 길이와 비례하게 늘어나거나 줄어들었다

 

• 문제 해결 과정

span문제는 비교적 쉽게 해결하였다.

가장 긴 span의 길이가 breaking section의 height를 넘지 않으면 되는 일이었다.

따라서 간단하게 #breakings에 height를 span의 최대 길이 이상으로 잡아주었다.

 

하지만 여전히 찜찜한 부분은 남아있다.

1. span의 최대 길이가 항상 변화한다고(항상 새로운 span이 업로드된다고) 가정할 때 현재 700px로 잡아둔 #breakings의 height을 넘을 수도 있다. 이 문제에 대한 대비는 어렵다

* 생각해본 대책

1. js로 #breakings의 height 부분을 span의 길이에 맞춰 유동적으로 변화하게 하면 전체 페이지가 변화하게 되고 처음 문제로 돌아가게 된다.

2. span에 더보기를 만들어 최대 길이를 넘은 부분을 접고 펼칠수 있게 하거나 span 내용이 들어있는 새로운 페이지로 넘어가게 하는 방법. => breaking news라고 만들어둔 부분의 취지를 잃는다.

 

이런 문제들이 있기 때문에 현재 내 실력으로는 더 좋은 방법들이 생각나지 않으므로 아직은 #breakings에 height를 주는 방법이 최선인 듯 하다.

 

 

 

 

• 3.

JS : deleteBreaking function의 문제.

 

deleteBreaking이라는 함수를 만들어서

breaking 부분의 button이 클릭될 때 

 

 

이렇게 이미지들이 중첩되던 문제를 해결했었는데

 

breaking 부분의 img와 span을 고치자 deleteBreaking 함수를 쓸 이유가 없어졌다.

기존에는 버튼이 클릭될 때 계속 새로운 img와 span이 로드되면서 위 사진처럼 이미지와 span이 중첩되었는데 이제는

button을 클릭하면

img src와 span의 내용이 변하기만 할 뿐 켜켜이 쌓이지 않았다.

오히려 deleteBreaking 함수로 인해 error가 발생했다.

 

 

 

• 문제 해결 과정

이 문제도 deleteBreaking 함수를 없앰으로써 해결했지만

찜찜함이 남아있다.

 

 

우선 내가 했던 생각이

// Add more breakings
const image = document.createElement("img")
const breakingInfo = document.querySelector(".breaking__info")
const span = document.createElement('span')
const h2 =document.createElement('h2')

// add more breakings function
function changeBreaking (or){
const image = document.createElement("img")
const breakingInfo = document.querySelector(".breaking__info")
const span = document.createElement('span')
const h2 =document.createElement('h2')

image.classList ="breaking__img"
breaking.prepend(image)
image.src = `images/breaking/breaking${imgArray[or]}`
breakingInfo.prepend(span)
span.innerText = txtArray[or]
span.innerText = txtArray[or].slice(1)
span.prepend(h2)
h2.innerText = span.innerText.substr(0,1)
h2.innerText = txtArray[or].substr(0,1)
}

초록색 부분. 즉 createElement를 하는 부분이 changeBreaking function 안에 들어있기 때문에 

버튼을 click하는 이벤트리스너가 발생할 때 마다 새롭게 createElement를 하기 때문이라고 생각했는데 막상 코드를 열어보니 위에 보이는 코드처럼 진작 분리되어 있었다.

더 놀라운 것은 github를 보니 10월 13일에 위 코드를 만들었는데

분명 그 때는 deleteBreaking함수로 인한 문제가 발생하지 않았었던 것으로 기억한다

 

어찌되었든, 내가 예측한 것이 맞나(createElement 부분이 function 안에 들어가 있어서 중첩되었을거라는 예측) 확인해보기 위해 방금 저 초록색 부분을 보라색 changeBreaking function 안에 집어넣어보았다.

결과는 예상과 같았다.

이미지들이 중첩되어 나타나고 span도 중첩되었다.

 

위의 세로로 중첩된 이미지와 이미지의 배열이 다른 이유는

위의 문제 1번. 이미지의 크기를 맞추기 위해 이미지를 담고 있는 box 즉 .breaking에 display: flex; 를 주었기 때문이다.

내 예상이 맞았다.

 

createElement 부분을 function외부로 뺀 날은 10월 13일인데 왜 이제 와서 그런 일이 생겼을까?

 

가장 유력한 이유는

10월 13일에 모든 수정을 마치고 컴퓨터를 종료하기 전에 그냥 퍼뜩 든 생각으로 코드를 위와 같이 고치고 페이지를 들여다보지 않은 채 그냥 컴퓨터를 껐을 확률이다

 

..ㅎㅎ

 

 

내일부터는 개인 프로젝트를 하면서 글을 써야겠다.

 

실수로부터 하나 또 배워간다.