LATEST POSTs 최근 등록된 포스팅 목록

• webdevetc git 리모트 및 브랜치 삭제 추가 제거 업데이트 방법 Git을 사용한 형상관리방법으로 프로젝트를 진행할 경우가 대다수이죠. 아래는 일반적으로 마스터에 대하여 브랜치를 생성하거나 이미 생성된 브랜치를 삭제하는 등등의 방법에 대하여 알아봅니다.만약 프로젝트로 다수의 인원이 작업을 진행하는 경우 리모트의 마스터 브랜치를 기준으로 각자 로컬 브랜치를 생성합니다. 업데이트를 리모트에 업데이트하는 과정인 PR, <sp

  View : 6132 / Created : 2016-12-26
  
• webdevetc git과 github 형상관리에 대하여 이해하기 형상관리 버전관리에서 가장 우수하다고 생각되는 git과 github을 정리해보았다. git을 이해하고 git의 특징 및 장단점에 대하여 알아보고자 한다.# git이란?간단하게 git이 무엇이냐면 VCS(Version Control System)에 D를 더한 Distributed VCS라 말한다. 이는 분산버전관리로 다수의 사람들과 공통의 프로젝트를 진행할때 효과적으로 협업할 수 있는 도구이다. 여기서 D가 붙은 것이 Git의 큰

  View : 5269 / Created : 2016-12-16
• webdevetc 프론트엔드 개발 영역의 변화 웹은 빠르게 변화한다. 그리고 그 웹을 개발하는 웹 개발자의 포지션도 함께 빠르게 변화해간다...  아래 글은 최근 프론트엔드 개발 영역의 변화를 과거 그리고 현재와 비교하여 짧게 정리한 내용이다.프론트엔드, 앞단 영역을 다루던 코더가 점점 전문화 되면서 웹퍼블리싱 및 웹퍼블리셔라는 용어가 사용되기 시작했다. 이 영역이 점점 확고해졌고 좀 더 복잡한 웹사이트를 구현하기 위해 액션스크립트 및 자바스크립트 사용이 늘어가면서 이 분야만 담당하게 된

  View : 2205 / Created : 2016-12-09
• webdevetc 반응형웹 구축시 css calc() 활용팁 반응형웹은 이제 모든 웹페이지의 필수가 되어버린 것 같다... 최근 접하는 프로젝트의 거의 모든 웹페이지에서 사용되고 있기 때문이다.  부트스트랩이나 기타 반응형웹을 쉽게 구현 가능하도록 돕는 라이브러리등을 사용한다면 크게 고민하지 않을 수도 있지만 필자는 항상 어떻게 레이아웃을 잡을 것인지부터 매우 많은 부분들에

  View : 12556 / Created : 2016-08-05
  
• webdevetc 네이버맵 api v3 알아보기 네이버에서 새로운 지도 api를 공개하였습니다. 바로 NAVER MAP API V3 !! 이전 버전과 비교해 무엇이 달라졌을까요? 그리고 아직 맵 api를 모르시는 분들을 위해서 우선 간략하게 지도 API가 어떤 것인지 알려드리도록 하겠습니다. 그럼 먼저 지도 API에 대하여 알아보도록 하겠습니다.! 지도 api는

  View : 2904 / Created : 2016-06-23
  
• webdevetc 웹퍼블리싱 인터뷰 예상질문 웹퍼블리싱(웹퍼블리셔)으로 이직 또는 취업을 준비하는 사람이라면 실무 면접과 면접 전 테스트 등이 있을 수 있다. 과연 퍼블리싱 분야에 지원하기 위해서는 어떤 준비를 해야할까? 또한 취업까지는 어떤 과정이 있는지 알아보고자 한다.기본적으로 웹퍼블리셔 또는 프론트엔드 개발자에게 요구하는 역량은

  View : 10153 / Created : 2016-05-31
  
