Transcript HTML 마크업 설계 템플릿

HTML 마크업 설계 템플릿
한혜진
웹표준화팀 / UI기술랩 / UIT 센터
2009/02/12
문서 정보
문서 명
HTML 마크업 설계 템플릿
작성자
한혜진
• 본 문서는 HTML 마크업을 시작하기 전에 구조를 설계하는데 도움을 주기 위한 템플릿입니다.
문서 개요
• 원 클릭 원 드래그로 구조를 쉽고 빠르게 설계할 수 있도록 제작되었습니다.
• 각 태그 별 레이어에 고유한 색상을 지정하여 한 눈에 알아볼 수 있도록 제작되었습니다.
문서 효과
및
활용
• HTML마크업을 시작하기 전에 먼저 구조를 설계하게 되면 HTML마크업 시간을 절약할 수 있습니다.
• HTML마크업 가이드로도 활용할 수 있습니다.
• HTML마크업 작업을 지시하기 위한 지시서로도 활용할 수 있습니다.
Copyright 2008 NHN Corporation. All Rights Reserved.
이 문서는 NHN㈜의 지적 자산이므로 NHN㈜의 승인 없이 이 문서를 다른 용도로 임의 변경하여 사용할 수 없습니다.
이 문서는 정보제공의 목적으로만 제공됩니다. NHN㈜는 이 문서에 수록된 정보의 완전성과 정확성을 검증하기 위해 노력하였으나,
발생할 수 있는 내용상의 오류나 누락에 대해서는 책임지지 않습니다. 따라서 이 문서의 사용이나 사용 결과에 따른 책임은
전적으로 사용자에게 있으며, NHN㈜는 이에 대해 명시적 혹은 묵시적으로 어떠한 보증도 하지 않습니다.
관련 URL 정보를 포함하여 이 문서에서 언급한 특정 소프트웨어 상품이나 제품은 해당 소유자의 저작권법을 따르며,
해당 저작권법을 준수하는 것은 사용자의 책임입니다.
NHN㈜는 이 문서의 내용을 예고 없이 변경할 수 있습니다.
© 2007 NHN Corporation
Revision History
버전
변경 일자
소속
작성자
내용
v1.0
2009.02.13
웹표준화팀
한혜진
HTML 마크업 설계 템플릿 완료
© 2007 NHN Corporation
비고
레이아웃 팔레트
1
레이아웃 팔레트 입니다.
원하는 레이아웃 네임이 적혀 있는 레이어를 클릭 후 Ctrl + 드래그 (복사)
하여 구조를 설계합니다.
기본 레이아웃 구조 샘플입니다.
이런 방법으로 구조화할 수 있습니다.
레이아웃 팔레트의 위치는 임의로 수정 가능합니다.
#wrap
#wrap
#header
#header
.gnb
.lnb
.search
.gnb
.lnb
#container
.search
.spot
.snb
#container
.colgroup
.content
.spot
.snb
.colgroup
.content
.aside
#footer
#footer
4
© 2007 NHN Corporation
.aside
UIO 팔레트 – 왼쪽에 위치
2
UIO (User Interface Object) 를 구조화할 수 있는 팔레트 입니다.
원하는 태그 레이어를 클릭 후 Ctrl + 드래그 (복사) 하여 구조를 설계합니다.
UIO 팔레트의 위치 및 넓이 /색상 등은 임의로 수정 가능합니다.
본 화면은 팔레트의 위치를 왼쪽에 책갈피처럼 위치해 본 모습입니다.
팔레트의 위치/ 길이는 취향 따라 선택 및 수정 가능
5
© 2007 NHN Corporation
UIO 팔레트 – 왼쪽에 위치
2
<h1>
UIO (User Interface Object) 를 구조화할 수 있는 팔레트 입니다.
원하는 태그 레이어를 클릭 후 Ctrl + 드래그 (복사) 하여 구조를 설계합니다.
<h2>
<h3>
UIO 팔레트의 위치 및 넓이 /색상 등은 임의로 수정 가능합니다.
본 화면은 팔레트의 위치를 왼쪽에 위치해 본 모습입니다.
<h4>
<h5>
<h6>
<div>
<p>
팔레트의 위치/ 길이는 취향 따라 선택 및 수정 가능
<etc>
<ol>
<ul>
<dl>
<table>
<fieldset>
<iframe>
<object>
6
© 2007 NHN Corporation
UIO 팔레트 – 위에 위치
2
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<object>
<fieldset>
<div>
<p>
<etc>
<ol>
<ul>
<dl>
<table>
<iframe>
UIO (User Interface Object) 를 구조화할 수 있는 팔레트 입니다.
원하는 태그 레이어를 클릭 후 Ctrl + 드래그 (복사) 하여 구조를 설계합니다.
레이아웃 팔레트의 위치 및 넓이 /색상 등은 임의로 수정 가능합니다.
본 화면은 팔레트의 위치를 위쪽에 위치해 본 모습입니다.
팔레트의 위치는 취향 따라 선택 및 수정 가능
7
© 2007 NHN Corporation
UIO 팔레트 – 아래에 위치
2
팔레트의 위치는 취향 따라 선택 및 수정 가능
UIO (User Interface Object) 를 구조화할 수 있는 팔레트 입니다.
원하는 태그 레이어를 클릭 후 Ctrl + 드래그 (복사) 하여 구조를 설계합니다.
UIO 팔레트의 위치 및 넓이 /색상 등은 임의로 수정 가능합니다.
본 화면은 팔레트의 위치를 아래쪽에 위치해 본 모습입니다.
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<object>
<fieldset>
<div>
<p>
<etc>
<ol>
<ul>
<dl>
<table>
<iframe>
8
© 2007 NHN Corporation
Layout Sample
3
메인 디자인을 구조화해 본 모습입니다.
#wrap
#wrap
#header
#header
.gnb
.lnb
.gnb
.lnb
.search
#container
.content
.spot
#container
.spot
.snb
.colgroup
.content
.aside
#footer
#footer
© 2007 NHN Corporation
.aside
4-1
UIO Sample
NHN 전문정보 LNB부분을 구조화해 본 모습입니다.
<div>
<ul>
<fieldset>
10
© 2007 NHN Corporation
<ul>
4-2
UIO Sample
<div>
<div>
<h4>
<table>
<dl>
<div>
<div>
<h4>
<table>
<div>
<h4>
<ul>
<ul>
© 2007 NHN Corporation
개인 정보 영역과
리스트 섹션을 구조화해 본 모습입니다.
4-3
UIO Sample
구조화해 본 모습입니다.
<div>
<h4>
<div>
<h4>
<ul>
<h5>
<ul>
<h5>
<ul>
© 2007 NHN Corporation
<a>
4-4
단축키 모음
구조 설계 작업 시 가장 많이 사용하는 단축키입니다.
작업 시 참고하세요.
왼쪽 팔레트에서 원하는 오브젝트를 선택 후
복사
Ctrl+드래그 하시면 복사 됩니다
그룹 만들기
여러 오브젝트를 그룹으로 만들고 싶을 때는 여러 오브젝트를 모두 선택하시고
마우스 오른쪽 클릭 후 g + g
그룹을 해제 하고 싶을 때는 오브젝트 선택 후
그룹 해제
마우스 오른쪽 클릭 후 g + u
최 상단으로 올리기
최 하단으로 내리기
오브젝트를 맨 앞으로 올리고 싶으면 오브젝트 선택 후
마우스 오른쪽 클릭 후 r + r
오브젝트를 맨 뒤로 내리고 싶으면 오브젝트를 선택 후
마우스 오른쪽 클릭 후 k + k
© 2007 NHN Corporation