본문 바로가기

IT

(199)
BBC 디자인 시스템 / BBC GEL 영국의 공영방송사인 BBC가 제공하는 디자인 가이드라인 https://www.bbc.co.uk/gel BBC GEL | Homepage Our Global Experience Language (GEL) is the BBC's shared design framework which enables us to create consistent and delightful user experiences across all of our Digital Services. www.bbc.co.uk
인터넷 속도 올리기 / 인터넷 속도 테스트 인터넷 속도 빠르게 하는 방법! 1. DNS 캐시 플러시 먼저 "윈도우+R" 키를 눌러 cmd를 켠 후 ipconfig/displaydns 을 입력하고 엔터를 쳐주세요. 그러면 목록이 올라가고 다음으로 ipconfig/flushdns 을 입력 후 엔터를 쳐주세요. "DNS 확인자 캐시를 플러시 했습니다."나올 때까지 반복해서 칩니다. 주기적으로 누적된 데이터를 하면 삭제해주면 인터넷 속도 향상에 도움이 됩니다. 2. TEMP 폴더 비우기 "윈도우+R" 키를 눌러 %Temp%를 입력해주세요. Temp 파일에 있는 항목을 "Ctrl+A"를 눌러 Delete 해주세요. 인터넷 속도 테스트 https://fast.com/ko/ ↑ 인터넷 속도 테스트를 해주세요. 180이면 높고 100 이하면 느린 거라고 하니 ..
Nexa 폰트 / 영문폰트추천 / Bold, Light 상업용 무료 폰트 개인적으로 제일 좋아하는 폰트예요. 유료 폰트인데 Light와 Bold를 무료 배포하여 사용을 유도하고 있습니다. 상업적인 용도로 사용할 수 있지만 개인적으로 배포하는 것은 금지되고 있으니 조심해주세요. 무료로 다운로드 사용할 경우 아래 사이트에서 "Download For Free"를 눌러 Light, Bold를 사용해주세요. https://www.fontfabric.com/fonts/nexa/ DOWNLOAD: Nexa Font Family - by Fontfabric™ 100% NEXA font family—Sans Serif of 9 weights and 36 fonts + additional NEXA Text version. UPDATE Extended Latin & Cyrillic. Downlo..
[무료폰트] Manrope / 영문폰트추천 / 상업용 무료 폰트 Manrope Font Type Specimen 2018년에 제작/배포된 Manrope 서체입니다. 총 7개의 weights를 제공하고 있는 무료 서체입니다. (italic 제공 X) 모든 상업적 이용 및 문서에 사용 가능하고, 웹/앱에서 사용하는 것도 가능합니다. https://manropefont.com/ Manrope – free sans-serif variable font free sans-serif font family manropefont.com 다운로드 ↓↓↓↓↓
[JavaScript] 조건문 if/else문, switch 문 조건문(Conditional Statements) 주어진 조건식의 평가 결과에 따라 코드 블럭의 실행을 결정한다. 조건식은 Boolean 값으로 평가될 수 있는 표현식이다. 조건문에는 if문과 switch문이 대표적이다. if 문 지정한 조건이 참인 경우 명령문을 실행한다. if (condition) { // block of code to be executed if the condition is true } if (hour < 18) { greeting = "Good day"; } if else 문 if 조건이 참 일 경우 코드를 실행하고 거짓일 경우 else가 실행된다. if (condition) { // block of code to be executed if the condition is true ..
HTML 특수 문자 표현 엔티티(entity), &nbsp; &quot; &lt;란??? HTML 소스에서 < 등은 파일이 깨져서 나타나는 문자가 아닌 HTML 엔티티입니다. 예를 들어 HTML에 < 특수문자를 넣으면, 태그의 시작으로 여겨서 에러가 납니다. 이러한 특수문자를 표현하기 위한 것이 HTML 엔티티이고, 특수문자를 HTML으로 변환하는 행위는 이스케이프(escape)한다고 합니다. 자주 사용하는 엔티티 Entity Name Character (공백) < & &(앰퍼샌드) " " © ©
[JavaScript] 변수(variable)란? 변수(variable)란? 변수는 데이터를 담기 위한 메모리 공간을 의미합니다. 쉽게 말해 작은 상자로 비유할 수 있습니다. 자바스크립트에서는 변수 타입이 없으므로 변수 선언자는 var 하나뿐입니다. 쉼표(,) 사용하면 변수 여러 개를 한 문장으로 선언할 수 있습니다. var x, y; 변수를 선언하기만 하면 undefined 값이 들어가고 대입(=) 연산자를 사용하면 변수에 값을 대입할 수 있습니다. x = 10; * 수학에서 = 연산자는 같다는 뜻이지만 프로그램에서 = 연산자는 오른쪽 값을 왼쪽 변수에 대입한다는 뜻입니다. Example var x = 10; var y = 20; var z=x+y; document.write(z); --> 결과 : 30 변수 이름 짓기 변수의 이름은 자유롭게 지정할 ..
[JavaScript]자바스크립트와 제이쿼리 차이점? 자바스크립트(JavaScript)란? 자바스크립트는 웹 개발 스크립트 언어 중 가장 많이 쓰이는 객체지향 언어입니다. 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있습니다. 현재 대부분의 웹 브라우저에서 자바스크립트가 내장되어 있습니다. 변수를 미리 선언하지 않아도 브라우저가 자동으로 파악하고 인터프리터 언어로 컴파일 과정을 거치지 않습니다. *** 자바(Java)와 관계는? 자바와 자바스크립트는 이름만 놓고 서로 관련이 있는 언어로 생각되기 쉽습니다. 하지만 두 언어는 서로 관련이 없으며 모두 C언어를 기반으로 만들어져 문법상 비슷합니다. 자바는 대표적인 객체지향언이어고 컴파일 과정을 거치며 자바스크립트는 클라이언트용 언어로 인터프리터 ..
메타(meta) 태그 정리 / 웹표준 SEO 메타(meta) 태그란? 웹 서버와 웹 브라우저간에 상호 교화노디는 정보를 정의하는데 사용합니다. HTML 문서의 사이에 입력하는 특수 태그로 문서가 어떤 내용을 담고 있고 키워드는 무엇인지, 누가 만들었는지 등의 특성을 담고 있습니다. 메타태그의 속성 http-equiv, name, content 3가지 속성이 있습니다. meta charset HTML5의 인코딩 지정 방법입니다. 보통 UTF-8를 값으로 주면 전세계 대부분의 문자를 표현할 수 있습니다. meta viewport 뷰포트는 화면에 보이는 영역으로 스크롤해야 보이는 영역을 제외한 보이는 그대로 크기의 영역입니다. 예제 코드는 흔히 쓰이는 코드로 기기의 넓이이며 그에 맞춰 초기 화면 배율을 1로 지정한다는 의미입니다. meta keyword..
[JavaScript] 데이터 타입(Data Type) String & Numbers 데이터 타입은 프로그래밍 언어에서 사용할 수 있는 데이터(숫자, 문자열, 불리언 등)의 종류를 말합니다. 자바스크립트의 모든 값은 데이터 타입을 갖고 ECMAScript 표준(ES6)은 7개의 데이터 타입을 제공합니다. 원시 타입(primitive data type) : 변경 불가능한 값 Boolean Null Undefined Number String Symbol(ES6에서 추가) 객체 타입(object/reference type) object String 타입 (문자열) 자바스크립트의 String 타입은 텍스트 데이터를 나타내는데 사용합니다. 문자열은 0개 이상의 16비트 유니코드 문자(UTF-16)들의 집합으로 전 세계에서 사용하는 문자를 대부분 표현할 수 있습니다. 문자열은 작은 따옴표(') 또는..
[JavaScript] 이벤트란? 이벤트 핸들러 종류 자바스크립트에서 이벤트(Event)란? 사용자의 어떠한 동작에 따라 기능이 실행되는 것을 의미합니다. 버튼을 누르거나, 글자를 입력하거나, 새로운 문서를 읽어 들이거나 하는 것들이 이벤트입니다. 자바스크립트를 HTML에 사용할 수 있게 되면서 사용자의 행동에 따라 적절한 조치를 취할 수 있게 됨에 따라 단순히 보여주는 브라우저 환경에서 벗어나 동적인 페이지가 될 수 있었습니다. 이벤트 핸들러의 종류 Event Description onclick 마우스 클릭했을 때 ondblclick 마우스를 더블클릭했을 때 onchange input 요소의 값이 바뀌었을 때 onmouseover 마우스 포인터가 HTML 요소 위에 놓여 있을 때 onmouseout 마우스 포인터가 HTML 요소를 벗어났을 때 onkeyd..
웹디자이너를 위한 크롬 필수 확장 프로그램 Full Page Screen Capture https://chrome.google.com/webstore/detail/full-page-screen-capture/fdpohaocaechififmbbbbbknoalclacl Full Page Screen Capture 추가 권한을 요청하지 않고 현재 페이지의 스크린샷을 전체적으로 캡처하고 신뢰할 수 있습니다! chrome.google.com ColorZilla https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp ColorZilla Advanced Eyedropper, Color Picker, Gradient Generator and other colorf..