• webdevetc 차트 라이브러리 Am Chart 요즘은 대부분 플러그인, 컴포넌트 단위로 구현되기 때문에 웹페이지를 신규 런칭하는 경우도 예외는 아닐 것이다. 물론 모든 것을 처음부터 끝까지 개발자가 구현할 수도 있겠지만 시간과 비용을 고려했을 때 더 효과적인 방법이 구매하는 방법 또는 오픈 소스, api 활용이라면 그 방법도 고려하는 것이 좋지 않을까라고 개인적으로 생각한다.아래는 자바스크립트를 사용해 차트를 그릴 수 있는 AM CHA

  View : 6087 / Created : 2016-05-03
  
• webdevetc WCAG 2.0 무엇이고 왜 알아야만 하는가? 웹사이트 구축시 웹퍼블리싱 단계에서 웹접근성에 대하여 고려해야 한다. 이때 WCAG라는 용어를 자주 볼 수 있는데 무엇을 뜻하고 의미하는지 이에 대하여 자세히 알아보자.! WCAG란 무엇인가?WCAG는 Web Content Accessibility Guidelines의 약어이다. WCAG는 바로 웹표준

  View : 1416 / Created : 2016-04-28
  
• webdevetc 자바스크립트를 배우는 순서는 어떻게 해야할까 프론트엔드 개발자에게 자바스크립트가 필수라고 말하지만 사실 서버 개발자도 자바스크립트를 모르는 사람은 거의 없는 것 같다. 그 만큼 자바스크립트 언어 자체가 활용성이 높으며 많은 레퍼런스를 가지고 있기 때문일 것이다.숙련된 개발자에게 자바스크립트는 또 다른 언어로 요역하겠지만 개발자의 길을 새롭게 시작하는 이에게 자바스크립트는 큰 산과 같을 수 있을 것이다. 어떻게해야 이 높은 산을 정복할 수 있을지 난감할 이에게 조금이나마 알려주고자 이 글을 적어본다. 물론 이미 알고 있는 내용이거나 재미가 없을 수 있다. 반대의

  View : 3731 / Created : 2016-04-26
  
• webdevetc 객체지향언어에서 인스턴스(instance)란 무엇인가 객체지향언어를 배우게 되면 가장 먼저 접하게 되는 것이 바로 객체와 인스턴스(instance)입니다. 여기서는 인스턴스가 무엇이고 어떻게 생성되는지 알아보고 왜 인스턴스가 중요한지도 함께 알아보도록 하겠습니다. 먼저 인스턴스는 무엇일까요? <span data-custom-

  View : 10319 / Created : 2016-04-20
  
• webdevetc ie 8 embed 태그 youtube 동영상 재생이 안되는 경우 embed 태그를 사용하여 유투브(Youtube) 영상을 콘텐츠에 삽입하는 경우 IE 8 에서 정상적으로 동작하지 않을 수 있다. 이 경우 어떻게 해야 정상적으로 IE 8 구버전에서 플레이가 가능한지 알아보고자 한다.먼저 embed 태그가 IE 8 에서 지원하지 않는 것 같다... 이를 해결하기 위해 아래와 같이 해당 태그를 다른 태그로 변경하면서 테스트를 실시하였다. 실시 환경은 Windows 7 IE 8 브라우저이다.<

  View : 5214 / Created : 2016-04-04
• webdevetc IE 8 에서 CSS 미디어 쿼리 적용 안되는 경우 해결하는 방법 CSS의 미디어 쿼리(Media Query)는 IE 구버전에서 정상적으로 동작하지 않는다. 만약 IE 8 에서 미디어 쿼리를 사용하려면 어떻게 해야할까? 사실 가장 좋은 방법은 IE 8을 지원하지 않는 방법이다. 그 이유는 간단한데 더 이상 MS에서 Support하지 않기 때문에 보안 이슈가 발생할 수 있기 때문이다...어쨌든 이를 해결하기 위한 좋은 대안이 있는데 이는 바로 Google에서 제공하는 오픈소스를 활용하는 방법이다.이 방법

  View : 3295 / Created : 2016-04-01
