태그 이름을 클릭하면 상세 설명 페이지로 이동합니다. 상세 페이지가 있는 태그는 회색배경 + 빨간 글씨. 주로 티스토리 스킨 편집에 사용하는 태그만 정리합니다. 태그 이름 속성 설명 align-content 콘텐츠의 상하 관계 정렬 상태를 정의 align-items 콘텐츠 내부의 정렬 상태를 정의 align-self 콘텐츠의 정렬 상태를 정의 all 요소의 속성을 초기화 또는 상속을 설정 animation 움직임을 표현 animation-delay 요소가 로드된 후 애니메이션이 시작될 때 까지의 시간 animation-direction 애니메이션 움직임 방향을 설정 animation-duration 애니메이션 움직임 시간을 설정 animation-fill-mode 애니메이션이 끝난 후의 상태를 설정 an..

z-index 위치가 겹칠 경우 순서를 정의 z-index 값이 클수록 상위에 표시 됩니다. 음수도 사용 가능하고 99999까지 사용할 수 있습니다. 그 이상의 숫자도 작동합니다.

width 요소의 가로 값을 정의 width 값은 px, %로 정합니다. height와 방법이 동일하다고 보면 됩니다.

top 요소의 위쪽 속성을 설정 top은 위에서 얼마의 공간을 두고 배치 할지 설정합니다. left, right, bottom 값 설정 방법과 동일합니다.

text-align 텍스트 정렬 방식을 설정 left : 왼쪽 정렬 right : 오른쪽 정렬 center : 가운데 정렬 justify : 양쪽 정렬 inherit : 상위 요소에 상속 받는다.

right 요소의 오른쪽 속성을 설정 right 값은 px, %로 표현합니다. 오른쪽에서 얼마의 공간을 두고 배치 할지를 정합니다.

position 요소의 위치를 설정 static : 기본값. top, right, bottom, left로 값을 지정 할 수 없습니다. absolute : 절대적 위치 값. top, right, bottom, left로 위치 값을 지정합니다. relative : 상대적 위치 및 기준점으로 설정. top, right, bottom, left로 위치 값을 지정합니다. fixed : 위치를 고정. 스크롤해도 움직이지 않는다. top, right, bottom, left로 위치 값을 지정합니다. * 예시 이미지로는 설명을 다 할 수 없는 부분이 있습니다. 많이 연습해보세요.

padding 요소의 안쪽 여백을 설정 ▲ 녹색 영역이 padding 입니다. 값은 em, px, % 를 쓸 수 있고 음수 값을 가질 수 있습니다. padding은 padding-top, padding-right, padding-bottom, padding-left 모든 값을 가지고 있습니다. padding: 10px; /* 상-우-하-좌 */ padding: 10px 20px; /* 상하-좌우 */ padding: 10px 20px 30px; /* 상-좌우-하 */ padding도 margin 거의 99% 동일하게 속성을 설정합니다.

outline 요소의 아웃라인의 색, 스타일, 굵기를 정의 outline-color : 색outline-style : 라인 종류outline-width : 굵기outline 태그에는 위 3가지 속성이 있습니다. 그러나 각각 태그를 쓸 필요 없이 다음 처럼 사용하면 됩니다. outline: 8px inset #ccc; >> outline : 라인굵기 라인종류 색; outline 태그는 border와 쓰는 방법이 같음을 알 수 있습니다.

margin 요소의 바같쪽 여백을 설정 margin은 margin-top, margin-right, margin-bottom, margin-left 모든 값을 가지고 있습니다. {margin: 50px;} 상-우-하-좌 {margin: 50px 60px;} 상하-좌우 {margin: 50px 60px 30px;} 상-좌우-하 {margin: 0 auto;} 상하-중앙정렬 위 값의 순서는 기억하기 어려우니 그냥 {margin: 0 0 0 0;} 상우하좌 하나만 기억하면 됩니다. 값은 px, %, auto를 쓸 수 있습니다. ▲ 마진 값을 가진 박스의 상하 마진 값은 겹칩니다. 상하 마진 값이 큰쪽으로겹치게 됩니다. 마진은 음수, 양수 값을 가질 수 있고 합산한 마진 값을 적용합니다. ▲ float으로 정렬..