trnasition-property: 서서히 변하게 할 속성 trnasition-duration: 변하는 시간(초단위) trnasition-timing-function: 속도를 완만하게 속성값 ▶ ease: 서서히 빨라지고, 서서히 느려짐(기본값, 생략가능) ▶ linear: 일정한 속도로 전환효과 만듦 ▶ ease-in: 느리게 시작 ▶ ease-out: 느리게 끝 ▶ ease-in-out: 느리게 시작하고, 느리게 끝 trnasition-delay: transition이 작동하기 전 지연시간(0~1초 사이 값으로 입력) *hover로 또 따로 나눠서 적는 이유는 트렌지션이 적용 되고 안되고를 구분해서 적어줘야 하기 때문이다 변화가 되어 보여줄 부분은 :hover이고 어떤 transition에 어떤값을..

▷float : 구역을 왼쪽/오른쪽에 배치하고 옆에 빈공간에 "내가 왼/오 로 갈테니까 다른구역이 와도 된다!" float가 반복되며 순서대로 배치 속성값 ▶ left : 왼쪽으로 배치하고 오른쪽에 다음 구역이 들어오게 함 ▶ right : 오른쪽으로 배치하고 왼쪽에 다음 구역이 들어오게 함 ▷clear : float가 설정된 구역의 아래로 내려줌 (float를 무력화?) 속성값 ▶ left : clear보다 위에 있는 구역중에서 float가 left로 설정된 구역에 바로 아래에 맞게 줄바꿈 (위에있는것 높이에 맞게 딱 붙어서 배치) ▶ right : clear보다 위에 있는 구역중에서 float가 right 로 설정된 구역에 바로 아래에 맞게 줄 바꿈 (위에있는것 높이에 맞게 딱 붙어서 배치) ▶ bo..

*레이아웃 CSS* HTML 태그 블록요소 : 세로로 배열되는 HTML 태그(줄바꿈이 되는 태그) 인라인 요소 : 가로로 배열되는 HTML 태그(줄바꿈이 안되는 태그) > 크기지정 불가XX display : 속성값; 가로배열, 세로배열 변경 속성값 ▶ block : 세로배열로 만듦 ▶ inline : 가로배열로 만듦 (width,height 등 일부 블록요소 속성이 안먹힘) ▶ inline-block : 가로배열(=inline)이지만 블록요소(=세로배열)의 속성이 적용되게함 ▶ none : 내용을 결과에서 숨겨줌 position : 속성값; 박스(=구역)의 위치를 원하는 곳으로 이동 속성값 ▶ relative(부모박스) : 부모박스에 적용하면 위치를 수정할 수 있다. 움직이는 박스를 가지고 있는 구역 >..

1에 가까울수록 선명(opacity)=불투명도 1에 가까울수록 투명(tranparency)=투명도 *배경색 background-color : 속성값; 1. 영문으로 입력 : red,green,blue,white 2. RGB 값으로 입력: rgb (red,green,blue) > rgb는 000~255 사이 세자리 숫자로 농도 지정 3. rgba 값으로 입력: rgb(red,green,blue,alpha) > rgb는 000~255 사이 세자리 숫자로 농도 지정 > a는 0~1사이 숫자로 투명도 지정(0에 가까울수록 투명함) 4. 16진수로 입력 : #00ff00 *배경이미지: background-image: url('이미지 주소'); 이미지가 상하좌우 반복되서 적용됨 *이미지 크기 : background..

▶text-decoration: 속성값 글자의 선을 표시 해준다 *속성값: none 밑줄 제거 (링크에 해당) underline 밑줄 overline 윗줄 line through 가운데줄,취소선 underline solid 한줄 밑줄(solid 생략 가능) underline double 이중 밑줄 underline dotted 점선 밑줄 underline dashed 파선 밑줄 ▶text-align *속성값: left 왼쪽정렬(생략가능) center 가운데맞춤 right 오른쪽맞춤 justify 양쪽에 딱 붙게 간격을 맞춤 ▶vertical-align : 속성값 세로정렬(이미지,폼요소[input]) * 속성값: top : 박스 상단에 배치 middle : 박스의 세로 중앙에 배치 bottom : 박스의 ..