1. transform: translate(가로값, 세로값) 1 - 가로값 세로값 만큼 해당 태그 이동 ** display: inline-block - div태그 같은 경우 width가 100%이기 때문에 효과를 확인하기 힘들어서 inline-block 사용 transform: translate transition transition transition transition

1. background-color: 색상 2. background-image: url('주소') 3. background-repeat: 값 4. background-size : 값 5. background-position: 값 1 - 배경색 2 - 배경 이미지 3 - 이미지 반복 방법 및 여부 4 - 배경 이미지 크기 조절 5 - 배경 이미지 위치 조절 background background-repeat no-repeat : 반복 X repeat : x,y축 모두 반복 repeat-x : x축만 반복 repeat-y : y축만 반복 background-position center: 가운데 위치 top: 가운데 상단 위치 bottom: 가운데 하단 위치 left(top, center, bottom) ri..

display: flex - 기본값(가로 정렬) flex-direction: column - 세로정렬 flex-direction: row - 가로정렬 align-items: center - 가운데 정렬 flex-wrap: wrap - 태그가 범위를 벗어나면 줄바꿈 main spanish weather todo trade 1. 검정색 박스는 column(세로 정렬) 2. 빨간색 박스는 row(가로 정렬) 3. 파란색 배경 가장 큰박스 기준으로 center(가운데 정렬)

static - 기본으로 정해진 위치에서 값을 변경해도 이동하지 않음(기본 값) relative - 정해진 위치에서 입력한 값만큼 이동함 absolute - html태그를 기준으로 입력한 값만큼 위치를 이동함 fixed - 스크롤이 이동해도 정해진 위치에 고정해 이동하지 않음 - position: static를 안해도 기본값으로 position은 static이다 main static relative fixed position 지정하기 전 position 지정한 후

inline - 가로 배치 block - 세로 배치 inlineinlineinline blockblockblock

적용 우선순위 스타일속성 > id 선택자 > class 선택자 > 태그 선택자 (예제) // 전체코드 적용 우선순위 확인 // 스타일속성 적용 우선순위 확인 // id 선택자 적용 우선순위 확인 // class 선택자 적용 우선순위 확인 // tag 선택자 적용 우선순위 확인