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

안녕하세요 찐망고입니다. 오늘은 position속성 중 sticky를 써볼 건데요.. position관련 CSS를 포스팅 해놓은 게 없네요? 이런;; html에서 포지션역할은 여러 가지가 있습니다. 잘 쓰면 너무 좋은 데 absolute를 남발하는 개발자들 보면 단전에서부터 화가.. 요즘은 그러신 분 안 계시죠? sticky를 아직 안 써본 분이 계시려나.. 아마 ie에선 지원을 안 해서 쓰고 싶어도 못쓰는 그런일들이 있었죠. sticky속성은 relative와 fixed가 같이 적용된다고 생각하면 되는데요. https://www.w3schools.com/css/tryit.asp?filename=trycss_position_sticky W3Schools online HTML editor The W3Sch..

안녕하세요 찐망고입니다. 이전에 xeicon관련 포스팅을 했었는데요. 드디어 다음 포스팅을.. 2021.07.23 - [WEB/CSS] - 웹에서 사용가능한 웹아이콘 적용방법 - XEIcon 웹에서 사용가능한 웹아이콘 적용방법 - XEIcon 안녕하세요~ 드디어 3일차 글을 쓰게 된 찐망고입니다. 오늘은 웹에서 사용하기 편한 웹아이콘을 적용하는 방법에 대해서 포스팅을 해보려고 합니다. 제가 예전에 자주 쓰던 사이트는 폰트어썸 uiweb.tistory.com 요즘은 워낙 svg가 대세이긴 해서 웹에서 사용하는 아이콘들이 svg가 많은데요. 아직도 곳곳에선 xeicon이나 구글아이콘 폰트어썸 등을 사용합니다. 구글아이콘은 사용하기는 편한데 종류가 별로 없어서..ㅎㅎ 워낙 다른 블로그 포스팅에 html을 이용..

안녕하세요 찐망고입니다. 오늘은 폰트 단위 관련 포스팅을 시작해볼게요 HTML에서 단위는 상대적인수치와 절대적인수치로 나뉘는데요. div { width: 200px; height: 200px; font-size: 16px; } div > span { display: block; width: 100%; height: 80%; font-size: 1em; } span이 div의 자식이라고 가정할 때 %는 부모요소의 크기를 기준으로 들어갑니다. width와 height모두 200px이 되겠죠? 본인이 absolute인 경우엔 relative의 크기를 상속받기도 합니다. 참고로 height요소를 %로 지정할 경우 무조건 상속받을 부모에게 높이값이 존재해야 합니다. px말고 가장 많이 사용하는 폰트 단위는 em과..

안녕하세요 찐망고입니다. 오늘도 간단한 그리드레이아웃을 연습한 샘플을 보여드릴게요.일단 그리드 레이아웃이 처음이라고 한다면 이전글을 보고 오시고..  CSS Grid Container 속성CSS Grid Layout-1 안녕하세요 찐망고입니다. 오늘은 그리드 레이아웃에 대해 포스팅을 해볼 건데요. 저는 음 실무에 그나마 더 도움이 될만한 각각의 섹션을 그리드로 짜볼까 하는데요. 수업 중에는uiweb.tistory.com  CSS Grid Items 속성CSS Grid Layout-1 안녕하세요 찐망고입니다. 오늘은 그리드 레이아웃에 대해 포스팅을 해볼 건데요. 저는 음 실무에 그나마 더 도움이 될만한 각각의 섹션을 그리드로 짜볼까 하는데요. 수업 중에는uiweb.tist..

안녕하세요 찐망고 입니다. 요즘은 디자인 시안을 모바일 버전부터 먼저 뽑는다는 이야기가 있죠? 제가 전에 포스팅했던 단위 dp에 대해서 이해하고 나면, 디자인 시안은 1 배율에 맞는 화면으로 작업하는 게 좋다는 것을 알 수 있을 거예요. 단위 DP란 뭘까요?안녕하세요 찐망고 입니다. 오늘은 안드로이드와 iOS단위에 대해 포스팅해보겠습니다. 일단 해상도를 좀 알아볼까 해요 해상도는 화면에 보이는 픽셀의 총 개수를 이야기합니다. 요즘 나오는 스uiweb.tistory.com 보통 1배율은 안드로이드 해상도 기준 360*640, iOS는 375*812를 기준으로 합니다. 그렇다면 마크업은 어디까지 해야 할까요?  Statcounter에서 우리나라 운영체제 시장점유율을 검색해 보면, 2022년까지만 해도 윈도의..

