HTML 마크업 설계 템플릿 한혜진 웹표준화팀 / UI기술랩 / UIT 센터 2009/02/12.

Presentation on theme: "HTML 마크업 설계 템플릿 한혜진 웹표준화팀 / UI기술랩 / UIT 센터 2009/02/12."— Presentation transcript:

1 HTML 마크업 설계 템플릿 한혜진 웹표준화팀 / UI기술랩 / UIT 센터 2009/02/12

2 문서 정보 문서 명 HTML 마크업 설계 템플릿 작성자 한혜진 문서 개요
원 클릭 원 드래그로 구조를 쉽고 빠르게 설계할 수 있도록 제작되었습니다. 각 태그 별 레이어에 고유한 색상을 지정하여 한 눈에 알아볼 수 있도록 제작되었습니다. 문서 효과 및 활용 HTML마크업을 시작하기 전에 먼저 구조를 설계하게 되면 HTML마크업 시간을 절약할 수 있습니다. HTML마크업 가이드로도 활용할 수 있습니다. HTML마크업 작업을 지시하기 위한 지시서로도 활용할 수 있습니다. Copyright 2008 NHN Corporation. All Rights Reserved. 이 문서는 NHN㈜의 지적 자산이므로 NHN㈜의 승인 없이 이 문서를 다른 용도로 임의 변경하여 사용할 수 없습니다. 이 문서는 정보제공의 목적으로만 제공됩니다. NHN㈜는 이 문서에 수록된 정보의 완전성과 정확성을 검증하기 위해 노력하였으나, 발생할 수 있는 내용상의 오류나 누락에 대해서는 책임지지 않습니다. 따라서 이 문서의 사용이나 사용 결과에 따른 책임은 전적으로 사용자에게 있으며, NHN㈜는 이에 대해 명시적 혹은 묵시적으로 어떠한 보증도 하지 않습니다. 관련 URL 정보를 포함하여 이 문서에서 언급한 특정 소프트웨어 상품이나 제품은 해당 소유자의 저작권법을 따르며, 해당 저작권법을 준수하는 것은 사용자의 책임입니다. NHN㈜는 이 문서의 내용을 예고 없이 변경할 수 있습니다.

3 Revision History 버전 변경 일자 소속 작성자 내용 비고 v1.0 2009.02.13 웹표준화팀 한혜진
HTML 마크업 설계 템플릿 완료

4 1 레이아웃 팔레트 레이아웃 팔레트 입니다. 원하는 레이아웃 네임이 적혀 있는 레이어를 클릭 후 Ctrl + 드래그 (복사) 하여 구조를 설계합니다. 레이아웃 팔레트의 위치는 임의로 수정 가능합니다. 기본 레이아웃 구조 샘플입니다. 이런 방법으로 구조화할 수 있습니다. #wrap #wrap #header #header .gnb .gnb .lnb .search .lnb #container .search .spot .snb .colgroup #container .content .aside .spot .snb .colgroup .content .aside #footer #footer

5 UIO 팔레트 – 왼쪽에 위치 2 팔레트의 위치/ 길이는 취향 따라 선택 및 수정 가능 <h1> <h2>
UIO (User Interface Object) 를 구조화할 수 있는 팔레트 입니다. 원하는 태그 레이어를 클릭 후 Ctrl + 드래그 (복사) 하여 구조를 설계합니다. UIO 팔레트의 위치 및 넓이 /색상 등은 임의로 수정 가능합니다. 본 화면은 팔레트의 위치를 왼쪽에 책갈피처럼 위치해 본 모습입니다. <h3> <h4> <h5> <h6> <div> <p> 팔레트의 위치/ 길이는 취향 따라 선택 및 수정 가능 <etc> <ol> <ul> <dl> <table> <fieldset> <iframe> <object>

