이번에는 웹 개발을 해보려고 한다.
나는 원래 수강과목에 클라우드 시스템이라고 해서 웹 개발을 배우는 과목이 있었지만
수강인원미달로 강의가 폐강되어서 웹 개발을 배워볼 기회가 없었는데 이번 교육을 통해서 웹 개발을 처음 접하게 되었다.
다음과 같은 책을 통해서 웹 개발을 배우려고 한다.
먼저 웹 페이지는 대부분 HTML, CSS, 자바스크립트로 구성되어 있는데 그중에서 HTML을 먼저 알아보자
HTML의 가장 기초적인 구조는 이렇게 되어있다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>이렇게 코드를 작성하고 html파일을 저장하고 파일을 열게되면 다음과 같은 화면이 뜰것이다.
위와 같이 주소에 파일 경로가 표기되며 하얀색의 빈 페이지만 나타나는데 이것이 정상이다.
이제 빈 웹 페이지에 내용을 채워보자
<!DOCTYPE html>
<html>
<head>
<title>박용준의 홈페이지</title>
</head>
<body>
<nav>
<a href="./index.html">Home</a>
<a href="./blog_list.html">Blog</a>
<a href="./About_me.html">About me</a>
</nav>
<h1>첫번째 크기 헤드라인</h1>
<h2>두번째 크기 헤드라인</h2>
<h3>세번째 크기 헤드라인</h3>
<h4>네번째 크기 헤드라인</h4>
<h5>다섯 번째 크기 헤드라인</h5>
<p>문단은 p로 쓰세요. p는 아마도 Paragraph의 앞글자를 따온 것이겠죠?</p>
<a href="https://www.google.com">Go to google</a>
<hr/>
<img src="./images/mococo.png" width="600px">
</body>
</html>다음과 같이 작성하였으며 이런 화면이 완성되었다.
head:문서에 대한 기본적인 정보가 담겨 있습니다.
body:주로 화면에 나타나는 내용이 담겨 있습니다.
nav:웹 사이트의 주요 페이지를 안내하는 내비게이션 역할을 만들 때 주로 사용합니다.
a:해당 부분을 클릭하면 페이지가 이동하도록 만들고 싶을 때 사용합니다
h1~h5:헤드라인을 보여주며 글씨 크기가 다르게 보입니다
p:일반적인 문단은 p를 사용합니다.
hr/:수평선을 그어주는 태그입니다.
img:이미지 소스 위치를 지정하면 이미지를 출력합니다
이번에는 자기소개 페이지를 만들어 보자 !
먼저 about_me.html파일을 index.html파일이 있는 디렉토리에 만들어준다
<!DOCTYPE html>
<html>
<head>
<title>About me</title>
</head>
<body>
<nav>
<a href="./index.html">Home</a>
<a href="./blog_list.html">Blog</a>
<a href="./About_me.html">About me</a>
</nav>
<h1>About me</h1>
<h2>박용준 입니다</h2>
<p>HTML, CSS, JS, Django로 재미있는 웹 사이트 만드는 것을 좋아합니다</p>
<a href="index.html">첫 화면으로</a>
<img src="./images/mococo_about_me.png" width="400px">
</body>
</html>다음과 같이 작성하였으며 이런 화면이 나타났다.
앞선 index.html파일의 구조와 크게 다른점이 없으며 간단하게 이렇게 만들어 낼 수 있다.
