![]()
● flex-direction 속성 - 아이템의 배치 방향을 결정 - flex-direction: row | row-reserve | column | column-reverse | initial | inherit - row : 가로로 정렬 (기본값) - row-reserve : 가로로 오른쪽에서 정렬 - column : 세로로 정렬 - column-reverse : 세로로 밑에서부터 정렬 - initial : 기본값으로 설정 - inherit : 부모 요소로부터 상속받음 ● flex-wrap 속성 - 아이템이 컨테이너의 공간을 넘칠 경우, 아이템의 줄바꿈을 어떻게 할 것이지 결정하는 속성 - flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit - n..
![]()
● float 속성 - 정렬하기 위해 사용되는 속성 - float: none | left | right | initial | inherit - none : 띄우지 않음 (기본값) - left : 왼쪽에 띄움 - right : 오른쪽에 띄움 - initial : 기본값으로 설정함 - inherit : 부모 요소로부터 상속함
![]()
● opacity 속성 - 요소의 불투명도를 설정함 - 최소 0에서 최대 1까지 가능 - 0 : 투명도100% - 1 : 투명도0%
![]()
● transition 속성 - 웹 요소의 스타일 속성이 바뀜 - transition-property : 트랜지션 대상 설정 - transition-duration : 트랜지션 진행 시간 설정 - transition-timing-function : 트랜지션 속도 설정 - transition-delay : 트랜지션 지연 시간 설정 - transtion : 위 4가지의 속성을 한꺼번에 설정
![]()
● position 속성 - 요소의 위치 형식을 지정 - position: absolute | fixed | relative | static | inherit - absolute : 절대 위치 좌표 설정 - fixed : 브라우저 창 기준으로 죄표를 고정 - relative : 문서의 흐름 상 있던 위치를 기준으로 좌표를 지정 - static : 문서의 흐름 상 위치 (기본 값) - inherit : 부모 태그의 속성 값을 상속받음
![]()
● margin 속성 - 요소 주변 여백 설정 - margin-top: | | auto - margin-right: | | auto - margin-bottom: | | auto - margin-left: | | auto - margin: - margin: - 크기 : 너비 or 높이 값을 ps 나 cm 같은 수치로 지정 - 백분율 : 너비 or 높이 값을 %로 지정 - auto : display 속성에서 지정한 값에 맞게 자동으로 지정 ● padding 속성 - 콘텐츠 영역과 테두리 사이 여백 설정 - padding-top: | | auto - padding-right: | | auto - padding-bottom: | | auto - padding-left: | | auto - padding: - ..
