찐망고'S 퍼블리싱그리고디자인

안녕하세요 찐망고입니다.오늘은 swiper의 페이징을 두 개 연동하는 작업을 해 볼 건데요.  Expect better you-에스쁘아Expect better you. 독보적이고 생동감있는 프리미엄 메이크업 전문 브랜드, espoirwww.espoir.com swiper로 만들어진 에스쁘아 히어로섹션인데 엇 분명 페이징이 하나죠?보아하니 progressbar로 타입을 지정해 주면 끝날 것 같은데 왜...????라고 할 줄 알고 짠 보세요~?progressbar부분이 터치가 돼요.. 클릭이 됩니다. const visualSwiper = new Swiper(".swiper", { pagination: { el: ".swiper-pagination", clickable: true, }..

안녕하세요 찐망고입니다. 오늘은 자바스크립트 문자열 관련 속성과 메서드를 따로 포스팅 해보려 합니다. 1. 문자열의 길이 length는 함수는 아니고, 숫자가 저장되는 프로퍼티 문자열의 길이를 저장 (갯수) const txt = "Javascript"; console.log(txt.length); // 10 2. 특정 글자에 접근하기 문자열 내 특정 위치에 있는 글자에 접근하려면 [, ] 대괄호를 이용하거나 str.charAt() 메서드이용 위치는 0부터 시작. let str = "Javascript"; //첫 번째 글자 console.log( str[0] ); // J console.log( str.charAt(0) ); // J // 마지막 글자 console.log( str[str.length - ..

안녕하세요 찐망고입니다. 오늘은 자바스크립트에 데이터 형식을 좀 알아볼까요? 자바스크립트에서 값은 항상 문자열이나 숫자형 같은 특정한 자료형에 속합니다. 8가지 기본 자료형이 있고, 자바스크립트의 변수는 자료형에 관계없이 모든 데이터일 수 있습니다. let memo = "hello"; memo = 0123456789; 변수에 저장되는 값의 타입은 언제든지 바꿀 수 있는데 이를 '동적 타입(dynamically typed)' 언어라고 부릅니다. 1. 문자열 문자는 영문자, 숫자, 마침표나 공백 등을 반드시 따옴표 안에 들어가야 하고, 큰따옴표나 작은따옴표든 상관없습니다. let mood = "happy"; //큰따옴표 mood = 'happy'; //작은따옴표 mood = `happy`; //역따옴표(백틱..

안녕하세요 찐망고입니다. 자동롤링 관련 포스팅을 세 개째 하네요? 나는 플러그인을 쓰지 않고 작업하고 싶다 하는 분들은 이 포스팅을 보시오! 세이브더칠드런 지구기후팬클럽 세이브더칠드런 지구기후팬클럽은 아동이 주체가 되어 아티스트 지구의 기후를 지키기 위해 고민하고 실천하고 알리는 아동∙청소년들의 모임입니다. earthemble.sc.or.kr 텍스트가 각자 반대방향으로 자동 롤링 되고 있는데요.. 저는 그냥 한 방향으로만 만들어 보도록 하겠습니다. 작업방법은 어렵지 않아요. js로 해당요소를 복제해서 각각 아이디를 부여하고 위치를 잡아주고 css로 애니메이션을 만들어주면 끝ㅌ트트트트틑 LET’S EARTHEMBLE LET’S EARTHEMBLE LET’S EARTHEMBLE #wrap { width: 1..

안녕하세요 찐망고 입니다. 텍스트자동롤링 jQuery.marquee플러그인이 있어 살짝 가져와 봤어요. 태그라고 해서 텍스트나 이미지를 스크롤링하는 데 사용했었거든요. 그러나 이 태그는 웹표준과 웹접근성에 대한 요구 사항을 충족시키지 못하고 사용자 경험을 저하시키는 등의 이유로 권장되지 안.. 결국 HTML5 명세에서 폐기(deprecated)되었으며, 더 이상 사용하지 않게 되었죠.. 물론 CSS나 Javascript를 사용하여 스크롤링을 구현하게 된 거고요. 너무 쉬어서 일단 포스팅해봅니다. jquery.marquee jQuery plugin to scroll the text like the old traditional marquee http://aamirafridi.com/jquery/jquery-..

안녕하세요 찐망고 입니다. 오늘은 siwper를 이용하여 무한 롤링을 만들어 볼거에요. 이젠 다 swiper로 해결하려는 마음이에요. 구루미비즈 구루미와 함께 고화질 라이브 스트리밍을 시작하세요. biz.gooroomee.com 이미지들이 좌우로 무한 롤링되서 움직입니다. 예전엔 저런 애니메이션을 js로도 하고 css로도 어거지로 만들기도 했는데 swiper를 사용하면 아주 편합니다. 포스팅을 이제서야 하... 일단 이미지를 슬라이드 width값으로 지정하고 싶으면 swiper에서 freemode를 사용하는 것이 좋습니다. swiper는 slidesPerView에 지정된 숫자에 따라 자동으로 width값을 잡는데요. freemode를 사용하게 되면 사용자가 직접 css에서 width값과 여백을 지정해 줘..

CSS Grid Layout-1 안녕하세요 찐망고입니다. 오늘은 그리드 레이아웃에 대해 포스팅을 해볼 건데요. 저는 음 실무에 그나마 더 도움이 될만한 각각의 섹션을 그리드로 짜볼까 하는데요. 수업 중에는 하나의 섹션 uiweb.tistory.com CSS Grid Layout-2 안녕하세요 찐망고입니다. 오늘도 그리드 레이아웃을 이용한 포스팅을 해볼 건데요. 일단 grid에 관련된 이전글 하나 보시고 2023.12.29 - [WEB/CSS] - CSS Grid Layout-1 CSS Grid Layout-1 안녕하세요 찐망고입 uiweb.tistory.com 안녕하세요 찐망고입니다. 오늘은 그리드 아이템 속성만 따로 정리하는 포스팅입니다 ㅎ Grid Items 속성 Grid Items 속성 뜻 grid..

CSS Grid Layout-1 안녕하세요 찐망고입니다. 오늘은 그리드 레이아웃에 대해 포스팅을 해볼 건데요. 저는 음 실무에 그나마 더 도움이 될만한 각각의 섹션을 그리드로 짜볼까 하는데요. 수업 중에는 하나의 섹션 uiweb.tistory.com CSS Grid Layout-2 안녕하세요 찐망고입니다. 오늘도 그리드 레이아웃을 이용한 포스팅을 해볼 건데요. 일단 grid에 관련된 이전글 하나 보시고 2023.12.29 - [WEB/CSS] - CSS Grid Layout-1 CSS Grid Layout-1 안녕하세요 찐망고입 uiweb.tistory.com 안녕하세요 찐망고입니다. 이전에 그리드 레이아웃에 대한 포스팅을 올렸는데요. 오늘은 그리드컨테이너 속성만 따로 정리하는 포스팅입니다 ㅎ displ..

안녕하세요 찐망고입니다.요즘 버튼모양 테두리에도 그라디언트가 들어가는 디자인을 보게 되는데요.쉽게 테두리에 그라디언트를 적용해 보겠습니다.   그라디언트는 원래 image의 영역이에요.그래서 본디 배경색에 그라디언트를 넣는 경우에도 background-image로 적용했거든요.  See the Pen Untitled by 찐망고 (@nnwbliyz-the-styleful) on CodePen." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 a요소의 테두리만 그라디언트로 보이기 위해a요소 자체에 배경이미지로 그라디언트를 넣고,span요소에도 배경색을 넣고 width와 height를 2px씩 줄여서 테두리처럼 보이게 만드는 방법이 있습니다 ㅎㅎ  물론 지금은 border자..

안녕하세요 찐망고입니다. 오늘은 HTML에서 정의 목록을 만들 때 사용하는 dl, dt, dd 요소에 대해 알아볼까요? 정의 목록이란?: description list의 약자로, 정의 목록을 나타냅니다.: description term의 약자로, 정의할 항목(용어)을 나타냅니다.: description description의 약자로, 용어에 대한 설명을 나타냅니다.사전을 예로 들으면 좀 쉬울까요? 사전에서 단어와 그 뜻을 나열하는 방식과 비슷합니다. 예를 들어, 사전에 "사과"라는 단어와 그 뜻을 설명하는 것처럼 말이죠.    dl 요소 안에 들어가는 dt와 dd의 구성은 다양한 방법이 가능합니다.  기본 사용법먼저 기본적인 사용법을 간단한 예제로 살펴보겠습니다. 사과 사과는 빨간색 또는 초록색의 ..