Posts

폰트어썸 (Font Awesome) 아이콘 폰트 사용하기

-
Image
아이콘 폰트인 폰트어썸 (Font Awesome) 을 사용하는 방법입니다. 아이콘폰트가 무엇인지 궁금하면 이전에 포스팅한 아이콘 폰트(Icon font) 자유자제로 사용하기 를 먼저 읽어 보시는 것을 추천합니다. 폰트어썸 (Font Awesome) 폰트어썸 (Font Awesome) 홈페이지 바로가기 폰트어썸 은 가장 유명한 대표적인 아이콘폰트 제공 사이트 입니다. 다양한 형태의 아이콘이 빠르게 업데이트되고 있으며 깃헙에서 51000 여개의 star 를 받고 있을 정도로 사랑을 받고있습니다. 현재 유료서비스를 시도하고 있긴하지만 무료로 사용할 수 있는 아이콘도 현재까지 675개 나 되어서 상당히 인기가 높습니다. 다만 주의 할 점은 GPL라이선스 를 따른다는 것입니다. GPL라이선스는...... 설치 방법 설치는 크게 2가지로 나누어지는데.. CDN 을 통해서 설치하는 방법과 아이콘 폰트를 다운로드 받아서 설치하는 방법이 있습니다. CDN 설치 가장 간단하게 사용할 수 있는 CDN설치 는 특별히 아이콘을 커스터마이징 할 일이 없을 떄 사용하면 됩니다. 폰트어썸의 CDN 주소를 적용하고자 하는 웹사이트의 <hrad> 태그 영역에 styleseet 를 불러오는 것 처럼 링크를 걸어주면 됩니다. 웹사이트의 <head> 태그영역 안에 아래의 코드를 삽입합니다. <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> CDN이란? : CDN은 C ontent D elivery N etwork의 앞글자로 접속자가 인터넷상에서 가장 가까운 곳의 서버로 컨텐츠를 전송받아 트래픽이 특정 서버에 집중되지 않고 각 서버로 분산되도록 하는기술입니다 (구글검색) 소스제공자가 CDN을 전문으로 서비스...
Post a Comment
Read more

아이콘 폰트(Icon font) 자유자제로 사용하기

-
Image
웹사이트를 제작 시 생동감 있는 사이트를 만들기 위해서는 아이콘 은 필수로 들어가는 요소입니다. 간단하게는 블릿 에서 부터 중요하게는 웹사이트의 매인 이미지 까지도 아이콘으로 사용하는 경우가 있는데 예전에는 이러한 아이콘들을 디자이너에게 만들어 달라고 요청을 하던지 아니면 웹에서 무료로 제공하는 아이콘 이미지들을 찾아서 잘라서 적용하고는 했었는데요. 근래에는 오픈소스 가 발달하면서 이러한 아이콘들을 쉽고 편하게 사용할 수 있게 제공해 주는 다양한 사이트들이 생겨나고 있습니다. 그 중에서도 아이콘들을 폰트와 비슷한 속성으로 만들어서 마치 폰트처럼 아이콘을 사용할 수 있게 제공을 하고 있습니다. 예전에 이런 것을 딩벳 폰트 라고 했었는데.. 이제는 웹폰트 형식으로도 무료 제공하고 있어서 웹사이트에 쉽게 적용할 수가 있습니다. 이 아이콘 폰트는 이미지가 백터 그래픽 형태로 되어 있어서 크기를 늘리든 줄이든 상관없이 선명한 화질을 보장받을 수 있고 색상도 일반 웹폰트처럼 CSS 에서 color 속성으로 변경을 할 수가 있습니다. 다만 아이콘이 폰트형식이기 때문에 단색으로 밖에는 설정할 수 가 없습니다. 아이콘폰트 를 제공하는 곳은 많으나 대표적으로 상업적인 용도로도 사용 가능한 3곳의 웹사이트를 소개할까 합니다. 폰트어썸 (Font Awesome) 폰트어썸 은 현재 가장 유명한 대표적인 아이콘폰트 제공 사이트 입니다. 현재 깃헙에서 51,000 여개의 star 를 받고 있을 정도로 인기가 있습니다. 다양한 형태의 아이콘이 빠르게 업데이트되어 제공되고 있으며 현재 유료서비스도 시도하고 있긴 하지만 무료로 사용할 수 있는 아이콘도 현재까지 675개 나 되어서 일반적으로 사용하기에는 부족함이 없습니다. 전체 라이선스는 GPL 을 따르고 있고 폰트는 SIL , 소스코드는 MIT 를 따르고 있습니다. 자세한 사용방법은 폰트어썸 (Font Awesome) 아이콘 폰트 사용하기 에 포스팅하겠습니다. XEICON 한 시대를 풍미했던 PHP 무료게시판 서...
Post a Comment
Read more

