알아두면 좋은 스타일시트 속성

이자용·2021년 7월 19일
0

HTML&CSS

목록 보기
2/3
  • text-justify
    텍스트 간격을 조절하는 속성이다. 자동으로 간격을 조절하거나 단어/콘텐츠/단어 간격 등의 기준으로 텍스트를 정렬한다.

  • text-transform
    텍스트의 대소문자를 바꾸는 속성이다. 단어의 첫번째만 대문자로 바꾸거나 모든글자를 대문자/소문자로 바꿀수 있다.

  • justify-content
    Display:flex 속성을 지정했을 때 사용되는 콘텐츠 정렬 속성으로 왼쪽/오른쪽/가운데 기준으로 정렬하거나 요소 사이를 일정하게 정렬하거나 정하거나 요소 사이 간격을 가운데로 설정할수도 있다.

  • border-collapse
    테이블 또는 셀의 테두리선을 표현방법을 정하는 속성이다. 경계선을 합치거나 분리하여 표현할수 있다.

  • list-style
    li태그로 표현할 때 여러가지 스타일로 리스트의 앞자리를 표현할 수 있다.(숫자/알파벳/점/히라가나 등)

  • transition
    애니메이션 효과를 지정할수 있는 속성이다. 애니메이션을 주고자하는 속성과 함께 시간과 애니메이션 커브를 주면 적용된다.

  • transform
    요소의 위치를 이동시키거나 크기조절 및 회전하여 표현가능한 속성이다. X축/y축/z축 등으로 3D 표현도 가능하고 2차원적으로 회전시키는 등 다양한 이미지가 표현가능하다.

  • border-image
    Border-image는 border로 구성된 테두리에 이미지를 적용시킬수 있는 속성이다.

  • box-shadow
    요소에 그림자를 줄수있는 속성이다. 빛을 쏘는 방향과 투명도 등을 조절할 수 있다.

  • box-sizing
    박스의 크기를 어떤 기준으로 설정할지 정한다. 콘텐츠영역으로 정하거나 보더 기준으로 정하거나 상속받을 수 있다.

profile
이자용

0개의 댓글