Html Markup Design Template Ws Hhj

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 ㈜는 이 문서의 내용을 예고 없이 변경할 수 있습니다 .


Revision History

버전 변경 일자 소속 작성자 내용 비고

v1.0 2009.02.13 웹표준화팀 한혜진 HTML 마크업 설계 템플릿 완료


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 + 드래그 ( 복사 ) 하여 구조를 설계합니다 .

레이아웃 팔레트의 위치는 임의로 수정 가능합니다 .기본 레이아웃 구조 샘플입니다 .이런 방법으로 구조화할 수 있습니다 .


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 팔레트의 위치 및 넓이 / 색상 등은 임의로 수정 가능합니다 .본 화면은 팔레트의 위치를 왼쪽에 책갈피처럼 위치해 본 모습입니다 .


6

2 UIO 팔레트 – 왼쪽에 위치

팔레트의 위치 / 길이는 취향 따라 선택 및 수정 가능

<h6>

<div>

<p>

<etc>

<ol>

<ul>

<dl>

<table>

<fieldset>

<iframe>

<object>

<h5>

<h4>

<h3>

<h2>

<h1>


UIO 팔레트의 위치 및 넓이 / 색상 등은 임의로 수정 가능합니다 .본 화면은 팔레트의 위치를 왼쪽에 위치해 본 모습입니다 .


7

2 UIO 팔레트 – 위에 위치

<h6>

<div> <p> <etc> <ol> <ul> <dl> <table>

<fieldset><object><h5><h4><h3><h2><h1>

<iframe>

팔레트의 위치는 취향 따라 선택 및 수정 가능


레이아웃 팔레트의 위치 및 넓이 / 색상 등은 임의로 수정 가능합니다 .본 화면은 팔레트의 위치를 위쪽에 위치해 본 모습입니다 .


8

2 UIO 팔레트 – 아래에 위치

<h6>

<div> <p> <etc> <ol> <ul> <dl> <table>

<fieldset><object><h5><h4><h3><h2><h1>

<iframe>

팔레트의 위치는 취향 따라 선택 및 수정 가능


UIO 팔레트의 위치 및 넓이 / 색상 등은 임의로 수정 가능합니다 .본 화면은 팔레트의 위치를 아래쪽에 위치해 본 모습입니다 .


#wrap

3 Layout Sample

#header .gnb

.lnb

#container

#footer

.content .aside.spot

#header

#container

#footer

.spot

.snb

.colgroup

.gnb

.lnb

.search

.content

.aside

#wrap

메인 디자인을 구조화해 본 모습입니다 .


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 부분을 구조화해 본 모습입니다 .


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> 개인 정보 영역과 리스트 섹션을 구조화해 본 모습입니다 .


4-3

<div><h4>

<ul>

<div>

<h4>

<dl>

<dl>

UIO Sample

<h6>

<div>

<p>

<etc>

<ol>

<ul>

<dl>

<table>

<fieldset>

<iframe>

<object>

<h5>

<h4>

<h3>

<h2>

<h1>

<a>

구조화해 본 모습입니다 .


4-4 단축키 모음

구조 설계 작업 시 가장 많이 사용하는 단축키입니다 .

작업 시 참고하세요 .

복사 왼쪽 팔레트에서 원하는 오브젝트를 선택 후

Ctrl+ 드래그 하시면 복사 됩니다

그룹 만들기여러 오브젝트를 그룹으로 만들고 싶을 때는 여러 오브젝트를 모두 선택하시고

마우스 오른쪽 클릭 후 g + g

그룹 해제그룹을 해제 하고 싶을 때는 오브젝트 선택 후

마우스 오른쪽 클릭 후 g + u

최 상단으로 올리기오브젝트를 맨 앞으로 올리고 싶으면 오브젝트 선택 후

마우스 오른쪽 클릭 후 r + r

최 하단으로 내리기오브젝트를 맨 뒤로 내리고 싶으면 오브젝트를 선택 후

마우스 오른쪽 클릭 후 k + k

Documents

Html Markup Design Template Ws Hhj