본문 바로가기

html

웹디자이너의 자격 안녕하세요 키다리디자이너입니다.오늘은 웹디자이너의 자격에 대해 알아 볼게요. 결론부터 말씀드리면 웹디자이너의 자격 요건은 없습니다.이전 글에도 작성한 바가 있지만 이 직업은 진입장벽이 낮은 편에 속하고 누구나 도전할 수 있는 업종이죠.그렇기 때문에 많은 사람들이 이 업종에 발을 들이는 것 같습니다. 실제로 주위를 둘러보면 의외로 한번쯤 웹디자이너, 혹은 코더 일을 해본 사람이 많이 있습니다.저도 웹디자이너로 일하다 보면 '나도 옛날에 디자인 좀 해봤는데'라는 말을 하는 사람을 수 없이 만나봤죠.그들을 포함한 "한 때 디자인 좀 해 본 사람들"이 지금은 왜 웹디자인을 그만 두었을까요.아니 그만두었다기 보다는 웹디자이너를 포기한 사람들이라고 하는 게 정확하겠네요. 어차피 수박 겉핥기 수준이니 독학하셔도 됩니.. 더보기
스타일시트로 애니메이션 효과를 낼 수 있어요 CSS Animation 안녕하세요 키다리디자이너입니다. 오늘은 jQuery나 자바스크립트 등을 이용하지 않고 CSS만으로도 간단한 애니메이션 기능을 구현할 수 있는 방법을 소개해 드리겠습니다. CSS3의 transition을 이용하면 지정된 시간과 속도로 단순히 CSS의 속성을 부드럽게 전환할 수 있는데요, animation은 이것보다 더 구체적이고 다양한 애니메이션 효과를 낼 수 있으니 잘만 사용하면 코딩할 때 개발자에게 아쉬운 소리 할 일도 적어지겠죠? 기본 규칙 CSS애니메이션은 ‘@keyframes 애니메이션이름(식별자)’를 사용하여 애니메이션이 수행되는 동안 정해진 지점에 속성을 줍니다. 그리고 'keyframes'식별자는 해당되는 CSS속성에 직접 영향을 미칩니다. 더 쉽게 말하자면 애니메이션이 10초간 재생되면 1.. 더보기
반응형웹/적응형웹 사이트 레이아웃 살펴보기 안녕하세요 키다리디자이너입니다. 반응형웹사이트를 만들기 위해서는 기획단계부터 기술검토까지 많은 고민이 필요합니다만, 그 중 가장 중요한 것은 어떤 컨텐츠를 어떻게 배치하고 브라우저 사이즈가 변할때마다 그것을 어떻게 재배치할 것인지가 아닐까 합니다. 고정된 레이아웃을 가진 웹사이트와 달리 반응형웹사이트는 레이아웃 변화에 웹사이트의 전략이 담겨야 하니까요. 오늘은 몇가지 반응형웹/적응형웹사이트들의 브라우저 크기에 따른 레이아웃 변화를 살펴보도록 할게요. 이것은 제가 가볍게 살펴본 후 레이아웃에 임의로 번호를 매겨본 것이구요, 그것의 코딩까지는 자세히 살펴보지 않았다는 것을 미리 말씀드립니다. 1. 반응형웹 사이트 반응형웹사이트와 적응형웹사이트의 차이를 미리 말씀드리고 넘어가자면 사이트를 띄운 후 브라우저 가.. 더보기
좋은 웹디자이너가 되는 방법 3부 안녕하세요 키다리디자이너입니다. 웹디자이너가 갖추어야 할 능력으로 미적 감각, 툴을 잘 다루는 능력, 빠른 일처리 등 여러가지 조건이 있는데요 그 많은 조건 중 가장 중요한 것은 마음가짐이 아닐까 합니다. 사실 기술은 연차가 쌓이면 저절로 늘어가는 것이고 미적인 감각 또한 본인 노력에 따라 어느정도 성장시킬 수 있습니다. 하지만 디자인에 대한 마음가짐과 태도는 누군가 가르쳐줄 수도 없는 것이고 경력과는 별개인 것입니다. 오늘은 좋은 웹디자이너가 되는 방법 3부로 디자이너가 가져야할 마음가짐에 대해 써보도록 하겠습니다. 1. 이해하기 디자인을 하기 위해서는 기획자(혹은 오더)가 가진 생각을 먼저 이해할 수 있어야 합니다. 누구나 알고 있고 당연한 소리지만 생각보다 잘 안되는 부분이며 프로젝트 진행 중에 마.. 더보기
알면 편합니다. CSS 선택자 (CSS Selector) 1부 안녕하세요 키다리디자이너입니다. 오늘은 코딩할때 알아두면 편한 CSS의 선택자에 대해 알아보기로 하겠습니다. 선택자(selector)는 말 그대로 CSS에서 지정한 조건에 따라 해당 부분만 따로 속성을 주거나 속성을 제거할 수 있는 코딩 방법입니다.다시 말해 코딩 내용중에 ~~가 있다면 그 부분만 따로 스타일을 지정하거나 없앨 수 있다는 것입니다. 잘 이해가 되지 않아도 괜찮습니다. 아래에 작성된 내용을 하나씩 보면 금방 이해가 되실거에요. 1. > '>'는 특정 태그 아래에 태그나 클래스등을 모두 선택합니다. 아래 코드를 보겠습니다. 이것의 실행 결과입니다. CSS를 정의한 부분에 ul>li가 보이실 것입니다. 바로 이런 것들이 선택자이며 정해진 조건에 따라 코딩에 반영됩니다. ul>li 은 ul태그 .. 더보기
CSS3 - display:box 에 대해 공부해 보자. 안녕하세요. 키다리디자이너입니다. 오늘은 CSS의 display 속성 중 box라는 속성에 대해 알아보겠습니다. 코딩을 나름 오래하신 분들조차 의외로 이 속성은 잘 모르고 안쓰시는데 그럴 법도 한 게 예전에는 이 속성을 제대로 지원한 브라우저가 많이 없었기도 했고 굳이 이것을 사용하지 않아도 코딩하는데 어려움을 느끼지 않았기 때문입니다. 그러나 이제는 많은 브라우저들이 이 속성을 지원하고 있고...(IE는 아직도 완벽히 지원하진 않네요) 반응형웹을 위한 구성에는 단순히 float를 사용하는 것보다 많은 장점들이 있기 때문에 다시 주목받고 있는 속성입니다. 특히 iOS나 안드로이드 같은 모바일 환경에서 지원되고 있기 때문에 모바일웹사이트를 제작할 때 유용합니다. display:box; 이 속성은 블록에 f.. 더보기
코딩 공부에 유용한 사이트들 안녕하세요. 키다리디자이너입니다. 오늘은 HTML, CSS를 공부하려는 분들을 위해 도움이 되는 사이트 몇가지를 소개해 드리겠습니다. 많은 분들이 IT관련 공부를 위해서 무턱대고 책부터 구매하거나 학원을 등록하곤 하는데요 저는 이것이 좋지 않다고 생각합니다. 어떤 기술이든 책으로 공부할 수 있는 내용은 한계가 있기 때문이죠. 그것은 학원도 마찬가지입니다. 학원의 커리큘럼이라는 것이 적당한 서적을 하나 지정하여 교과서처럼 진도를 나가는 수준을 벗어나지 못하기 때문입니다. (다만 완전히 초급이며 처음 시작하는 분들은 학원도 좋을거라 생각합니다.) 책이나 학원이 조건 안좋은 것은 아니지만 서점등에서 추천수를 많이 받은 서적이라 하더라도 그 내용은 기본적이고 초급수준의 내용을 다루고 있거나 다소 난해한 번역서,.. 더보기
미디어쿼리를 공부해 보자. 안녕하세요. 키다리디자이너입니다. 오늘은 요즘 있어보인다는 웹사이트의 필수요소인 반응형웹에서 주로 사용되는 미디어쿼리에 대해 알아보도록 할게요. 미디어쿼리란 모르면 어려워 보이지만 알고 나면 별 거 아닌 쉬운 기술입니다. 키다리디자이너는 구구절절 긴얘기 하는 거 딱 질색이니 짧고 굵고 이해하기 쉽게 설명해보도록 할게요. 1. 반응형웹이란 무엇인가? 걍 화면 크기에 따라 레이아웃(그리드) 달라지는 화면이요. 더 이상 알필요 없음 ㅇㅇ 2. 미디어쿼리란 무엇인가? 화면 크기에 따라 달라질 경우 현재 화면 크기에 따라 다른 CSS내용이 적용될 수 있도록 해주는 것입니다. 이것도 더 이상 알필요 없음 ㅇㅇ 3. 코딩 준비 미디어 쿼리는 앞서 말한 것처럼 현재 화면사이즈를 인식해 다른 CSS를 뿌려주는 것입니다... 더보기
검색엔진 최적화(search engine optimization)에 대해 안녕하세요. 키다리디자이너입니다. 오늘은 갈수록 이슈가 되고 있는 홈페이지의 '검색엔진 최적화'에 대해 알아 볼게요. 세계에 수많은 검색엔진이 있고 그 검색엔진이 홈페이지의 정보를 수집하는 일의 방법이 다 다른데요, '검색엔진 최적화'란 자신의 홈페이지에 관한 내용이 검색엔진에 최대한 많이 노출될 수 있도록 만드는 작업이라고 할 수 있습니다. 또한 '검색엔진 최적화'는 검색엔진에서 홈페이지내 특정 페이지나 컨텐츠의 수집을 거부하는 용도로도 사용되고 수 있습니다. 네이버에 의존도가 높은 한국에서는 아직은 이 '검색엔진 최적화'의 기준이 다소 낯선 개념이지만 구글이나 야후에 의존도가 높은 해외에서는 검색엔진에 좀 더 정확하고 많은 결과를 나타나게 하기 위해서 이 '검색엔진 최적화가' 필수가 되었습니다. 여담.. 더보기

티스토리툴바