HTML 마크업 설계 템플릿

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

문서 정보

Revision History

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

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

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

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

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

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

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

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

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

4-4 단축키 모음 구조 설계 작업 시 가장 많이 사용하는 단축키입니다. 작업 시 참고하세요.

HTML 마크업 설계 템플릿