웹사이트의 기본은 html, css가 있습니다. html은 웹사이트의 구성을 나타내는 방법이며, 뼈대로 비유될 수 있습니다. html 태그만을 이용하여 정적인 웹사이트를 구성할 수 있습니다. 흔히 볼 수 있는 문서 형태의 웹사이트가 있습니다. 여기에 조금 더 멋지게 꾸밀 수 있는데요. 바로, CSS를 이용해야만 합니다. html, css가 발전하면서 애니메이션 기능도 활용할 수 있습니다. 조금 더 역동적인 모습으로 사이트를 꾸밀 수 있는 것이죠.
윈도우 메모장 html 파일로 저장하는 방법
html, css, javascript는 기본적으로 웹페이지 혹은 웹사이트를 만드는데 필요한 내용입니다. html 태그를 이용해 뼈대를 구성하며, css를 이용해 각 요소를 꾸며주게 됩니다. 여기에 역동적인 기능을 추가하기 위해서 javascript를 활용하게 됩니다. 예를 들어, 특정 태그를 찾아 내용을 변경하는 기능, 사용자의 마우스 혹은 키보드 입력을 인식한 후 어떤 동작을 수행하는 경우가 해당 될 수 있습니다. 그 밖에도 다양한 기능을 javascript를 활용해 적용할 수 있습니다.
html은 확장자가 html로 되어 있는 문서 파일이 필요합니다. 해당 문서 파일을 웹브라우저로 불러오면 제작된 웹페이지를 볼 수 있습니다. css와 javascript의 경우, html 파일에 포함하여 작성할 수도 있습니다. 다만, 이렇게 되면 내용이 너무 복잡해 보일 수 있기에 유지 및 보수에 어려움이 있을 수 있습니다. css와 javascript의 경우 외부 파일을 만들어 적용하는 방법이 있습니다. 일반적으로 스타일 시트와 스크립트 파일이라고 부르게 됩니다.
컴퓨터에서 어떤 언어를 이용하든 활용할 수 있는 에디터가 있습니다. 사용자의 편의성을 고려한 기능들이 추가된 프로그램이라 할 수 있는데요. 처음 언어를 접할 때는 에디터의 기능을 활용하는 방법도 학습하게 됩니다. 그 과정이 쉽지는 않겠지만 익숙해지면 많은 도움이 될 수 있습니다. 그렇다면 꼭 특정 에디터를 이용해야만 할까요.
그렇지는 않습니다. 흔히 말하는 '텍스트 편집' 기능을 제공하는 것이라면 사용할 수 있습니다. 우리가 접할 수 있는 가장 대표적인 텍스트 편집기가 바로 '윈도우 메모장'입니다. 간단한 메모를 입력 저장하는 기능으로 많이 사용하고 있을 것이라 생각되는데요. 활용하는 방법에 따라 html, css등의 파일을 만들 수 있습니다.
위 사진은 기본적으로 메모장을 실행한 화면입니다. 흰색의 바탕에 텍스트를 입력할 수 있습니다. 여기에 html을 입력해 봅니다. <head></head>와 <body></body>로 구분하여 내용을 입력합니다. html의 기본적인 document 내용은 생략한 후, html 형식으로 저장하여 웹브라우저를 통해 확인해 봅니다. 저장할 때는 확장자명을 '.html'로 지정한 후, 저장합니다.
위 사진을 참고하면 도움이 될 수 있습니다. 이렇게 저장한 test.html파일을 웹브라우저로 확인합니다. test를 위해 바탕화면에 저장했습니다.(위 사진 오른쪽.)
test.html 파일을 실행하면 위 사진과 같이 웹브라우저로 열리는 것을 알 수 있습니다. 윈도우에서 기본으로 설정한 앱으로 실행되게 됩니다. 별도의 에디터가 없는 경우, 급할 때 메모장을 활용해 html 태그 내용을 작성 및 수정, 보완하는데 도움이 될 수 있습니다.
마치며.
html,css,javascript를 잘 활용하면 자신이 원하는 웹사이트를 만든느데 많은 도움이 될 수 있습니다. 하지만, 정적인 페이지를 만드는데 한계가 있을 수 있으며, 웹앱을 구성하는데 부족함 있을 수 있습니다. 이런 경우, php, python django등을 활용해야만 합니다. 다만, 어떤 경우에도 웹사이트를 구성하는 기본은 html 태그이기 때문에 정적인 페이지를 구성하는 연습을 하는 것이 도움이 될 수 있습니다. 급할 때 요긴하게 사용할 수 있는 메모장을 활용해보는 것도 html 태그를 익히는데 많은 도움이 될 수 있을 것입니다.
