[HTML&CSS] CSS #2 Summary

CSS #2 Summary

• 드림코딩 by 엘리: CSS 레이아웃 정리 display, position 완성 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript
  
  
  Caution
  
  강의를 듣고 제가 기억하기 쉽게 기록하여 변형된 내용이 있을 수 있습니다.
  오류가 있거나 해당 글에 문제가 있을 경우 피드백 부탁드립니다.

display

.tmp {
    display: block;
    width: 30px;
    height: 30px;
    color: green;
    background: yellow;
    . . .
}

• inline: 한 줄에 여러개 배치가능 (contents 가 있어야만 지정한 속성값이 가시화된다.)
  (해당값을 default 로 가지는 대표적인 tag 는 span 이다.)

• block: 한 줄에 한개만 배치 가능
  (해당값을 default 로 가지는 대표적인 tag 는 div 이다.)

• inline-block: 한 줄에 여러개 배치가 가능한 block

• flex: 해당 tag 를 flexbox 로 지정

position

.tmp {
    position: static;
    left: 20px;
    top: 20px;
    . . .
}

• static (Default): HTML 에 기재된 순서대로 browser 상에 자연스럽게 보이도록 하는 속성
  위치속성(ex. left, top . . .)이 적용되지 않는다.

• sticky: 원래 있어야할 자리에 위치하지만 (position: static;), 스크롤을 무시하고 위치가 고정된다.
  위치속성 (ex. left, top . . .)이 적용되지 않는다.

• relative: 원래 있어야할 자리에 위치 (position: static;) 기준으로 위치 속성값 적용

• absolute: position 값이 static 이 아닌 (relative, absolute, fixed)
  가장 근접한 parent box 기준으로 위치 속성값 적용

• fixed: Web Page 전체를 기준으로 위치 속성값 적용

CSS 속성값 브라우저 호환 여부

https://caniuse.com/