본문 바로가기
반응형

CSS34

[ CSS 응용 ] CSS Media Query를 활용한 반응형 디자인 가이드 반응형 웹 디자인은 현대 웹 개발에서 필수적인 요소로 자리 잡았습니다. 사용자들은 다양한 기기와 화면 크기에서 웹 페이지를 열람하므로, 모든 장치에서 최적화된 사용자 경험을 제공해야 합니다. 이를 위해 CSS Media Query를 활용하여 반응형 웹 디자인을 구현할 수 있습니다. CSS Media Query란 CSS Media Query 는 미디어 타입과 특정 조건에 따라 CSS 스타일을 적용하는 기능입니다. 미디어 타입은 화면, 프린터, 휴대폰 등 다양한 장치를 지정할 수 있으며, 조건은 화면 너비, 해상도, 방향 등을 포함할 수 있습니다. 미디어 유형 all 모든 장치에 적합 print 인쇄 용도, 인쇄 결과물 및 출력 미리보기 화면에 표시 중인 문서 screen 컴퓨터 스크린을 위한 용도, 주로 .. 2024. 3. 19.
[ 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.
[ CSS 응용 ] DIV 중앙정렬 방법 총정리 | 개요 사이트를 디자인 하다보면 여러가지 정렬방식들이 기초적인 text-align속성과 position속성으로 정렬을 할 수 있다고 설명을 해드린적이 있습니다. 그렇다면 이번엔 조금 더 들어가 Div객체를 화면에 중앙에 정렬할 수 있는 부분을 살펴 보겠습니다. 여러가지의 방법들을 모두 정리하면 좋겠지만 많이 쓰여지는 방법을 정리해보도록 하겠습니다. | 예제 1. position:absolute와 margin값을 이용한 중앙정렬 이 내용의 장점이라함은 모든 브라우저상에서 표현이 가능합니다. 단, 고정적인 width값과 height값이 있어야지만 가능한 상태입니다. (IE7 이상) HTML부분 box 위와 같이 "container"라는 div 안에서 "div_box"라는 div를 중앙정렬 하기 위해 먼저 .. 2018. 11. 14.
[ CSS 입문 ] cursor 속성 | 개요 cursor 속성을 이용하면 해당 태그 위에 마우스를 위치할 때 마우스 커서 모양을 마음대로 바꿀 수 있습니다. | 예제 Auto Crosshair Default Pointer Move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize Text Wait Help | 결과값 Auto Crosshair Default Pointer Move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize Text Wait Help 2018. 9. 19.
[ CSS 입문 ] position 속성 | 개요 position 속성은 태그의 위치를 잡는 속성이며 5가지의 값을 갖습니다. CSS를 공부하면서 가장 어려웠던 부분이고 실무에 있어서도 많이 사용되는 속성으로 꼭 정확하게 공부할 필요가 있는 속성입니다. 기본적인 html로 레이아웃을 잡는다면 그 안에 요소들은 이전 margin, padding속성과 더불어 position속성으로 위치를 잡게 되는 경우가 많으며, 이 속성을 잘 이용하면 다양한 화면 구성을 할 수 있습니다. static : 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임으로 설정해 줄 수 없습니다. absolute : 절대 좌표와 함께 위치를 지정해 줄 수 있습니다. relative : 원래 있던 위치를 기준으로 좌표르르 지정합니다. fixed : 스크롤과 상관없이.. 2018. 9. 18.
[ CSS 입문 ] clear속성 | 개요 float 속성을 통해 태그를 부유시킨 이후 문서의 흐름을 중간에서 끊기(제거)위해 사용됩니다. 방향에 따라 3가지 속성으로 사용됩니다. left : 왼쪽 부유 제거 right : 오른쪽 부유 제거 both : 양쪽 모두 제거 | 예제 This is first line with floating image. This is second line with cleared property. | 결과값 This is first line with floating image. This is second line with cleared property. | 레이아웃에서의 clear float 속성이 레이아웃에서 많이 사용되고 있는데, clear속성도 float를 레이아웃에서 사용하며 발생되는 문제를 해결하기 위.. 2018. 9. 17.
[ CSS 입문 ] float 속성 | 개요 float 라는 단어는 원래 '뜨다'라는 의미이며, 원래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다. inherit : 부모 요소에서 상속 left : 왼쪽에서 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름. right : 오른쪽에서 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름. 이후 요소에 clear속성이 있으면 페이지 흐름이 달라짐. none이 아니라면 display속성은 무시. none : 요소를 부유시키지 않음 left와 right를 통해 부유속성을 지정시 display속성은 무시 됩니다. (none 제외) 또한 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라집니.. 2018. 9. 16.
반응형

티스토리툴바