반응형 퍼블리싱12 [ CSS 응용 ] 비율에 맞추어 div 반응형 만들기 영역의 크기를 설정할때 특정한 비율로 반응형(화면 줄이거나 확대)때에도 유지가 되었으면 할때가 많습니다. 이럴때 사용할 수 있는 CSS코드를 알려드립니다. padding을 이용한 비율 조정 1:2 1:1 4:3 16:9 1.5:1 padding을 이용한 비율 조정은 부모객체의 width값을 기준으로 삼습니다. 위 코드를 보면 부모 객체인 container가 있고 그 안에 5가지의 box 클래스의 div를 넣었습니다. 각각 1:2, 1:1, 4:3, 16:9, 1.5:1 비율을 주기 위해 개별 클래스도 적용하였습니다. 기준을 삼는 부모객체의 width값은 최대 500px을 가지고 있으며 width: 100%를 주어 반응형이 가능하도록 적용하였습니다. 그 자식객체에서는 padding을 이용해 높이값을 줄 수.. 2024. 3. 16. [ CSS 응용 ] 마우스 오버 시 확대 되는 카드 리스트 CSS를 이용해 마우스 hover 시 디자인을 변경할 수 있는데, 그 중 요즘 카드 스타일의 디자인을 많이 사용하고 있어 카드 리스트에 마우스를 오버시 카드가 확대되는 형태를 예시로 만들어 보겠습니다. HTML코드 Card 1 Card 2 Card 3 Card 4 Card 5 Card 6 Card 7 Card 8 Card 9 Card 10 우선 html 코드로 전체적인 레이아웃을 설계합니다. 전체 container 안에 card_list의 div를 두고 그안에 총 10개의 card div 객체를 만들었습니다. 각 card 안에는 실질적인 카드 내용을 만들 card_inner의 객체를 두었습니다. 이후 스타일을 가지고 전체 card_list로는 리스트의 크기와 레이아웃을 설계할 예정이고, card는 크기와.. 2024. 3. 15. [ CSS 응용 ] CSS로 텍스트 말줄임(...)으로 처리 방법 정리 (1줄, 2줄) | 개요 일정한 영역안에 텍스트를 넣을때마다 텍스트가 길어짐에 따라 디자인이 깨져버리는 것을 방지하기 위해 CSS를 활용해서도 텍스트를 말줄임 처리를 할 수 있습니다. 데이터를 보내줄때 아에 일정한 길이로 잘라서 보내줄수는 있지만 특수기호나 숫자, 띄어쓰기 등에 의해 길이가 좀 다르게 표현이 되어 본인은 CSS를 이용한 ellipsis(...) 텍스트 말줄임 방식을 좀 더 선호한다. 그러면 텍스트를 어떻게 CSS를 이용해 말줄임(...) 표시를 할 수 있는지 알아보자. | 한 줄 말줄임 표시 .text-box { display: block; /* 객체의 너비 설정 */ white-space: nowrap; /* 자동 줄바꿈 막기 */ overflow: hidden; /* 영역 이상 넘어가면 감춤 처리 *.. 2024. 1. 23. 이전 1 2 다음 반응형
