2. 속성(Properties)

여러가지 속성을 바꿀 수 있다.

• 박스 모델

HTML의 박스를 제어해주는 역활

![<https://images.velog.io/images/tonyhan18/post/e20afdde-c9f2-4d02-889a-8d14793a3384/image.png>](<https://images.velog.io/images/tonyhan18/post/e20afdde-c9f2-4d02-889a-8d14793a3384/image.png>)

• 글꼴, 문자

  

• 배경

  

• 배치

  

• 플렉스(정렬)

레이아웃의 수평, 수직 정렬 나중에 띄움이라는 것을 배울텐데 이것도 비슷하게 작동하지만 현재는 플렉스를 사용한다.

![<https://images.velog.io/images/tonyhan18/post/582d1851-5057-47fc-b5f5-9af376eb22a9/image.png>](<https://images.velog.io/images/tonyhan18/post/582d1851-5057-47fc-b5f5-9af376eb22a9/image.png>)

• 전환

  

• 변환

요소의 회전, 이동, 조절해주는 속성들

![<https://images.velog.io/images/tonyhan18/post/b2c6336e-9ae4-4d9c-9482-595fae2ea33f/image.png>](<https://images.velog.io/images/tonyhan18/post/b2c6336e-9ae4-4d9c-9482-595fae2ea33f/image.png>)

• 띄움

요소를 공중에 띄운다는 것을 이야기 한다. 요소주변으로 글자가 자연스럽게 흐를 수 있도록 만든것. 지금은 구지 이걸로 수평정렬하지 않는다.

![<https://images.velog.io/images/tonyhan18/post/794510b1-5fb6-44db-b2d0-2c7b5da7af31/image.png>](<https://images.velog.io/images/tonyhan18/post/794510b1-5fb6-44db-b2d0-2c7b5da7af31/image.png>)

• 애니메이션

애니메이션은 전환과는 다르게 전, 후 상태뿐만이 아닌 보다 복잡한 구조의 애니메이션을 만들 수 있다.

![<https://images.velog.io/images/tonyhan18/post/3e867c85-64f1-44ea-b565-6865885a62b4/image.png>](<https://images.velog.io/images/tonyhan18/post/3e867c85-64f1-44ea-b565-6865885a62b4/image.png>)

• 그리드

행과 열의 2차원의 레이아웃을 만들기 위한 개념

![<https://images.velog.io/images/tonyhan18/post/c9ff97fc-1533-4290-99f8-eee856987e0b/image.png>](<https://images.velog.io/images/tonyhan18/post/c9ff97fc-1533-4290-99f8-eee856987e0b/image.png>)

• 다단

신문이나 뉴스 기사에서 나올 수 있는 단이다.

![<https://images.velog.io/images/tonyhan18/post/9ddf08f7-62bb-4a41-97c6-56277f31bc7b/image.png>](<https://images.velog.io/images/tonyhan18/post/9ddf08f7-62bb-4a41-97c6-56277f31bc7b/image.png>)

• 필터

위와 같이 필터를 적용할 수도 있다.

![<https://images.velog.io/images/tonyhan18/post/db00f0af-51fc-4dda-b223-0990144da912/image.png>](<https://images.velog.io/images/tonyhan18/post/db00f0af-51fc-4dda-b223-0990144da912/image.png>)

박스 모델

• width, height

auto라는 값이 이미들어가 있다. 요소에따라 브라우저가 자동으로 너비를 계산한다. 그외의 내가 크기를 명시하고 싶으면 단위를 적어주면된다.

![<https://images.velog.io/images/tonyhan18/post/e707ebc1-b22e-4424-8efd-f3faf43d18cd/image.png>](<https://images.velog.io/images/tonyhan18/post/e707ebc1-b22e-4424-8efd-f3faf43d18cd/image.png>)

span의 경우 인라인이기 때문에 콘텐츠의 크기만큼 자동으로 줄어든다.