CSS 속성 정리해보기 - hthreehundred/place GitHub Wiki

정리 할 때 내용과 사용방법 모두 정리할 것!

  • 코드의 경우 아래처럼 사용하면 가능 (더 궁금할 시 markdown 검색)

  • 에디터

image

  • 적용시
[코드내용]
background-color: #eee;

텍스트로도 반드시 정리할 것. 하는 것도 중요하지만 개념 이해 중요.

position 관련 속성 정리 (static, relative, absolute, fixed, sticky 등)

  • ..
  • ..

display 관련 속성 정리 (inline, inline-block, block, flex, inline-flex 등)

  • inline-block > image
  • block > image
  • flex > image
  • grid image
  • ..

flex 관련 속성 정리 (flex-direction, justify-content, align-items 등)

  • flex-direction image row > div 내 가로로 배치 column > div 내 세로로

-justify-content

컨테이너 인라인 축 기준 배치제어시 사용

  • align-items

그리드 영역 내 블록에 아이템 정렬제어

box-sizing 은 왜 쓰는걸까요?

  • 고정적인 px 아닌 반응형 등 기기에 다른 해상도 차이가 있어서 .. ?패딩 마진등 해당 px 만 제어하면 100%로 사용가능한 이유 ?

margin, padding 사용 방법과 의미

  • margin: 제어하려는 div 의 바깥영역 제어 image 중간 div에만 margin: 10px;

-padding: div 컨텐츠랑 테두리 사이의 공간 제어 image

background 관련된 속성 '모두' 정리 (축약형 포함)

  • ..

폰트 관련 속성 정리 (font-size, font-weight, color 등)

  • ..

border 관련 속성 정리 (border, border-radius 등)

  • ..

css에서 reset은 왜 필요한가?

  • 브라우저 마다 CSS HTML 요소 기본 포맷이 다름 각각의 브라우저에 맞춰 초기화 해줌

기타 생각나는대로 추가해서 정리