• webdevetc IE 8 에서 label 태그 정상작동 안하는 경우 해결방법 IE 구버전(IE 8 이하) 에서는 label 태그가 정상적으로 동작하지 않는다. 그렇기 때문에 라디오 또는 체크박스등에 사용된 input 태그가 정상적으로 동작하지 않는데 이를 수정하기 위해서는 아래와 같은 스크립트를 추가해야한다.아래는 jQuery 제이쿼리를 사용한 방법으로 아래 코드를 IE 구버전에서 추가시키도록 한다.// For support IE 8, label tag$(function() {   $

  View : 5918 / Created : 2016-04-01
• webdevetc 윈도우 7 USB 설치디스크 만들어 인스톨하는 방법 요즘은 CD Drive가 많이 사용되지 않습니다. 유용한 flash 드라이브나 가상 디스크 사용이 워낙 활발하기 때문이죠. 만약 가지고 있는 iso 형태의 윈도우즈 7(Windows 7)을 USB를 통해 설치하려면?? 이런 경우 아래의 방법을 통해 사용이 가능합니다. 자세한 내용은 아래를 참조해 주세요.Step 1. Windows 7 iso 파일과 USB를 준비Step 2. USB로 설치디스크를 만들기 위해 프로그램 다운로드; 해당 프로그램은 MS에서 제공하고 있으며 아래에서 다운로드 받으실 수

  View : 1881 / Created : 2016-03-31
• webdevetc [ASP] 콘텐츠에서 태그 제외하는 함수, strip_tags() ASP에서 태그를 삭제할 경우 어떻게 해야할까? 모든 서버 스크립트언어가 그렇듯 ASP 역시 태그를 손쉽게 제거할 수 있는 함수를 제공하고 있다면 매우 편하겠지만... 아쉽게도 이에 대한 방법이 없어 필요한 함수를 직접 만들어 사용해야 한다. 물론 정규표현식 방법사용한 방법으로 아래 방법이 아마 사용할 수 있는 가장 간단한 방법일 것 같다.<%function strip_tags(strHTML)    dim regEx&nbs

  View : 2144 / Created : 2016-03-31
• webdevetc email html에서 table radius 속성이 적용 안되는 경우 email html을 사용해 사용자에게 메일을 발송하는 경우 테이블 태그를 많이 사용한다. 만약 테이블 태그를 사용했는데 아래와 같은 이슈가 나타난다면?? 나타나는 이슈는 다음과 같다. html 코드에 table 태그를 사용하여 코드를 작성하였고 이 테이블의 border 테두리를 둥글게 radius를 적용하였는데 정상적으로 적용되지 않는 이슈이다. 어떻게 수정해야 할까...문제는 table 태그에 함께 사용된 border-collapse: collapse; 속성 때문이다. 만약 기존 테이블 코드가 아래와 같은

  View : 5321 / Created : 2016-03-28
• webdevetc 웹사이트 QA 직무 알아보기 안녕하세요. 웹과 관련된 다양한 이야기들을 나누는 EnSSo입니다. 오늘은 QA 직무에 대하여 알아보자 합니다.QA(Quality Assurance)라고 하면 품질을 검증하는 과정의 업무를 말합니다. 웹 관련 업무 외에도 제조업 등에 QA 직무가 존재합니다. 생산된 제품의 품질을 검증하는 것이지요. 웹도 비슷한 목적을 가지나 하는 일은 전혀다를 수 있겠습니다 :)! 웹사이트 QA 업무가 하는 일QA는 웹사이트 구축의 가장

  View : 3573 / Created : 2016-03-25
• webdevetc 웹에서 모달창과 팝업창의 장단점 알아보기 웹에는 숨겨진 영역이나 별도 공간을 필요한 상황에만 보여주는 다양한 인터페이스 요소가 존재한다. 가장 넓리 쓰이는 것들 중 하나가 팝업창 및 모달창이다. 이 둘 사이의 차이점과 특징에 대하여 알아보고 어떤 장단점이 있는지도 알아보고자 한다.# 팝업창 그리고 모달창의 공통점과 다른점먼저 이 둘의 공통점과

  View : 33703 / Created : 2016-03-24
  
