반응형
이봐! 이 시리즈와 함께 제공되는 소스 코드를 더 이상 다운로드할 수 없다는 사실을 알려드립니다. 우리는 여전히 시리즈에서 얻을 수 있는 귀중한 정보가 있다고 생각하지만, 앞으로 10년 이상 걸릴 것이기 때문에 진보적인 웹 앱을 만들기 위해 현대적인 PHP 프레임워크(라라벨)나 심지어 자바스크립트 프레임워크(리액트 또는 Vue)도 고려해 볼 가치가 있다고 생각합니다.
이제 가격인상으로 우리 손을 더럽힐 때야!
우리는 여기서 다뤄야 할 다른 페이지가 있다는 것을 알고 있다. 물론 메인 페이지는 로그인 상태에 따라 목록 페이지와 판매 페이지 역할을 모두 수행합니다. 하지만 로그인해서 페이지와 계정 페이지를 등록해야 합니다. 그러니 현명하게 모듈화 작업을 해봅시다. 즉, 공통 코드(예: DOSCTYPE, 분석 코드 및 유비쿼터스 코드)를 반복하지 않도록 여러 페이지에 포함할 수 있는 "header.php" 및 "close.php"와 같은 파일을 만들 수 있습니다.
웹 루트 조직
지금까지 웹 디렉터리의 루트에 있는 파일에 대해 알아낸 내용입니다. 모든 주 보기에는 자체 PHP 파일이 있습니다. 이미지 및 "공통" 파일을 위한 하위 디렉토리가 있으며 CSS나 파비콘 같은 느슨한 파일도 몇 개 있습니다.
우리의 개발자는 틀림없이 더 많은 파일을 추가할 것이다. 데이터베이스와 상호 작용하고 모든 목록 상호 작용을 수행하려면 PHP 파일이 필요합니다.
헤더
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Colored Lists | <!-- Do Something Smart Here --></title>
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
</head>
<body>
<div id="page-wrap">
<div id="header">
<h1><a href="/">Colored Lists</a></h1>
<div id="control">
<!-- IF LOGGED IN -->
<p><a href="/logout.php" class="button">Log out</a> <a href="/account.php" class="button">Your Account</a></p>
<!-- IF LOGGED OUT -->
<p><a class="button" href="/signup.php">Sign up</a> <a class="button" href="/login.php">Log in</a></p>
<!-- END OF IF STATEMENT -->
</div>
</div>바로 머리말에서 우리는 똑똑해야 하고 개발자에게 메모를 남겨야 하는 몇 가지 사항들을 발견했습니다. 하지만 그가 필요로 하는 것들을 주셔야 합니다. 페이지 제목에 스마트한 작업을 수행하라는 메모를 남겼습니다. 페이지마다 다른 페이지 제목이 필요하므로, 분명히 뭔가 역동적인 일이 일어나야 합니다. 그런 다음 제어 버튼(예: Account / Logout)을 사용하면 사용자의 로그인 상태에 따라 버튼이 달라집니다. 그래서 우리는 개발자가 그 안으로 뛰어들어가서 그것들이 올바르게 작동하도록 할 것입니다.
이 시점에서 우리는 페이지의 맨 윗부분을 가지게 됩니다. 본문, html, #page-wrap 요소를 열어두고 있습니다. 그 너머가 페이지의 주요 내용입니다. 주요 내용을 살펴보기 전에 사이드바 및 바닥글 영역을 던져 완벽한 스킨을 만들어 보겠습니다.
바닥글
우리의 디자인은 바닥글을 많이 요구하지 않습니다. 따라서 이러한 개방형 요소를 닫고 분석을 위한 참고 사항을 여기에 추가하겠습니다.
</div>
<!-- Analytics here -->
</body>
</html>사이드 바.
우리의 디자인은 약간의 사이드바를 필요로 한다. 지금은 애플리케이션 사용에 대한 몇 가지 메모에만 사용할 예정입니다. 그러나 콘텐츠를 위한 공간이 열린 것은 좋은 일입니다. 앱이 성장함에 따라 추가 작업을 위한 공간이 필요할 가능성이 매우 높기 때문입니다.
<div id="ribbon">
Reminders
<ul>
<li>Your list automatically saves</li>
<li>Double-click list items to edit them</li>
</ul>
</div>메인 페이지
이제 "모듈"이 완성되었으니 실제 페이지로 들어가 보겠습니다. 페이지를 작성하기 위한 템플릿은 다음과 같습니다.
<?php include_once "common/header.php"; ?>
<div id="main">
<noscript>This site just doesn't work, period, without JavaScript</noscript>
<!-- IF LOGGED IN -->
<!-- Content here -->
<!-- IF LOGGED OUT -->
<!-- Alternate content here -->
</div>
<?php include_once "common/sidebar.php"; ?>
<?php include_once "common/footer.php"; ?>
```
### 로그인(목록)
<div class="content-ad"></div>
```js
<ul id="list">
<li class="colorRed">
<span>Walk the dog</span>
<div class="draggertab tab"></div>
<div class="colortab tab"></div>
<div class="deletetab tab"></div>
<div class="donetab tab"></div>
</li>
<li class="colorBlue">
<span>Pick up dry cleaning</span>
<div class="draggertab tab"></div>
<div class="colortab tab"></div>
<div class="deletetab tab"></div>
<div class="donetab tab"></div>
</li>
<li class="colorGreen">
<span>Milk</span>
<div class="draggertab tab"></div>
<div class="colortab tab"></div>
<div class="deletetab tab"></div>
<div class="donetab tab"></div>
</li>
</ul>
```
목록 자체는 일반적인 순서 없는 목록일 뿐입니다. 색상에는 CSS 클래스 이름을 사용합니다. 하지만 그 다음에는 목록 항목을 제어할 수 있는 여러 가지가 있습니다. 그것이 목록 항목 안에 있는 모든 디브입니다. 목록 항목을 드래그, 색상 변경, 삭제 및 체크오프하기 위한 빈 디브가 있습니다. 우리는 CSS를 위해 이것들이 필요합니다. 우리가 그것들을 목표로 하고 스타일링 할 수 있도록 말이죠.
하지만 우리는 똑똑한 디자이너입니다. 우리는 이 가격 인상이 단지 일시적인 것이라는 것을 알고 있습니다. 이러한 목록은 애플리케이션에 의해 동적으로 생성됩니다. 비어 있는 컨트롤 디브를 보면, 자바스크립트에 의해 자동으로 생성된다는 것을 알 수 있습니다. 괜찮습니다. 무대를 설정하고 모든 사람이 같은 페이지에 있도록 하려면 HTML이 지금 필요합니다.
왜 목록 항목 안에 있는 범위입니까? 그냥 똑똑해요. 목록 항목은 텍스트만 포장하는 것이 아니기 때문에 나중에 텍스트만 대상으로 지정할 수 있는 일종의 후크가 필요할 수 있습니다.
이제 우리는 새로운 목록 항목을 추가하기 위해 이 페이지에 입력을 받아야 합니다. 우리 개발자가 이 모든 일을 다 처리할 것이지만, 우리가 그것들을 스타일링할 수 있도록 기초적인 것을 넣을 것입니다.
<div class="content-ad"></div>
```js
<form action="" id="add-new">
<div>
<input type="text" id="new-list-item-text" name="new-list-item-text" />
<input type="submit" id="add-new-submit" value="Add" class="button" />
</div>
</form>
```
그리고 애플리케이션 기능 중 하나는 목록에 공유 가능한 공개 URL을 갖는 것입니다. 그것도 여기에 넣자.
```js
<div id="share-area">
<p>Public list URL: <a href="#">URL GOES HERE</a>
<small>(Nobody but YOU will be able to edit this list)</small></p>
</div>
```
아, 개발자에게 더 많은 일을 시켜라! 하지만 그는 준비가 되어 있어요. 이 공개 URL 사업은 우리를 또 다른 가능한 시나리오로 이끈다. 이 메인 페이지가 입력 양식이나 모든 목록 컨트롤을 표시하지 않고 목록을 표시할 수 있어야 합니다. 기본적으로 여러분은 목록을 보기만 할 수 있지만, 그것과 상호작용을 할 수는 없습니다. (마치 여러분이 엄마에게 크리스마스 목록을 보내고 싶다면!)
### 로그아웃(공용 목록)
<div class="content-ad"></div>
```js
<ul id="list">
<li class="colorRed">
<span>Walk the dog</span>
</li>
<li class="colorBlue">
<span>Pick up dry cleaning</span>
</li>
<li class="colorGreen">
<span>Milk</span>
</li>
</ul>
```
위의 목록과 정확히 동일하며, 컨트롤 탭, 새 항목을 추가할 양식, 공개 URL 영역(이미 여기에 있습니다. URL이 필요한 이유는 무엇입니까?)만 추가할 수 있습니다. 이는 백엔드 코드가 목록을 출력하는 방식을 변경하는 것일 수 있습니다. 하지만 어쨌든, 우리가 이것을 만든다면, 모두가 같은 생각을 하게 될 것입니다.
### 로그아웃(판매)
우리는 언젠가 이것을 위해 뭔가 멋진 일을 할 수도 있지만, 현재로서는, 우리의 큰 아이디어는 이 지역이 잠재적으로 여러분의 새로운 목록이 있을 곳이고, 그들이 가입할 수 있는 곳을 보여주는 큰 화살표가 될 뿐입니다. 화살표에 불과합니다.
```js
<img src="/images/newlist.jpg" alt="Your new list here!" />
```
<div class="content-ad"></div>
### 계정 페이지
이것을 포함한 모든 페이지에 대한 이 구조를 간단히 상기시켜 드립니다.
```js
<?php include_once "common/header.php"; ?>
<div id="main">
<!-- IF LOGGED IN -->
<!-- Content here -->
<!-- IF LOGGED OUT -->
<!-- Alternate content here -->
</div>
<?php
include_once "common/sidebar.php";
include_once "common/footer.php";
?>
```
이것이 바로 모듈식으로 작업하는 것의 장점입니다. 모든 공통 컨텐츠가 포함되어 있기 때문에 후속 업데이트는 훨씬 쉽습니다.
계정 페이지에는 전자 메일 업데이트용, 암호 업데이트용 및 사용자가 계정을 삭제할 수 있는 단추 등 여러 가지 양식이 표시됩니다. 다시 한번, 저희 개발자는 이 모든 양식들을 데이터를 전달하는 숨겨진 입력물들로 채우고 행동 URL과 방법 등을 추가할 것입니다. 그건 그에게 맡기겠지만, 이것으로 충분히 멋을 낼 수 있어요.
<div class="content-ad"></div>
```js
<h2>Your Account</h2>
<form action="">
<div>
<input type="text" name="username" id="username" />
<label for="username">Change Email Address</label>
<input type="submit" name="change-email-submit" id="change-email-submit" value="Change Email" class="button" />
</div>
</form>
<hr />
<h2>Change Password</h2>
<form action="#">
<div>
<label for="password">New Password</label>
<input type="password" name="r" id="repeat-new-password" />
<label for="password">Repeat New Password</label>
<input type="submit" name="change-password-submit" id="change-password-submit" value="Change Password" class="button" />
</div>
</form>
<hr />
<form action="" id="delete-account-form">
<div>
<input type="submit" name="delete-account-submit" id="delete-account-submit" value="Delete Account?" class="button" />
</div>
</form>
```
### 기타 "양식" 페이지
이제 계정 페이지를 작성했으므로 다른 "양식" 유형의 페이지에 대한 기본 내용을 거의 다 다루었습니다. 로그인, 로그인, 암호 잊어버리기, 계정 페이지의 간단한 버전일 뿐입니다. 기본 레이블/입력 형식, 헤더 형식 및 "버튼" 형식을 사용할 것이기 때문에 개발자가 계정 페이지에서 기본 형식과 CSS 클래스를 복사하여 이러한 페이지를 쉽게 만들 수 있습니다.
### CSS
```js
/*
RESET
*/
* { margin: 0; padding: 0; }
body { font: 14px/1.1 Helvetica, Sans-Serif; background: url(images/stripe.png) repeat-x; }
.clear { clear: both; }
img, a img { border: none; }
input { outline: none; }
```
<div class="content-ad"></div>
그냥 정리하는 중이에요.
```js
/*
STRUCTURE
*/
body { font: 14px/1.1 Helvetica, Sans-Serif; background: url(images/stripe.png) repeat-x; }
#page-wrap { width: 960px; margin: 6px auto 50px; position: relative; }
hr { height: 1px; background: #ccc; clear: both; margin: 20px 0; border: none; display: block; }
```
우리의 작은 한 페이지 앱에는 그다지 복잡한 포맷이 없습니다.
```js
/*
TYPOGRAPHY
*/
a { text-decoration: none; color: #900; border-bottom: 1px dotted #900; outline: none; }
h1 { font: bold 36px Helvetica, Sans-Serif; margin: 0 0 8px 0; }
h2 { margin: 0 0 10px 0; }
p { margin: 0 0 6px 0; }
.button { background: url(/images/button-bg.png) repeat-x; -moz-border-radius: 5px; padding: 6px 12px; border: none; color: white; cursor: pointer; text-shadow: 0 1px 1px #666; -webkit-border-radius: 5px; -webkit-box-shadow: 0 1px 3px #999; -moz-box-shadow: 0 1px 3px #999; font: bold 16px Helvetica; }
.button:hover { background-position: bottom left; }
.red { background: red; color: white; font-size: 12px; padding: 3px; }
```
이것은 사실 콘텐츠 기반 앱이 아니기 때문에 텍스트 포맷이 많지 않습니다. 그러나 페이지 헤더, 링크 및 단추가 있으므로 여기에 설정합니다.
<div class="content-ad"></div>
```js
/*
HEADER
*/
#header { height: 68px; position: relative; }
#header h1 { position: absolute; top: 0; left: 0; z-index: 2; text-indent: -9999px; overflow: hidden; }
#header h1 a { display: block; text-indent: -9999px; width: 200px; height: 38px; border: none; background: url(/images/logo.png) no-repeat; }
#control { width: 500px; float: right; padding: 10px 237px 0 0; text-align: right; }
```
우리의 작은 줄무늬 헤더는 그리 오래 걸리지 않는다. 로고 및 제어 버튼 배치를 위해 CSS 이미지를 약간만 교체합니다.
```js
/*
LISTS
*/
#list { list-style: none; }
#list li { position: relative; margin: 0 0 8px 0; padding: 0 0 0 70px; width: 607px; }
#list li span { padding: 8px; -moz-border-radius: 5px; -webkit-border-radius: 5px; width: 589px; display: block; position: relative; }
.colorBlue span { background: rgb(115, 184, 191); }
.colorYellow span { background: rgb(255, 255, 255); }
.colorRed span { background: rgb(187, 49, 47); color: white; }
.colorGreen span { background: rgb(145, 191, 75); }
.tab { background: url(images/minibuttons.png) no-repeat; height: 21px; top: 4px; }
.draggertab { position: absolute; left: 0px; width: 31px; cursor: move; }
.draggertab:hover { background-position: 0 -21px; }
.colortab { position: absolute; left: 34px; width: 34px; background-position: -31px 0; cursor: pointer; }
.colortab:hover { background-position: -31px -21px; }
.deletetab { position: absolute; right: -35px; width: 15px; background-position: -82px 0; cursor: pointer; }
.deletetab:hover { background-position: -82px -21px; }
.donetab { position: absolute; right: -17px; width: 16px; background-position: -65px 0; cursor: pointer; }
.donetab:hover { background-position: -65px -21px; }
.crossout { position: absolute; top: 50%; left: 0; height: 1px; }
#share-area { margin: 20px 0 0 69px; width: 600px; }
```
여기에 더 많은 것이 필요합니다. 여기서는 목록의 모양, 색상, 간격, 둥근 모서리 등을 설정합니다. 또한 모든 작은 도우미 컨트롤을 배치하고 적절한 배경을 제공합니다. 단일 이미지(minibuttons.png)만 사용됩니다. CSS 스프라이트 하나로 광효율을 높입니다!
```js
/*
FORM STUFF
*/
label { background: #999; color: white; padding: 3px; }
input[type="text"], input[type="password"] { width: 324px; border: 3px solid #999; font-size: 18px; padding: 7px; display: block; }
#add-new input[type="text"] { width: 532px; float: left; margin: 0 10px 0 69px; }
#add-new input[type="text"]:focus { border-color: #73B8BF; }
#add-new input[type="submit"] { padding: 10px 12px; }
ul#list li span input[style] { width: 90% !important; }
```
<div class="content-ad"></div>
전체 사이트에 걸쳐 양식이 동일하기 때문에 여기에 설정했습니다. 한 가지 예외는 목록의 "새로 추가" 영역입니다. 기본적으로 더 큰 것을 제외하고 다른 입력과 동일하며 "추가" 버튼을 수용하기 위해 왼쪽으로 이동합니다. 클릭을 사용하여 편집할 계획이기 때문에 목록 항목은 일시적으로 텍스트 입력으로 바뀌므로 "저장" 단추에 맞게 길이를 줄여 항목을 입력할 계획입니다.
```js
/*
MESSAGING
*/
.message { padding: 10px; margin: 0 0 10px 0; width: 607px; }
.good { background: #9ff5b6; }
.bad { color: #ef0040; }
```
오류 메시징에 대해 많이 얘기하지는 않았지만, 웹 앱이기 때문에 오류 메시지 중 일부가 있을 것이라고 가정할 수 있습니다(예: 잘못된 암호를 입력했거나 암호가 일치하지 않거나 성공적으로 수행되었습니다). 일반적인 메시지 클래스와 좋은 버전과 나쁜 버전의 클래스를 각각 하나씩 설정합니다.
```js
/*
SIDEBAR
*/
#ribbon { position: absolute; right: 0; width: 125px; padding: 60px 30px 0 47px; height: 756px; top: -6px; background: url(/images/ribbon-bg.png) no-repeat; }
#ribbon ul { list-style: none; }
#ribbon ul li { background: rgba(0,0,0,0.8); color: white; padding: 5px; margin: 0 0 5px 0; font-size: 12px; }
```
상기 목록을 위한 간단한 사항입니다.
<div class="content-ad"></div>
### 무빙 어워드
우리 개발자는 이제 이 앱을 작동시키기 위해 협력해야 할 일이 많다. 다음으로 사용자 계정 상호 작용에 대해 알아보겠습니다.
'css' 카테고리의 다른 글
| 확인란이 선택되어 있는지 확인 (0) | 2021.10.10 |
|---|---|
| 웹 앱 처음부터 만들기 – 8부 1: 기본 아이디어 및 디자인 (0) | 2021.10.10 |
| 처음부터 웹 앱 만들기 – 8부 6: AJAX 상호 작용성 추가 (0) | 2021.10.10 |
| 메타 태그 검색 및 표시 (0) | 2021.10.10 |
| $_REQUEST 디버깅 중 (0) | 2021.10.10 |
댓글