본문 바로가기

키다리디자이너/소소한 강좌

"있어보이게" 디자인 하는 방법 1부 안녕하세요 키다리디자이너입니다. 오늘은 웹디자인을 "있어보이게"하는 방법에 대해 얘기해 알아보겠습니다. 경력이 많으신 분이나 디자인에 자신 있으신 분들에게는 이번 포스팅이 쓸모 없을 수도 있겠지만 키다리디자이너가 웹디자인을 하며 시간을 절약하며 나름 있어보이게 디자인하는 노하우를 풀어볼게요. ※ 아래 캡쳐화면들은 키다리디자이너가 특별한 의미 없이 주관적인 의견으로 선별했으며 해당 회사와 키다리디자이너와는 아무런 연관도 의미도 없습니다. 또한 본 캡쳐이미지는 현재 해당 회사의 홈페이지와 차이가 있을 수 있습니다. 1. "포인트"를 정확히 캐치하자 일반적인 웹디자이너분들은 디자인을 하기 전에 항상 어떻게 만들 것인가 고민하며 벤치마킹할만한 다른 웹사이트들을 뒤적거릴 거에요. 이것은 당연한 순서이며 경력이 많.. 더보기
CSS3 - display:box 에 대해 공부해 보자. 안녕하세요. 키다리디자이너입니다. 오늘은 CSS의 display 속성 중 box라는 속성에 대해 알아보겠습니다. 코딩을 나름 오래하신 분들조차 의외로 이 속성은 잘 모르고 안쓰시는데 그럴 법도 한 게 예전에는 이 속성을 제대로 지원한 브라우저가 많이 없었기도 했고 굳이 이것을 사용하지 않아도 코딩하는데 어려움을 느끼지 않았기 때문입니다. 그러나 이제는 많은 브라우저들이 이 속성을 지원하고 있고...(IE는 아직도 완벽히 지원하진 않네요) 반응형웹을 위한 구성에는 단순히 float를 사용하는 것보다 많은 장점들이 있기 때문에 다시 주목받고 있는 속성입니다. 특히 iOS나 안드로이드 같은 모바일 환경에서 지원되고 있기 때문에 모바일웹사이트를 제작할 때 유용합니다. display:box; 이 속성은 블록에 f.. 더보기
미디어쿼리를 공부해 보자. 안녕하세요. 키다리디자이너입니다. 오늘은 요즘 있어보인다는 웹사이트의 필수요소인 반응형웹에서 주로 사용되는 미디어쿼리에 대해 알아보도록 할게요. 미디어쿼리란 모르면 어려워 보이지만 알고 나면 별 거 아닌 쉬운 기술입니다. 키다리디자이너는 구구절절 긴얘기 하는 거 딱 질색이니 짧고 굵고 이해하기 쉽게 설명해보도록 할게요. 1. 반응형웹이란 무엇인가? 걍 화면 크기에 따라 레이아웃(그리드) 달라지는 화면이요. 더 이상 알필요 없음 ㅇㅇ 2. 미디어쿼리란 무엇인가? 화면 크기에 따라 달라질 경우 현재 화면 크기에 따라 다른 CSS내용이 적용될 수 있도록 해주는 것입니다. 이것도 더 이상 알필요 없음 ㅇㅇ 3. 코딩 준비 미디어 쿼리는 앞서 말한 것처럼 현재 화면사이즈를 인식해 다른 CSS를 뿌려주는 것입니다... 더보기
검색엔진 최적화(search engine optimization)에 대해 안녕하세요. 키다리디자이너입니다. 오늘은 갈수록 이슈가 되고 있는 홈페이지의 '검색엔진 최적화'에 대해 알아 볼게요. 세계에 수많은 검색엔진이 있고 그 검색엔진이 홈페이지의 정보를 수집하는 일의 방법이 다 다른데요, '검색엔진 최적화'란 자신의 홈페이지에 관한 내용이 검색엔진에 최대한 많이 노출될 수 있도록 만드는 작업이라고 할 수 있습니다. 또한 '검색엔진 최적화'는 검색엔진에서 홈페이지내 특정 페이지나 컨텐츠의 수집을 거부하는 용도로도 사용되고 수 있습니다. 네이버에 의존도가 높은 한국에서는 아직은 이 '검색엔진 최적화'의 기준이 다소 낯선 개념이지만 구글이나 야후에 의존도가 높은 해외에서는 검색엔진에 좀 더 정확하고 많은 결과를 나타나게 하기 위해서 이 '검색엔진 최적화가' 필수가 되었습니다. 여담.. 더보기