생활코딩의 강좌를 들으며 하는 공부 기록
https://opentutorials.org/course/1
WebApp 학습계획
- HTML
- CSS
- JavaScript와 PHP 이론
- DataBase
기본 내용
- Bitnami WAMP stack을 사용해 MYSQL Database, Apach Web Server를 제어하고 에러 로그를 확인할 수 있다.
- 웹브라우저가 웹서버에게 페이지를 요청하면 HTML 파일을 보내주고, 이 내용이 웹브라우저에 보이는 방식으로 구동된다.
- HTML은 HyperText Markup Language의 약자이고 hypertext는 문서와 문서가 linking 된 모양이라 할 수 있다. 웹은 이 링크로 구성된다.
html의 골격
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
안녕하세요. <strong>suintodev</strong>입니다.
</body>
</html>
링크를 거는 법
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
안녕하세요. <a href="https://suintodev.tistory.com/" target="_blank">suintodev</a>입니다.
</body>
</html>
ordered list와 unordered list로 요소를 작성하는 법
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>내가 먹고 싶은 것</title>
</head>
<body>
<ul>
<li>연어덮밥</li>
<li>연어롤</li>
<li>연어초밥</li>
</ul>
<ol>
<li>이베리코</li>
<li>삼계탕</li>
<li>먹고싶다</li>
</ol>
</body>
</html>
의미론적인 웹 구조로 ordered list작성
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>내가 먹고 싶은 것</title>
</head>
<body>
<header>
<h1>중학교 3-1</h1>
</header>
<nav>
<ol>
<li>인수분해</li>
<li>이차방정식</li>
<li>이차함수</li>
</ol>
</nav>
<article>
<h2>인수분해란?</h2>
<ol>
<li>식의 공통부분, 즉 인수를 뽑아내는 것</li>
<li>삼계탕</li>
<li>먹고싶다</li>
</ol>
</article>
</body>
</html>
하나의 완결된 웹페이지를 만드는 방법
- 대문 페이지인 index.html를 <nav></nav>를 이용해 작성
- 아직은 만들지 않았지만 연결되는 페이지를 http://localhost/new_page.html 링크를 포함해 작성해준다.
- 각 html 페이지에 <article></article>을 이용해 내용을 작성한다.
- <h1></h1>에 <a href=""></a>를 이용해 index.html로 연결해준다.
'Web Application > Frontend' 카테고리의 다른 글
| [ WebApp] 웹앱 만들기 기본편 - JavaScript와 PHP (1) | 2020.07.22 |
|---|---|
| [ WebApp] 웹앱 만들기 기본편 - CSS (0) | 2020.07.22 |