TIL - overflow, background

📌 overflow

• 요소의 컨텐츠가 부모보다 클 경우 요소 어떻게 처리할지 지정
• overflow-x, overflow-y 축 별로 값을 설정 가능
  MDN-overflow

div {
	/* x축은 숨기고, y축은 숨기지만 스크롤을 제공하여 잘린 나머지 부분을 확인 할 수 있게합니다. */
  overflow: hidden visible;
  overflow: overflow-x, overflow-y
  width: 100px;
  height: 100px;
}

overflow 속성

• visible overflow의 기본값 콘텐츠를 자르지 않음
• hidden 콘텐츠를 요소의 크기만큼 맞추기 위해 자름, 스크롤바 제공 x
  마진겹침 현상 해결할 때 부모 요소에 overflow: hidden 사용함
• scroll 콘텐츠를 요소의 크기만큼 맞추기 위해 자름, 잘려진 부분 확인하도록 스크롤바 제공
• clip 모든 스크롤을 금지함
• auto 사용자의 선호도를 존중하고 필요한 경우 스크롤바를 보여주지만,
  기본적으로 숨기고 사용자와 브라우저로 스크롤할 책임이 있습니다.

📌 background

• 웹에 이미지 넣는 방법
  • html의 img 태그 (웹페이지 컨텐츠)
  • css의 background 속성 (컨텐츠 꾸미기 위한 용도)

• 백엔드 개발자와 협업해야 하는 공간에는 img 태그,
  FE 혼자 작업하는 공간에는 background-image를 주로 사용
• 스크린리더가 읽지 않아야 하는 곳에선 background-image 사용

background 속성

• background-image : url("이미지 파일 주소")
• background-color 백그라운드 색 지정
• background-repeat 배경 이미지 반복을 지정
  • repeat : 반복
  • no-repeat : 반복 없음 (1번)
  • repeat-x : x축만 반복
  • repeat-y : y축만 반복
  • round : 이미지 짤리지 않게 이미지 크기 변화를 줘 간격 없이 반복
  • space : 이미지 짤리지 않게 반복, 이미지 크기 유지한채 간격없이 반복
  • cover
    -background-position 배경 이미지 위치 지정
• background-attachment 배경이미지 고정