이미지 하단에 생기는 이상한 공백 없애기

-
Image
HTML로 레이아웃을 설정하다보면 DIV 태그 안 이나 P 태그 안에 이미지 가 있는 경우 이미지 하단에 약 1~3px정도의 공백 이 생기는 경우를 볼 수 있습니다. 그 공백을 없애려고 이리 찾아보고 저리 찾아봐도 해결이 잘 되지 않는데요. 이것을 없애는 방법을 정리해 보려고 합니다. ▲ 하단에 파란색의 공백이 있음(표시를 위해 백그라운드색을 파란색으로 했음) <div><img src="https://placeimg.com/400/300/any" /></div> 원인 위와 같이 Image 를 DIV 나 Table 에 넣을 경우 하단에 원치않는 공백이 생깁니다. 그 이유는 Image 가 인라인 요소 이기 때문에 그런 것입니다. 인라인 요소의 경우 블록 요소와 달리 보이지 않는 가상의 기준선이 존재를 하는데 기본값으로 vertical-align 의 baseline 에 위치를 하게 됩니다. baseline 은 영문 소문자 로 치자면 아래 삐침이 없는 글자(a, b, c 등등..)의 아랫쪽에 위치하게 됩니다. 그렇기 때문에 아래 삐침이 있는 글자(y, g 등등..)을 고려하면 하단에 1~3px정도의 공백을 유지하게 되는 것입니다. 해결방안 원인을 알았으면 해결책은 쉽게 찾을 수 있습니다. 첫번째 방안 첫번째는 이미지의 vertical-align 을 bottom 으로 하는 것입니다. vertical-align : bottom 은 아래삐침이 있는 글자까지 고려하여 하단으로 정렬하는 것입니다. 그렇게 되면 공백이 없어지게 되겠지요. ▲ vertical-align : bottom 으로 하단에 파란색의 공백이 없어졌음 <div><img src="https://placeimg.com/400/300/any" style="vertical-align: bottom" /></div> 두번쨰 방안 두번쨰는 이미지를 인라인 요소에서 블록 ...
Post a Comment
Read more

HTML5 태그의 블록 요소와 인라인 요소

-
HTML의 태그는 크게 블록 요소(block element) 와 인라인 요소(inline element) 로 나누어 집니다. 이 부분을 명확히 이해하고 있어야 CSS를 사용하는데 어려움이 없습니다. 이 각각의 요소에 적용되는 CSS가 별도로 존재하기 때문에 CSS를 적용해 놓고도 " 왜 적용이 되지 않지? " 라는 상황이 발생할 수 있습니다. 예를들면.... 인라인 요소는 height 가 적용되지 않는다. 인라인 요소는 width 가 적용되지 않는다. 블록 요소는 vertical-align 이 적용되지 않는다. 블록 요소는 text-align 이 적용되지 않는다. 블록요소 (block element) 블록 요소는 모든 인라인 요소를 포함 할 수 있고 다른 블록 요소도 일부 포함 할 수 있습니다. 그리고 기본적으로 가로폭 전체의 넓이를 가지는 직사각형 형태 가 되며 width , height , margin , padding 등을 사용하여 형태를 변형하여 레이아웃을 수정할 수 있습니다. 그리고 블룍 요소 다음에는 줄바꿈 이 이루어 집니다. display:inline CSS명령어로 블록 요소를 인라인 요소의 속성으로 변경 할 수 있습니다. div {display:inline} ▲ 모든 DIV태그를 inline요소로 변경함 HTML5의 블록요소 종류 address , article , aside , audio , blockquote , canvas , dd , div , dl , fieldset , figcaption , figure , footer , form , h1 , h2 , h3 , h4 , h5 , h6 , header , hgroup , hr , noscript , ol , output , p , pre , section , table , ul , video 인라인 요쇼 (inline element) 인라인 요소는 항상 블록 요소안에 포함되어 있으며 인라인 요소안에 다른 인라인 요소가 포함될 수...
1 comment
Read more

