![]()
사용자 인터페이스 사용자가 요소의 크기나 아웃라인 등을 마음대로 변경 가능 사용자 인터페이스를 위해 제공되는 속성 resize 사용자가 해당 요소의 높이나 너비를 변경 resize 속성이 설정된 요소에는 오른쪽 하단에 크기 조절 핸들 생성 핸들을 마우스로 드래그해서 사용자가 직접 요소의 크기를 조절 가능 outline-offset 해당 요소의 테두리(border)와 아웃라인(outline) 사이에 공간(offset)을 추가 아웃라인(outline)과 테두리(border)의 차이 아웃라인은 테두리의 바깥쪽에서 요소를 둘러싸고 있는 라인 아웃라인은 HTML 요소의 크기에 포함되지 않음 아웃라인은 사각형이 아닐 수도 있음 box-sizing css 테두리 영역의 크기 결정 box-box 지정한 CSS widt..
![]()
float 속성을 이용하여 버튼으로 메뉴 버튼 태그 뿐만 아니라 태그와 태그로도 만들 수 있음 button 타입의 input 요소에서 내부에 표시될 문자열은 value 속성값으로 설정 가능 button 태그 a 태그 transition-duration 속성 : 배경색과 글자의 색상까지 변경 box-shadow 속성 : 버튼에 실제와 같은 그림자 효과를 간단히 설정 disabled 속성 : 버튼을 사용하지 못함 반투명하게 보이며, cursor 속성의 속성값을 not-allowed로 설정하면, 사용이 금지된 버튼을 더욱 그럴싸하게 표현 가능 float 속성 : 버튼으로 메뉴 제작 등등 다양한 버튼 제작 가능! https://www.tcpschool.com/css/css3_expand_buttons
![]()
변형(Transform) HTML 요소의 동작, 회전, 크기 변경, 기울기 조절 2D 변형(transform)과 3D 변형(transform) CSS 좌표 체계 기준점 :브라우저의 왼쪽 상단 Z축은 : 입체적인 방향, 모니터를 바라보는 방향을 가리키는 좌표축 2D 변형(transform) 2D transform 속성 transform 요소에 2D 또는 3D 변형(transform) 적용 transform-origin 요소에 변형(transform)을 적용하는 변환 중심 설정 2D transform 메소드 translate() 현재 위치에서 해당 요소를 주어진 x축과 y축의 거리만큼 이동 주어진 거리가 양수이면 해당 축의 양의 방향으로, 음수이면 해당 축의 음의 방향으로 이동 matrix(n,n,n,n,n..
