0. Start With..
Document and Website Structure
- 몇 요소들은 대부분의 페이지에 공통적으로 적용될 것이란 걸 명심하세요 — 네비게이션 메뉴나 footer 컨텐츠처럼. 예를 들어 비즈니스를 위한 페이지라면, 당신의 연락처를 각각의 페이지의 footer에 보이도록 하는 것은 좋은 생각입니다. 모든 페이지에 공통적으로 포함하고 싶은 것을 적어보세요.
- 다음으로, 각 페이지의 구조를 간단한 스케치로 그리세요.아마 위의 우리의 간단한 웹사이트 같을 것입니다). 각 블럭의 기능을 적으세요.
- 이제 웹사이트에 포함시키길 원하는 (각 페이지에 공통적이지 않은) 다른 모든 컨텐츠를 brainstorm하세요 - 리스트에 모두 적어 내려가세요.
- 다음으로, 이 모든 컨텐츠들을 그룹화 해 다른 페이지에서 어떤 부분들이 함께할 수 있을지 생각할 수 있습니다. 이것은 Card sorting이라는 기술과 매우 유사합니다.
- 이제 대략적인 사이트맵을 그려보세요 - 사이트의 각 페이지를 동그라미로 지정하고, 각 페이지 간 동작 흐름을 보여주기 위해 선을 그으세요. 홈페이지는 아마 가운데에 있고, 모두는 아니어도 대부분에 연결될 것 입니다; 작은 사이트 안의 대부분의 페이지는, 비록 예외는 있겠지만, 메인 네비게이션에서 사용할 수 있어야 합니다. 당신은 아마 이것들이 어떻게 보여져야 할지에 대한 설명도 적고 싶을 것입니다.
1. Box를 나눌 줄 알자!
박스 모델의 중요성과 MDN의 Document_and_website_structure을 보기 전까지는 <div>만을 사용해서 무작위로 칸을 나누고 코딩했습니다.
그러나 나중에 css를 위해서든, 앞으로의 작업의 편의성을 위해서라도 이렇게 (화면 상에서는 보이지 않는) 태그를 사용해서 영역을 나누어야 겠다고 생각했습니다.
사용자에게 보여지지 않는 BOX, 내용이 없어도 보이는 ITEM
2. 여러가지 TAG들
1) Box vs Item
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!-- Box vs Item -->
<header></header>
<footer></footer>
<section></section>
<div></div>
<span></span>
<h1>Hello</h1>
<button></button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!-- a -->
<a href='https://libertegrace.tistory.com/'
target=_blank>My Blog!</a>
</body>
</html>3) Block vs Inline
Block은 한 줄에 하나의 태그가 배치되는 것을 말하고, inline은 충분한 공간이 있으면 다른 태그 옆에 배치가 가능한 것을 말합니다.
4) list item
1. ol: 항상 태그를 사용하기 전에 mdn 사이트에 가서 속성(attributess)들이 무엇이 있는지 확인하고, 이를 사용하는 것이 현명합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!-- ol, ul, li -->
<!-- ol>li*3 tap키 누르면 ol밑에 li 태그가 3개 만들어짐 -->
<ol type = "i" reversed>
<li>hi</li>
<li>hello</li>
<li>hey</li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!-- ol, ul, li -->
<ul>
<li>치킨</li>
<li>피자</li>
<li>떡볶이</li>
</ul>
</body>
</html>5) Input and type
input: 우리가 원한는 데이터를 사용자가 입력하고, 우리는 그 데이터를 받을 수 있기 때문에 매우 유용한 태그입니다.
mdn 에서 input 을 설명하는 페이지에 <input> 유형을 보면, 아래처럼 매우 다양한 유형들을 속성으로 설정하여 사용할 수 있다는 것을 알 수 있습니다.
그리고 보통 input만 사용하기 보다,
label을 같이 사용하여서 사용자에게 정확히 어떤 정보를 입력받기를 원하는지 명확하게 나타낼 수 있습니다.
또한 한 페이지 안에 많은 input들이 있고, 각 input은 유일한 정보일 가능성이 높기 때문에 이 경우
label과 해당 input에 id값을 설정하여 고유한 식별자를 주는 것이 좋습니다.
<label for = "input_name>: 이 label은 input_name이라는 Id를 가지는 것을 위한 label이야
<input id = "input_name"> : 이 input은 사용자의 이름을 입력받기 위한 input이야
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!-- input -->
<div>
<label for="input_name">Name: </label>
<input id="input_name" type="text">
</div>
<div>
<label for="input_file">file: </label>
<input id="input_file" type="file">
</div>
<div>
<label for="input_favoriteColor">Color: </label>
<input id="input_favoriteColor" type="color">
</div>
</body>
</html>
'Dev > SW Engineering' 카테고리의 다른 글
| 25. Redux - Redux의 필요성과 써야 할 때를 구분할 줄 알기 (0) | 2020.07.25 |
|---|---|
| [CSS] CSS 개념 복습 (0) | 2020.07.21 |
| 25. React - 12 main concepts(Handling Events) (0) | 2020.07.21 |
| 24. React - 12 main concepts(State & Lifecycle) (0) | 2020.07.21 |
| 23. React - 12 main concepts(Component and Pros) (0) | 2020.07.21 |