IT/Web 2023. 5. 2.
CSS HTML - Progressbar 로딩바 구현 예제 소개
로딩바나 프로그레스바를 찾아보면 다양한 소스가 나오긴 한다. 일단 내가 써본 예제를 킵!! 많아봐야 똥이다. 내가 골라둔 걸 일단 저장해두고 활용하는 것이 짱!! https://codepen.io/artboardartisan/pen/VLzKVN Loading Bar A quick and simple loading bar that provides the illusion of a working progress bar.... codepen.io 아주 간단하게 잘 정리된 예제입니다. 역시 능력자들이 많어요! HTML로 프로세스바(Process Bar) 만들어주기 (progress bar css) (tistory.com) HTML로 프로세스바(Process Bar) 만들어주기 (progress bar css) 웹..
IT/Web 2023. 5. 2.
CSS gradient - 색깔 서서히 바뀌는 패턴을 구하고 싶을때
GRADIENT BACKGROUND COLORS 의 패턴을 만들고 싶다면 아래 페이지로 방문해 보세요. 사실 디자이너가 아니니깐 보고 고르는게 최고!! https://www.eggradients.com/gradient/waiters-service Waiter's Service - Eggradients Waiter's Service: #98DE5B > #08E1AE CSS codes: background-color: #08e1ae; background-image: linear-gradient(315deg, #08e1ae 0%, #98de5b 74%); Best Gradients www.eggradients.com 맘에 드는 초록색 패턴을 하나 골라봤다.
IT/Web 2020. 2. 27.
CSS 지식 - em과 rem의 차이
em과 rem의 차이점 구글링 결과, 아래 2개의 사이트만 봐도 100% 이해할 듯 https://indivdot.github.io/css/2016/03/26/emrem.html 반응형 웹을 위한 rem 단위로 디자인하기 em과 rem은 무엇인가? w3c의 css3 스펙 중 distance unit을 살펴봤다. css의 거리 단위는 크게 상대적 길이와 절대적 길이가 있다. 상대적 길이는 em, ex, ch, rem, vw, vh, vmin, vmax가 있고 절대적 길이는 cm, mm, q, in, pt, pc, px가 있다. 대개 크로스 브라우징이나 쉬운 계산 때문에 강제적으로 길이를 px로 많이 사용한다. 여러 디바이스를 모두 대응해야 하는 문제 때문에 em을 사용하기도 indivdot.github.i..
IT/Web 2020. 2. 25.
CSS 한글 폰트 선택하기 - 노토산스, NotoSansKR
CSS 한글 폰트 선택하기 - 노토산스, NotoSansKR 웹화면에 한글을 위해 폰트선택은 필수! 아래 글을 참고하세요. [CSS]웹 폰트 적용하는 방법, 나눔고딕 웹에 적용 [CSS]웹 폰트 적용하는 방법, 나눔고딕 웹에 적용 안녕하세요! 258입니다. 이번 포스팅에는 웹 폰트 적용하는 방법을 알려 드리려고 합니다! 웹 폰트 적용, ... blog.naver.com 한글은 노토산스, 영문/숫자는 다른 폰트로 해주세요...👀 (feat. unicode) 한글은 노토산스, 영문/숫자는 다른 폰트로 해주세요...👀 (feat. unicode) 노토 산스를 사용하다보면 영문과 숫자가 너무 날씬하다는 느낌을 받곤 했다.개인적인 취향으로 1 숫자 아랫부분에 있는 serif를 별로 좋아하지 않는다. 그밖에도 숫자..
IT/Web 2019. 4. 23.
[Bootstrap] CSS 기능: 스타일 태그와 클래스
Bootstrap에서 지원해주고 있는 기타 다른 CSS 기능들인 스타일에 대한 글 소개 완전 강추, 아래 그림과 같이 정리가 너무 잘 되어 있어 초보자도 뿅 갈듯 페이챵하오~ Unikys :: [Bootstrap] CSS 기능: 스타일 태그와 클래스 [Bootstrap] CSS 기능: 스타일 태그와 클래스 이번에는 Bootstrap에서 지원해주고 있는 기타 다른 CSS 기능들인 스타일에 대해서 살펴볼 것이다. 이전의 글에서 언급한대로 Bootstrap의 강점 중 하나는 모든 화면 크기의 브라우저나 기기에 따라서 반응형으로.. unikys.tistory.com 관련된 Bootstrap 의 Grid system 에 관한 글도 꼭 읽어보자!! [Bootstrap] 시작하기, CSS 기능: 그리드 시스템(Gri..
IT/Web 2019. 4. 1.
웹사이트 개발을 위한 에디터 추천 - Brackets
웹사이트 개발을 위한 에디터라고 하네 #html #css #editor 방문해서 설치해 보더라고. Brackets - A modern, open source code editor that understands web design 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 wee..
IT/Web 2019. 3. 28.
html blockquote style
자료를 찾다보니 아래 링크에 몇가지 예제들이 잘 표현되어 있다. https://css-tricks.com/examples/Blockquotes/ Blockquote Examples by CSS-Tricks Better Blockquotes Blockquote examples By CSS-Tricks [DOWNLOAD EXAMPLE] Blockquotes are html elements that are meant to designate when a particular section of text is being taken from another website or other source. Different browsers have different built css-tricks.com 그중에 아래 제일 심..
