TIL (note02)

새로 알게된 것들 메모 남기기

📓 참고

① 단축키!😁

• 다중 column 선택 : ctrl+alt+↕️(방향키) - Window 기준 / shift + option + command + ↕️(방향키) - Mac 기준
• 특정 단어와 동일한 단어 선택(여러번 누를수록 다중 선택) : ctrl+d - Window 기준
• 커서가 위치한 단어 전체 선택 : shift+alt+→(오른쪽 방향키) - Window 기준

✨② 'display: block'인 요소를 'width: 100%'인 상태에서 '가운데 정렬' (자동으로 생기는 margin이 있으로 자동 여백 생성)
=> margin: 0 auto;로 설정!

✨③ box-sizing: border-box로 설정한 상태에서
창의 크기 조절 상관없이 항상 여백있는 상태로 유지하는 방법
=> padding 값 설정!
(margin은 border 밖의 영역이므로 여백 발생❌)

④ width: 100%;와 width: auto;의 차이! 둘은 엄연히 다른 값!

• width: 100%; : 말그대로 자신이 차지할 수 있는 가로폭(부모의 content-box 사이즈)을 모두 다 채워라

• width: auto; : 적절히 알아서 설정해라

'width: auto;'는 box의 display 값에 따라, 그리고 요소가 사용된 맥락에 따라 달라진다.😅

<display값에 따라 달라지는 케이스>

• block: 블록은 기본적으로 'width: 100%'가 설정되어 있어 auto는 100% (자기 영역 차지)
• inline-block: 인라인 블록은 자신이 가진 컨텐츠 길이 만큼을 auto로 설정
• inline: 인라인 요소는 width 설정이 불가능한 요소이므로 width값은 항상 auto로 설정

<맥락에 따라 달라지는 케이스>

• absolute, fixed, float: 자신이 가진 컨텐츠 길이 만큼을 auto로 설정
• flex-box: center center로 정렬했을 경우 자신이 가진 컨텐츠 길이 만큼을 auto로 설정

※ width: auto;는 맥락에 따라 값이 많이 달라지기 때문에 경험을 통한 이해가 필요함!