웹 디자인에서 웹 페이지 내 다양한 형태의 CSS 레이아웃을 구성하는 것이 고급 웹 개발자 및 웹 디자이너가 아니라면 쉬운 일은 아니다. 하지만 CSS 레이아웃 생성기를 활용하면 누구나 손쉽게 CSS 레이아웃을 직관적으로 빠르게 완성하고 코드를 추출하여 적용할 수 있다. CSS 레이아웃 생성기는 레이아웃 구성 요소의 CSS를 만들기 위한 최적의 도구다. 또한 브라우저에서 구성 요소를 배치하기 위해 CSS에서 가능한 것을 가르치는 학습 도구이기도 하다. 제공되는 옵션을 조정하여 레이아웃을 완성하고 CSS 및 HTML 코드를 실시간으로 확인하고 활용할 수 있다는 것이 장점이다. 인터넷 공간에는 웹 페이지 레이아웃 디자인 관련 다양한 리소스와 자동 생성 툴이 제공되고 있다. 그것들 중 자신의 디자인 작업 스타..

Design Information/Design Resources 2021. 6. 17. 06:47

스케일러블 벡터 그래픽, 또는 SVG(Scalable Vector Graphic)는 이미지의 왜곡이나 손상 없이 다양한 해상도와 픽셀 밀도에 대응이 가능할 뿐만 아니라, 애니메이션과 미디어쿼리 지원 등의 유용한 정보를 포함하고 있는 이미지 포맷입니다. 이 글에서는 SVG를 언제, 어떻게 생성하고 이용할 지와 제작의 워크플로우에 대해서 알아보도록 하겠습니다.본론에 들어가기에 앞서, 두 가지 질문 드리도록 하겠습니다.디자인하는 방법을 알고 계신가요?HTML과 CSS를 작성하는 방법을 알고 계신가요?두 질문에 대답이 모두 ‘NO’라면, ‘YES’라는 대답을 할 수 있는 누군가를 찾아서 함께 읽으시면 서로에게 큰 도움이 될 것입니다. SVG는 무엇일까요?(What is SVG?) 위키피디아에서 스케일러블 벡터 ..

Design News/Design Trend 2014. 1. 7. 15:57

실무 웹표준 지침서, '크리에이티브 디자이너를 위한 웹표준' 근래에 들어 심심찮게 회자되는 단어가 바로 '웹표준'이 아닐까 싶다. 웹2.0 시대가 도래한 이후 다양한 플랫폼이 사용되기 시작했고 그로 인해 웹디자인 분야는 또 한번의 격동기 아닌 격동기를 거치게 된다. 특정 웹브라우저에 비중을 두고 HTML, Java, 플래시 같은 플러그인 요소를 접목해 완성하는 일반적인 웹디자인 스타일만으로는 경쟁력을 갖추기 힘든 시장상황이기도 하다. 비록 웹 환경을 구축하는 큰 맥락은 같을지 모르지만, 사용하는 웹브라우저가 다르고, 모바일 웹페이지 그리고 웹2.0 으로 지칭되는 블로그, SNS, 위젯에 이르기까지 콘텐츠의 효율적인 연동이 요구되는 오늘의 상황에선 어쩌면 웹표준이 필수요소인 것은 부인하기 어려운 까닭이다...

Design Information/HTML5 and CSS3 2010. 6. 4. 13:22

자신을 '세상에서 가장 간단하고 예쁜 방법'으로 표현할 수 있는 블로그를 꼽으라면 단연 주저 없이 '티스토리(Tistory)'를 손꼽습니다. 물론 설치형 블로그인 워드프레스와 텍스트큐브 등이 더 확장성과 사용자화의 장점들을 가지고 있지만 일반 블로거들에게는 아직 어려운 부분이 적잖게 있기 때문입니다. 하지만 티스토리는 서비스 형과 설치형의 장점을 잘 배합해 놓아 초보자도 조금만 관심을 가지면 아주 개성 표현이 돋보이는 멋진 블로그를 꾸밀 수 있기에 블로그 특강을 나가면 많이 권하는 편입니다. 넉넉한 공간, 자유롭게 블로그의 성향에 따라 첫화면을 꾸밀 수 있는 블로그 서비스인 티스토리가 태터데스크 기능을 개선한 '첫화면 꾸미기' 기능을 오픈하기에 앞서 보다 안정되고 사용자의 니즈를 반영한 서비스를 제공하기..

Digital News/Blog Story 2010. 3. 12. 02:30

블로그의 콘텐츠는 주제에 따라 텍스트, 이미지, 멀티미디어 중심의 다양한 형태로 작성된다. 보편적으로 텍스트 형태가 주류를 이루고 있지만, 텍스트 중심의 콘텐츠도 보다 돋보이고, 독자에게 내용의 이해와 시각적인 즐거움을 제공하기 위해 관련 이미지를 첨부하는 성향이 두드러지고 있다. 텍스트만 있는 콘텐츠라고 해서 가치가 절하되거나 블로그 디자인에 영향을 주는 것은 결코 아니다. 하지만 이왕이면 다홍치마라고 보기좋은 떡이 먹기도 좋은 까닭이다. 관련 이미지가 첨부되면 일단 독자에게 시각적으로 볼거리가 제공하고, 콘텐츠 집중도를 높이며 한걸음 나아가 블로그 디자인에도 좀 더 생기를 띄게 만드는 시너지 효과를 발휘하게 된다. 가급적이면 가로.세로 500~600픽셀(Pixel)을 넘지 않는 다수의 이미지 첨부가 ..

Digital News/Blogging Guide 2009. 1. 3. 08:48

Hn 태그란?주로 본문에 큰 글씨로 제목을 나타낼때에 사용이되는 태그이다. Hn 태그의 n 부분에는 숫자를 치환한다. 예를 드면 H1 , H2 , H3 와 같은 형식으로 전개된다. 1 부터 6까지 숫자 치환이 가능하며, 숫자가 커질수록 글씨는 작아진다. 아래 예문을 참고로 블로그 기사문을 작성할 때 html 모드로 전환해서 적절하게 활용한다면 보다 부드럽고 가독성이 높은 글을 쓸 수 있다는 장점과 Google Adsense를 이용하는 애드센스 유저에게는 광고수익을 향상 시킬 수 있는 하나의 요인이 될 수 있다는 정보로 알려지고 있다. [예문 H1 대입] 윈도우 비스타는 한국 시장 공략! 마이크로 소프트는 윈도우비스타 출시에 즈음하여.. [결과] 윈도우 비스타는 한국 시장 공략! 마이크로 소프트는 윈도우비..

Digital News/Smartwork and OA 2007. 1. 31. 18:07

웹디자인에 있어서 동영상을 웹페이지에 자유롭게 구현하기 위해서는 다음과 같은 파라먼트를 통해서 컨트롤 해주어야 합니다. embed src="동영상 주소입력" width="251" height="189" ShowTracker="false" - 트랙제어 표시여부 값(true 또는 false) ShowControls="false" - 컨트롤바 표시여부 값(true 또는 false) ShowGotoBar="false" - 바로가기제어 표시여부 값(true 또는 false) ShowDisplay="false" - 클립정보 표시여부 값(true 또는 false) ShowStatusBar="false" - 상태바의 표시여부 값(true 또는 false) EnableContextMenu="0" - 확장메뉴의 표시여부 ..

Digital News/Smartwork and OA 2006. 7. 27. 18:30