1. 이미지 요소에 패딩 적용되지 않는 문제
픽사 사이트를 참고하면서 작업하다 보니 이미지에 패딩을 적용하고 싶었는데
개발자 도구로 확인해도 보이지 않는 문제가 있었다.
우선 이미지라서 display: block, margin 등 여러 시도를 하다가
생각해보니 common.css에서 box-sizing: border-box를 적용하여
이미지에 패딩이 포함되어서 보이지 않는 건가 싶었다.
그래서 해당 요소들에만 content-box로 변경하여 해결했다.
box-sizing
- 요소의 전체 너비와 높이를 어떻게 계산하는지 설정
- 즉 요소를 늘리거나 줄이거나 혹은 padding 값 등을 추가할 경우 어떻게 요소의 너비와 높이 적용 여부를 설정
- content-box, border-box 설정 가능
** content-box와 border-box 차이점
- content-box (default)
요소의 너비 100px < 콘텐츠 영역 100px + border-width + padding
- border-box
요소의 너비 100px = 콘텐츠 영역 + border-width + padding (100px)
안쪽 여백과 테두리가 요소 상자 안에 위치함
** border-box 요소의 크기
너비 = 테두리 + 안쪽 여백 + 콘텐츠 너비
높이 = 테두리 + 안쪽 여백 + 콘텐츠 높이
2. transform scale 함수와 background attachment
오늘은 가로 1980 픽셀을 기준으로 작업한 페이지를 아이패드 프로 기준으로 반응형을 작업했다.
가로 1024를 기준으로 작업하다가 배경이미지 크기가 다르게 적용된 것을 발견했다.
그동안 배운 바로는 transform: scale(1.1) 처럼 이미지 크기 자체를 조절하면 되지 않을까 생각했는데
background-attachment: fixed 속성이 해제되어 스크롤 시 사라지는 현상이 발생했다.
우선 혼자 해결해 보기 위해 구글링을 하여 나와 유사한 경우를 스택오버플로우에서 봤다.
그런데 CSS 수준에서의 해결방법은 찾지 못했다.
https://stackoverflow.com/questions/71993951/css-transform-is-affecting-background-attachment
CSS `transform` is affecting `background-attachment`
Using CSS transform on a parent element affects all other children and their background-attachment properties. In the example I'm providing, I am faking the acrylic blur effect inside the children
stackoverflow.com
결국은 scale 함수는 제외하는 대신 background-attachment 효과를 적용하고
직접 pixcell 단위로 작업해야 한다는 결론을 내렸다.
3. overflow: hidden 적용 불가
모두 완료하고 반응형 작업 시 어떤 해상도를 할 지 정하기 위해 팀원 분들을 기다리다가 랜딩 페이지를 만들게 됐다.
다른 팀들에 비해 효과가 밋밋하지 않나 생각이 들어
호버 효과로 scale 함수를 활용하려고 했는데 이번에는 overflow:hidden 이 적용되지 않는 현상이 발생했다.
호버하면 레이아웃을 벗어나면서 이미지가 확대되는 게 전부 보이는 것이다.
우선 액자 역할의 요소(부모 요소)에게
width, height 를 % 단위, 픽셀 단위로 적용했는데 변화가 없었다.
검색해봐도 부모요소에게 position 속성을 추가하라는 글이 많았으나
자식 요소인 이미지에게 없던 position 속성을 추가해봐도 적용되지 않았다.
구글링 하는 와중에 다른 분들도 작업이 완료됐다고 하셔서 우선 반응형 작업을 마무리 하느라 해결하지 못했다.
이 글을 작성하다가 MDN에서 정의를 다시 확인해봤는데 white-space 속성을 내일 발표 전에 한 번 적용해봐야겠다.
overflow 속성이 효력을 갖기 위해선 반드시 블록 레벨 컨테이너의 높이(height 또는 max-height)를 설정하거나, white-space를 nowrap으로 설정해야 합니다.
