2023 07 25

2023-07-25

css auto width/height

참고: https://oursmalljoy.com/css-width-auto-height-auto-%EA%B8%B0%EB%B3%B8%EA%B0%9C%EB%85%90-%EC%9E%98%EB%AA%BB-%EC%83%9D%EA%B0%81%ED%95%98%EA%B3%A0-%EC%9E%88%EB%8A%94-%EA%B2%83%EB%93%A4/

• auto의 의미
  • 원리: width: auto, height: auto의 의미는 내용물(자식요소)의 크기에 맞춰 자동으로 크기를 조절하는 것
  • 주의할 점
    • block 요소의 경우 => width: auto라도 자식요소에 맞추지 않는다
      • block 요소의 width:auto는 "부모 요소의 한줄을 다 채워주세요" 라는 뜻
        • width: 100% - 좌/우 margin

• auto 설정 시 width/height 값
  • width: 내용물의 너비값이 들어감
  • height: 별도로 특정 값이 들어가지 않음

• height: 100% vs height: auto
  • auto: 자식 요소 크기에 맞춰주세요
  • 100%: 부모 요소의 크기에 맞춰주세요

css overflow

참고: https://electronic-moongchi.tistory.com/62

• overflow
  • 요소의 박스에 내용이 더 길때 어떻게 보일지 선택
  • overflow: visible, hidden, scroll, auto
    • visible: 특정 요소가 박스를 넘어가도 그대로 보여줌. 스크롤바 그런거 없음
    • hidden: 부모 요소의 범위를 넘어가는 자식 요소의 부분은 보이지 않도록 처리
    • scroll: 부모 요소 범위 넘어가는 자식 요소 보이지 않지만, 사용자 확인하게 스크롤바 표시
    • auto: 부모 요소를 넘어가는 범위의 자식 요소 있을 경우 보이지 않게 처리하되, 사용자가 해당 부분 볼 수 있도록 스크롤바