css (12) 썸네일형 리스트형 border-radius CSS의 border-radius 속성은 박스 모델의 코너를 부드럽게 처리하기 위한 속성입니다.코너 부분에 원이 있다고 가정해서 원의 반지름 값을 지정하면 코너를 둥글게 처리할 수 있죠. 예를 들어, 다음과 같이 border-radius 값을 24px이라고 지정하면 네 방향 코너에 반지름 24px인 원이 있는 것처럼 둥글게 만들어 줍니다. Border radius 만일 안과 밖에 테두리가 있을 경우에는 다음처럼 표시하려면 border-radius 값을 어떻게 지정해야 할까요? 안과 밖의 요소에 같은 border-radius 값을 지정해 보겠습니다. Border radius 안쪽 와 바깥쪽 에 같은 border-radius 값을 사용했는데 모양이 어긋나 .. object-fit 속성 CSS의 object-fit 속성은 이미지나 비디오와 같은 대체 요소(replaced element)의 콘텐츠 크기를 어떻게 조정할지 결정하는데 사용됩니다. 이 속성은 요소의 가로 세로 비율을 유지하면서, 지정된 너비와 높이에 맞게 콘텐츠를 채우거나, 콘텐츠를 자르거나, 또는 콘텐츠의 원래 크기를 유지하는 등의 동작을 정의합니다. object-fit 속성을 사용하면, 개발자는 콘텐츠의 가로 세로 비율을 유지하면서도, 다양한 디스플레이 크기와 해상도에 맞게 콘텐츠를 적절히 조정할 수 있습니다. 이를 통해 사용자에게 보다 일관된 시각적 경험을 제공할 수 있습니다. object-fit 속성은 주로 비주얼 콘텐츠를 다룰 때 유용하며, 웹 개발에서 사용자 인터페이스의 시각적 일관성을 유지하는 데 큰 도움이 됩니다.. CSS 함수란 CSS에서 함수의 사용은 CSS의 진화와 함께 점차 확장되어 왔습니다. 초기의 CSS는 매우 단순한 스타일링 기능만을 제공했습니다. 예를 들어, CSS1(1996년 발표)에서는 주로 색상, 폰트, 간격 등의 기본적인 시각적 속성을 정의하는 데 초점을 맞췄습니다. 그러나 웹의 발전과 함께 더 복잡하고 다양한 디자인 요구가 생겨나기 시작했고, 이를 효율적으로 처리하기 위해 CSS도 발전해야 했습니다. CSS 함수가 등장한 이유는 몇 가지로 요약할 수 있습니다: 디자인의 복잡성 증가: 웹 페이지와 애플리케이션의 디자인이 점점 더 복잡해지면서, 개발자와 디자이너는 스타일을 더 세밀하게 제어할 수 있는 방법이 필요했습니다. 유지 관리의 용이성: 함수를 사용하면 코드의 중복을 줄이고, 유지 관리를 용이하게 할 수 .. 웹 요소 가운데로 배치하기 방법1) 웹 요소의 너비(width) 값을 안다면 요소의 width 값을 지정했다면 좌우의 마진을 auto로 지정해서 가로로 중앙에 배치할 수 있습니다. 단, 이 방법은 width 값을 기준으로 하기 때문에 가로 방향으로만 중앙 정렬합니다. 방법 2) 요소의 너비(width) 값을 모른다면 가로로 중앙에 배치하려면 부모 요소의 50% 위치로 옮겼다가 (시작점이 50% 위치가 됨) 다시 요소 너비의 반을 왼쪽으로 이동시킵니다. 그림으로 보면 이런 형태가 되겠죠. 같은 방법으로 세로로 가운데 배치할 수 있습니다. #wrapper { width: 600px; height: 200px; position: relative; /* 부모 요소에 position: relative 포함 */ border: 1px sol.. 계산식을 사용하는 CSS 함수 - min(), max(), clamp() min() 함수, max() 함수 괄호 안의 값이나 계산식을 비교해서 작은 값이나 큰 값을 적용합니다. 예를 들어, box의 크기를 500px과 50% 를 비교해서 작은 값을 선택하거나 큰 값을 선택하도록 할 수 있습니다. .box1 { width: min(500px, 50%); } .box2 { width: max(500px, 50%); } 위 소스를 사용했을 때, 화면 너비가 1600px 이라면 .box1과 .box2의 너비는 어떻게 될까요? .box1은 500px과 50%(=800px) 중 작은 값이므로 너비가 500px이 되고, .box2는 500px과 50%(=800px)중 큰 값이므로 너비가 800px이 됩니다. clamp() 함수 반응형 웹이 일반화되면서 화면 크기에 반응하기 위한 CSS 기.. 계산식을 사용하는 CSS 함수 - calc() 최근에는 CSS에서 속성 값을 지정할 때 특정한 값이 아니라 계산식을 사용할 수도 있습니다. +, -, *, / 를 계산한 결과가 속성 값이 되는 것이죠. 예를 들어, 다음 소스는 요소의 너비를 부모 요소 너비 전체에서 200px을 뺀 만큼 지정하는 것입니다. 반응형으로 동작해서, 부모 요소의 너비가 얼마가 되든 무조건 200px을 뺀 나머지 크기를 너비로 사용하죠. 웹 화면에서 왼쪽에 200px 너비만큼 내비게이션이 있을 경우 사용하면 되겠죠? .element { width: calc(100% - 200px); } calc() 함수의 매개변수 자리에는 계산식이 들어갑니다. 이 때 주의할 것은 '+'와 '-' 연산자를 사용할 경우 반드시 연산자 앞뒤로 공백이 있어야 한다는 점입니다. +와 -는 양의 숫자.. 좌우로 왔다갔다 하는 CSS 애니메이션 1. CSS 애니메이션 만들기 CSS에서 기본 애니메이션을 만들려면 @keyframes 규칙을 사용하여 애니메이션을 정의한 다음 animation 속성을 사용하여 요소에 적용합니다. 다음은 box 요소를 왼쪽에서 오른쪽으로 이동시키는 간단한 애니메이션의 예입니다. /* 애니메이션 정의하기 */ @keyframes move-right { 0% { left: 0; } 100% { left: calc(100% - 50px); } } @keyframes move-left { 0% { left: calc(100% - 50px); } 100% { left: 0; } } /* 애니메이션 적용하기 */ .box { width: 50px; height: 50px; background-color: red; position.. 박스 모델 테두리에 이미지 넣기 박스 모델 테두리에 이미지를 넣기 위해서는 사용할 이미지를 지정하고, 그 이미지를 필요한만큼 쪼개서 가져와야 합니다. 여기서 중요한 것은 원본 이미지를 어떻게 나눌까, 하는 것입니다. 관련된 속성을 하나씩 살펴보면서 어떻게 적용되는지 살펴보죠. border-images-source 속성 박스 모델 테두리에 어떤 이미지를 넣을지 지정합니다. 만일 테두리 이미지를 가져오지 못할 경우를 대비해서 일반적인 테두리 스타일도 작성해야 합니다. 기본값은 none입니다. .box { width:300px; height: 300px; background-color: #eee; border: 36px solid orange; border-image-source : url('images/border.png’); } bord.. 텍스트 안에 배경 이미지 넣기 CSS의 background-clip 속성을 이용하면 박스 모델 안에서 배경 이미지를 어디까지 표시할지 결정할 수 있습니다. background-clip: border-box | padding-box | content-box 예를 들어, 아래 소스에서 .bg1 스타일은 배경 이미지를 border-box까지 표시하죠 See the Pen bg-clip-1 by do.it.html5 (@kyrieko) on CodePen. 이 속성을 사용해서 텍스트 안에 배경 이미지를 넣을 수도 있습니다. 이 경우에는 background-clip 속성을 text로 지정하는데, -webkit- 접두어가 붙은 background-clip 속성도 함께 사용해야 합니다. 그리고 글자색은 trasparent로 사용합니다. backg.. css 단위 - 길이 CSS에서 글자 크기나 마진, 패딩, 너비 등 길이와 관련된 값을 설정할 때 여러 단위를 많이 사용합니다. 각 단위가 어떻게 다른지 확인해 보도록 하겠습니다. 1) px 단위 CSS를 공부할 때 처음에 사용하는 단위가 px 단위죠. px단위는 절대적인 크기를 가지기 때문에 웹 브라우저 창의 크기와 상관없이 항상 같은 크기를 유지합니다. 웹 요소의 너비 값을 px로 지정하면 웹 브라우저 화면이 작아질 경우 일부가 가려질 수도 있죠. 다음 예제는 .pixel의 너비를 800px로 지정한 것인데, 브라우저 창 너비가 넓으면 .pixel 요소가 전부 보이지만 브라우저 창의 너비가 좁을 경우에는 .pixel 요소가 다 보이지 않고 가려집니다. Hello, Everyone! 2) % 단위 % 단위를 사용하는 것은,.. 이전 1 2 다음
