Web publisher Hye Jin Lee @hjportfolio - Tumblr Blog

HTML과 CSS를 완전히 이해하는데 필요한 하나의 원칙은 박스모델이다.

어떤 레이아웃이든지 3단의 레이아웃을 만들기는 까다롭습니다. 두개의 사이드바가 어느 한쪽으로 붙어있다면 기존의 2단 레이아웃을 수정해서 사이드바영역 안에 두개의 사이드바를 만들면 간단하게 해결되지만 사이드바가 양쪽으로 나누어지면 약간 복잡해지죠. 우선 하나의 사이드바 안에 두개의 사이드바를 만들어서 어느 한쪽으로만 사이드바가 두개 있는 레이아웃을 만들어보고 두개의 사이드바가 양쪽으로 나누어지는 레..

21세기에 우리가 가진 초능력

왜 지난 10여 년 전부터 성공한 기업의 창업자들은 모두 컴퓨터 프로그래머들인가? 애플의 ‘스티브 잡스’나 마이크로소프트의 ‘빌 게이츠’의 어린 시절의 장난감은 컴퓨터이었고, 그들이 장난감을 가지고 노는 방법은 프로그래밍이었다. 빌 게이츠는 그 또래 최고의 프로그래머였고, 다니던 대학을 중퇴하고 창업 했다. 아마존을 창업한 ‘제프 베조스’는 제대로 컴퓨터 공학을 전공한 프로그래머였다. 구글의 창업자인 ‘레리 페이지’와 ‘세르게이 브린’도 소프트웨어 엔지니어, 즉 프로그래머이다. 이들은 각각 미시간 대학과 메릴랜드 대학에서 정규 컴퓨터 공학을 전공했고, 서부의 스탠포드 대학교의 컴퓨터 공학 석사 과정에서 서로 만났다. 그것이 ‘우리 시대의 새로운 행위’라는 ‘구글링’이 만들어진 계기가 되었다. 이뿐인가? 전기 자동차를 만드는 ‘테슬러(Tesler)’의 회장이라는 ‘앨런 머스크(Elon Musk)’도 10살 때부터 프로그래밍을 한 프로그래머이다.

미국 전역에서 치러질 졸업식에서 ‘좋아하는 일을 하라’는 연설이 줄줄이 들려올 것이다. 최악의 구직난을 겪고있는 대졸자들에게 할 수 있는 최선의 조언일까?

지난 4월 10일, 예약 판매로 출시된 애플워치가 미국에서 6시간 만에 품절되었다는 소식이 있었습니다. 약 한달 전인 3월 9일에 애플 이벤트에서 애플워치가 등장했을 때, 언론에서는 수많은 의견들이 쏟아져 나왔습니다. 모든 의견을 일반화 시키기는 어렵지만, ...

#apple

Text-overflow

* 1. text가 overflow되었을 때 어떻게 처리할 것인가를 나타내는 속성 * 2. overflow 속성이 hidden 등 overflow 속성이 값을 갖고 있을 때 적용이 가능 * 3. 엘리먼트 크기 이상의글이 들어있음을 말 줄임표 ...을 이용하여 나타내줌

Style

* text-overflow : clip | ellipsis | string * clip : 엘리머트 테두리에서 글자가 잘림 * ellipsis : "..."로 표시 * ellipsis-world : 마지막 단어 잘림

Markup&Css <style> div.ex { width:100px.; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } </style>

<body> <div class="ex">텍스트가 길어지면 줄어들게 될것입니다.</div> </body> * 모든 브라우져 지원

#Text-overflow

웹퍼블리셔의 자바스크립트 범위확장

웹퍼블리셔가 자바스크립트를 해야 하나

이 주제에 대한 논쟁은 이제 끝났다고 생각 됩니다. 얼마전에 있었던 하코사 세미나에서의 멀더끙님의 발표에서도 나온 이야기 이듯이 이미 외국의 많은 회사에서도 우리나라의 웹퍼블리셔와 비슷한 직군의 채용공고 요구사항에 javascript 개발에 대한 명확한 조건이 기재되어 있었으며, 심지어 디자이너에게도 어느정도의 이해가 필요하다고 쓰여 있었습니다.

