[웹코딩 요점정리] 1. 기초 다지기 (HTML/웹 브라우저/웹 편집기)

* 웹코딩 독학 후 내용 요점정리.

 

아래의 내용을 비롯하여 앞으로 계속해서 작성될 웹코딩 공부 관련하여 포스팅될 내용들은 제가 실제 책을 읽고 공부하여 정리한 것입니다.

 

 

 

---

[1] 기초 다지기
(HTML/웹브라우저/웹 편집기)

 

 

 

1. HTML 

(Hyper Text Markup Language)

 

웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어.

 

1) 웹 문서 작성 프로그램 : 웹 편집기

2) 웹 문서 보는 프로그램 : 웹 브라우저

(인터넷 익스플로러, 크롬, 파이어폭스 등)

 

 

---

 

2. 웹 브라우저의 종류

 

 

1) 크롬 (구글)

최근 가장 많이 사용되는 브라우저로, 가장 빠르게 HTML에 대응한다.

 

 

2) 파이어폭스 (모질라)

개발도구, 부가기능들이 뛰어나서 개발자들이 더 자주 사용한다.

 

 

3) 인터넷 익스플로러
(마이크로소프트)

HTML5 지원이 취약하지만, 아직 국내에서 많이 사용한다.

 

 

4) 엣지 (마이크로소프트)

익스플로러 대신 HTML5 지원을 위해 새로 개발한 것으로, 윈도우10에서 기본으로 사용.

 

 

---

 

3. 웹 편집기의 종류

 

 

 

1) 텍스트 편집기
- 오류 발생확률 ↑

사용자가 태그를 일일이 직접 입력해야 한다.

 

 

2) 웹 편집기
- 오류 발생확률 ↓

태그와 속성, 일반 텍스트 등으로 서로 다른 색으로 표시해 주므로 소스를 읽기 쉽고, 편집기에 따라 태그·속성의 일부만 입력해도 전체를 완성해준다.

 

   - 윈도우용 : 노트패드++ (무료) / 에디트 플러스 (유료)
   - 맥용 : 텍스트메이트 (무료) / 코다 (유료)

   - 윈도우/맥 : 드림위버 (유료) / 비주얼 스튜디오 코드 (무료)

 

 

3) 통합개발환경 (IDE)

웹 개발시 HTML과 함께 다른 언어들도 함께 사용하는데, '웹 IDE'는 사용자에게 필요한 개발환경을 한꺼번에 구축하고 사용할 수 있게 해준다.

 

   - 비주얼 스튜디오 (무료,유료)

   - 웹스톰 (무료)

   - 서브라임 텍스트 (무료,유료)

 

 

4) 웹 기반 코드 편집기

웹상에서 소스코드를 직접 입력하고 결과를 바로 확인할 수 있다.

(팀 작업, 초보자 소스코딩용으로 적합)

 

   - codepen

   - JSFiddle

   - Liveweave

   - Plunker

 

 

 

---

 

※ 비주얼 스튜디오 코드

마이크로소프트사에서 웹 개발을 위해 무료로 제공하는 편집기

 

 

[장점]

 - 대부분의 주요 플랫폼에서 모두 사용 가능. (윈도우, 맥 모두 OK)

 - 태그와 css속성에 대해 친절히 안내.

 - 태그와 css속성을 간편하게 입력 가능.

 - 확장이 쉽다. (영문을 한글버젼으로 바꿔준다거나, 수정한 소스를 즉시 웹에서 확인할 수 있게 한다거나 등)

 - 마켓플레이스를 이용하면 C#을 비롯해 파이썬 등 최신 웹 기술들을 비주얼 스튜디오 코드 안에서 통합 사용 가능!

 

 

[유의사항]

소스 작성 시 소스가 있는 폴더를 미리 작업폴더로 지정해야 한다.

 

그러면 웹 문서에 사용하는 여러 파일들을 한눈에 확인 및 관리할 수 있고, Live Server 기능도 사용할 수 있다.

 

(*Live Server : 소스 수정 즉시 웹브라우저에서 확인하는 기능)