👾

transform의 기준점 설정하기 transform의 다양한 속성 값들 translate, rotate, scale을 사용하다 보면 기준점을 정해야 할 때가 있습니다. 어디를 기준으로 이동, 회전등 요소를 변형할 것인지를 정할 수 있는 속성이 바로 transform-origin입니다. transform-origin transform의 기준점을 설정할 수 있는 속성으로, 속성값은 다음과 같습니다. // 2D transformation transform-origin: x-axis y-axis; // 3D transformation transform-origin: x-axis y-axis z-axis; cs 2D transformation을 사용할 경우, 기준점이 될 좌표의 x축과 y축 값을 속성 값으로 넣..

CSS 박스 모델(Box Model) 크롬 브라우저에서 마우스 우클릭 -> 검사 또는 Ctrl + Shift + I 를 눌러서 나오는 개발자 도구에서 Elements 탭을 누르면 다음과 같은 박스 모델을 볼 수 있습니다. content 영역 : 글, 이미지, 비디오 등 실제 내용을 포함하는 영역 padding 영역 : 안쪽 여백; border와 content 사이의 영역 border 영역 : 테두리 margin 영역 : 바깥쪽 여백; 다른 태그까지의 거리 이때 padding, border, margin은 width에 포함되지 않기때문에 요소의 전체 width를 계산하려면 이를 포함시켜줘야 합니다. 예제: width 구하기 1 2 3 4 5 6 div { width: 320px; padding: 10px;..

CSS CSS란 Cascading Style Sheet의 약자로 마크업 언어를 스타일링하기 위한 언어입니다. HTML이 뼈대, 구조를 위한 언어라면, CSS는 디자인, 스타일링을 위한 언어라고 할 수 있습니다. HTML 파일에 CSS 코드를 추가하는 방법은 3가지가 있습니다. Inline CSS Internal CSS External CSS Inline CSS html의 태그 내에 style 속성을 추가하는 방법입니다. style 속성은 css 코드를 값으로 받는데 이때 여러 값들은 ; 로 구분합니다. 1 Hello cs Hello 하지만 이 방식은 거의 쓰지 않습니다. 만약 문서 내 모든 태그의 색깔을 검은색으로 바꾸고 싶다면, 문서 내 모든 태그의 속성을 수정해야 되기 때문입니다. Internal C..