전달받은 이미지는 왼쪽의 이미지처럼 위아래에 검은색 부분이 있습니다. 이 부분을 제외하고 위의 이미처럼 내용만 표시되게 하려면 어떻게 해야할까요. 방법은 object-fit이었습니다. object-fit: img 도는 video를 컨테이너 크기에 맞게 리사이징하는 속성입니다. fill: 기본값, 주어진 너비에 맞게 늘리고 줄입니다 contain: 주어진 너비에 맞게 리사이징하지만 주어진 비율을 유지합니다. cover: 주어진 비율을 유지하고 주어진 너비를 꽉 채웁니다. none: 리사이징하지 않습니다. scale-down: none 또는 contain의 가장 작은 버전으로 크기를 줄입니다. 그런데 height이 %이면 object-fit이 적용되지 않습니다.. 왜일까요. height이 %이면 예상치 못한..

word-break 한 줄의 끝에 도달할 때 단어가 어떻게 분리되어야 하는지를 지정하는 속성 영어나 라틴어 같은 알파벳으로 이루어진 단어의 경우 기본적인 분리 규칙을 따라가도록 설정 normal(기본값) 단어가 끝나지 않으면 줄 바꿈을 허용하지 않습니다. break-all 단어가 끝나지 않더라도 줄 바꿈을 허용하여, 글자들을 가능한 한 많이 한 줄에 넣으려고 할 때 사용됩니다. keep-all 단어가 끝나기 전까지는 줄바꿈을 하지않으며, 단어 내부의 문자들이 한줄에 모두 포함되도록 합니다. 기본적으로 `normal` 속성을 사용할 경우, 단어와 단어 사이에서 자연스럽게 줄 바꿈이 이루어집니다. break-word 단어가 행의 끝에 닿았을 때, 자동으로 줄 바꿈이 되도록 합니다. 일반적으로는 분리할 수 없..

다양한 CSS 프로퍼티의 값으로써 사용됩니다. CSS2 이후에 만들어졌으며, 현재의 모든 CSS 버전에서 사용가능합니다. 종류 attr(): 선택된 요소의 어트리뷰트의 값을 리턴 a:after {content: " (" attr(href) ")";} calc(): CSS 프로퍼티 값 계산 수행 width: calc(100% - 100px); conic-gradient(): conic gradient를 생성 background-image: conic-gradient(red, yellow, green); cubic-bezier(): Bezier curb 정의 transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); hsl(): Hue-Saturation-..

animation 요소는 스타일을 서시히 변화시켜주는 것을 말합니다. CSS 속성을 원하는 만큼 많이, 원하는 만큼 여러 번 변경할 수 있습니다. CSS Animation 을 사용하려면 먼저 Animation에 대한 몇 가지 @keyframes을 지정해야 합니다. 키프레임은 요소가 특정 시간에 가질 스타일을 나타냅니다. 예를 들어, 요소의 크기, 위치, 색상 등을 지정하여 특정 시간에 어떻게 보일지를 설정할 수 있습니다. 이러한 키프레임을 사용하여 요소의 애니메이션을 만들 수 있으며, 이를 이용하여 요소가 부드럽게 움직이거나 변화하는 효과를 줄 수 있습니다. @keyframes animation-name animation-duration animation-delay animation-iteration-c..

주어진 기간 동안 속성값을 부드럽게 변경할 수 있도록 해줍니다. 예시를 만들 때 영상을 찍어 gif로 만들어서 첨부하면 보시는데 편하시겠지만 시간이 오래 걸리는 관계로 만들지 못했습니다. Transition 의 프로퍼티 종류 transition transition-delay transition-duration transition-property transition-timing-function transition transition효과를 주기위해서는 두개의 값이 필요합니다. 효과를 주길 원하는 CSS 속성(transition-property) 효과의 지속 시간(transition-duration) 참고: 지속시간의 명확하지 않다면 기본값이 0이 되어 trasition 효과가 발생하지 않습니다. 너비 100..

3D transform 메소드 종류 rotateX() roetateY() rotateZ() rotateX() 주어진 회전율에 따라 x축을 회전합니다. origin: x축을 기준으로 180도 회전시켰습니다. rotateY() y축을 기준으로 회전합니다. origin: y축으로 180도 회전시켜보겠습니다. rotateZ() origin: 43도 만큼 z축을 회전했습니다.

transform, transitions, animations, keyframes Transform 요소를 이동(move), rotate(회전), scale(), skew(비튼다) 기능 translate() 요소를 현재 위치에서(x축과 y축에 대한 지정된 매개변수에 따라) 이동합니다. origin: 현재 위치에서 x축을 50px, y축을 100px이동해보겠습니다. 인자로 음수값도 가능합니다. rotate() 주어진 각도에 따라 요소를 시계 방향 또는 반시계 방향으로 회전합니다. origin: rotate의 인자값에 따라 시계방향으로 회전합니다. rotate에 인자로 음의 값을 사용하면 반시계 방향으로 회전합니다. scale() 지정된 매개 변수에 따라 요소의 크기를 늘리거나 줄입니다. origin: 너비..

position 속성은 요소의 위치를 지정합니다. position은 웹 페이지를 만들때 정말 자주 사용하게 되는데요. 디자인 시안에 맞춰 디자인을 적용할 때 position이 없으면 어떻게 됬을까 생각듭니다. 그런데 정확히 스크롤을 내릴때라던지 구체적으로 각각 뭐가 다른지 잘 모르고 사용해왔기 때문에 오늘은 제 궁금증을 전부 풀어보는 시간을 가져보려합니다. value의 종류 static relative absoulute fixed sticky position: static; position을 지정하지 않으면 기본으로 설정되는 값 입니다. top, bottom, left, right을 사용할 수 없습니다. 일반적인 페이지 흐름에 따라 위치하게 됩니다. top속성을 넣어보겠습니다. position: rela..