이제 웹페이지를 직접 만들어 보자.
1. 정적인 웹페이지 만들기(main화면)
먼저 start칸 웹페이지부터 만들자.
main.html
<!DOCTYPE html>
<html>
<body>
<header>
<h1>WEB</h1>
Hello, WEB!
</header>
<nav>
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
</ol>
</nav>
<article>
<ul>
<li><a href="/create">create</a></li>
<!--삭제와 같은 기능은 페이지의 개념이 아닌 작업의 개념이기 때문에
링크로 하면 자동화된 프로그램이 눌러버릴 수 있으므로
삭제 기능은 버튼을 이용하는게 좋다.-->
<li><input type="button" value="delete"></a></li>
</ul>
<h2>HTML</h2>
HTML is ...
</article>
</body>
</html>결과화면
2. 부품화
이제 각각의 주요한 덩어리들을 일종의 부품으로 만들어보자.
<header>
<h1>WEB</h1>
Hello, WEB!
</header>만약 이 부분이 1억줄이라고 생각해보자.
우리의 웹페이지는 너무 복잡해서 한 눈에 들어오지 않을 것이다.
따라서 우리는 저렇게 부분부분에 이름을 붙이기만 하면 나중에 웹브라우저를 전달될 때 훨씬 정돈된 코드를 만들 수 있을 것이다.
main.html
<!DOCTYPE html>
<html>
<body>
<div id="subject"></div>
<div id="toc"></div>
<div id="control"></div>
<div id="content"></div>
<script>
function subject(){
document.querySelector('#subject').innerHTML = `
<header>
<h1>WEB</h1>
Hello, WEB!
</header>
`
}
function TOC(){
document.querySelector('#toc').innerHTML = `
<nav>
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
</ol>
</nav>
`;
}
function control(){
document.querySelector('#control').innerHTML = `
<ul>
<li><a href="/create">create</a></li>
<li><input type="button" value="delete"></li>
</ul>
`;
}
function article(){
document.querySelector('#content').innerHTML = `
<article>
<h2>HTML</h2>
HTML is ...
</article>
`
}
subject();
TOC();
control();
article();
</script>
</body>
</html>결과화면은 위에서 보여준 것과 같지만 코드는 훨씬 정돈되어 보기 편하고 나중에 코드를 재활용하기 쉬워졌다.
강의 영상 - https://youtu.be/MqdUNIWMhbc
'🌐 Web > Redux' 카테고리의 다른 글
| 09. 웹페이지 만들기(3) (0) | 2022.09.15 |
|---|---|
| 08. 웹페이지 만들기(2) (0) | 2022.09.14 |
| 06. Redux의 장점 : 시간여행 (0) | 2022.09.06 |
| 05. Redux를 이용한 애플리케이션 : state의 변화를 UI에 반영 (0) | 2022.09.06 |
| 04. Redux를 이용한 애플리케이션 : reducer와 action을 이용해서 새로운 state 값 만들기 (0) | 2022.09.03 |