서울양양고속도로의 명물 내린천휴게소

-
Image
2017년 6월 30일에 서울에서 양양까지 연결되는 고속도로의 전 구간이 개통되었습니다. 총 길이는 150.2km나 된다고 합니다. 이전에는 서울춘천고속도로 로 춘천까지만 민자로 개통이 되었었는데 올해 6월달에 전구간이 개통되어서 서울에서 양양까지 약 2시간 이면 간다고 합니다. 저희는 즉흥적으로 대명리조트에서 속초중앙시장까지 가보기로 결정을 하고 양양고속도로를 탔습니다. 열심히 달리다가 내린천휴게소 에 들리게 되었는데 너무 잘 꾸며놓아서 소개를 하려고 합니다. 내린천휴게소 내린천휴게소는 서울방향 과 양양방향 모두 하나의 휴게소를 사용하고 있습니다. 양양방향 은 1층으로 접근을 하고 서울방향 은 4층으로 접근이 가능합니다. 차량은 서울과 양양방향으로의 전환이 불가능하고 사람만 양쪽방향으로 접근이 가능하도록 되어 있습니다. ▲ 양양방향 의 휴게소 주차장에서 바라본 내린천휴게소 의 모습입니다. 꼭데기에의 전망대에 사람이 3명 있는것이 보이네요 ^^ 그리고 롯데리아 와 엔젤인어스 커피샾도 보입니다. 휴게소는 실내에서도 윗층으로 올라갈 수도 있고 외부에서도 3층으로 올라갈 수 있게 되어 있습니다. ▲ 양양방면의 출입구입니다. 출입구를 들어서면 좌측에 편의점이 있고 바로 앞쪽에 4층으로 올라가는 에스컬레이터가 보입니다. 2층으로 올라가면 롯데리아 가 있습니다. 그리고 2층에서 바로 4층으로 올라갈 수 있는 엘리베이터와 계단이 있습니다. ▲ 4층으로 올라가면 앞쪽에 푸드코드가 있고 뒷쪽으로 전망카페로 가는 길이 있습니다. ▲ 전망카페는 탐엔탐스 에서 커피를 팔고 있고 그 앞쪽으로 커피를 마실 수 있는 의자가 준비되어 있습니다. 그리고 내린천을 볼 수 있는 넓은 창문이 있습니다. ▲ 푸드코트는 조스떡볶이 , 바르다김선생 , 코바코돈까스 등 브랜드가 있는 식당이 들어와 있어서 기본적으로 음식맛을 보장할 수 있습니다. ▲ 브랜드 음식점이 들어와 있어서 기본적인 맛은 보장하지만 전반적으로 음식가격이 비싼 편입니다. ▲ 양양...
Post a Comment
Read more

내 핸드백을 지키는 확실한 방법 Handbag dyenator

