반응형 스타일시트23 [ CSS 응용 ] 자주 사용되는 CSS 프레임워크 정리 CSS 프레임워크는 웹 개발에서 자주 사용되는 CSS 스타일과 구성 요소를 미리 정의하여 개발자들이 쉽고 빠르게 웹 페이지를 구축할 수 있도록 도와주는 도구모음입니다. CSS 프레임워크는 일관된 디자인과 레이아웃을 제공하며, 반응형 웹 디자인, 그리드 시스템, 탐색 메뉴, 버튼 등과 같은 다양한 UI요소를 포함할 수 있습니다. 이를 통해 개발자는 디자인 시간을 줄여 개발부분에 더욱 집중할 수 있으며, 더욱 효율적인 업무가 가능할 것 입니다. CSS 프레임워크 추천 1. Bootstrap 공식홈페이지 : https://getbootstrap.com/ Bootstrap은 가장 인기 있는 CSS 프레임워크 중 하나로, 다양한 UI 컴포넌트와 레이아웃 요소를 제공하여 개발자들이 웹 페이지를 구축하는데 도움을 줍.. 2024. 3. 19. [ 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. [ CSS 입문 ] display 속성 | 개요 display 속성은 요소를 어떻게 보여줄 것인가를 결정합니다. 주로 4가지의 속성값을 사용하고, 이외에도 다양한 속성값들이 존재하는데 실무에서도 객체들을 보여주는 방식에 따라 다양하고 많이 사용되는 속성 중 하나 입니다. 입문부분이기에 기본적인 속성값 4가지만 소개하겠습니다. none : 보이지 않음 block : 블록 박스 inline : 인라인 박스 inline-block : block과 inline의 중간형태 | 사용법 none 태그가 보이지 않게 되고, visibility 속성중 hidden 으로 설정한 것과 달리 영역조차 사라지게 됩니다. block , 태그 등이 이에 해당됩니다. 가로 길이가 기본적으로 100%이며, block인 태그를 이어서 사용하면 줄바꿈이 되어 보입니다. wid.. 2018. 9. 15. [ CSS 입문 ] visibility 속성 | 개요 visibility 속성은 태그의 가시성을 결정합니다. 다음 속성 4가지 값을 가지며, 기본 값으로는 inherit 입니다. visible : 보임 hidden : 숨김 (자신의 영역은 지속됨) collapse : 겹치도록 지정 (테이블의 행과 열 요소만 지정할 수 있으며, 그 외 요소에 지정하면 hidden으로 해석) inherit : 부모 요소의 값을 상속 | 예제 | 결과값 2018. 9. 14. 이전 1 2 3 다음 반응형
