[CSS] 미디어 쿼리를 이용하여 특정 해상도에서 CSS 속성 변경하는 방법

미디어 쿼리는 “반응형 웹”이라는 형태를 표현하는데 중추적인 역할을 합니다. 미디어 쿼리가 없다면 반응형 웹이라는 형태도 없었을 겁니다. 바로 본문으로 넘어가서 데스크탑, 태블릿, 모바일 구분하지 않고 단순하게 사용 예를 들겠습니다. 이 예제는 창 가로 폭이 1280px 이하인 경우 quick_menu 라는 클래스를 가진 요소를 보이지 않게 처리하는 방법입니다.

  여담으로 반응협 웹이라는 것은 컨텐츠 표현의 한Continue reading “[CSS] 미디어 쿼리를 이용하여 특정 해상도에서 CSS 속성 변경하는 방법”

[Linux] vim을 vi 명령어로 사용하는 방법

환경에 따라서는 vim을 vi로 이미 alias 시켜서 vi 명령을 치면 vim이 실행되는 곳도 많지만 그렇지 않는 환경에서 간단하게 설정 하는 방법을 소개합니다. 쉘에 접속해서 아래 과정을 참고하시면 됩니다.   – 쉘 접속 계정의 .bashrc 파일 열기

– alias 코드 삽입

  참고로 vi와 vim은 서로 다른 에디터 입니다. vi 에디터를 좀 더 편하게Continue reading “[Linux] vim을 vi 명령어로 사용하는 방법”

[jQuery] 선택된 select의 option text 가져오는 방법

예전에 선택된 radio 버튼의 값을 가져오는 방법에 대해 포스팅을 한 적이 있습니다. 조금은 성격이 비슷한 내용이지만 이번에는 select box의 value 값이 아닌 option 에 담겨 있는 텍스트를 가져오는 방법을 소개 합니다. 보통 select의 선택된 값을 가져오기 위해서는 이런 방법을 사용합니다.

select_box라는 ID를 가진 셀렉트박스의 change 이벤트. 즉, 선택을 하게 되면 콘솔 로그로 선택된 요소의Continue reading “[jQuery] 선택된 select의 option text 가져오는 방법”

쿠키, 내 생각처럼 바로 구워지진 않는다.

쿠키.. 먹는 쿠키 아닙니다. 개발할 때 사용하는 쿠키입니다. 쿠키는 세션, 겟, 포스트 처럼 기초 중에 기초지만 이 문제로 2번이나 삽질한 관계로 이 포스트를 작성하는 5분 간 반성합니다. 쿠키를 굽는 즉시 쿠키 값을 불러와 DB에 때려박는 것은 어리석은 행동입니다. 이유는 쿠키가 아직 안 구워졌기 때문입니다. 하지만 나는 쿠키가 0.00001초 안에 구워질 것을 예상하고 굽자마자 꺼내려 들었습니다.Continue reading “쿠키, 내 생각처럼 바로 구워지진 않는다.”

[jQuery] input text 클릭 시 텍스트 전체 선택하는 방법

간단하지만 단 한번의 구글링이라도 자비 없이 포스팅 합니다. 웹 페이지에서 텍스트를 입력할 수 있는 input text 상자를 클릭하면 텍스트를 모두 선택하는 간단한 내용입니다. 텍스트 복사나 선택을 구현할 때 혹은 귀찮을때 종종 사용합니다. 아래 처럼 input 박스가 있다고 가정합니다.

  위 텍스트를 클릭하면 전체 선택이 되는 코드는 아래와 같습니다.

  해당 요소의 텍스트를 .select()Continue reading “[jQuery] input text 클릭 시 텍스트 전체 선택하는 방법”

[HHKB] 해피해킹 프로2 사용기

해피해킹 키보드를 만진 지 이틀만에 사용기를 써봅니다. 약 1여년 전부터 눈여겨 보고 있던 키보드였지만 가격 부담에 주저앉고 비슷한 레오폴드 기계식 키보드를 구매하려던 찰나에 “돌아 갈 수록 지출은 늘어갈뿐”이라는 생각에 바로 질러버렸습니다. 이미 기계식 키보드 자체도 한 가격을 하기 때문에 나중에 장만할 키보드를 염두해두고 중간에 다른 키보드를 장만하는 것은 이중 지출이 될 수 밖에 없다는 생각입니다.Continue reading “[HHKB] 해피해킹 프로2 사용기”

[Mac] 다중 모니터 창 전환 유틸리티 – Spectacle

다중 모니터 사용에 있어서 좌우 창 이동을 트랙패드로 하는 것은 아무리 트랙패드가 편하다 한들 손가락은 귀찮습니다. 윈도우즈는 울트라몬이라는 다중 모니터 창 전환 프로그램이 존재합니다. 맥에서 한 동안 이런 프로그램을 찾지 못하다가 최근에 알게되어 공유합니다. 이미 오래전부터 사용해오던 분들은 잘 알고 계시리라 봅니다. Spectacle 이라는 프로그램으로 이름이 참 스펙타클 합니다. 사용 방법은 너무 간단합니다. 실행 시키면Continue reading “[Mac] 다중 모니터 창 전환 유틸리티 – Spectacle”

[HHKB] 윈도우에서 딥스위치 조작없이 한영키 설정하는 방법

해피해킹 프로2 키보드를 구입한 후 처음으로 포스팅 합니다. 해피해킹은 윈도우와 맥 환경에서 모두 부족함 없이 사용이 가능합니다. 단, 딥스위치의 조작이 필요합니다. 윈도우 : 1번, 5번 ON 맥 : 2번 ON 저의 경우는 집에서는 맥, 회사에서는 윈도우즈를 사용하고 각 장소마다 키보드를 구비해 놓기에는 부담이 있어 휴대하고 다닙니다. 여기서 좀 귀차니즘이 발동합니다. 회사로 출근하면 딥스위치 2번은 OFF하고Continue reading “[HHKB] 윈도우에서 딥스위치 조작없이 한영키 설정하는 방법”

[Vim] 단축키 정리2 – buffer

Vim 사용에 있어서 빠른 파일 전환과 관련해 버퍼(buffer) 기능은 매우 중요한 역할을 합니다. 열기(:e) 또는 분할 열기(:sp), 세로 분할 열기(:vsp)를 이용해 파일을 열게 되면 모두 버퍼 리스트에 저장이 됩니다. 이렇게 저장된 버퍼리스트는 :ls 명령으로 확인이 가능합니다. :ls 명령으로 버퍼 리스트가 출력되면 앞에 각각 인덱스 번호가 부여되어 있습니다. 이를 :b + 인덱스번호 (예를 들자면 :b2)로 원하는Continue reading “[Vim] 단축키 정리2 – buffer”

[CodeIgniter] User Agent 클래스 사용 시 OS 정보 추가하는 방법

코드이그나이터(CodeIgniter)에서 제공되는 user_agent 클래스의 os 정보 추줄 메소드 사용 시 “Uknown Windows OS” 라고 출력되는 경우가 있습니다. 이는 user agent 값의 문자열 중 os 정보를 읽었으나 정확한 버전을 알 수 없어 “Window이긴한데 버전을 모르겠어”라는 식으로 출력이 되는 것입니다. 즉, “이 문자열은 Windows의 몇 버전이다.”라고 정의를 해줘야 합니다. 코드이그나이터 2.x 버전 기준으로 /application/config/user_agents.php 파일에서 정의를 추가해줄Continue reading “[CodeIgniter] User Agent 클래스 사용 시 OS 정보 추가하는 방법”