안녕하세요 ! 대남이 입니다.


웹프로그래밍의 기초 HTML. 요새는 웹프로그래밍의 중요성과 관심도가 지속적으로


증가하고 있습니다. 독학으로도 배우시는 분들이 많으실텐데 ! 그럼 시작하기 앞서서,


어떤 편집기를 쓰면 좋을지 어떤 종류가 있는지 알려드릴게요.


1. 비주얼 스튜디오 코드 ( Visual Studio Code )

 


홈페이지 주소 : https://code.visualstudio.com/


플랫폼 : 윈도우 , 맥 , 리눅스


제가쓰는 편집기입니다 ! 최근에 나온 편집기. 2015년 4월에 공개된 MS사의 저력을 보여준 프로그램입니다.


많은 플러그인을 가지고 있고, 확장 관리 시스템이 많이 내장되어있습니다.


가장 중요한 점은 무료라는 것 ! 무료로 이렇게 좋은 프로그램을 쓸 수 있습니다.


홈페이지 주소를 통하여 접속하여 우측 상단에 다운로드 버튼 통하여 다운로드 받으실 수 있습니다. 


2. 에디트플러스EditPlus ) 


다운로드 주소 : http://software.naver.com/software/summary.nhn?softwareId=MFS_100078


EditPlus도 텍스트 문서 편집 유틸리티이다. 편집시 태그들을 다른색으로 표시하는 기능 물론 있고,


고전적인 프로그램이지만 가볍고 알차서 많은분들이 많이 애용한다. 여러 언어를 지원하고 가장 좋은 기능은


따로 브라우저를 실행시키지 않고도 프로그램 내장 브라우저로 간편하게 확인할 수 있다.


3. 아톰 ( ATOM )


홈페이지 주소 : https://atom.io/

플랫폼 : 윈도우, 맥, 리눅스

아톰은 2014 년에 처음 출시되었고 그 이후로 인기가 쭈욱 많았던 텍스트 편집기이다.

아톰의 좋은 점이라 하면 패키지 관리자를 이용해서 편집기에 새로운 기능을 추가할 수 있다. 

또 아톰의 가장 좋은 점이라하면 자동완성기능이다. 자동완성기능이 있어서 하나하나 태그들을 다 작성할 필요가 없다.

아톰을 사용하면 화면을 분할해서 편집할수도 있어서 수정 작업할 때 아주 편하게 할 수 있다.




이제 편집기를 다운로드 하셨다면, 이제 기본 구조에대해서 배워보겠습니다.


HTML은 Hyper Text Markup Language 로써 웹페이지를 기술하기 위한 언어이다.

마크업 언어의 일종이고, 마크업 언어란 텍스트에 태그를 붙여서 텍스트가 문서의 어디에 해당하는지를 기술하는 것이다.

웹페이지를 만들때는 CSS와 Javascript를 더불어 사용하여 만드는데, 간다하게 얘기하면

HTML : 웹페이지의 내용을 구성

CSS : 웹페이지의 디자인을 담당

Javascript : 웹페이지의 동적 기능, 정보 전달 기능

이렇게하여 웹페이지가 구성이 됩니다.


기본 구조는 이렇습니다. 문서는 <html>과 </html>로 둘러싸이는데 태그,/태그는 시작과 끝을 나타냅니다.

이렇게 문서를 선언하고 <head>태그를 통해 웹 페이지에 대한 정보를 저장한다.

<title> ~ </title> 태그를 통해 브라우저 윈도우 제목을 표시할 수 있습니다.

그리고 <body> - </body> 부분은 웹 페이지의 내용을 구성합니다.

기본적인 구조는 이렇게 형성됩니다 ! 

그러면 브라우저에 어떻게 표시되는지 보겠습니다.

이렇게 브라우저 윈도우에 ' web programming ' 이라고 표시되었고


브라우저안에 ' 웹 프로그래밍 배워보기 ! ' 라고 표시가 잘 되었습니다.




다음번에는 텍스트를 표시할 때 쓰는 태그에 대하여 배워 보도록 하겠습니다.


대남이의 첫 포스팅을 마칩니다. 감사합니다.


+ Recent posts