• webdevetc Notepad++에서 자동줄바꿈 방법 보기 Notepad++는 무료이면서도 다양한 기능을 제공한다. 오늘 알아볼 내용은 자동으로 줄바꿈 되는 기능을 어떻게 해야하는지 알아보고자 한다. 줄여서 자동줄바꿈, Auto wrapping 기능이다.이 기능은 모두 알겠지만 혹시 모르는 분들을 위해 설명하자면...라인에 글자 수가 많아지면 코드상에서는 변동이 없느나

  View : 13349 / Created : 2016-03-13
• webdevetc email html 이미지 또는 요소의 간격, 여백, 흰줄 제거하는 방법 웹은 발전하고 있지만 웹메일 서비스를 제공하는 곳들은 글쎄... 라고 말하고 싶다... 이유야 많겠지만 아직도 eDM(이메일 마케팅) 보내기 위해 작성하는 html 코드가 너무 복잡하고 예전 방식만 가능하기 때문이다...물론 각각의 웹메일 서비스 업체마다 이유야 많다. 예를들어 스크립트의 사용등을 제거하는 이유는 일부 악의를 띈 이메일에 피해를 받을 수도 있기 때문이다....최근의 이메일 마케팅에 사용되는 html 코드는 텍스트도 많으나

  View : 11968 / Created : 2016-03-09
  
• webdevetc [CSS] transform 속성에 상대값 사용하여 요소 이동시 발생하는 여백 또는 선 제거하는 방법 세로 저ㅇ렬을 하거나 요소을 이동시키기 위해 다양한 방법이 사용가능하다~ 그중에서도 transform 속성을 사용하는 방법 역시 존재한다.! transform 속성을 이용한 요소의 이동아래와 같은 방법으로 우리는 transform을 사용해 이미지를 비롯한 다양한 요소를 원하는 곳으로 이동할 수 있다.<style><

  View : 1709 / Created : 2016-03-09
• webdevetc [기초] 웹퍼블리싱 태그의 사용과 쓰임  저번 주에 이어 세번째 연재를 작성하고 있습니다^^ 저번주는 혼자 힘으로 "Hello World"를 출력하는 웹사이트 만들기란 주제로 포스팅했구여 이를 통해 가장 기본이 되는 웹페이지의 작성 방법에 대하여 알아봤습니다. 오늘은 그 안에 사용되는 태그의 쓰임과 활용법에 대하여 알아보

  View : 1560 / Created : 2016-01-16
  
• webdevetc apmsetup7 window 8.1 설치시 mysql 안되는 경우 해결방법 이번에 새로 장만한 태블릿에 apmsetup을 설치완료했습니다. 아시겠지만 apmsetup은 웹서버 운영에 필요한 3가지를 간편하게 모두 실행시켜주는 매우 편리한 어플리케이션입니다. 별도의 설정, 설치없이 모두 가능하게 도와줍니다.문제는 mysql인데요.... 갑자기 재부팅 이후부터 정상구동이 안되는 현상이 발견되었습니다...해결하기 위해서 알아보니 mysql의 환경설정

  View : 2246 / Created : 2015-12-31
• webdevetc 사이트 운영시 개인정보 취급의 방법은? 개인정보 수집 및 제공하기 위한 동의서는 어떻게 만들어야 하는가?수집 정보를 위한 순서(프로세스)1. 필요한 개인정보가 무엇인지 파악할 것2. 개인정보를 얼마나 보유할 것인지 확인3. 수집, 이용에 정보주체로부터 동의를 얻어야하는지 확인할 것인지* 동의가 필요없는 경우4. 필수 정보와 선택 정보를 분류할 것인지5. 제 3자에게 제공해야

  View : 262 / Created : 2015-12-30
