반응형 즐거움 넘치는 IT 세계72 [ 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. [ jquery 응용 ] 스크롤 시 상단 고정 메뉴 만들기 사이트를 제작하거나 컨텐츠를 제작할때 자주 사용되는 스크롤 할때 브라우저 상단에 고정되는 메뉴를 만들어 볼까 합니다. 최초부터 상단에 붙어 있는 메뉴도 있겠지만, 저는 중간에 고정이 될 메뉴가 있는 영역이 상단에 붙으면 그때부터 고정되어 같이 내려오는 형태로 제작을 해보려 합니다. HTML 코드 스크롤 상단 메뉴 고정하기 menu 1 menu 2 menu 3 menu 4 스크롤 영역 html 코드는 우선 페이지에 대한 구조를 설정합니다. 상단에는 header라는 클래스를 가진 영역에 텍스트가 있고, 그 밑에 tabs라는 div영역을 메뉴라고 생각하고 해당 영역을 스크롤 시 고정되는 영역으로 만들어 보려합니다. 그리고 contents라는 영역은 충분한 스크롤이 가능하게끔 height값을 만들어주기 위한 영.. 2024. 3. 15. [ jquery 응용 ] scrollTop animate 버튼 구현하기(Top버튼) 우측 하단 '위로 가기' 버튼 (Top버튼) 모바일이나 다른 사이트에서 자주 보이는 탑버튼은 어떻게 구현될까요? 요즘 스크롤을 많이 사용하는 사이트들이 많기도 하고 모바일에서 물론 상단으로 이동하는 기능들이 기종/브라우저 별로 가지고 있지만 사이트의 편리 기능으로 아직까지 많이 사용하는 기능입니다. 단순하게 버튼을 누르면 짠(!) 하고 바로 위로 이동하는 앵커형태로 사용할 수 도 있지만, 정적인것보단 약간의 애니메이션 효과를 추가하여 최상단 일때는 불필요하기에 감추고, 스크롤을 시작하면 버튼을 보여주고, 눌렀을때는 최상단까지 스르륵 올라가도록 구현해 보겠습니다. HTML 코드 위로 우선 내용은 없지만 전체를 감싸는 'container'라는 클래스로 객체를 만들고, 그 안에 'topBtn' 이라는 아이디를.. 2024. 3. 14. [ CSS 응용 ] CSS로 텍스트 말줄임(...)으로 처리 방법 정리 (1줄, 2줄) | 개요 일정한 영역안에 텍스트를 넣을때마다 텍스트가 길어짐에 따라 디자인이 깨져버리는 것을 방지하기 위해 CSS를 활용해서도 텍스트를 말줄임 처리를 할 수 있습니다. 데이터를 보내줄때 아에 일정한 길이로 잘라서 보내줄수는 있지만 특수기호나 숫자, 띄어쓰기 등에 의해 길이가 좀 다르게 표현이 되어 본인은 CSS를 이용한 ellipsis(...) 텍스트 말줄임 방식을 좀 더 선호한다. 그러면 텍스트를 어떻게 CSS를 이용해 말줄임(...) 표시를 할 수 있는지 알아보자. | 한 줄 말줄임 표시 .text-box { display: block; /* 객체의 너비 설정 */ white-space: nowrap; /* 자동 줄바꿈 막기 */ overflow: hidden; /* 영역 이상 넘어가면 감춤 처리 *.. 2024. 1. 23. [ jquery 기초 ] jquery ajax | Ajax란? Asynchronous JavaScript and XML 의 약자 자바스크립트를 이용해서 비동기식으로 서버와 통신하는 방식. 이 때 XML을 이용한다. 꼭 XML을 이용할 필요는 없고, 최근에는 json을 더 많이 이용한다. 비동기식이란 여러가지 일이 동시적으로 발생한다는 뜻으로, 서버와 통신하는 동안 다른 작업을 할 수 있다는 의미. | .ajax(settings) jQuery를 이용한 ajax통신의 가장 기본적인 API 주요속성 data : 서버에 전송할 데이터, key/value 형식의 객체 dataType : 서버가 리턴하는 데이터 타입 (xml, json, script, html) type : 서버로 전송하는 데이터의 타입 (POST, GET) url : 데이터를 전송할 URL .. 2019. 10. 13. [ jquery 기초 ] jquery Animation - 애니메이션 | 효과란? 자바스크립트와 CSS를 이용해서 HTML엘리먼트에 동적인 효과를 줄 수 있다. jQuery의 효과 메소드를 호출하는 것만으로 간단히 효과를 줄 수 있다. 예제1) - https://jsfiddle.net/sunghun/8nt17wdk/3/ target 예제2) - https://jsfiddle.net/sunghun/8nt17wdk/4/ » Run Hello! 2019. 10. 12. [ jquery 기초 ] jquery Event - 고급 메서드 .live() .live( eventType, handler ) .live( eventType, eventData, handler ) .live( events ) live() 메서드의 경우 원래는 jQuery의 플러그인으로 개발되어 사용이 되었으나, 너무나 좋은 기능 때문인지 “1.3” 이후 버전의 jQuery에는 기본 기능으로 추가 되었습니다. .click(), .bind() 와 같은 이벤트 메서드에서는 이미 로드가 완료된 개체에 이벤트를 주었다면, .live() 메서드의 경우 동적으로 생성될 개체나 요소에 대해서도 이벤트를 맵핑 할 수 있습니다. $(“a”).click(function() { alert(‘click a’); }); 의 경우 HTML 문서에 존재하는 “a”요소를 찾아 마우스 클릭 이벤트.. 2019. 10. 11. 이전 1 2 3 4 5 ··· 8 다음 반응형
