TIL / 20211013 / CSS 개념 정리

display 프로퍼티 4가지

block

• 항상 새로운 라인에 표시
• width, height, margin, padding 프로퍼티 설정 가능
  inline
• 새로운 라인으로 시작하지 않고 한 라인에 표현 됨
• width, height, margin, padding 프로퍼티 지정 불가
  inline-block
• 한 라인에 표현 되면서도, width, height,margin,padding 프로퍼티 지정 가능
  none
• 해당요소를 화면에 표시하지 않는다 (cf. visibility: hidden은 해당 요소를 화면에 보이지 않게하지만 해당 영역은 비워둠)

position 프로퍼티 4가지

• static position : 다른 태그와 관계로 자동 배치 되며 임의 설정 불가(상속된 설정을 reset할 때 사용)
• relative position : 원래 있어야할 위치 기준으로 좌표 지정
• fixed position : 뷰포트 기준으로 고정 so 스크롤 해도 항상 동일한 위치에 고정됨
• absolute position 가장 가까운 relative 부모 블록이 있는 경우 지정된 위치에 배치됩니다. 그렇지 않으면 body 요소 기준으로 위치

Resetting과 Normalizing CSS의 차이점

1.Resetting - Resetting은 요소의 모든 기본 브라우저 스타일을 제거하기 위한 것
2.Normalizing - Normalizing은 "모든 스타일을 제거"하는 것이 아니라 유용한 기본 스타일을 보존

콘텐츠를 시각적으로 숨기는(그리고 screen reader에서만 사용할 수 있게 만드는)다양한 방법

visibility: hidden
display:none
width:0; height: 0;

SASS와 SCSS의 차이

SASS: SCSS와 비교해 괄호{} 와 ;가 사라진다.
CSS는 작업이 커질수록 불편함이 생긴다.
SASS와 SCSS를 이용하면 가독성과 재사용성을 높여 유지보수가 쉬워진다.