블로그를 수정해보자 - 3

사실 갑자기 웹 개발을 하고 있는건

그냥 다른 개발을 하고 싶어서다

(번아웃 방지용)

 

저번에 사용한 기본 테마는 Poster

이번에는 Portfolio를 사용할 것이다

 

 

이게 기본 모습이다

 

 

사실 내가 반응형 웹을 배운적이 없어서..

무식하게 9등분으로 나눴다..ㅎㅎㅎ

 

9등분을 해준 다음

양쪽 끝은 고정 사이즈,

가운데는 양쪽 끝 이미지가 떨어진

구간을 전부 채우는 식으로 만들었다

 

Default는 background-size를 contain으로 

해줬지만 일정 비율 이상으로

사이트를 확대할 경우(이 경우에서는 110% 이상)

부터는 cover로 바꾸어주었다

 

"Background-Size: Contain"

• 배경 이미지가 요소의 전체 영역을 완전히 채우도록 크기가 조정.
• 이미지의 비율(aspect ratio)은 유지되면서, 이미지가 요소의 더 큰 측면에 맞춰짐.
• 이미지의 일부가 요소의 영역을 벗어날 수 있으며, 이는 이미지가 요소의 모든 영역을 커버하기 위해 필요한 경우

 

"Background-Size: Cover"

• 배경 이미지가 요소 내에 완전히 포함되도록 크기가 조정됩니다.
• 이미지의 비율은 유지되면서, 이미지가 요소의 더 작은 측면에 맞춰집니다.
• 이미지의 전체가 요소 내에 보이며, 요소의 크기가 이미지의 비율과 다른 경우 요소의 일부 영역이 빈 상태로 남을 수 있습니다.

"요약"

• cover는 요소를 완전히 채우기 위해 이미지가 충분히 크게 확장되어 이미지의 일부가 잘릴 수 있음.
• contain은 이미지가 요소에 완전히 포함되도록 확장되거나 축소되며, 이미지가 요소의 크기에 완전히 맞지 않을 경우 주변에 빈 공간이 생길 수 있음.

그리고 tab 메뉴에는

redirectionTo라는 기능을 연결해서

클릭 시 연결된 주소로 접속 되게끔 해주었다

Tab 메뉴는 radio button을 해주었다

 

 

아까도 말했지만 이건 그냥

재미로 하는 것이다..

내일부터는 다시 게임 개발 할 것이야...