Bumlog

1. Tailwind CSS 1.1 Tailwind가 뭐지? ‘HTML을 떠나지 않고 빠르게 빌드하는 모던 웹사이트’ 말 그대로 CSS 문서로 가지 않고 오직 HTML 문서 내에서 웹 사이트 구축이 가능합니다. 이것을 실현하기 위한 기법이 utility-first 입니다. 미리 구현된 CSS를 사용합니다. 1.2 Tailwind가 뜨고 있다고? 1.2.1 커스터마이징한 웹사이트를 만들기 쉽다! Tailwind CSS는 자체 디자인 시안을 가지고 만들 수가 있습니다. 사용자가 필요할 것 같은 CSS를 이미 다 만들어놓고, 언제든 조각처럼 사용할 수 있도록 제공해줍니다. (이미 있는 디자인을 사용하게 하는 부트스트랩과 포지셔닝이 다릅니다.) 따라서 자체 디자인을 사용하기 원하는 기업들은 점점 테일윈드를 사용..

1. Sass란? 1.1 Sass를 한 마디로 요약한다면... CSS의 확장프로그램으로, CSS를 더 다양하게 활용하기 위하여 기존 css를 "HTML처럼 구조화"하여 적을 수 있고, "JavaScript"처럼 문법을 적용할 수도 있다. 1.2 Sass를 사용하는 이유 위에서 언급했듯이 Sass는 HTML과 같은 특성과 JS같은 특성 2가지가 있다. 따라서 HTML처럼 구조화를 통해 가독성을 높이고, JavaScript처럼 반복문이나 조건문 등을 이용해 코드의 길이를 줄여주어 코드의 효율을 높여줄 수 있다. 2. Scss의 특징을 알아보자! 2.1 특징(1) : 여러 파일로 나누어 작성합니다. 2.1.1 파일을 나누는 방법 파일을 나누는 기준: Scss는 레이아웃(ex. header,main,footer..

브라우저 / 테블릿 / 모바일 반응형 헷갈렸던 부분 테블릿과 모바일 부분에서 자꾸 가로 스크롤이 생겼다. 문제는 처음에 부모요소와 자식요소 모두에 width가 rem 등으로 지정되어 있어서 발생한 듯 하다. 부모요소에 width:100vw를 주고 자식요소에 width를 삭제 해주니 문제가 해결되었다. 참고영상 보기 이 2가지 영상을 보고 참고해서 다시 작성해보는 것도 좋은 방법일 듯 하다. https://www.youtube.com/watch?v=xWMKz9NCD0k https://www.youtube.com/watch?v=AfxL9OKBBCU&start=3

1. 국가별 지도 세계지도와 같은 다른 국가별 지도를 SVG파일로 다운 받기 위해서 아래 사이트를 참고하면 됩니다. https://www.amcharts.com/svg-maps/ Free SVG Maps - amCharts www.amcharts.com 국가의 스타일 HTML CSS .one { width: 100vw; height: 100vh; background: url(./southKoreaHigh.svg); } .two { width: 100vw; height: 100vh; } .three { width: 100vw; height: 100vh; } path:hover { fill: red; stroke: blue; stroke-width: 5px; stroke-opacity: 0.5; } svg ..

Cargo Templates - Cargo Templates — Cargo Template Style 1 — Wireframe Show All︎ Template Style 2 — w/ Example Content Show All ︎ cargo.site themeforest(템플릿) WordPress Themes & Website Templates from ThemeForest WordPress Themes & Website Templates from ThemeForest Discover 1000s of premium WordPress themes & website templates, including multipurpose and responsive Bootstrap templates, email t..

1. 개념 Base64 Encoding은 Binary Data를 Text로 변경하는 Encoding이다. 인코딩(encoding) 파일에 저장된 정보의 형태나 형식을 데이터 표준화, 보안, 처리 속도 향상, 저장 공간 절약 등을 위해서 다른 형태로 변환하는 처리 혹은 그 처리 방식을 말합니다. 이메일 등의 전송, 동영상이나 이미지 영역에서 많이 사용되며, 반대말은 디코딩(decoding)입니다. 2. Base64를 사용하는 이유 배경 Base64 Encoding을 하게되면 전송해야 될 데이터의 양도 약 33% 정도 늘어난다. 6bit당 2bit의 Overhead가 발생하기 때문이다. http://www.base64encode.org/에서 직접 테스트해보면 어렵지 않게 확인 할 수 있다. Encoding전..

Mac과 윈도우는 기본 스크롤 디자인이 다르다. (윈도우 스크롤 바 너무 못생겼다...) 따라서 스크롤 디자인을 변경하려면 어떻게 해야 할까? 우선 -webkit이라는 친구를 이용해주면 된다. webkit이란? 웹킷 (영어: WebKit)은 웹 브라우저 를 만드는 데 기반을 제공하는 오픈 소스 응용 프로그램 프레임워크 이다. 원래는 Mac OS 10의 사파리 웹 브라우저 엔진으로 사용하기 위해 컨커러 브라우저의 KHTML 소프트웨어 라이브러리 에서 가져온 것이었으나 지금은 옴니웹, 시이라, 아로라, 미도리, 유즈블, iCab, 어도비 통합 런타임, 휴대 전화 (아이폰 포함), 노키아의 Series 60 브라우저, 구글의 안드로이드 플랫폼에 사용되고 있다. 그냥 "브라우저에서 제공하는 프레임워크"라고 기억..

1. 반응형 이미지 1.1 이미지 포맷 이미지 포맷의 종류 GIF(Graphics Interchange Format) : 256색의 컬러만 표현 가능하기 때문에 선명하진 않지만 용량이 적게 듭니다. 투명은 표현 가능하지만 그 정도를 조절하는건 불가능하며, 때문에 그림자 표현도 불가능합니다. 애니메이션 처리가 가능합니다. JPG/JPEG (Joint Photographic Expert Group image): 매우 화소가 높고, 용량도 적지만 투명처리가 불가능합니다. PNG (Portable Network Graphics) : 왠만한 컬러는 모두 표현 가능하여 투명 영역을 처리 가능하지만 용량이 큽니다. SVG (Scalable Vector Graphics) : SVG 형식의 벡터 이미지는 손실이나 품질 ..

1. 커스텀 input, select 박스 디자인적인 개성을 주기 위해 실무에서는 input 요소나 select 박스를 브라우저 스타일과 다르게 표현하곤 합니다. 1.1 개념 스타일링이 까다로운 input 요소를 화면에서 숨기고 label 요소를 연결하여 스타일링을 진행합니다. 실습내용 https://github.com/WannabeCM/DropDown_LikeLion GitHub - WannabeCM/DropDown_LikeLion Contribute to WannabeCM/DropDown_LikeLion development by creating an account on GitHub. github.com https://wannabecm.github.io/DropDown_LikeLion/ 2. IR(I..

각 회사마다 차용하는 CSS 설계 기법이 있습니다. 아래와 같은 방법으로 효율적인 CSS를 만들 수 있습니다. 1. OOCDD(Object Oriented CSS) 직역하자면 "객체지향CSS"입니다. 여기서 객체는 UI를 말합니다. 1.1 개념 레고처럼 여러 가지 모듈을 만들어 조합하는 방법. 1.2 방법 1.2.1 구조(structure)와 스킨의 분리 같은 형태의 ui에 스킨만 다르다면 구조와 스킨을 분리하여 조합합니다. ex) 아바타에 옷 바꿔서 입혀주기(아바타, 다른 스킨) 구조: width, height, padding, margin 등 레이아웃에 영향을 미치는 속성 스킨: font, color, background, vorder 등 레이아웃은 아니지만 시각적인 영향을 주는 속성 1.2.2 컨테..