키보드를 구매하기 위해 알아본 사람이라면 '기계식 키보드'(mechanical keyboard)라는 말을 들어봤을 것이다. 이것이 의미하는 것은 무엇일까?


멤브레인 키보드


일반적으로 우리가 자주쓰는 키보드는 '멤브레인 키보드' 이다. 멤브레인이라는 고무시트를 사용한 것이 특징이며 타자를 쳤을 때 눌려진 키는 고무 탄성을 이용하여 제자리로 돌아오게 하는 방식이다. 제조 방식이 비교적 간단하고 제조 과정에 들어가는 비용도 저렴하다.

(멤브레인 키보드)


멤브레인 키보드의 키를 누르면 스위치가 볼록한 고무 모양의 러버돔을 누르게 되며 키보드의 PCB 회로판 접점에 닿게 된다. 이때 누른 키의 입력신호가 전달된다. 가격이 저렴하고 가성비가 좋아서 많이 쓰이고 있다.



기계식 키보드


PC방을 가본 사람이라면 기계식 키보드라는 이름이 익숙할 것이며 사용 경험이 있을 것이다. PC방 홍보를 할때 xx회사의 기계식 키보드를 쓴다고 홍보를 하기도 한다. 기계식 키보드란 어떤 것인가?

(기계식 키보드)



키보드의 가격은 '스위치'가 어떤가에 따라 크게 바뀐다. 스위치의 역할은 키캡과 키보드 PCB 기판 사이에서 키의 압력을 전달하는 것이다.

위 사진을 잘 보면 앞서 설명한 멤브레인 키보드와는 달리 스프링이 있는 것을 볼 수 있다. 기계식 키보드는 키 하나하나마다 스위치를 가지고 있다. 때문에 제조 단가가 높아져서 비싸질 수  밖에 없다. 그럼에도 우리가 기계식 키보드를 선호하는 이유는 키 누름이 정확하며 우수한 내구성을 지니고 있기 때문이다.  


기계식 키보드는 키를 눌렀을 때의 느낌인 키감이 좋다. PC방에서 쓰는 이유도 키감이 빠질 수 없을 것이다. 키를 누를 때 마다 촉감이 살아 있고 소리도 즐겁다. 물론 장점만 있는 것은 아니다. 과거에 비해 많이 저렴해졌고 종류도 다양해졌다고는 하나 여전히 멤브레인 키보드에 비해서는 비싼 가격이다. 그리고 타이핑을 할 때 발생하는 소음 역시 무시할 수 없다. 도서관이나 사무실에서는 피시방에서 주로 쓰는 청축 방식의 키보드는 아마 쓰기 힘들 것이다.


다양한 종류의 키보드가 존재하지만 기계식 키보드에 매력이 있는 것은 분명하다.



이러한 기계식 키보드를 제작하는 회사는 다양하다. 그중에서 가장 유명하다고 생각되는 회사는 체리(Cherry)이다.


키보드에 관심이 있는 사람이라면 체리키보드라는 말을 들어 보았을 것이다. 기계식 키보드에도 종류가 있는데 대표적인 것들을 소개하려 한다.


MECHANICAL X-POINT TECHNOLOGY = CHERRY MX [ 적축(RED), 갈축(BROWN), 청축(BLUE), 흑축(BLACK) ]



(순서대로 적축, 갈축, 청축, 흑축)


종류 

적축 

갈축 

청축 

흑축 

 Switch 

 Linear 

 Tactile

 Tactile and with pronounced click point

 Linear

 Switching point

 undetectable 

 detectable

 precisely detectable

 undetectable

 Distance to actuation point

 2mm 

 2mm

 2.2mm 

 2mm 

 Click point

 undetectable 

 undetectable

 detectable

 umdeteectable

 operating force

 45cN

 55cN 

 60cN 

  60cN

 요약 및 정리

 키압이 낮아서 가볍게 느껴지기 때문에 빠른 타이핑이 가능하며 소음이 적고 부드럽다. 대신 키압이 낮은 만큼 클릭을 한 것을 못느낄 수 있으며 그로 인해 오타가 생길 수도 있다.

 키압이 낮아서 빠른 타이밍에 유리하다. 적축보다는 소음이 있으나 청축보다는 덜해서 청축이 너무 시끄럽다고 생각되는 사람에게 추천할만 하다. 소음은 줄었으나 클릭을 했을 때 느낌은 청축과 비슷하다.

 pc방에서 많이 쓰는 방식이다. 클릭을 했을 때 손가락과 귀로 바로 느껴진다. 확실한 키입력에 유리하다. 키압이 높은 편이기 때문에 장시간 타이핑에는 부적합하며 소리가 매우 크다.

 소리가 크진 않으나 키압이 높다. 그리고 누를 때 다른 축에 비해 힘이 더 들어간다. 독특한 느낌 때문인지 매니아층이 존재한다.