안녕하세요 찐망고 입니다. 오늘은 모바일 뷰포트 관련 이야기를 포스팅 해볼게요 vw와 vh는 뷰포트 너비와 높이를 이야기합니다. 폰트나 여백이나 길이의 단위를 뷰포트 단위를 사용하게 되면, 아무래도 브라우저 사이즈에 영향을 받겠죠? 1vw는 뷰포트 너비를 기준으로 100분의 1인데 만약 브라우저 사이즈가 1850px이라면 1vw는 18.5px이라고 생각하면 됩니다. 1vh는 뷰포트 높이를 기준으로 100분의 1이고 브라우저 높이에 따라 변하겠죠? 요소 높이에 100vh를 주게 되면 전체 높이에 꽉 차게 작업을 할 수 있는데 모바일에선 이슈가 좀 있습니다. 모바일 주소 표시줄 영역 때문인데요. 저렇게 주소표시줄 때문에 밀리는 현상 많이 보셨나요? ㅎㅎ 그래서 풀페이지 사이트 만들 때도 저런 현상들 때문에 ..

안녕하세요 찐망고입니다.오늘은 마우스 hover시 텍스트에 밑줄이 들어가는 작업을 해볼 거예요 https://hobancf.or.kr/ 호반문화재단Creating culture, connecting hearts.www.hobancf.or.kr  https://www.yesan.go.kr/chusa.do 추사기념관추사 김정희의 지혜와 고고함이 배어있는 예산군 추사고택 추사기념관www.yesan.go.kr   저런 밑줄 효과를 주기 전에 기본적으로 css를 이용하면여러 가지 방법으로 밑줄을 나오게 할 수 있는데요.아래 네 가지 방법이 있습니다.text-decorationborder-bottom::before나 ::after 사용background-image를 이용한 그라디언트 사용 첫 번째 방법인 text-..

안녕하세요 찐망고입니다. addEventListener()는 JavaScript에서 이벤트 처리를 위해 사용되는 메서드인데요. 이 메서드를 사용하면 HTML 요소에 이벤트 리스너를 추가할 수 있습니다. // element.addEventListener(event, function, useCapture); window.addEventListener('scroll', function() {}) function toggleOnClass() { header.classList.add("on"); } const btn = document.querySelector("button") btn.addEventListener("mouseenter", toggleOnClass) 클릭이벤트 (click): 사용자가 마우스로 요..

안녕하세요 찐망고입니다. CSS 도 선택자가 중요하잖아요! 선택자 관련 CSS 만 해도 엄청 많죠~ `document.querySelector()`는 웹 개발에서 사용되는 JavaScript의 메서드 중 하나입니다. 문서 객체 모델(Document Object Model, DOM)에서 요소를 선택하는 데 사용하죠. 이 메서드는 CSS 선택자를 통해 문서 내에서 요소를 선택하고 반환하는데요, CSS선택자를 사용하여 원하는 요소를 찾을 수 있습니다. 일치하는 요소가 없는 경우엔 `null`을 반환합니다. const elementId = document.querySelector("#myElement"); // id선택자 요소 선택 const elementClass = document.querySelector(..

안녕하세요 찐망고입니다. 클론 코딩을 하던, 클론 디자인을 하던 레퍼런스를 찾다 보면 전체 사이트를 캡처해야 하는 상황이 있단 말이죠~ 당연히 알고 있을 거라 생각했는데 생각보다 몰라서 못쓰던 사람들도 많아 포스팅해봅니다. chrome 웹스토어에 접속합니다. https://chromewebstore.google.com/category/extensions?utm_source=ext_sidebar&hl=ko&pli=1 Chrome Web Store 브라우저에 새로운 기능을 추가하고 탐색 환경을 맞춤설정합니다. chromewebstore.google.com 티스토리 화면을 캡처해 봤는데요. 한 장의 이미지나 혹은 pdf로 저장이 가능합니다. 참고로 fixed 걸린 요소들은 연속으로 캡처되는 단점이 있습니다~