WEBPI's Markup && Css Developer

gulp란 프론트엔드 자동화 빌드 툴이다 흔히 webpack이 하나의 파일로 모아주는 번들링 툴이라면 gulp는 테스크 실행형이다 프론트 엔드 개발이 목적이 아니라면 gulp를 이용하는 것이 효율적이라 생각한다 gulp 설치는 https://webpi.tistory.com/544 여기를 참조하고 gulp를 사용함에 있어 추천하는 모듈들을 알아보자 gulp-notify - 오류 처리 할 때 메세지로 보여줄 수 있음 gulp-plumber - 스트림에 문제가 있을 경우 파이프를 해제하고 상세 에러 처리를 가능 gulp-debug - 파이프라인을 통해 실행되는 파일을 확인하기 위해 파일 스트림을 디버그 gulp-dart-sass - Sass의 공식 구현체 중 하나로서, 이전 gulp sass보다 더욱 빠르고 ..

[role="tablist"] { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; } [aria-selected="true"] { text-decoration-thickness: 0.25em; text-underline-offset: 0.5em; color: orangered; } .tabs-container { padding: 2.5rem; border-radius: 0.5rem; background: hsl(0 0% 50% / 0.1); } .visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: abs..

w descriptor 사용 ! src 속성은 srcset을 지원하지 않을때 적용 뷰포트 가로가 450px 이하일 때 이미지.png (450px) 뷰포트 가로가 451~768px 일 때 이미지2.png (768px) 뷰포트 가로가 769px 이상일 때 이미지3.png (1080px) sizes 는 고정 사이즈가 필요시 지정해준 크기의 이미지 대상 사용 x descriptor는 언급하지 않음 ! ie는 지원하지 않는다 Polyfill은 https://github.com/aFarkas/respimage

gulp를 이용한 sass 컴파일 1. node.js 설치 (ruby가 아닌 node를 이용함) Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. 프로젝트 폴더의 커맨드 창(cmd) or shell에서 npm init 실행으로 package.json 생성 3. npm install --global gulp-cli 글로벌 설치 4. npm install --save-dev gulp 로컬 설치 (--save-dev 옵션으로 개발과정으로만 사용) 5. npm i gulp-sass sass 모듈 설치 6. gulpfile.js 생성후 코드 작성 (gulpfile 작성은 gulp 사이트에서 확인..

웹사이트 퍼포먼스 증가시키기 | IUEditor from JD Yang

Noto Sans KR (Korean) - Google Fonts : Early AccessNoto is a font family that aims to support all languages in the world. This is the Sans Korean family. It has Thin, Light, Regular, Medium, Bold and Black styles. For more information about Noto, go to google.com/get/noto 구글 웹폰트 noto 한글이 등록되었군요.괜찮습니다. https://www.google.com/fonts/earlyaccess#Noto+Sans+KR

오페라 브라우저가 최신버젼 11을 내놓았네요 http://www.opera.com/browser 여기서 다운받을 수 있습니다 변경사항은 1. 설치 파일의 크기가 줄어들고 설치 속도도 크게 향상되었습니다. 아울러 한 폴더 안에 모든 설정을 다 저장하는 무설치 버전의 포터블 설치가 설치 프로그램에서 제공됩니다. 2. 탭을 좀 더 효율적으로 사용하는 탭 묶음(Tab Stacking) 기능이 도입되었습니다. 관련이 있거나 필요에 의해 묶어두는 기능입니다. 탭을 끌어다 원하는 탭에 놓으면 묶여집니다. 3. 확장 기능을 정식으로 제공합니다. 없는 기능이 없다 싶을만큼 다양한 기능이 자체 내장된 오페라 브라우저이지만, 확장 기능을 제공함으로써 더욱 다양한 기능을 추가로 사용할 수 있습니다. 확장 기능은 확장 기능 웹..

파폭이 지속적인 업그레이드를 하네요 크롬의 추격에 긴장탄 것일까요 변경점이 탭 상위 기능: 탭을 주소창 맨 위로 올려서 일관성 있는 UI제공 탭 바로가기: 이미 열린 탭의 경우, 주소창에서 바로 가기 가능 Firefox 버튼: 메뉴를 모두 없애고 버튼의 메뉴 모음 제공 앱 기능 탭: 앱 탭으로 만들면 아이콘 크기의 작은 탭으로 변화 멀티 터치: 윈도 7에서 양 손으로 터치하는 기능 제공 외에도 제법 되네요 동영상 보시면 이해가 쉬울듯 합니다 http://www.mozilla.or.kr/ko/firefox/beta/

nhn에서 좋은 행사를 하네요 가고싶다... ㅜㅜ http://deview.naver.com/2010/courses.nhn

아... 잘쓰고 있던 기능이였는데 아쉽습니다 개발자분께서 마음고생이 심하셨나보네요 만들어줘도 xx하는 참... 무조건 좋다 할 순 없지만 좋은기능이 안좋은 것보다 많기 때문에 더욱더 안타깝네요 정말 우리나라 일부 자기들끼리만 노는 특징때문에 피해보는 사람이 많은듯 합니다. 제가 미투 잘 안하는 이유가 그런점이 크구요 twi2me 사용한 이유도 국내 트렌드는 일단 따라가자라는 의미가 컸었는데 뭐 게으른 이유도 있고... 암튼 그동안 잘썼습니다 (당췌 뭔 내용이야 ㅡㅡ;; 저주받은 글솜씨...)