IT정보 웹디자인 유익한 정보

css코딩시 브라우저의 세로( y축)의 스크롤이 항상 보이도록 할 경우 css 퍼블리싱할 경우 화면의 내용이 길지 않아서 한 화면에 나오고 있는데.. 일부 요소에 transition 등의 효과를 사용하여 일시적으로 세로 스크롤이 생겼다가 바로 사라지게 되는 경우 y축 스크롤의 가로 크기만큼 화면이 좌우로 흔들리게 됩니다. 그럴 경우 짧은 내용물의 화면이라도 y축의 스크롤이 항상 보이도록해서 세로 스크롤의 width 만큼 자리를 차지하게 하여 화면 흔들림을 방지할 수 있습니다. 브라우저의 세로( y축)의 스크롤이 항상 보이도록 할 경우 body 쪽에 아래 코드를 적어줍니다. overflow-y: scroll; body { font-family: "맑은 고딕", MalgunGohic, arial, sans-..

반응형웹 반응형 웹에서 가로 픽셀 px 을 %로 계산하는 방법 px => % 값으로 계산하는 방법 자식태그(px) / 부모태그(px) = 결과값 결과값 * 100 = %(퍼센트) 픽셀값을 퍼센트 값으로 구할 수 있다. 반응형 레이아웃 잡을 때 꼭 알아야되는 계산법입니다.

css3 animation 모음 ★ http://www.justinaguilar.com/animations/index.html CSS3 Animation Cheat Sheet - Justin Aguilar If you found this project useful, spread the word on Twitter! Direct your questions, comments, concerns, love letters, and cat videos to @JXTN or to my email. www.justinaguilar.com ★ https://www.minimamente.com/project/magic/ Magic Animations CSS3 www.minimamente.com ★ https://anima..

슬라이더 : swiper https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com CDN 연결 HTML 기본 구조 Slide 1 Slide 2 Slide 3 ... Swiper CSS Styles/Size .swiper { width: 600px; height: 300px; } Initialize Swiper const swiper = new Swiper('.swiper', { // Optional paramet..

sns 버튼 코딩소스 평상시에는 그레이 버튼에서 버튼에 마우스을 올리면 색상이 있는 버튼이 보이도록 처리했다. 방법1 텍스트로 코딩후 css로 백그라운 색상과 형태를 변경하는 방법 (일반적 코딩방법) 방법2 : htm l 코드내에 onmouseover 와 onmouseout 으로 코딩할 수 있다. 이미지 제작하여 코딩한다. 방법3 : html 코드는 단순하게 코딩하고 css 만 사용하여 코딩할 수 있다. 해당 이미지의 그레이톤 버튼에서 hover시 해당이미지 나오도록 한다. 이미지를 제작하여 사용한다.. html코딩 css 코딩 span.bt1 { display: block; width: 50px; height: 50px; line-height: 50px; text-align: center; backgr..

블라캣 brackets - html코딩 에디터 블라캣 brackets html코딩 에디터 https://brackets.io/ A modern, open source code editor that understands web design Brackets is a lightweight, yet powerful, modern text editor. We blend visual tools into the editor so you get the right amount of help when you want it. With new features and extensions released every 3-4 weeks, it's like getting presents all year long. brackets.io..

마콘컴퍼니, AI 활용한 인플루언서 매칭 시스템 ‘MARS 2.0’ 출시 디지털 종합광고대행사 마콘컴퍼니(대표 이화진)가 AI와 빅데이터를 기반으로 한 인플루언서 매칭 시스템인 ‘MARS 2.0’ 솔루션을 출시했다. 마콘컴퍼니의 ‘MARS 2.0’은 2019년에 특허를 취득한 인플루언서 매칭 시스템(MARS)의 업그레이드 버전으로, AI 기술과 빅데이터를 적용한 유튜브 영상 분석 결과까지 추가해 보다 정밀하게 인플루언서 매칭이 가능하게 만든 솔루션이다. 현재 국내·외 인플루언서 마케팅 시장은 매년 급성장하는 추세다. 실제로 글로벌 시장 조사 기관 마켓인사이트 리포트(2022년 8월 30일) 발표에 따르면, 2022년부터 2028년까지 연평균 33.4% 성장하고, 시장 규모는 1431억달러에 이를 것으로 ..

서울대 공대, ‘VR, AR의 개론 및 실습’ 교과목 신설 서울대학교 공과대학(학장 홍유석)이 메타버스 산업을 선도할 융합형 혁신 인재 양성을 위해 ‘VR, AR의 개론 및 실습(이하 VR, AR)’ 교과목을 2학기부터 개설한다고 13일 밝혔다. 3학점 정규 강의로 개설되는 VR, AR 교과목은 공과대학 학생뿐만 아니라 인문·사회대 등 서울대 전체 학생들이 수강할 수 있도록 운영될 예정이다. 서울대 공대가 전공과 관계없이 수강할 수 있는 융합 교과목을 개발한 것은 이번이 처음은 아니다. 서울대 공대는 2018년 2학기, ‘IoT·인공지능·빅데이터 개론 및 실습(이하 IAB)’, 2019년 2학기, ‘사이버보안과 블록체인 개론 및 실습(이하 CSB)’ 교과목 개설을 한 바 있어 이번 VR, AR 교과목이 ..

삼성전자, ‘갤럭시 Z 플립4’·‘갤럭시 Z 폴드4’ 사전 판매 삼성전자가 업그레이드된 성능과 확장된 폴더블 사용성으로 사용자 개개인에게 보다 최적화된 경험을 제공하는 ‘갤럭시 Z 플립4’와 ‘갤럭시 Z 폴드4’ 사전 판매를 16일부터 22일까지 7일간 진행한다. 국내 공식 출시는 26일이다. ‘갤럭시 Z 플립4’는 256GB와 512GB 내장 메모리 모델로 가격은 각각 135만3000원과147만4000원이며 보라 퍼플과 그라파이트, 핑크 골드, 블루 등 4가지 색상으로 출시된다. 또한 ‘갤럭시 Z 플립4 비스포크(Bespoke)’ 에디션도 출시한다. 골드, 실버, 블랙 색상의 프레임과 옐로우, 화이트, 네이비, 카키(khaki), 레드 등 5가지 전·후면 색상으로 75가지 조합이 가능하다(국내는 실버 ..

캔바 사이트를 통하여 애니메이션 문서를 만들수 있다. (mp4로 저장한다. ) 이후 ezgif.com 에서 mp4 에서 gif 파일로 변환할 수 있다. 다양한 이미지와 애니메이션이 제공되는 사이트 캔바.. 우리나라의 미리캔버스와 비슷한 인터페이스를 가지고 있다. https://www.canva.com/ 미리캔버스 보다 다양한 애니메이션을 제공하므로 유용성이 높은거 같다. 자주 이용하게 될 거 같은 느낌. 무료와 유료로 나눠지는데.. 좀더 사용해보고 생각을 해보자..

디자이너들이 많이 찾는 사이트 1. 핀터레스트 https://www.pinterest.co.kr/ Pinterest 요리법, 집 꾸미기 아이디어, 영감을 주는 스타일 등 시도해 볼 만한 아이디어를 찾아서 저장하세요. www.pinterest.co.kr 다양한 아이디어를 검색하고 다른 디자이너들의 아이디어들을 참고해볼 수 있다. 핀터레스트(Pinterest)는 사용자가 스크랩하고자 하는 이미지를 POSTING하고 다른 사용자와 공유하는 소셜 네트워크 서비스이다. 명칭은 핀(Pin)과 인터레스트(Interest)의 합성어이다.