• webdevetc 포토샵 단축키로 업무속도 2x 올리자 일러스트, 사진 편집, 배너 제작 등등 너무나 잘 사용되는 포토샵(Photoshop) !! 포토샵의 단축키를 사용하면 업무 생산성은 배 이상으로 빨라지게 됩니다. 하지만 너무나 많은 단축키... 그리고 하나하나 기억하는건 쉽지 않은데요 ~ 아래는 각 유형별로 중요한 단축키들을 모아서 정리해 보았습니다.<span data-cust

  View : 7834 / Created : 2015-12-16
  
• webdevetc nodejs 모듈 설치 방법 nodejs에서 npm을 사용하여 여러가지 모듈을 쉽고 빠르게 설치할 수 있습니다. 이 때 npm을 사용하는데 아래에서 자세히 알아봅니다.nodejs는 사용할 모듈을 직접 설치해야합니다. 모듈 설치를 할 경우 node 밖에 실행해야하므로 만약 node 안에 있다면 Ctrl-D 키를 눌러 빠져나오도록 합니다.(이는 process.exit()와 같다) 이제 n

  View : 5289 / Created : 2015-12-16
  
• webdevetc 크롬 input 태그등에 자동생성 백그라운드 색 제거하는 방법 크롬 브라우저를 사용하여 input 태그등을 사용하면 나중에 페이지를 로딩할 경우 배경색이 다른 경우가 발생한다. 이런 경우는 로그인 페이지를 만들거나 기타 입력폼을 작성할 때 나타나는데 문제는 input 폼이 다수인 경우 모두 바뀌는 것이 아니라 일부만 바뀌어 이상해 보이기 때문이다.자동완성기능 속성을 off해도 백그라운드가 노란색으로 나타나는 이 스타일을 제거하기 위한 방법은 어떻게 해야하는가? background 속성을 변경해도 적용이 안되는데 그 이유는 해당 백그라운드 칼라는 box-shadow 속성과 관련이

  View : 3000 / Created : 2015-12-11
• webdevetc 블루 호스팅 ftp 접속하는 방법 블루 호스팅을 사용해 웹 호스팅을 이용중이시라면 ftp 접속을 통해 파일을 이동해야합니다. 이때 ftp에 접속하기 위한 방법이 조금 다른데요 ... 어떻게 접속하는지 알아보겠습니다.파일질라 기준으로 설명드립니다.1. site manager 실행2. host입력3. Encryption을 only use plain FTP (insecure) 선택4. Logon TypeAsk for password로 선택5.  User도메

  View : 1052 / Created : 2015-12-04
• webdevetc 아이콘 요소를 만들때 span이 아닌 i 태그가 좋은 이유 아이콘을 만들어 웹사이트에 넣는 방법은 다양합니다. 만약 아이콘 요소를 만들기 위해 태그를 사용하는 경우 어떤 태그를 사용하는 것이 좋을까요?일반적으로 많이 사용되는 태그가 있으니 바로 i 태그입니다. 왜 아이콘을 만드는 태그를 <span>가 아닌 <i> 태그를 사용할까요? 또는 왜 선호할까요? 그 이유를 찾아보겠습니다.<span style=

  View : 16893 / Created : 2015-12-02
• webdevetc 웹에서 말하는 컴포넌트란 무엇인가? 웹 환경에서 일하다 보면 흔히 들을 수 있는 용어가 컴포넌트(Component)이다. 컴포넌트는 무엇을 의미하고 어떻게 다른지 알아보고자 한다.# 컴포넌트란?컴포넌트는 프로그래밍의 한 부분을 의미하며 재사용이 가능한 최소 단위를 말한다. 그래서 객체지향언어를 사용할 때 자주 사용되며 재사용이 가능하기 때문에 컴포넌트 단위로 분류하거나 이동 가능하다는 특징이 있다.이는 모듈(Module)과 혼동될 수 있는데 모듈은 특정 기능

  View : 12859 / Created : 2015-12-02