html, css, javascript 는 우리에게 매우 강력한 언어이며 중요한 수단이라고 생각 됩니다.html 과 css 조차도 완벽히 마스터 하지 않은 상태에서 javascript 를 시작하는 것은 옳지 않다라고 말씀하시는 분들 역시 이제 생각을 조금만 바꾸셨으면 합니다. 어떤 한가지 것을 완벽하게 마스터 하기란 쉽지 않습니다. 또한 html 과 css를 마스터 하기까지의 시간동안 회사는 혹은 클라이 언트는 분명 그 이상을 요구하거나 원할 것입니다.

좀더 쉽게 말하자면 이것은 자신의 가치를 높이고 올라간 가치만큼의 연봉을 높일 수 있는 방법입니다. 물론 그렇다고 해서 html 과 css ...좀더 자세히 들어가서 표준화와 접근성을 소홀히 하라는 말은 아닙니다. 처음 이쪽일을 시작하면서 부터 html, css, javascript, 웹접근성과 웹표준화를 동일선상에 두고 똑같이 중요한 것으로 생각하는 인식으로 바뀌어야 합니다.

이제 더이상 자바스크립트는 중,고급 자원들만 할수 있는 영역이 아닙니다. 우리가 할수 있고, 해야하는 범위가 늘어났다는 것은 퍼블리셔라(UI개발자건, front end developer 이건간에)불리는 직군의 미래가 매우 밝아졌다는 것을 의미하며, 보다 전문적인 직군이 되었다는 것을 의미합니다.

front-end developer 작업환경구축

- 형상관리기존에는 웹서버에 바로 붙어서 (FTP)작업하는 방식으로 웹서버에 올라간 파일이 곧 최종본이었습니다. 신규프로젝트에서 크게 문제되는 부분은 없었지만 운영으로 넘어가면 진행되던 건이 홀딩 되거나 딜레이 되면서 현재의 운영버전과 코딩본간의 싱크가 틀어지는 문제가 종종 발생했습니다. 협업도 문제였습니다. 같은 파일을 서로 열어 작업 하거나, 예전 파일을 덮어 써 버리면 복구 할 수 있는 방법이 없었습니다.

해결을 위해 git 을 도입하면서 문제가 해결 되었습니다. 운영중인 건에 대해서는 master 브런치를 유지하고 추가 운영이슈에 대한 브런치를 추가하여 작업하고 운영배포시 master 브런치에 merge 하는 방식으로...언제나 이전 버전에 대한 형상이 남아 있기때문에 더이상 같은 파일을 덮어쓰거나 하는 등의 문제를 고민하지 않아도 되며, 작업자가 어떤부분을 어떻게 수정했는지 히스토리가 남기때문에 문제되는 부분은 없었습니다.

- 로컬서버git 을 사용하게 되면서 작업은 서버에 붙어서 하던 방식 에서 로컬에서 작업후 push 하는 방식으로 변경되었습니다. 그로인해 로컬에서 절대경로 확인을 위해 혹은 include 를 사용하기 위해서 각각 개인 PC 에 서버 셋팅이 필요하게 되었습니다.

- node.js 위의 문제를 해결하기 위해 node.js 환경을 구축 했습니다. asp, php, jsp 에서 사용되는 모든 include 문법을 사용할 수 있고, package.json 의 설정을 해 놓으면 다른 인원들도 해당 레포지토리를 clone 받아 npm install 하게 되면 모두 동일한 환경이 구축되어 작업이 수월해 졌습니다.

- less ( + Gulp)git 을 사용하더라도 동일한 css 나 파일을 수정하게되면 merge 시에 충돌이 날 가능성이 있습니다. 따라서 각각 섹션별 작업을 진행하고, 업무 효율을 높이기 위해 less 를 도입하게 되었습니다. less 의 빌드를 위해 gulp 를 사용하기로 했으며, 최초 셋팅시의 시간은 조금 걸렸으나 향후 동일한 셋팅을 사용하면 되기때문에 많은 부분에서 +a 가 되었습니다.

