CATEGORIES
글을 작성하는 경우 텍스트의 일부가 영역을 넘어가게되면 이를 해결하기 위해 줄바꿈, 랩핑(wrapping)이 필요합니다. 이와 관련된 다양한 방법들이 존재하며 css에도 랩핑과 관련된 다양한 속성이 존재합니다. 아래는 이와 관련된 속성을 알아보고 예제를 통해 배워보도록 하겠습니다.! 알아둘 점시작에 앞서 우리는 줄바꿈에 쓰이는 세 가지 속성을 가장 많이 볼 수 있습니다.word-wrapword-breakoverflow-wrap여기서 가장 많이 쓰이던 줄바꿈, 랩핑 속성이 예전에는 단연 word-wrap이었다면 이제는 word-break가 사용됩니다. 그 이유는...word-wrap의 경우 CSS version 1이지만 최근의 브라우저는 CSS3인 word-break를 사용해도 대부분 완벽히 호환되기 때문입니
Last Modified : 2020-12-29 19:04:44
Table 태그는 테이블, 표를 만들 수 있는 가장 간단한 방법이다. 아래는 테이블 태그를 사용하여 표를 만드는 방법을 알아보고 table 코드를 사용했을때의 장점 및 단점 그리고 팁과 정보에 대하여 좀 더 자세하게 다뤄보려 한다.# Table 태그를 사용하는 방법먼저 테이블의 경우 표를 만드는데 사용하는 태그로 리스트 태그인 <ul> 태그와 구분할 수 있다. 이런 레이아웃을 구성하는 태그들은 그 쓰임과 목적에 따라 구분되어야 하는데 일반적으로 레이아웃 태그가 가진 기본적인 속성 때문에 이에 맞는 태그를 사용하는 것이 효과적이다. 예를들어 간단한 목록을 표현하는데는 리스트 태그인 <ul> 태그만으로 충분하여 <table> 태그를 사용하면 오히려 불필요한 속성들이 적용될 수도 있다.아래는 테이블에 사용될 수
Last Modified : 2020-05-11 17:25:37아이콘을 만들어 웹사이트에 넣는 방법은 다양합니다. 만약 아이콘 요소를 만들기 위해 태그를 사용하는 경우 어떤 태그를 사용하는 것이 좋을까요?일반적으로 많이 사용되는 태그가 있으니 바로 i 태그입니다. 왜 아이콘을 만드는 태그를 <span>가 아닌 <i> 태그를 사용할까요? 또는 왜 선호할까요? 그 이유를 찾아보겠습니다.# i 태그 사용시 얻을 수 있는 장점은?먼저 i 태그는 단어 자체가 매우 짧습니다. 한단어죠. 그리고 icon의 i와 첫글자가 같아 코드 가독성도 우수하다 말할 수 있죠.사실 아이콘과 텍스트를 함께 사용하는 경우가 많은데 span태그만 사 사용할 경우 지나치게 복잡해 보일 수 있는 단점을 가지고 있습니다. 또한 유지보수 차원에서 나중에 수정을 할 때 i 태그만 찾는다면 모든 아이콘 태그를
Last Modified : 2015-12-03 07:59:22
크롬 브라우저를 사용하여 개발자 도구를 사용해 직접 소스를 변경, 추가하는 방법에 대하여 알아봅니다.! 브라우저에서 직접 수정하고 추가하는 방법이 가능?크롬 브라우저를 사용하는 경우 크롬의 Workspace 설정으로 가능합니다. 그럼 개발자 도구를 사용하여 브라우저에서 직접 수정하고 저장하는 방법에 대하여 자세히 알아봅니다.# 개발자 도구로 크롬에서 바로 수정, 저장하기크롬에서 개발자 도구를 사용하는 경우는 많습니다. 특히 웹소스의 잦은 확인이 필요한 경우... 예를들면 화면 인터페이스, UI작업 등의 웹퍼블리싱에 더 많이 사용되겠죠. 또 자바스크립트의 디버깅을 목적으로도 많이 쓰입니다. 이때 확인과 동시에 브라우저에서 직접 수정하고 저장할 수 있다면 더욱 편리하겠죠. 크롬의 개발자 도구는 Workspace
Last Modified : 2020-04-18 14:56:23
파일을 다운로드 받았을때 확장자가 실행파일인 com, exe, dmg 등이 아니라 아래처럼 iso로 끝나는 경우가 있습니다. 흔히들 이미지 파일이라고 하죠. 혹시 모르시는 분들을 위해 파일을 설치하는 방법을 알려드리겠습니다.# 가상 드라이브 프로그램 설치 후 실행하기iso 파일은 CD등 미디어 장치의 데이터를 iso 확장자인 하나의 파일로 만드는 경우에 생성됩니다. 그래서 이 파일을 사용하기 위해서는 가장 좋은 방법은 바로 이미지 파일 로더를 사용하는 방법입니다.1. 데몬툴즈(Demon Tools) 가상드라이브2. CD Space 가상 드라이브위의 프로그램을 설치 후에 해당 파일을 선택하면 실행 가능한 형태로 로딩됩니다. 만약 위의 파일을 설치하는 방법이 아닌 방법을 원하신다면 아래의 방법도 가능합니다.!
Last Modified : 2020-11-06 08:18:42react native에서 투명한 배경화면을 설정하는 방법을 알아봅니다. 어떻게 하면 될까요?가장 간단한 방법은 css를 사용하는 방법입니다. 즉 react native의 해당 요소에 style 속성을 사용하여 투명한 배경색을 적용 할 수 있습니다. 이 때 style의 background 속성을 추가하고 그 값으로 rgba를 값으로 사용하면 됩니다. rgba의 a 값은 alpha를 의미하며 0 ~ 1 사이의 값으로 투명도 조절이 가능합니다.! Reactnative 코드 작성하기간단하게 예를 들어 코드를 작성하면 아래와 같습니다. 만약 앱 내부의 View 컴포넌트에 이를 적용하면 아래처럼 사용합니다.<View style={{ backgroundColor: '(0, 0, 0, 0.5)',}}> ...</Vi
Last Modified : 2020-11-25 11:55:31
HTML5의 API의 Canvas 태그를 사용하여 여러가지 도형 및 이미지를 쉽고 간단하게 그릴 수 있습니다. 그런데 만약 투명한 도형이나 그림자, 텍스트 등을 추가하려면 어떻게 하는지 알아봅니다.# Canvas 태그에 투명 효과(opacity) 적용하는 방법이번에는 투명효과인 transparent, opacity 효과를 주기 위한 방법으로 Canavas에서는 바로 globalAlpha를 사용합니다. 이 프로퍼티는 캔버스의 컨텍스트에 적용 가능한 프로퍼티로 추가할 요소를 투명하게 만들어 주는 매우 유용한 방법입니다. 사용 방법은 아주 간단합니다. globalAlpha에 숫자값을 적용하면 됩니다.context.globalAlpha = 0.5;매우 간단합니다. 위와 같이 숫자를 적용하며 0.5는 50%의 투명도
Last Modified : 2019-08-25 21:02:13AngularJS를 사용하여 SPA(Single Page Application)으로 구현하는 경우 페이지 이동 즉, 현재 페이지에서 다른 페이지로 이동하는 방법으로 routeProvider 또는 stateProvider를 사용합니다. 만약 stateProvider를 사용하는 경우 $state를 사용하여 페이지 이동이 가능합니다. 아래는 다른 페이지로 이동하기 위해서 $state를 사용하는 방법을 자세히 알아보겠습니다.# $state.go()를 사용하여 페이지 이동, stateProvider 방식만약 stateProvider를 사용하여 페이지를 이동하는 경우 $state를 사용합니다. 내부 메소드로 go()가 있으며 이를 사용하면 다른 state, 페이지로 이동이 가능합니다. 먼저 간단한 $state의 go(
Last Modified : 2018-02-14 02:24:50! 자간, 글자와의 사이값을 수정, 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 속성 응용하기나란한 두 개의 블럭을 위치하기 위해서 사
Last Modified : 2015-11-03 18:51:46HTML 테이블 태그를 사용하는 경우 만약 colspan 또는 rowspan의 최대값을 설정하는 방법에 대하여 알아봅니다.# HTML table 태그의 colspan 최대값 설정하기rowspan 역시 colspan 설정 방법과 동일하므로 colspan의 방법에 대하여 알아봅니다.! 먼저 rowspan, colspan은 무엇이고 언제 최대값이 필요할까요?테이블 태그는 여러개의 셀(cell) 단위로 구성되어 있습니다. 이때 각각의 셀을 병합하는 방법으로 rowspan, colspan이 사용됩니다. 두 개 모두 합치는 목적으로 사용되나 row, span 즉 행 또는 열을 합칠때 사용하는 속성이 다릅니다.colspan 최대값 설정은 언제 필요한가?colspan의 값을 최대값으로 설정하는 경우가 언제 있을까요? 테이
Last Modified : 2020-05-15 16:03:36열심히 글을 써내려가다가 실수로 페이지를 이동하는 경우가 없으신가요? 예를들어 뒤로가기 버튼이 마우스에 있는 경우도 있죠~ 이 경우 자신도 모르게 뒤로 이동해 열심히 작성한 내용이 사라질 수 있습니다. 물론 자동 저장 기능이 없다면 말이죠~자동 저장가능은 분명 효과적이고 우수한 안정장치입니다. 하지만 시간 간격으로 이루어지고 쿠키를 허용하거나 저장 공간에 제약이 있을 수 있죠. 서버에 저장한다고해도 트레픽이 높은 경우 불필요한 자원낭비이므로 이 방법을 고집하는 건 비효율적이죠~그럼 뒤로이동을 금지하는 방법을 구현해 실제 콘텐츠 작성시 발생가능한 위험 요소로 부터 좀 더 자유로워지면 좋겠죠? 그럼 어떻게 이 기능을 적용하는지 알아보겠습니다.# 백스페이스에 이벤트를 사용하여 예방가장 많이 사용하는 방법이 key
Last Modified : 2017-04-03 14:49:22
AngularJS를 사용하여 라우팅(Route)을 사용하는 경우 이와 관련된 다양한 이벤트를 제어 및 동작할 수 있습니다. 아래는 route 시작, 업데이트 등등의 관련 이벤트를 자세히 알아보도록 하겠습니다.# Route 라우팅 관련 이벤트 알아보기먼저 route에 사용할 수 있는 이벤트로 아래와 같이 4가지가 존재합니다. 각각 조금씩 다른 동작의 이벤트를 구현합니다.i. $routeChangeStart라우트 바뀌기 이전에 이벤트가 발생 ii. $routeChangeSuccess라우트가 성공적으로 변경 후 이벤트 발생iii. $routeChangeError라우트가 변경하지 않는 에러 발생시 발생iv. $routeUpdate라우트가 업데이트 되는 시점에 이벤트 발생# route 이벤트 동작 예제보기아래 예제
Last Modified : 2017-11-18 02:34:14SPA(Single page application)에서 CKEDITOR를 적용하는 방법은 무엇일까요?싱글페이지 어플리케이션의 경우 비동기 방식으로 DOM이 그려지기 때문에 textarea 태그가 언제 그려질지 확실히 알기가 어려울 수 있습니다. 예를들어 해당하는 textarea 태그가 directive의 내부의 내부...에 사용되는 경우라던가 기타 ajax가 추가로 사용되는 경우 등등 이 경우 어떻게 할까요?문제는 document의 onready state 또는 onload등의 이벤트 등을 사용하여도 확인이 안되는데 있습니다. 이 경우 지연시간을 강제로 발생하는 방법도 존재하지만... 예를들어 setTimeout() 등을 사용하는 방법이죠. 아니면 태그에 isLoaded 등의 변수를 할당하고 이를 $watc
Last Modified : 2017-04-14 11:22:15aws에서 서버를 설정한 뒤 보유한 도메인으로 접속하는 방법을 알아봅니다. aws에서 도메인을 연결하려면 아래의 과정을 수행합니다.Elastic ip 설정생성된 인스턴스 public ip를 호스팅 가능하게 설정도메인의 네임스페이스에 호스팅 네임스페이스 설정설정된 도메인으로 이동# Elastic ip 설정엘라스틱 ip는 유동ip에서 고정ip로 바뀌게됩니다. 즉 고정된 ip를 계속해서 사용가능하므로 반드시 도메인 연결을 위해 설정해야만 합니다.위 방법을 통해 특정 도메인을 사용하여 접속하는 것이 가능하게됩니다. 참고로 모든 과정을 수행하여도 바로 웹사이트의 네인스페이스가 바뀌는 것은 아니고 일정 시간 간격으로 순차적으로 변경된 정보가 반영되므로 조금 기다릴 필요가 있다는 전 참고하세요.
Last Modified : 2017-08-05 17:10:40엘리먼트 내부에 공간(간격)을 만들기 위해서 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;위 두 값은 모두 동일하게 적용되어 20p
Last Modified : 2018-07-25 08:58:25
lodash를 사용하여 문자열의 공백을 제거하는 방법 중 하나인 trim()의 사용 방법에 대하여 알아봅니다.# lodash trim() 메소드는?trim()은 문자열에 적용하는 메소드입니다. 일반적으로 trim() 함수의 경우 매우 자주 사용되죠. trim()을 사용하면 문자열에서 처음과 마지막에 사용된 공백을 제거해주게 됩니다. 예를들어 ' abc '는 'abc'로 변환하게 되죠.lodash trim()의 사용 방법은 아래와 같습니다._.trim(string, char)여기서 trim()은 두 가지 인자를 전달 받을 수 있습니다. 첫 번째는 입력받을 값이고 두 번째는 적용할 공백이나 문자열을 의미합니다.// string : 변환, 변경할 문자열// char(Option) : 변환, 변경시 기준이
Last Modified : 2021-01-14 15:50:51