들어가는 글
안녕하세요.😊 오늘은 저번에도 설명드린바와 같이 html로 직접 웹페이지를 만들어보는 방법에 대해서 설명드리고자 합니다.
아직 html이 무엇인지 잘모른다고 생각되시는 분은 html은 무엇인가 글을 먼저 읽고와주세요!
개발 준비
여러분이 요리를 한다고 가정해봅시다. 뭐가 필요한가요? 네, 바로 조리도구와 조리도구를 이용할 수 있는 환경이 필요할 겁니다. 이와 비슷한 맥락으로 html으로 웹페이지를 구현하기 위해서는 도움을 받아야합니다.
보통 개발에 필요한 다양한 기능을 제공하는 소프트웨어를 IDE라고 부르는데요, 이 IDE를 준비하는 것이 웹페이지를 만들기 전 준비물이라고 할 수 있습니다.
오늘 웹페이지를 구현을 위해서는 Visual Studio Code가 필요합니다.
설치를 마치고 프로그램을 실행시키면 다음과 같은 화면이 보일거에요.
데스크탑이든 어디든 편하신 위치에 개발을 위한 폴더를 하나 만들어주세요. 이름은 자유롭게 하셔도 좋습니다. 저는 폴더명을 web이라고 만들었다고 가정하고 설명하겠습니다.
Visual Studio Code(이하 VSCode)에서 File -> Open Folder 를 클릭한 후 방금 만든 web 폴더를 열어줍니다.
여기까지 잘 마치셨다면 다음과 같은 화면이 보이실 것 같은데요.
열린 폴더명의 옆쪽에 보면 새로운 파일을 생성할 수 있는 아이콘이 있습니다. 클릭후 새로운 파일을 만들어 줄건데요.
파일명을 어떻게 해야하는지 대략 난감하시죠..? 간단 퀴즈를 하나 풀어보시겠어요? 한글의 확장자는 .hwp입니다. 웹페이지를 만들기 위한 파일의 확장자는 무엇일까요?
정답은 바로 .html입니다! 앞의 파일명을 자유롭게 하셔도됩니다만 확장자는 꼭 지켜서 파일을 만들어주세요. 저는 ex.html로 만들도록 하겠습니다.
ex.html이 생성된 모습입니다.
여기까지 하셨다면 벌써 반은 다하신거나 다름없어요.😊
html 파일을 웹브라우저에서 열기
VSCode도 깔고 html도 만들었는데 이제 html 파일을 도대체 어떻게 웹 브라우저에서 보이게 하는지 궁금하지 않으신가요?
의외로 방법은 간단한데요! 웹브라우저에서 html 파일을 열어주면 되는데요. 브라우저로 파일을 다음과 같이 드래그 하시면 됩니다.
❗️예제의 이미지는 시크릿 창이지만 일반 창에서 실행해 주세요.
웹 페이지 구현
간단한 텍스트 입력해보기
이제 텅비어있는 웹페이지를 채워볼 차례입니다. 간단하게 텍스트를 한번 입력해볼까요? 저는 Hello World!라고 입력해보도록 하겠습니다.
VSCode에 입력을 하시고 나면 파일이름쪽에 동그란 점이 보일텐데요. 해당 점은 파일이 아직 저장이 안되었음을 말합니다. ctrl+s 나 cmd+s 를 눌러 저장해 주세요.
저장후에 웹브라우저에서 새로고침을 눌러보시면.. tada! 🎉
우리가 입력한 텍스트가 웹페이지에 그대로 출력된 모습입니다. 😯
이번엔 간단한 태그를 활용해서 텍스트를 조금 더 다양하게 표현해 볼게요.
b태그 활용
태그에는 다양한 종류가 있어요. 그중에서도 오늘은 3가지 태그 정도만 우선적으로 소개해드리고자 합니다.
b태그의 b는 bold의 약자입니다. 우리가 텍스트를 강조하고 싶을 때 활용할 수 있는 태그입니다.
태그의 사용법은 저번글에서도 설명드렸듯이 <태그이름 속성명="속성값">표현하고 싶은 콘텐츠</태그이름> 의 문법을 가지고 있습니다.
아까 작성한 Hello world! 라는 텍스트 전체를 강조하고 싶으면 어떻게 작성하면 될까요?
잠시 멈추어 놓고 직접 해보시는 시간을 가져도 좋을 것 같습니다.
모두 쉽게 정답을 맞추셨을 것이라 생각이 됩니다. 🙂↕️
u태그 활용
u태그의 u는 underline의 약자입니다. 말그대로 밑줄을 표현할 수 있도록 도와주는 태그입니다. undeline text 라는 컨텐츠에 밑줄을 한번 표현해 볼까요?
여기까지 태그를 사용해 보시면서 조금씩 HTML에 대한 감이 늘어나고 있나요? 계속해서 다음 태그를 소개해 보겠습니다.
a태그 활용
a태그의 a는 anchor, 즉 닻을 의미하는데요. 어디론가 이동할 수 있도록 만들어 주는 역할을 하는 것이 바로 a태그라고 할 수 있습니다. 가장 직관적으로 말하면 '링크'와 같다고 생각하면 됩니다.
그럼 '구글로 이동하기' 라는 텍스트를 클릭했을 때, 실제 구글로 이동할 수 있도록 코드를 작성해볼까요?
<a>구글로 이동하기</a>까지는 작성을 했지만 어떻게 연결하지? 하고 당황스러운 분들이 계실 것 같아요. 태그에는 고유한 속성이 있어서 이를 활용할 수 있습니다.
a태그의 고유한 속성 중 하나는 다른 웹 페이지로 이동할 수 있는 주소를 지정하는 것이며 , 이 속성명은 href라고 표현하기로 약속했습니다.
href는 hypertext reference의 약자로 저번에 설명드린 하이퍼 텍스트의 레퍼런스가 될 주소구나! 라고 생각하시면 이해하시기 편할 것 같습니다.
href의 속성값은 무엇이 될까요? 조금만 생각해보면 답을 아실 수 있을 것 같은데요, 이동하고 싶은 웹 사이트 주소가 됩니다.
<태그이름 속성명="속성값">표현하고 싶은 콘텐츠</태그이름>
<a href="">구글로 이동하기</a>그럼 코드를 완성해 볼까요?
클릭해보시면 아주 잘 이동하는 것을 확인해 보실 수 있습니다.
마치며
오늘은 html 파일을 직접 편집하여 웹 페이지에 간단한 텍스트들을 구현해 보았습니다. 다음 시간에는 웹 페이지에 텍스트 외에 본격적으로 내가 원하는 모양과 배치를 할 수 있도록 도움을 줄 수 있는 글을 작성해 보도록 하겠습니다. 이 글이 도움이 되길 바라며, 글을 읽어주셔서 감사합니다.
