CSS Attribute에 대한 이해

html

이번 포스트에서는 다양한 CSS의 속성과 사용방법에 대해 알아보도록 하겠습니다.

직관적인 속성들

다음 요소들은 단어만 봐도 이해할 수 있는 속성들입니다.

  • width : 가로너비
  • height : 세로너비
  • background : 배경색(혹은 배경이미지)
  • color : 글자색
  • line-height : 줄간격
  • text-align : 텍스트 정렬
  • text-decoration : 텍스트 꾸밈
  • list-style : 리스트 꾸밈
  • cursor : 마우스 커서
  • font-family : 폰트 설정
  • font-size : 폰트 사이즈
  • font-weight : 폰트 굵기
  • margin : 바깥여백
  • padding : 안쪽여백
  • min-height : 최소 높이
  • min-width : 최소 너비
  • max-height : 최대 높이
  • max-width : 최대 너비
  • text-indent : 들여쓰기
  • box-shadow : 그림자
  • text-shadow : 텍스트 그림자
  • transition : 변이
  • transform : 모양 변화
  • vertical-align : 세로 간격
  • z-index : z축 수치

직접 사용해보지 않으면 조금 이해가 어려울 수도 있지만 대부분 단어만 봐도 "아 이런거구나" 라는 느낌이 드는 속성들입니다.


레이아웃에 관련된 속성들

이와 반대로, 완벽하게 이해하지 않는 이상 사용하기가 굉장히 까다로운 속성들이 있습니다. 바로 layout에 관련된 속성입니다.

  • float:left|right|none
  • clear: none|left|right|both|initial|inherit;
  • display:block|inline|inline-block|flex|table|table-cell|table-row|table-column|none|inherit|grid|contents
  • display:flex와 관련된 속성들
    • justify-content
    • align-items
    • align-contents
    • order
    • align-self
  • position:static|relative|absolute|fixed|sticky|inherit
    • left, right, top, bottom

위에 언급된 속성들은 각각에 대해 완벽히 이해하고 있지 않으면 사용하기가 굉장히 어렵습니다. 반대로, 완벽하게 이해하고 있다면 웹 사이트를 매우 아릅다게 꾸밀 수 있는 능력을 갖춘 것입니다.

저희는 이런 레이아웃에 관련된 속성들에 대해 상세히 다룰 것입니다.