- bower프로젝트를 진행하다보면 다양한 자바스크립트 라이브러리들 끌어와야 합니다. 우리는 bower 를 이용해 해당 문제를 해결하기로 했고, 이 부분은 현재 진행형 입니다.

- hologram (+ ruby)신규 프로젝트 종료 후에는 반듯이 가이드 문서를 제작해야 하는데, 이는 여간 까다롭고 귀찮은 일이 아닐 수 없습니다. css, js 파일에 직접 마크다운 문법으로 주석을 달아 놓은뒤 빌드하면 가이드 문서를 제작해 주는 홀로그램을 도입해 가이드 문서 제작에 드는 시간과 비용을 어느정도 줄일 수 있었습니다.

회사 내부에서 window 사용자와 OS X 사용자가 있기 때문에 두가지 환경에서 모두 테스트 및 셋팅이 이루어 졌으며, 현재까지 발생한 이슈는 없었습니다.

테이블의 선을 단선으로 border-collapse 속성

border-collapse는 테이블 또는 셀의 테두리선 표시방법을 지정하는 속성입니다.

속성값으로는 collapse와 separate를 사용할 수 있습니다.

collapse : 서로 이웃하는 테이블이나 셀의 테두리선을 겹쳐서 표현 합니다.

separate : 기본값으로 서로 이웃하는 테이블이나 셀의 테두리선을 분리시켜 표현 합니다.

<tr>

<td>border-collapse:collapse;</td>

</tr>

</table>

위와 같이 border-collapse 속성갑을 collapse로 지정하고 border 속성을 추가적으로 지정하면 아래와 같이 깔끔한 테이블을 출력할 수 있습니다.

border-collapse:collapse;

border-collapse 속성은 테두리선의 표시방법만 지정하므로 반드시 border 속성으로 구체적인 테두리선의 스타일을 지정해 주어야 합니다.

테이블의 셀이 많을때는 IE와 Firefox에서 조금 다른 모습으로 출력됩니다. IE에서는 추가적으로 TD element에 border 속성을 추가적으로 지정하면 됩니다.

<tr>

<td style="border:1px gray solid;">Hypertext Markup Language</td>

</tr>

<tr>

<td style="border:1px gray solid;">Cascading Style Sheet</td>

</tr>

</table>

HTMLHypertext Markup Language

CSSCascading Style Sheet

| Adobe(어도비) 샌프란시스코 본사 UX 디자이너, 김나영 <1부>

UX 디자인이요? 한국말로는 사용자경험디자인, 영어로도 사용자경험디자인이죠. 하하. 과거에는 UI디자인, 유저리서치, 비주얼디자인, 인더스트리얼디자인, 이런식으로 디자인 도메인들이 테스크에 맞추어져 있었고 디자이너들은 그 테스크에 따라 타이틀을 가졌다면, UX디자이너라는 타이틀은 하는 일이 약간은 모호하고 어쩌면 브로드할 수 있어요.

결국 UX디자이너가 궁극적으로 해야 하는 일은 더 나은 사용자의 경험을 만드는 것이에요. 즉, Goal이 있는거에요. 그냥 Tasks가 아니라 그 Goal에 맞춰서 필요한 Tasks를 자기가 찾아야 하는 일이에요. 단지 비주얼디자인만 하는게 아니라 그 외에 플래닝과 유저리서치도 해야해요. 그러다보니 자연스레 해야 하는 일들이 넓어지는 거죠. 그래서 과거에는 작은 다이어그램으로 도메인들이 있었다면, UX디자인은 좀 더 넓은 디자인 시스템이라고 많이 말하죠. 학계 간 연계 디자인시스템이라고 해도 되겠네요.

Trending Blogs

Recently Viewed Blogs

Web publisher Hye Jin Lee