-
Image
소매치기로 부터 나의 핸드백을 지키는 확실한 제품이 나왔습니다. 아직 시제품이긴 하지만 상당히 아이디어가 좋습니다. 말레이시아의 업체인 Ash Be Nimble에서 개발을 하였고 제품명은 Handbag Dytonator 이라고 합니다. 핸드백 엑세서리 형태로 판매가 된다고 하네요. 사용방법은 내 핸드백이 소매치기를 당했을 경우 핸드폰으로 Handbag Dytonator 에게 폭발코드를 문자메시지 를 보내면 Handbag Dytonator 에 있는 SIM카드가 이것을 인식하여 약 5초 후에 폭발을 한다고 합니다. 폭발할 때 염료를 뿌려서 소매치기를 한눈에 확인할 수 있으며 그 표시로 현행범으로 체포 할 수가 있다고 합니다. 그뿐만이 아니라 GPS 도 내장하고 있어서 반경 10m이내로 위치를 추적할 수 있다고 하니 이제 소매치기도 조심해서 할 수 밖에 없을 것 같습니다. 단점은 GPS가 내장되어있고 SIM을 통해 문자를 수신해야 하기때문에 주기적으로 충전을 해야 한다는 것인데요. USB로 2시간 충전 을 하면 최대 5일까지 사용 이 가능하다고 합니다. 이 제품은 꼭 핸드백 뿐만 아니라 여행캐리어, 자전거 등 다양한 용도로 사용이 가능할 것 같습니다. 현재 시중에서 그냥 살 수는 없고 해당 사이트에서 등록을 하고 대기를 해야 합니다. Handbag Dyetonator 홈페이지 아래는 youtube 관련 동영상입니다.
Post a Comment
Read more

강원도 가볼만한곳 - 한겨울의 풍경 대관령삼양목장

-
Image
겨울의 마지막을 보내기 위해 2017년 2월 24일.. 대관령 삼양목장을 다녀왔습니다. 대관령쪽에 유명한 대형목장이 삼양목장과 양떼목장이 있으며 보통은 겨울이 아닌 봄, 여름, 가을에 양들이 초원을 자유로이 거니는 모습과 양에게 먹이를 주기위해 주로 방문하는 장소입니다. 하지만 우리는 겨울의 설경을 보기위해 대관령 삼양목장을 다녀왔습니다. 겨울에 방문하는 삼양목장의 장점은 봄, 여름, 가을에는 목장에서 운행하는 정기버스를 타고 이동을 하며 구경을 해야 하는 반면, 겨울에는 본인의 자가용을 끌고 산꼭대기까지 올라갈 수 있다는 점입니다. 먼저 산꼭대기에 있는 희망의 전망대 까지 올라갔다가 내려오면서 원하는 장소에 마음대로 멈취서 구경을 하면 됩니다. 마지막 삼양목장을 나오기 전에 매점에서 다양한 삼양식품들을 보고 구매를 할 수 있는것도 이 삼양목장만의 매력이지 않을까 합니다. 아직 시중에 출시되지 않은 라면이나 스넥들이 다양하게 준비되어 있으며 비싸지 않은 가격에 구매를 할수 있습니다. 저희도 나가사끼 짬뽕 과 원조 삼양라면 을 5개들이 포장으로 구매했습니다. ▲ 희망의 전망대의 모습입니다. 맑은날 희망전망대에 오르면 강릉쪽의 동해 를 볼 수 있습니다. ▲ 정상에서 능선을 따라보이는 풍력발전기들의 모습이 압권입니다. 겨울이라 그런지 바람이 정말 장난이 아닙니다. ▲ 희망의 전망대에서 주차장까지 걸어오는 길입니다. ▲ 꼭대기에서 내려오는 도중에 촬영한 겨울 풍경입니다. 밖은 엄청난 바람에 날아갈듯 춥지만 상대적으로 히터로 덮혀진 자가용 안이 그렇게 포근할 수 없습니다. 따뜻한 엄마품에서 보호받는 느낌입니다. ▲ 드라마 촬영지 입니다. 연애소설 , 베토벤바이러스 를 촬영했다고 하네요.. ▲ 마지막으로 풍경이 이뻐서 찍어봤습니다. 주차 주차비는 따로 없으며 주차할 장소도 넓게 있습니다. 단지 주차장이 비포장이라 발에 흙이 좀 묻는 단점이 있습니다. 겨울에는 차를 끌고 산을 오를 수 있기때문에 주차장은 별로 무의미 합니다. 비용 ...
Post a Comment
Read more