6 UIO 팔레트 – 왼쪽에 위치 2 팔레트의 위치/ 길이는 취향 따라 선택 및 수정 가능 <h1>
UIO (User Interface Object) 를 구조화할 수 있는 팔레트 입니다. 원하는 태그 레이어를 클릭 후 Ctrl + 드래그 (복사) 하여 구조를 설계합니다. UIO 팔레트의 위치 및 넓이 /색상 등은 임의로 수정 가능합니다. 본 화면은 팔레트의 위치를 왼쪽에 위치해 본 모습입니다. <h2> <h3> <h4> <h5> <h6> <div> <p> 팔레트의 위치/ 길이는 취향 따라 선택 및 수정 가능 <etc> <ol> <ul> <dl> <table> <fieldset> <iframe> <object>

7 UIO 팔레트 – 위에 위치 2 팔레트의 위치는 취향 따라 선택 및 수정 가능 <h1> <h2>
<object> <fieldset> <div> <p> <etc> <ol> <ul> <dl> <table> <iframe> UIO (User Interface Object) 를 구조화할 수 있는 팔레트 입니다. 원하는 태그 레이어를 클릭 후 Ctrl + 드래그 (복사) 하여 구조를 설계합니다. 레이아웃 팔레트의 위치 및 넓이 /색상 등은 임의로 수정 가능합니다. 본 화면은 팔레트의 위치를 위쪽에 위치해 본 모습입니다. 팔레트의 위치는 취향 따라 선택 및 수정 가능

8 UIO 팔레트 – 아래에 위치 2 팔레트의 위치는 취향 따라 선택 및 수정 가능
UIO (User Interface Object) 를 구조화할 수 있는 팔레트 입니다. 원하는 태그 레이어를 클릭 후 Ctrl + 드래그 (복사) 하여 구조를 설계합니다. UIO 팔레트의 위치 및 넓이 /색상 등은 임의로 수정 가능합니다. 본 화면은 팔레트의 위치를 아래쪽에 위치해 본 모습입니다. <h1> <h2> <h3> <h4> <h5> <h6> <object> <fieldset> <div> <p> <etc> <ol> <ul> <dl> <table> <iframe>

9 Layout Sample 3 메인 디자인을 구조화해 본 모습입니다. #wrap #wrap #header #header .gnb
.lnb .gnb #container .lnb .content .aside .spot .search #container .spot .snb .colgroup .content .aside #footer #footer

10 UIO Sample 4-1 <h1> NHN 전문정보 LNB부분을 구조화해 본 모습입니다. <h2>
<div> <p> <div> <ul> <fieldset> <etc> <ol> <ul> <dl> <table> <fieldset> <iframe> <object>

11 UIO Sample 4-2 개인 정보 영역과 리스트 섹션을 구조화해 본 모습입니다. <h1> <div>
<table> <dl> <h4> <h5> <h6> <div> <div> <h4> <div> <table> <p> <etc> <ol> <div> <h4> <ul> <ul> <dl> <table> <fieldset> <iframe> <ul> <object>

12 UIO Sample 4-3 구조화해 본 모습입니다. <h1> <h2> <h3>
<div> <div> <h6> <h4> <h4> <a> <ul> <h5> <div> <ul> <p> <etc> <h5> <ol> <ul> <ul> <dl> <table> <fieldset> <iframe> <object>

13 단축키 모음 4-4 구조 설계 작업 시 가장 많이 사용하는 단축키입니다. 작업 시 참고하세요.
복사 왼쪽 팔레트에서 원하는 오브젝트를 선택 후 Ctrl+드래그 하시면 복사 됩니다 그룹 만들기 여러 오브젝트를 그룹으로 만들고 싶을 때는 여러 오브젝트를 모두 선택하시고 마우스 오른쪽 클릭 후 g + g 그룹 해제 그룹을 해제 하고 싶을 때는 오브젝트 선택 후 마우스 오른쪽 클릭 후 g + u 최 상단으로 올리기 오브젝트를 맨 앞으로 올리고 싶으면 오브젝트 선택 후 마우스 오른쪽 클릭 후 r + r 최 하단으로 내리기 오브젝트를 맨 뒤로 내리고 싶으면 오브젝트를 선택 후 마우스 오른쪽 클릭 후 k + k