haemil 의 이야기를 소개합니다.
-
Javascript🃏
새롭게 느끼게 된 Javascript 의 중요성
Javascript 라는 '프로그래밍 언어'를 웹 페이지에 그저 '동적 속성'을 부여하는 언어로만 이해하고 있었던 탓에 크게 중요성을 느끼지 못했었다. 웹에 대한 깊은 이해가 있지 않았던 까닭에 HTML5, CSS3, Javascript 를 부끄럽지만 그저 웹을 만드는 언어로만 생각을 했었다. 그렇지만 웹을 조금씩 공부하면서 각각의 언어가 웹에서 가져야 할 비중의 문제를 조금씩 고민하게 되었다. 웹을 이용하는 사용자에게 잘 갖추어진 UI를 제공하는 것을 넘어서서 높은 수준의 사용자 경험(UX)을 제공하기 위해서는 '상호작용'이 중요한데, 개발자의 Javascript 숙련도에 따라서 웹에서 제공하는 사용자 경험이 달라질 수도 있다는 점을 생각해보게 됐다 "사람들은 하루에 100번 가까이 웹페이지를 탐색한다..
-
Review📝
2018년 구입한 물건들(feat.사용자 경험)
*수정할 예정2018년을 정리하는 기념으로 2018년 구매한 물건들을 살펴보는 시간을 가졌습니다. 구매한 물건들 중 만족했던 물건들은 어떠한 공통점을 가지고 있는지 살펴봄으로써 개인적으로 느끼는 트렌드에 대한 이야기를 조금 전해보려고 합니다. [브런트 코드 1구 멀티탭]1.8m 1구 멀티탭에 USB 포트 2개가 달린 제품입니다. 노트북을 가지고 다닐 때가 많아서 장시간 사용할 경우 배터리 관리에 대한 어려움이 종종 생깁니다.브런트 코드를 가지고 다니면서 카페나 공공장소에서 충전에 대한 어려움을 한결 해소할 수 있었습니다. [클레버 타키온 PD 충전기]애플 제품은 정품 충전기가 가격이 비싸서 구매하기가 망설여집니다. 물론 금전적으로 여유가 있다면 정품 충전기를 하나더 구매하겠지만 아직은 여유롭지 못하기에 ..
-
기획📑
훌륭한 목수는 연장을 탓하지 않는다
'훌륭한 목수는 연장을 탓하지 않는다.' 이 말은 여러 의미를 내포하고 있는 것으로 여겨지는데,주어진 상황에 불평하지 않는 것, 연장(도구)보다 자신의 손과 실력, 경험의 중요성 믿는 것 등이 숨겨진 교훈이 아닐까 생각합니다. 곰곰이 생각해보면 연장을 탓하지 않는 것의 참의미는 자신의 준비성에 대한 이야기가 아닐지 생각해봅니다.훌륭한 목수는 부지런히 연장을 정비하므로 결정적인 순간에 연장을 탓하는 미련함을 보이지 않습니다. 한 분야에서 훌륭하다는 평을 얻을 정도로 자신의 분야에서 성과를 쌓아올린 사람이라면 연장(도구)을 고르는 기준, 사용법, 관리 노하우 등에서 자신만의 철학을 집대성하지 않았을까 생각해봅니다. "문서작업의 중요성을 나무를 베기 위해 연장을 정비하는 시간에 비유할 수 있지 않을까?" 연장..
-
Web
시멘틱 마크업이란?
시멘틱 마크업이란? 시멘틱 마크업은 종종 POSH(Plain Old Semantic HTML)라고도 불리는데, 단어 그대로 평범하고 오래된 의미론적인 HTML이라는 뜻입니다. 시멘틱은 즉, 기계(컴퓨터, 브라우저)가 잘 이해할 수 있도록 하는 것을 뜻합니다. 애초에 프로그래밍 언어는 사람과 기계와의 정해진 약속이며 HTML 역시 마찬가지입니다. HTML은 HTML이 가진 철학에 맞게 문서를 구조적으로 나타낼 수 있도록 표현 되어야합니다. 시멘틱 마크업의 사용은 HTML이 가진 철학을 올바르게 표현할 수 있도록 돕습니다. 시멘틱 마크업을 통해서 얻는 것 시멘틱 마크업을 잘 사용하면 브라우저에게 코드가 가진 의미를 정확하게 전달할 수 있습니다. 웹이라는 문서를 표현하기 위해서 의미에 맞는 태그를 사용하며, ..
-
'🐶발'을 공부하며 느끼는 점
깃허브
https://octodex.github.com 깃허브의 캐릭터 옥토캣입니다. 옥토캣의 이미지를 구경하다가 하나 가져와 봤어요 깃허브 https://github.com 깃과 깃허브는 프로그래밍의 효율을 가장 높여줄 수 있는 도구이다.아직까지는 많은 시간을 들여서 활용해보지 못한 게 아쉽지만얼른 원활하게 사용할 수 있는 날이 오도록 수련에 수련을...!
✏️최신 글
-
Javascript🃏
Javascript 객체와 배열을 복제하기 위한 메서드
Javascript 배열을 복제하기 위한 메서드 var a = [1, 2] console.log(a) // [1, 2] var b = Array.from(a) console.log(b) // [1, 2] console.log(a, b, a === b) // [1, 2], [1, 2], false b.push(3) console.log(b) // [1, 2, 3] console.log(a) // [1, 2] Javascript 객체를 복제하기 위한 메서드 var a = {name:'haemil'} var b = Object.assign({}, a) var c = Object.assign({top: 10, left: 7}, a) console.log(b) // {name: 'haemil'} console.l..
-
Javascript🃏
Javascript Tip
변수 키워드는 var 대신 const, let 을 사용하자 전통적인 자바스크립트 변수인 var 대신에 let, const 등을 사용하자(block Scope) var(function scope) 은 쓸 이유가 없으며, 오히려 var을 let, const 등과 같이 사용하면 문제가 생길 수 있다. 기본적으로 const를 사용하며, 값이 바뀌는 변수일 경우 let 을 사용한다. 직관적이고 편리한 querySelector를 사용하자 CSS 문법에 대한 이해가 있다면 쿼리 셀렉터를 사용하는 편이 훨씬 직관적이다. 같은 문법을 사용하고 있고, IE 9(8까지도?)도 지원하므로 쓰지 않을 이유가 없다. HTML5 커스터마이징 속성인 'data-' HTML5 커스터마이징 속성인 data- 를 통해서 엘리먼트에 사용자..
-
Web
HTML로 구현된 화면에서 글자(text)가 보이지 않아야 할 때 적용할 CSS
HTML로 구현된 화면에서 글자(text)가 보이지 않아야 할 때 적용할 CSS 들여쓰기를 사용하는 방법 text-indent: -9999em; 위치 지정을 사용하는 방법 position: absolute;left: 0;top:-9999em;
-
Web
보이는 대로 생각하는 일을 넘어서기
미관을 위해서 제목이 필요없다면 굳이 제목 태그를 기입하지 않게 되는데...! About Services Portfolio Contact Us 목록을 만들 때에는 제목을 꼭 적는 일이 습관이 되어야 한다. 제목이 미관에 어울리지 않는다면 CSS를 통해서 얼마든지 보여주거나 보여주지 않는 처리를 할 수 있다. 중요한 것은 HTML 상에서 웹 접근성을 위한 구조가 잘 짜여졌는가이다. Main Menu About Services Portfolio Contact Us
-
Web
크로스 브라우징을 하기 위한 속성
*hack - IE6,7에서만 적용됨 *(asterisk)를 붙이면 IE 하위버젼에서만 적용이 되는 CSS코드를 작성할 수 있게 된다. *position: absolute; *top: 65px; 아래의 코드를 적용하면 IE6,7에서 플롯을 해제할 수 있다. *zoom:1; IE 조건부 주석( Conditional Comment )
