본문 바로가기

CSS

 (18)
[CSS] transform-origin transform-origin translate, rotate, scale, skew 등, trasnform의 속성들은 지정 요소의 중심을 기준으로 동작을 시작한다. 이런 기준점을 trasform-origin을 이용하면 변경이 가능하다. transform-origin: x축, y축; // px, 백분율(%), left, center, right를이용한다. 45도 시계방향 회전을 예시로 주었다. 1. 백분율 (%)로 기준점을 변경할 경우 transform-origin: 0% 0%; 박스의 왼쪽 상단 모서리에 위치한다. transform-origin: 100% 100%; 박스의 오른쪽 하단 모서리에 위치한다. 40% 60% 일 경우, 오른쪽에서 40% 아래쪽으로 60%인 곳에 위치하게 된다. 2. right..
[CSS] transform / translate, scale, rotate, skew transform 요소의 모양, 크기등을 조절하고 기울기, 이동효과를 줄 수 있다. transform : translate (); 지정한 위치로 X축, Y축 만큼 이동시킨다. transform : translateX(num); transform : translateY(num); transform : translate(num1,num2); transform : scale(); 지정한 크기만큼 X축, Y축으로 확대 또는 축소할 수 있다. transform : scaleX(num); transform : scaleY(num); transform : scale(num1,num2); trans: rotate(); 지정한 크기만큼(각도만큼) 회전시킨다. transform : rotateX(num); transfor..
[CSS] position - sticky / fixed + ( position 정리 ) 1. position : fixed fixed는 들어있는 박스는 상관 없이 viewport를 기준으로 위치를 설정한다. 웹 페이지가 스크롤 되어도 설정해준 값으로 위치가 고정되어 항상 같은 곳에 위치하게 된다. 2. position : sticky sticky는 static의 속성과 fixed의 속성의 특징을 모두 가지고 있다. sticky는 설정한 위치값에 도달하기 전까지는 변화없이 static처럼 행동하지만, 도달 이후에는 fixed처럼 해당 위치에 고정 된다. sticky를 사용할 때에는 위치를 꼭 정해줘야한다. postion을 정해주지 않으면 변화가 없다! sticky는 들어있는 박스안에서 position 변경이 일어난다. 정리 static / relative / sticky 들어있는 박스안에서 ..
[CSS] position - static / relative / absolute postion 태그들의 위치를 결정하는 속성 top, bottom, left , right로 위치를 결정할 수있다. 주의할 점은 예를들어 top : 5px을 준다고 하면 위로 5px이동하는것이 아니라 아래로 5px이동하게된다. left : 5px 또한 오른쪽 방향으로 5px이동한다. 각각의 방향을 기준으로 태그 안쪽 방향으로 이동하기 때문..! 바깥쪽으로 이동하게 하고 싶다면 -값을 써주면 된다. 1. position : static 기본값 모든 태그들은 처음에 static 상태이다. 위치를 지정하지 않을 때 사용한다. 2. position : relative 원래있던 자리를 기준으로 지정해준 top과 left만큼 이동한다. 원래있던 자리를 유지하면서 그 자리에서 상대적으로 지정한것만큼 이동하였기 때문에..
[CSS] box-sizing 1. box-sizing : content-box 기본값..! width와 height 속성이 콘텐츠 영역만 포함한다. width와 height의 값을 100씩 줬을때, 박스 사이즈는 항상 100 X 100을 유지한다. padding과 border를 얼마를 넣든 박스 사이즈는 변하지 않는다. 2. box-sizing : border-box width와 height 속성이 테두리 영역을 포함한다. width와 height의 값을 100씩 줬을때, padding과 border를 포함하여 100 X 100을 유지한다. padding과 border를 넣은 만큼 content가 줄어든다. 통상적으로 padding을 넣는다는 것은 박스안에 여백을 만든다는 것이기 때문에 대부분은 border-box를 사용하게 될 것..
[CSS] Box Model content : 텍스트와 이미지등의 컨텐츠 내용이 표시되는 영역. with와 height로 크기를 지정할 수 있다. background 속성을 지정하는 경우 content영역과 padding영역에 표시된다. padding: content 영역과 border사이의 여백. border: padding과 margin의 경계에 있는 테두리선. 박스의 외각이 되는부분이다. margin: border와 다른 태그 영역 사이. 배경은 표시되지 않는다.
[css] 프로필 사진 / object-fit 이미지 비율 프로필 사진을 만들기 위해 img태그를 이용해 사진을 업로드했다. 그런데 사진의 원본 비율이 무시되었다.... object-fit 속성은 img나 video요소와 같은 컨텐츠의 크기를 어떤 방식으로 조절해 요소에 맞출 것인지 지정해주는 속성이다. object-fit : fill 기본값 컨텐츠 박스의 크기에 맞춰 요소의 크기를 조절한다. ( 비율 유지X ) 요소가 컨텐츠 박스를 가득 채우고 가로 세로 비율이 일치하지 않으면 박스를 가득 채우도록 요소가 확대된다. object-fit : contain 요소의 가로 세로 비율을 유지하면서 요소가 컨텐츠 박스를 최대한 채우도록 크기를 확대한다. object-fit : cover 요소의 가로 세로 비율을 유지하면서 요소의 컨텐츠 박스를 가득 채운다. 요소의 일부가..
[CSS] display 속성 - Flex : flex-item flex에는 두가지 요소가 있다. flex-container : 컨테이너에 적용하는 속성 ( 부모 요소 ) flex-item : 플랙스 컨테이너를 구성하는 아이템에 적용하는 속성 ( 자식 요소 ) flex-item flex-basis : auto, center , .... flex-grow flex-shrink flex align-self : auto , stretch , flex-start , flex-end, center, baseline order z-index Flex Item에 적용하는 속성 1. flex-basis : 유연한 박스의 기본 영역 설정 flex 아이템의 기본 크기를 설정한다. flex-direction : row -> 너비 설정 flex-direction : column -> 높이..

티스토리툴바