개발을 시작하고 작업하고 참여했던 프로젝트와 결과물을한눈에 볼 수 있도록 공유 하기 위해 최근까지 포트폴리오를 제작해왔습니다. 제작된 포트폴리오는 아래 링크를 통해 확인가능합니다. http://portfolio.sanguneo.com/ 1. 제작 계획 수립 필요성을 느끼고 한글파일이나 워드파일로 정리하다가 그 한계를 느꼈습니다. 좀더 자유롭고 직관적이고 싶었기에, 내가 잘 하는것을 이용 해 보자는 생각에 웹 버전으로 제작하게 되었습니다. 2. 제작 방법 우선 작업을 정리하려면 한둘이 아니기 때문에 같은 규격으로 스크린샷을 찍기 시작했습니다. 이전에 작업하면서 업로드한 이미지부터 정리를 위해 찍은 모든 이미지들을 모아, 넘버링 을 하고 이름을 붙인 뒤 트리구조의 디렉토리로 분류했습니다. 그리고 window..

클로저 특성으로, 내부함수에서 외부함수의 지역변수에 접근 할 수 있는데, 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근 할 수 있다. -> 함수 안의 내부함수나 그 로컬 변수들은 그 외부함수의 밖에서 접근을 못한다. 잘못 작성된 코드 var arr = [] for(var i = 0; i 클로저의 특성인 내부함수에서 외부함수의 지역변수에 접근을 하는것인데 arr[i] 로 정의된 함수에서 사용하는 i는 외부함수의 지역변수가 아..

display 속성 display: inline 기본값으로, 요소를 inline 요소처럼 표시합니다. => 앞뒤로 줄바꿈 되지 않습니다. display: block 요소를 block 요소처럼 표시합니다. => 따라서 요소 앞 뒤로 줄바꿈 됩니다 display: none 박스가 생성되지 않습니다. => 따라서 공간을 차지하지도 않습니다. display: inline-block 요소는 inline인데 내부는 block 처럼 표시함. => 즉, 박스 모양이 inline 처럼 옆으로 늘어섬. visibility 속성 visibility: visible 기본값으로 요소가 그대로 보입니다.visibility: hidden 요소가 보이지 않지만, 여전히 그 공간을 차지하며 투명하게 남습니다.visibility: co..

1. 문제 발생 (예제) 1000px 로 설정한 div를 다시 150px, 700px, 150px 로 나누고 안쪽의 div에는 display: inline-block 속성을 주었는데 맨 오른쪽 div 영역이 아래쪽으로 밀려내려감 *** div의 padding과 margin, border는 모두 0px 이었음 2. 원인 태그 등으로 다른 태그들을 묶어주는 경우, div 태그 또한 inline-element로 인식을 하기 때문에 div들끼리 마주하는 부분에서 여백이 생김 div 뿐만아니라, span도 마찬가지 3. 해결 방법 1) .container { // 부모 랩퍼 ... font-size: 0px; letter-spacing: 0px; word-spacing: 0px; } .container > div..

Html5의 Canvas 는 html5의 역사가 그리 길지 않은만큼 그 역사 또한 짧습니다. 기능적인 측면에서 이건 왜이렇게 되느냐 부터 시작해서 아쉬운 부분이 많이 보일때가 많아요. 이럴땐 거의 울며 겨자먹기로 기능을 메소드로 감싸서 보완하고 원래의 기능 '인것 처럼' 구현하곤 합니다. 오늘 만난 문제가 그중 하나였는데요. 첫번째로 canvas의 fillText는 기본적으로 멀티라인을 지원하지 않는 문제였습니다. 이는 일일히 text를 잘라서 계산을 해주어야 하는 부분이었습니다. 구글가서 찾아보신분들은 아마 아실거에요, 이 문제에대한 원성이 얼마나 자자한지.. 그리고 대부분의 경우 메소드를 하나 생성해서 해결을 합니다만, 이게 특정 라이브러리에 속해있는 등의 문제를 만나면 조금은 문제가 복잡해지죠. 그..