개발자의 세계를 물 한 방울 찍어먹어보고 싶다.
홈페이지는 어떻게 만들어지는거지?
홈페이지는 기본적으로 HTML 웹 문서 형태로 되어있다.
흔히 우리가 사용하는 사이트들은 개발자들이 만들어놓은 HTML 웹 문서를 다운받아 브라우저들이 보여주는 형태로 되어있다.
그럼 누군가는 HTML 문서를 만들어서 배포할텐데..
그 누군가가 우리가 되어보자!
우선, 개발자들이 코딩을 할 때 무슨 무슨 프로그램을 이용하고 어떤게 만들기 좋네, 이 기능이 좋으니까 이걸 써봐야지! 할 필요없다.
HTML 문서는 컴퓨터 기본 응용프로그램인 메모장(맥에서는 텍스트 편집기)만 있으면 만들 수 있다.
컴퓨터에 있는 프로그램만으로 직접 홈페이지를 만들어보는 것을 경험해보자!
메모장과 텍스트 편집기는 툴의 차이일뿐 똑같이 진행하면 된다.
기본적인 구조에 대해서 한 번 알아보고 시작하자!
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>HTML은 HyperText Markup Language.
웹 페이지 표시를 위해 개발된 마크업 언어로, HTML은 페이지의 제목, 문단, 표, 이미지, 동영상 등을 통해서 웹의 구조(뼈대) 를 담당한다.
즉, 홈페이지를 이쁘게 디자인 하기에 앞서 홈페이지의 구조와 우리가 포털 사이트에서 검색했을 때 어떠한 정보로 검색되게 하는지 기반을 마련한다고 생각하면 된다.
<!doctype html> : 문서(페이지)의 HTML 버전을 지정한다.
이 문서가 어떤 버전인지, 브라우저가 어떤 버전으로 문서를 해석해서 보여주면 되는지 알려주는 용도이다.
<html> </html> : 이 문서의 시작과 끝을 나타내주는 범위 역할을 한다.
<head> </head> : 이 문서의 (눈에 보이지 않는) 정보를 나타내는 범위의 역할을 한다.
<body> </body> : 이 문서의 (눈에 보이는) 정보 구조를 나타내는 범위의 역할을 한다.
즉, 홈페이지에서 보이는 텍스트와 이미지 등을 여기서 작성하는 것이다.
간단하게 문서 구조에 대해서 알아보았고, 이제 진짜로 홈페이지를 만들어보자!
메모장 켜기
우선 윈도우는 메모장을, 맥에서는 텍스트 편집기를 켜보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>켜진 파일 안에 위에 있는 내용을 복사해서 넣어보자!
이것만 했어도, 일단 절반의 완성이다.
이제, 홈페이지에 들어오면 상단 탭에 조만한 아이콘과 함께 페이지의 제목이 나타난다.
여기 안에 있는 아이콘과 내용을 바꾸고 싶으면
<title> </title> 안에 있는 Document를 원하는 대로 바꿔주면 된다.
나는 "inanout의 블로그" 로 바꾸어보았다.
그리고, 아이콘을 넣고 싶다면?
<link rel="icon" href="이미지 경로"> 를 title 밑에 적어주면 된다.
나는 무료 파비콘이라고 검색해서 나오는 https://icons8.kr/icons/set/favicon-ico 에서 복사해서 넣어주었다.
원하는 이미지를 클릭 후에, 오른쪽 마우스를 눌러주고 "이미지 주소 복사" 를 해준 뒤에 이미지 경로 위치에 넣어준다.
<link rel="icon" href="https://img.icons8.com/?size=512&id=4441&format=png">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>inandout의 블로그</title>
<link rel="icon" href="https://img.icons8.com/?size=512&id=4441&format=png">
</head>
그럼 이렇게 내가 원하는 아이콘과 함께 페이지 제목이 나타났다!
아차차, 순서를 바꿔서 내가 한 것을 봐야하니까!
저장부터 해보자
저장하기
맥
파일이름 원하는 이름 + .html 로, 저장하고 .html 사용을 눌러준다.
그렇게 저장한 파일에서 오른쪽 마우스를 클릭 후, 정보 가져오기를 눌러준다.
이름 및 확장자를 클릭하고, 확장자 가리기 체크를 해제해준다.
윈도우
윈도우에서는 메모장을 저장할 때
파일 이름.html 로 저장해주고 형식은 "모든 파일 (.)" 로, 하단에 인코딩은 UTF-8 로 바꾸어줘야한다.
파일을 모두 저장했다면?
브라우저에 따라 에러가 날 수 있으므로, 크롬을 추천한다!
그러면~ 아까 아이콘과 페이지 제목이 나타나는 것을 확인할 수 있다.
본문 추가
다시 본론으로 돌아와, 이제 웹 페이지 안에 내가 원하는 내용을 한 번 넣어보자.
<body> </body> 안에 넣어주면 된다.
모든 개발자들이 공유하는 관습. Hello World! 로 시작해보자
<body> Hello World! </body>
로 해서 저장해서 다시 한 번 파일을 열어주거나 새로고침을 해주자.
그럼
우리는 Hello World! 라는 것을 홈페이지에 띄울 수 있었다!
추가적으로 내용을 넣고 싶다면,
제목은 <h1> 내용 </h1> 으로
내용은 <p> 내용 <p> 로 넣을 수 있다.
또한 이미지를 추가하고 싶으면
<img src="이미지 주소"> 를 넣어주면 이미지도 나타낼 수 있다.
만약에, 네이버로 연결되는 텍스트를 만들고 싶다면?
<a href="www.naver.com"> 네이버로 연결 </a> 을 추가해주면 된다.
이걸 정리해서 넣어본다면?
<h1> 제 블로그에 오신 것을 환영합니다 ! </h1>
<p> 이 곳은 저의 블로그 입니다. 방문해주셔서 감사합니다. </p>
<p> 방문해주셔서 감사해서, 귀여운 강아지를 보여드리겠습니다 ! </p>
<img src="https://cdn.pixabay.com/photo/2016/02/18/18/37/puppy-1207816_1280.jpg">
<p> 다 보셨다면 네이버로 이동해서, 더 많은 정보를 살펴보세요 </p>
<a href="www.naver.com"> 네이버로 이동하기 </a>
완성 !
우리는 메모장(텍스트 편집기)로 홈페이지를 만들어보았습니다.
더 많은 걸 하고 싶거나, 예쁜 디자인을 위해서는 진짜 개발 프로그램을 사용해야합니다.
빨리 많은 걸 배우고, 진짜 프론트엔드 개발자가 되는 그 날을 위해서!
화이팅!!!!!