그 외에도 녹축(청축보다 키압이 높다), 백축, 회축 등 수많은 방식이 존재한다.

저작자표시 변경금지

'Information' 카테고리의 다른 글

윈도우10 부팅 usb 만들기  (0) 2017.09.30
웹 브라우저 캐시 무시하기,지우기,설정 끄기  (0) 2017.09.19
이미지 파일 확장자에 대해 알아보자  (0) 2017.07.20
아이폰 배터리 사이클 확인하는 법  (0) 2017.07.14
컴퓨터 파일 아이콘 변경하기  (0) 2017.07.14


위 사진의 왼쪽은 HTML 만으로 구성된 모습이며 오른쪽은 CSS를 이용하여 디자인을 한 모습이다.


CSS 는 Cascading Style Sheet 의 줄임말이다.


html을 이용해서 텍스트와 이미지, 표 등을 웹 문서에 넣는 것을 물고기에 비유하자면 '뼈'에 해당한다.


그럼 CSS 는 무엇일까? CSS는 텍스트에 크기와 색상을 주고 이미지의 크기와 위치, 표의 색상, 배치 등 웹 문서에 디자인을 추가한다.


비유하자면 물고기의 '살'에 해당한다.


CSS가 없다면 웹 문서는 매우 투박하고 볼품없어질 것이다.

  • 목록1
  • 목록2
  • 목록3
위의 목록은 <ul> 태그와 <li>  태그를 이용해서 만든 것이다. 이것에 css 효과를 주면

  • 목록1
  • 목록2
  • 목록3


이렇게 만들 수 있다. 세로로 나열되있던 목록을 가로로 만들고 글자에 색을 입히고 크기를 키웠으며 배경색을 주는 등 웹 문서에 여러가지 효과를 줄 수 있다. 웹 페이지의 디자인은 css로 하는 것이다. 그리도 모바일, 태블릿 등 웹 문서에 접근 가능한 다양한 기기들이 나온 지금 css의 중요성은 더욱 커져가고 있다. 사실 html을 이용해도 간단한 디자인 효과를 주는 것도 가능하긴하다.



HTML


위의 글자는 html로 글자색을 준 것이며 소스는 <font color="red">HTML</font> 이다.


이것을 css 로 한다면


CSS


이며 소스는 아래와 같다.


<style>

.cssfont{color:red;}

</style>


<p class="cssfont">CSS</p>


이렇게만 보면 html로 효과 주는 것이 더 짧은데 왜 css를 사용하냐는 의문이 생길 수 있다. 하지만 같은 효과를 여러곳에 줄때 html은 하나하나 지정해줘야하지만 css는 한번에 지정해 줄 수 있는 등 소스가 길어질 수록 css의 중요성은 커진다.


다시 말하면 웹 문서에서 내용과 디자인을 html 과 css 로 분리 할 수 있다. 이것은 웹 표준에 필요한 것이기도 하며 사이트의 수정에 도움을 줄 수 있다.


html은 그대로 두고 css만 바꿔 주면 전혀 다른 디자인을 만들 수 있다. 인쇄용 문서, 모바일용 페이지, 태블릿용 페이지, TV용 페이지 등 CSS만 바꾸면 여러 매체에 사용할 수 있게 된다.


CSS는 <style>태그 사이에 넣는다. 보통 <style>태그는 <head>태그 사이에 넣는다.


html문서 안에 css를 넣는것을 간단하게 표현하면 이렇다. (내부 스타일시트)


<html>

<head>

<style></style>

</head>

<body>

</body>

</html>


또는 css를 넣는 다른 방법도 있다(외부 스타일 시트)


<html>

<head>

<link href="외부 css 파일 경로" rel="stylesheet" type="text/css">

</head>

<body>

</body>

</html>


그리고 html과 다른점이 있다면 html에서는 주석을 넣을 때 <!-- 주석 --> 이랫다면 

css에서는 /* 주석 */ 를 사용한다.


css를 사용하면 한번에 문서에 디자인을 바꿀 수 있다.


p{

color:red;

}


위 소스를 사용하면 <p> 태그안의 모든 글자 색상은 red가 된다. 여기서 p 부분을 선택자(select)라고 한다.


선택자에 { 와 } 사이에 들어간 속성들을 주는 것이다. 