월마트 자율주행 쇼핑카트

-
Image
요즘에는 자율주행이라는 것이 대세인가봅니다. 쇼핑카트까지 자율주행을 한다고 하니.. 뭐.. 몇년 전부터 상상은 해봤던 것이기는 한데.. 실제로 월마트에서 특허까지 취득을 했다고 하니 곧 마트에서 혼자 굴러다니는 쇼핑카트를 볼 날도 멀지 않은것 같습니다. 월마트에서는 위치파악센서 , 비디오카메라 , 무선네트워크기술 을 활용한 기기를 쇼핑카트의 밑에 부탁을 하면 카트가 자유롭게 욺직여서 호출한 사용자 앞으로 오기도 하고 사용자가 원하는 상품의 위치로 안내까지 하는 것에 대한 특허를 취득했다고 합니다. 추후에는 카트에 물건을 집어 넣으면 상품에 부착되어 있는 RFID 를 활용하여 자동으로 계산도 해주고 사람에게 부착되어 있는 RFID 를 활용해 바로 결제까지 처리가 될 수도 있을 것 같습니다. 또한 물건을 싣고 주차장에 가서 구매 물품을 차에 옮겨 실게되면 쇼핑카트가 카트 보관함까지 자율주행으로 스스로 이동해서 정리될 수도 있을 것 같습니다. 물건을 구매하는 사람의 입장에서는 결제를 하기위해 계산대에서 지루하게 기다릴 필요도 없이 마치 도둑질하는 것 처럼 바로 주차장에 가서 물건만 옮겨 실기만 하면 되니 무척이나 편리한 세상이 될것 같습니다. 화질은 구리지만 관련있는 비디오하나 걸어 놓습니다.
Post a Comment
Read more

win10에서 hosts파일 수정하기

-
Image
개발을 하다보면 임의로 hosts파일을 변경해야 하는 경우가 있습니다. 이럴경우 Windows 7 버전 이하는 관리자 권환으로 쉽게 수정이 가능한데 windows10버전에서는 관리자권한으로 작업을 한다고 해도 쉽게 수정이 되지 않습니다. 더욱이나 64비트인경우는 그냥 수정이 되지 않습니다. === 이럴경우 아래와 같이 수정하시면 수정이 가능합니다. 안전모드 부팅 hosts파일을 관리자권한으로 수정 재부팅 완료 그럼 좀더 자세히 작성을 해보도록 하겠습니다. 안전모드 부팅 windows10에서 안전모드부팅하는 방법이 몇가지 있으나 저는 1가지만 포스팅하도록 하겠습니다. 업데이트 및 복구 모드를 통해서 1회 안전모드로 재부팅하는 방법입니다. 순서 요약 업데이트 및 복구 선택 복구 선택 고급 시작 옵션 선택 화면이 다시 시작되면 옵션 선택 중 문제 해결 선택 문제 해결 중 고급 옵션 선택 고급 옵션 중 시작 설정 선택 시작 설정 중 다시 시작 버튼 클릭 시작 설정 중 4번 또는 5번 숫자키를 클릭 재부팅 시작 자세한 설명 업데이트 및 복구 선택 복구 선택 고급 시작 옵션 선택 화면이 다시 시작되면 옵션 선택 중 문제 해결 선택 문제 해결 중 고급 옵션 선택 고급 옵션 중 시작 설정 선택 시작 설정 중 다시 시작 버튼 클릭 시작 설정 중 4번 또는 5번 숫자키를 클릭 재부팅 시작 hosts파일을 관리자권한으로 수정 컴퓨터가 안전모드로 재부팅이 되면 hosts 파일을 수정할 수 있게 됩니다. C:\Windows\System32\drivers\etc 위치로 이동합니다. hosts 파일을 메모장으로 엽니다. 원하는 host정보를 입력하고 수정합니다. 수정이 완료되면 다시 컴퓨터를 재부팅하고 사용하면 됩니다.
Post a Comment
Read more