[생활코딩] 웹 애플리케이션 만들기(3): HTML 실습

c o d i n g . . 🍉/HTML & CSS

[생활코딩] 웹 애플리케이션 만들기(3): HTML 실습

H J 2021. 1. 30. 23:51

또 놀다가 시작!

코드가 의미를 가질 수 있게 코드를 짜려면?

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>개강하기 전 할 일</title>
</head>
<body>
	<header> #헤더라는 것을 표시
		<h1>웹 프로그래밍 공부</h1>
	</header>
	<nav> #네비게이션이라는 것을 표시
		<ul>
			<li>html</li>
			<ol>
				<li>html 이론</li>
				<li>html 실습</li>
			</ol>
			<li>css</li>
			<ol>
				<li>css 이론</li>
				<li>css 실습</li>
			</ol>
		</ul>
	</nav>
	<article> #본문이라는 것을 표시
		<h2>html 실습</h2>
		<h4>하루에 최소 2시간씩 꾸준히 하기</h4>
		<ul>
			<li>2021/01/31 시작</li>
			<li>아ㅏ아ㅏㅏㅏ아ㅏㅏ</li>
		</ul>
	</article>
</body>
</html>

(으엥?? 근데 31일 시작이 아니라 30일 시작인데,, 뭐,,,ㅋㅋㅋㅋㅋㅋㅋㅋㅋ다 만들고 알아버렸네,, 어쩔 수 없지 뭐ㅋㅋㅋ)

<h1>콘텐츠</h1> #h1, h2, h3 ~ 숫자가 작을 수록 글씨가 큼

내비게이션이라는 것을 표시(링크가 연결되어있어 누르면 다른 페이지로 연결되는 것(?) )

<nav>
	~~
</nav>

헤더라는 것을 표시

<header>
	~
</header>

본문이라는 것을 표시

<article>
	~
</article>

악,,,!!!!!

클릭하면 해당 페이지로 연결되는 거 만들고 있는데 자꾸 아래와 같은 오류가 뜬다,,,,

하지만 2년동안 다져진 내 구글링 실력으로ㅋㅋㅋㅋㅋㅋㅋㅋㅋ https대신 http를 쓰면 된다는 것을 알아내고 그렇게 고쳤더니 해결됐당 ㅎㅁㅎ!

🐹결과🐹

index파일

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>개강하기 전 할 일</title>
</head>
<body>
	<header>
		<a href="http://localhost/"><h1>웹 프로그래밍 공부</h1></a>
	</header>
	<nav>
		<ul>
			<li>html</li>
			<ol>
				<a href="http://localhost/page_html_theory.html"><li>html 이론</li></a>
				<a href="http://localhost/page_html_practice.html"><li>html 실습</li></a>
			</ol>
			<li>css</li>
			<ol>
				<a href="http://localhost/page_css_theory.html"><li>css 이론</li></a>
				<a href="http://localhost/page_css_practice.html"><li>css 실습</li></a>
			</ol>
		</ul>
	</nav>
</body>
</html>

'html 이론'과 연결된 파일

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>개강하기 전 할 일</title>
</head>
<body>
	<header>
		<a href="http://localhost/"><h1>웹 프로그래밍 공부</h1></a>
	</header>
	<nav>
		<ul>
			<li>html</li>
			<ol>
				<a href="http://localhost/page_html_theory.html"><li>html 이론</li></a>
				<a href="http://localhost/page_html_practice.html"><li>html 실습</li></a>
			</ol>
			<li>css</li>
			<ol>
				<a href="http://localhost/page_css_theory.html"><li>css 이론</li></a>
				<a href="http://localhost/page_css_practice.html"><li>css 실습</li></a>
			</ol>
		</ul>
	</nav>
	<article>
     		 <h2>html 이론</h2>
    		  <h4>하루에 최소 2시간씩 꾸준히 하기</h4>
    		  <a href="http://hjkim5004.tistory.com/" target="_blank">티스토리에 매번 업로드하기</a>
      		<ul>
         			<li>2021/01/31 시작</li>
         			<li>아ㅏ아ㅏㅏㅏ아ㅏㅏ</li>
    		  </ul>
 	  </article>
</body>
</html>

'html 실습', 'css 이론', 'css 실습'과 각 파일들을 다 연결해주었다!

짜잔~!

웹 프로그래밍 공부를 클릭한 경우 & localhost/index.html에 들어가자마자 뜨는 화면

html 이론을 클릭한 경우(다른 경우도 마찬가지로 각 파일에 저장되어있는 정보가 화면에 뜬다

오늘은 여기까지!

근데 고민이 생겼다 ;ㅅ; 난 이번에 개강하기 전에 프론트엔드 쪽만 배우려고 했는데(물론 백엔드 쪽도 알면 좋지만) 이 수업에는 백엔드 쪽도 포함돼 있어서 고민이 된다,,,

그래도 한 번 공부해보는 것이 도움이 될까,, 아니면 HTML이랑 CSS 기본을 배우고 나서 더 자세히 공부하는 게 나을까? 이건 더 고민해봐야겠다

'c o d i n g . . 🍉 > HTML & CSS' 카테고리의 다른 글

Visual code 설치 & 파일 만들기 (0)	2021.03.15
[생활코딩] 웹 애플리케이션 만들기(5): CSS 실습 (0)	2021.02.01
[생활코딩] 웹 애플리케이션 만들기(4): CSS 이론 (0)	2021.01.31
[생활코딩] 웹 애플리케이션 만들기(2): HTML 이론 (0)	2021.01.30
[생활코딩] 웹 애플리케이션 만들기(1): 환경 조성 (0)	2021.01.30

현재글[생활코딩] 웹 애플리케이션 만들기(3): HTML 실습

🍃🛋🧤🍋🍧🍈🐈🎧

42 seoul, html, 코딩, css, 내가 정리한, 생활코딩 웹, python, JavaScript, 생활코딩 nodejs, 웹프로그래밍, html 독학, 파이썬, 프론트엔드, 웹프, 백엔드, 인프런, Nodejs, 웹 프로그래밍, 자바스크립트, 생활코딩,

Today :
Yesterday :

일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

🐹's tory