TIL * 22.01.28

내가 공부한 흔적을 남기기 위해 TIL을 쓰기로 결심했다.
스터디 관련 학습은 제외하고 스스로 한 것만!

🔹 CSS

가상 선택자

• 가상 클래스(pseudo class): 특정 요소에 미리 정의해놓은 상황에 적용이 되도록 약속되어 있는 보이지 않는 클래스

• 가상 요소(pseudo element): 미리 정의해놓은 위치에 삽입이 되도록 약속되어 있는 보이지 않는 요소

margin

• 요소간의 여백을 설정
• 기본값은 0
• margin: auto // 브라우저에 의해 계산이 이루어지는데, 0(기본값) 또는 요소의 해당 측면에서 사용 가능한 공간과 같은 값을 가진다.
• margin collapse(마진 병합) : 인접한 두 개 이상의 수직 방향 박스의 마진이 하나로 합쳐지는 것. top 값과 bottom 값이 겹칠 때 더 큰 값이 상위를 차지하여 큰 값으로 적용된다.

margin과 padding

• margin은 음수 사용 O, padding은 X
• margin과 padding 둘 다 퍼센트(%)로 선언 가능
• 사람의 뼈를 Contents, 피부를 border, 근육을 padding, 사람과 사람 사이의 간격을 margin

width

• 요소의 가로 길이 값을 결정, 기본값 auto
• 값을 설정할 시(auto 제외) box model 영역에서 margin을 제외한 모든 영역의 영향을 받음

height

• 요소의 세로 길이 값을 결정, 기본값 auto
• Containing Block의 높이에 대한 백분율로 높이를 정의, 즉 부모 요소가 명시적인 높이 값을 가지고 있어야 퍼센트(%)값 지정 가능