개발을 시작하고 작업하고 참여했던 프로젝트와 결과물을

한눈에 볼 수 있도록 공유 하기 위해 최근까지 포트폴리오를 제작해왔습니다.

제작된 포트폴리오는 아래 링크를 통해 확인가능합니다.

http://portfolio.sanguneo.com/

1. 제작 계획 수립

필요성을 느끼고 한글파일이나 워드파일로 정리하다가 그 한계를 느꼈습니다. 좀더 자유롭고 직관적이고 싶었기에, 내가 잘 하는것을 이용 해 보자는 생각에 웹 버전으로 제작하게 되었습니다.

2. 제작 방법

우선 작업을 정리하려면 한둘이 아니기 때문에 같은 규격으로 스크린샷을 찍기 시작했습니다. 이전에 작업하면서 업로드한 이미지부터 정리를 위해 찍은 모든 이미지들을 모아, 넘버링 을 하고 이름을 붙인 뒤 트리구조의 디렉토리로 분류했습니다. 

그리고 window 10 bash 를 이용해 find * 명령어를 실행하고 이를 > 로 리스트 저장

이를 대분류와 소분류로 나누어 디렉토리별로 div 로 묶고 a 태그로 감싼 뒤 설명

A테그를 이용한 이미지 링크들을 img src로 변환하고, 링크 추가 및 설명을 추가하는 스크립트를 제작

프로젝트 요약을 추가하고 simpleLightBox 를 적용했습니다. (jQuery 를 이용한 라이브러리입니다.)

CSS로 간단한 스타일을 적용하고 모바일에서도 잘 보이도록 viewport 설정

아파치 설정하고 호스팅

3. 이후 개발방향

현재는 html을 직접 수정해야하지만, 이후에는 규격화된 json을 이용해 템플릿화 할 예정입니다.

클로저 특성으로, 내부함수에서 외부함수의 지역변수에 접근 할 수 있는데, 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근 할 수 있다. -> 함수 안의 내부함수나 그 로컬 변수들은 그 외부함수의 밖에서 접근을 못한다. 

잘못 작성된 코드

결과

그러면 왜 5만 5번이 출력이 되었을까?

=>

클로저의 특성인 내부함수에서 외부함수의 지역변수에 접근을 하는것인데 arr[i] 로 정의된 함수에서 사용하는 i는 외부함수의 지역변수가 아니다.

arr[i] 는 i를 리턴하는 함수로만 사용이 되는데, 이 i 가 외부함수의 지역변수가 아니기 때문에 for문을 이미 종료된 상태인 i = 5 인 상황이 되어버리기 때문이다.

고쳐진 코드

결과

=>

for문을 돌때 미리 i를 이용한 외부변수를 실행하여(실행후 소멸됨) 각각 arr[i]는 실행된 외부함수로부터 반환된 내부함수가 되기 때문에 다른방식의 결과가 나오기 때문이다.

참고 https://opentutorials.org/course/743/6544

display 속성

display: inline  기본값으로, 요소를 inline 요소처럼 표시합니다. => 앞뒤로 줄바꿈 되지 않습니다.

display: block  요소를 block 요소처럼 표시합니다. => 따라서 요소 앞 뒤로 줄바꿈 됩니다

display: none 박스가 생성되지 않습니다. => 따라서 공간을 차지하지도 않습니다.

display: inline-block 요소는 inline인데 내부는 block 처럼 표시함.  => 즉, 박스 모양이 inline 처럼 옆으로 늘어섬.

visibility 속성

visibility: visible  기본값으로 요소가 그대로 보입니다.visibility: hidden  요소가 보이지 않지만, 여전히 그 공간을 차지하며 투명하게 남습니다.

visibility: collapse <table> 태그에서만 사용할 수 있는 값으로, 선택 테이블의 행과 열을 숨깁니다.

하지만 여전히 투명하게 공간을 차지 합니다. 

<table> 이외에서 사용하면 hidden 상태처럼 만듭니다. 

(collapse는 IE, Firefox에서만 작동)

참고 : http://aboooks.tistory.com/85

1. 문제 발생 (예제)

1000px 로 설정한 div를

다시 150px, 700px, 150px 로 나누고

안쪽의 div에는 display: inline-block 속성을 주었는데

맨 오른쪽 div 영역이 아래쪽으로 밀려내려감

*** div의 padding과 margin, border는 모두 0px 이었음

2. 원인

<div> 태그 등으로 다른 태그들을 묶어주는 경우,

div 태그 또한 inline-element로 인식을 하기 때문에

div들끼리 마주하는 부분에서 여백이 생김

div 뿐만아니라, span도 마찬가지

3. 해결 방법

1)

.container { // 부모 랩퍼

...

font-size: 0px;

letter-spacing: 0px;

word-spacing: 0px;

}

.container > div { // 간격이생기던 엘리먼트

...

font-size: 15px;

letter-spacing: 1em;

word-spacing: 2em;

}

감싸고 있는 div에 font-size, letter-spacing, word-spacing을 0px로 줄임 ->

안쪽의 div에서 복구.

2)

.container > div { // 간격이생기던 엘리먼트

...

float:left;

}

참고

http://comajava.blogspot.kr/2013/12/display-inline-block-width-margin-css.html

Html5의 Canvas 는 html5의 역사가 그리 길지 않은만큼 그 역사 또한 짧습니다.

기능적인 측면에서 이건 왜이렇게 되느냐 부터 시작해서 아쉬운 부분이 많이 보일때가 많아요.

이럴땐 거의 울며 겨자먹기로 기능을 메소드로 감싸서 보완하고 원래의 기능 '인것 처럼' 구현하곤 합니다.

오늘 만난 문제가 그중 하나였는데요.

첫번째로 canvas의 fillText는 기본적으로 멀티라인을 지원하지 않는 문제였습니다.

이는 일일히 text를 잘라서 계산을 해주어야 하는 부분이었습니다. 

구글가서 찾아보신분들은 아마 아실거에요, 이 문제에대한 원성이 얼마나 자자한지..

그리고 대부분의 경우 메소드를 하나 생성해서 해결을 합니다만,

이게 특정 라이브러리에 속해있는 등의 문제를 만나면 조금은 문제가 복잡해지죠.

그래서 이를 해결했습니다.

그랬더니 또 새로운 문제가 튀어나왔어요.

텍스트의 너비(픽셀상 길이) 를 계산해주는 measureText 여러줄의 길이를 모두 합친 길이가 나왔어요.

사용의 경우 canvas와 javascript 를 지원하는 모든 브라우저에서 사용이 가능하고,

코드를 삽입하면 원래사용하던 이름 그대로 사용하도록 기능만 추가해보았습니다.

아래코드를 확인해보세요

위와같이 오버라이딩을 한번 해놓으면 'fillText' 는 \n 으로 줄바꿈이 가능하고, 'measureText' 는 가장 길이가 긴 줄로 길이를 리턴하게됩니다.

canvas fillText override lineBreak newline