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