HTML5의 API의 Canvas 태그를 사용하여 여러가지 도형 및 이미지를 쉽고 간단하게 그릴 수 있습니다. 그런데 만약 투명한 도형이나 그림자, 텍스트 등을 추가하려면 어떻게 하는지 알아봅니다.# Canvas 태그에 투명 효과(opacity) 적용하는 방법이번에는 투명효과인 transparent, opacity 효과를 주기 위한 방법으로 Canavas에서는 바로 globalAlpha를 사용합니다. 이 프로퍼티는 캔버스의 컨텍스트에 적용 가능한 프로퍼티로 추가할 요소를 투명하게 만들어 주는 매우 유용한 방법입니다. 사용 방법은 아주 간단합니다. globalAlpha에 숫자값을 적용하면 됩니다.context.globalAlpha = 0.5;매우 간단합니다. 위와 같이 숫자를 적용하며 0.5는 50%의 투명도를 가지게 됩니다. 그럼 예제를 알아보겠습니다.# Canvas opacity 투명효과 예제보기, globalAlpha아래는 Canvas 영역에 context를 만들고 여기에 투명도
2019-01-26 06:18:42react native에서 투명한 배경화면을 설정하는 방법을 알아봅니다. 어떻게 할까요?react native에서 투명한 배경색인 transparent 효과를 가지는 방법은 css에 사용하는 것과 동일한 방법을 적용할 수 있습니다. 바로 rgba를 값으로 사용하는 것입니다. 만약 View 컴포넌트에 이를 적용하면 아래처럼 사용합니다.<View style={{ backgroundColor: '(0, 0, 0, 0.5)',}}></View>위의 View 컴포넌트는 배경색으로 0.5의 값을 가지는 검정색 투명한 배경을 띄게됩니다. 즉 뒤에 겹치는 레이어가 있는 경우 투명하게 보이게됩니다.
2018-08-13 20:00:21엘리먼트 내부에 공간(간격)을 만들기 위해서 CSS의 padding 프로퍼티를 사용할 수 있습니다. padding은 설정된 값만큼 빈 공간을 만들어줍니다.padding: 100px;이때 값으로는 px, pt, em, %등 여러 값을 사용할 수 있습니다. 아래는 padding을 사용하는 자세한 방법입니다.# padding 프로퍼티 사용방법padding에 값을 설정할 경우 하나의 값을 설정하거나 상하좌우 다른 값을 설정할 수 있습니다. 아래는 Top, bottom, left, right 각각 20px의 값을 주는 경우입니다.@ Top, right, bottom, left 각각 20px 내부 공간padding: 20px;padding: 20px 20px 20px 20px;위 두 값은 모두 동일하게 적용되어 20px 만큼 상하좌우 공간이 생기게 됩니다. 물론 각각 다른 값을 설정할 수도 있겠죠.@ Top, right, bottom, left 각각 50px, 10px, 0, 20px 내부
2018-07-10 09:18:39AngularJS를 사용하여 라우팅(Route)을 사용하는 경우 이와 관련된 다양한 이벤트를 제어 및 동작할 수 있습니다. 아래는 route 시작, 업데이트 등등의 관련 이벤트를 자세히 알아보도록 하겠습니다.# Route 라우팅 관련 이벤트 알아보기먼저 route에 사용할 수 있는 이벤트로 아래와 같이 4가지가 존재합니다. 각각 조금씩 다른 동작의 이벤트를 구현합니다.i. $routeChangeStart라우트 바뀌기 이전에 이벤트가 발생 ii. $routeChangeSuccess라우트가 성공적으로 변경 후 이벤트 발생iii. $routeChangeError라우트가 변경하지 않는 에러 발생시 발생iv. $routeUpdate라우트가 업데이트 되는 시점에 이벤트 발생# route 이벤트 동작 예제보기아래 예제를 봐주세요. 가장 보편적인 $routeChangeStart를 사용한 이벤트입니다. route가 시작되면 이벤트가 동작합니다. 여기서는 Route Change Starting !!
2017-11-16 08:59:25AngularJS를 사용하여 SPA(Single Page Application)으로 구현하는 경우 페이지 이동 즉, 현재 페이지에서 다른 페이지로 이동하는 방법으로 routeProvider 또는 stateProvider를 사용합니다. 만약 stateProvider를 사용하는 경우 $state를 사용하여 페이지 이동이 가능합니다. 아래는 다른 페이지로 이동하기 위해서 $state를 사용하는 방법을 자세히 알아보겠습니다.# $state.go()를 사용하여 페이지 이동, stateProvider 방식만약 stateProvider를 사용하여 페이지를 이동하는 경우 $state를 사용합니다. 내부 메소드로 go()가 있으며 이를 사용하면 다른 state, 페이지로 이동이 가능합니다. 먼저 간단한 $state의 go() 사용방법은 아래와 같습니다.$state.go('stateName', {parameter})여기서 stateName은 route 설정에 선언된 이름, 즉 이동할 위치이며 뒤의 p
2017-09-27 05:52:17aws에서 서버를 설정한 뒤 보유한 도메인으로 접속하는 방법을 알아봅니다. aws에서 도메인을 연결하려면 아래의 과정을 수행합니다.Elastic ip 설정생성된 인스턴스 public ip를 호스팅 가능하게 설정도메인의 네임스페이스에 호스팅 네임스페이스 설정설정된 도메인으로 이동# Elastic ip 설정엘라스틱 ip는 유동ip에서 고정ip로 바뀌게됩니다. 즉 고정된 ip를 계속해서 사용가능하므로 반드시 도메인 연결을 위해 설정해야만 합니다.위 방법을 통해 특정 도메인을 사용하여 접속하는 것이 가능하게됩니다. 참고로 모든 과정을 수행하여도 바로 웹사이트의 네인스페이스가 바뀌는 것은 아니고 일정 시간 간격으로 순차적으로 변경된 정보가 반영되므로 조금 기다릴 필요가 있다는 전 참고하세요.
2017-08-05 08:55:47SPA(Single page application)에서 CKEDITOR를 적용하는 방법은 무엇일까요?싱글페이지 어플리케이션의 경우 비동기 방식으로 DOM이 그려지기 때문에 textarea 태그가 언제 그려질지 확실히 알기가 어려울 수 있습니다. 예를들어 해당하는 textarea 태그가 directive의 내부의 내부...에 사용되는 경우라던가 기타 ajax가 추가로 사용되는 경우 등등 이 경우 어떻게 할까요?문제는 document의 onready state 또는 onload등의 이벤트 등을 사용하여도 확인이 안되는데 있습니다. 이 경우 지연시간을 강제로 발생하는 방법도 존재하지만... 예를들어 setTimeout() 등을 사용하는 방법이죠. 아니면 태그에 isLoaded 등의 변수를 할당하고 이를 $watch를 사용하여 확인할 수도 있습니다.가장 좋은 방법은 해당하는 디렉티브, 컨트롤러에 CKEDITOR 코드를 추가하는 것이 아니라 CKEDITOR를 사용하기 위한 커스텀 디렉티브로
2017-04-14 11:22:15열심히 글을 써내려가다가 실수로 페이지를 이동하는 경우가 없으신가요? 예를들어 뒤로가기 버튼이 마우스에 있는 경우도 있죠~ 이 경우 자신도 모르게 뒤로 이동해 열심히 작성한 내용이 사라질 수 있습니다. 물론 자동 저장 기능이 없다면 말이죠~자동 저장가능은 분명 효과적이고 우수한 안정장치입니다. 하지만 시간 간격으로 이루어지고 쿠키를 허용하거나 저장 공간에 제약이 있을 수 있죠. 서버에 저장한다고해도 트레픽이 높은 경우 불필요한 자원낭비이므로 이 방법을 고집하는 건 비효율적이죠~그럼 뒤로이동을 금지하는 방법을 구현해 실제 콘텐츠 작성시 발생가능한 위험 요소로 부터 좀 더 자유로워지면 좋겠죠? 그럼 어떻게 이 기능을 적용하는지 알아보겠습니다.# 백스페이스에 이벤트를 사용하여 예방가장 많이 사용하는 방법이 keyup 또는 keydown 이벤트를 사용하는 방법입니다. 간단하게 눌려진 키가 백스페이스인지 확인하여 이동을 금지합니다. 이에 더하여 활성화 된 엘리먼트가 현재 쓰기와 관련된 경우에
2017-03-17 20:59:17Table 태그는 테이블, 표를 만들 수 있는 가장 간단한 방법이다. 아래는 테이블 태그를 사용하여 표를 만드는 방법을 알아보고 table 코드를 사용했을때의 장점 및 단점 그리고 팁과 정보에 대하여 좀 더 자세하게 다뤄보려 한다.# Table 태그를 사용하는 방법먼저 테이블의 경우 표를 만드는데 사용하는 태그로 리스트 태그인 <ul> 태그와 구분할 수 있다. 이런 레이아웃을 구성하는 태그들은 그 쓰임과 목적에 따라 구분되어야 하는데 일반적으로 레이아웃 태그가 가진 기본적인 속성 때문에 이에 맞는 태그를 사용하는 것이 효과적이다. 예를들어 간단한 목록을 표현하는데는 리스트 태그인 <ul> 태그만으로 충분하여 <table> 태그를 사용하면 오히려 불필요한 속성들이 적용될 수도 있다.아래는 테이블에 사용될 수 있는 태그들을 적어보았다. 해당 태그들은 각각 <table> 안에서 쓰임을 갖는다.+ 태그의 쓰임 상세보기<table> // 표를 생성하는 가장 상위의 태그<thead> // 테이
2016-07-04 08:21:53글을 작성하는 경우 텍스트의 일부가 영역을 넘어가게되면 이를 해결하기 위해 줄바꿈, 랩핑(wrapping)이 필요합니다. 이와 관련된 다양한 방법들이 존재하며 css에도 랩핑과 관련된 다양한 속성이 존재합니다. 아래는 이와 관련된 속성을 알아보고 예제를 통해 배워보도록 하겠습니다.# CSS를 사용한 줄바꿈, 랩핑 방법 알아보기 가장 먼저 알아볼 속성은 바로 word-wrap 속성에 대하여 알아보겠습니다.! word-wrap 속성word-wrap 속성은 텍스트가 해당 영역을 넘어갈 경우 강제로 줄바꿈을 할 것인지 아니면 그대로 이어서 보이게 할 것인지를 결정하는 css 속성입니다. 우선 간단한 사용방법은 아래와 같습니다. #test { word-wrap: 옵션값; }word-wrap 속성은 선택가능한 옵션값으로 다음과 같이 normal 그리고 break-word가 존재합니다.i. normal // 기본값으로 허용된 랩핑만 허락함ii. break-word // 허용되지 않더라도 줄바꿈
2016-06-20 12:42:47아이콘을 만들어 웹사이트에 넣는 방법은 다양합니다. 만약 아이콘 요소를 만들기 위해 태그를 사용하는 경우 어떤 태그를 사용하는 것이 좋을까요?일반적으로 많이 사용되는 태그가 있으니 바로 i 태그입니다. 왜 아이콘을 만드는 태그를 <span>가 아닌 <i> 태그를 사용할까요? 또는 왜 선호할까요? 그 이유를 찾아보겠습니다.# i 태그 사용시 얻을 수 있는 장점은?먼저 i 태그는 단어 자체가 매우 짧습니다. 한단어죠. 그리고 icon의 i와 첫글자가 같아 코드 가독성도 우수하다 말할 수 있죠.사실 아이콘과 텍스트를 함께 사용하는 경우가 많은데 span태그만 사 사용할 경우 지나치게 복잡해 보일 수 있는 단점을 가지고 있습니다. 또한 유지보수 차원에서 나중에 수정을 할 때 i 태그만 찾는다면 모든 아이콘 태그를 선택하여 변환할 수 있어 이 점도 용이하겠습니다.사실 i 태그를 유용하게 사용할 수 있는 이유는 i태그가 잘 쓰이지 않기 때문이기도 합니다. i 태그의 본래 목적은 이탤릭 효과를
2015-12-02 11:30:06파일을 다운로드 받았을때 확장자가 실행파일인 com, exe, dmg 등이 아니라 아래처럼 iso로 끝나는 경우가 있습니다. 흔히들 이미지 파일이라고 하죠. 혹시 모르시는 분들을 위해 파일을 설치하는 방법을 알려드리겠습니다.iso 파일은 CD등 미디어 장치의 데이터를 iso 확장자인 하나의 파일로 만드는 경우에 생성됩니다. 그래서 이 파일을 사용하기 위해서는 가장 좋은 방법은 바로 이미지 파일 로더를 사용하는 방법입니다.# 가상 드라이브 프로그램 설치 후 실행1. 데몬툴즈(Demon Tools) 가상드라이브2. CD Space 가상 드라이브위의 프로그램을 설치 후에 해당 파일을 선택하면 실행 가능한 형태로 로딩됩니다.만약 위의 파일을 설치하는 방법이 아닌 방법을 원하신다면 아래의 방법도 가능합니다.# 압축 해제 후 프로그램 실행윈도우라면 해당 파일 위에서 우측버튼을 누르면 Extract file(s)라는 쉘메뉴가 있습니다. 이를 클릭하시면 선택 위치에 파일 압축이 풀리게 되고 그
2015-10-28 10:22:29! 자간, 글자와의 사이값을 수정, letter-spacingletter-space: 수정값수정값의 단위는 pt, em, px 단위가 사용되며 특이한 점은 음수 사용이 가능하다는 점으로 0px을 입력할 경우 자간이 0이 되지 않고 기본값이 적용됩니다. 그렇기 때문에 자간을 없애기 위해서는 -(마이너스) 값이 필요합니다. 아래 예를 참고하세요.! letter-spacing 값이 0인 경우TEST letter-spacing!! letter-spacing 값이 -2px인 경우(음수)TEST letter-spacing!!! letter-spacing 값이 2px인 경우(양수)TEST letter-spacing! letter-spacing를 응용한 display 속성 응용하기나란한 두 개의 블럭을 위치하기 위해서 사용할 수 있는 방법은 두 가지입니다. 하나는 float를 사용한 정렬이고 다른 하나는 두 개 블럭의 display속성을 inline-block으로 맞추는 것입니다. 하지만 둘 다
2015-01-30 17:42:52