간단하게 css에 대해 알아봤다. css는 웹 문서에 없어서는 안되는 필수 요소이다. html을 배운다면 css도 꼭 알아두도록 하자.

저작자표시

'Web development > HTML & CSS' 카테고리의 다른 글

CSS 속성 선택자, 가상 클래스 종류,정리,요약하기  (0) 2017.08.12
CSS 선택자(selector) 종류 정리 요약  (0) 2017.07.26
HTML5 태그 미지원 브라우저  (0) 2017.07.19
HTML 이미지 맵 만들기(usemap)  (0) 2017.07.18
CSS 초기화 파일(초기화 코드)  (0) 2017.07.15



BMP, JPG 등 이미지 이름 끝에 붙는 확장자들을 보면서도 우린 무슨 차이가 있는지 알지 못합니다. 그래서 그 차이를 설명하려고 합니다.



1. BMP ( Microsoft Windows Device IIndependent Bitmap )

: DOS와 윈도우 호환 컴퓨터에서 사용되는 Bitmap 이미지이다. 압축을 지원하지 않아 지나치게 높은 파일 용량이 문제가 되어 웹용 이미지에 적합하지 않다는 단점이 있다. 최근 BMP 파일도 압축을 지원하기 시작했다.


2. PNG ( Portable Network Graphics )

: 배경이 투명한 파일을 만들거나 저장할 때 많이 쓰이며 색상을 최대한 그대로 유지할 수 있기 때문에 최근에 많이 쓰이고 있다. 단점이 있다면 색상을 그대로 유지시키는 만큼 파일 용량이 크다.


3. GIF ( Graphic Interchannge Form )

: JPG나 PNG 파일 형식과 비교했을 때 파일 크기가 작다는 장점이 있으며, 투명한 배경과 움직이는 이미지를 만들 수 있다는 장점이 있다. 단점으로는 표현할 수 있는 색상 수는 최대 256가지 뿐이다. 그래서 웹 페이지에서는 아이콘이나 불릿 등 작은 이미지에 주로 사용하고 있다.


4. JPG, JPEG( Joint Photographic Experts Group )

: 사진을 웹 페이지에 넣기 위해 개발된 형식이다. 컴퓨터에서 저장할 때나 디지털 카메라에서 저장할 때 많이 쓰이는 확장자이다. JPG와 JPEG 차이는 없으며 정식 명칭은 JPEG 이지만 윈도우와 도스에서는 확장자가 3자리로 표시되어 JPG로 쓰인 것이다.


5. PSD ( Periscope Debugger Definition )

: 포토샵에서 저장할 때 쓰는 확장자이다. 포토샵에서 작업을 했을 때 사용한 레이어들을 하나하나 다시 사용할 수 있기 때문에 계속된 작업이나 수정을 할 때 중요하다. 다른사람이 사진을 수정할 수 있게 하고 싶다면 사진과 함께 PSD 파일을 주면 좋다.


6. TIFF ( Tagged Image File Format )

: TIFF는 무손실 압축방식의 파일이다. 최대한 원본 그대로 보존해야하는 중요한 이미지에 쓰는 확장자이며 데이터 손실이 최소화 된다. 단점으로는 용량이 매우 높기 때문에 많이 사용하진 않는다.


7. SVG (Scalable Vector Graphics )

: 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일형식이다. 이미지 또는 이미지에 채도, 투명도 등을 더하면  XML 텍스트 파일로 정의되어 검색화, 목록화, 스크립트화가 가능하며 압축 역시 가능하다.





AI, PXR 등 여러가지 이미지와 관련된 확장자들이 있습니다. 

그렇지만 '이 확장자가 제일 좋다' 라는 것은 없습니다. 물론 자주 쓰이는 확장자들은 있습니다. PNG, GIF, JPG, PSD 가 대표적으로 많이 쓰이는 확장자들이죠. 그 외의 것들이 나쁘다라는게 절대 아닙니다. 사용자의 용도에 맞게 사용하는 것이 가장 중요하며 그러기 위해 많은 확장자들이 존재하는 것이 아닌가라는 생각이 듭니다.

저작자표시

'Information' 카테고리의 다른 글

윈도우10 부팅 usb 만들기  (0) 2017.09.30
웹 브라우저 캐시 무시하기,지우기,설정 끄기  (0) 2017.09.19
기계식 키보드의 종류와 특징 (적,갈,청,흑)  (0) 2017.07.24
아이폰 배터리 사이클 확인하는 법  (0) 2017.07.14
컴퓨터 파일 아이콘 변경하기  (0) 2017.07.14

+ Recent posts

티스토리툴바