RedGreenBlue

coding을 시작하기 전에,

  코딩은 숲을 보고 그 다음 나무를 보는 방법으로 접근해야 합니다. 숲의 형태를 먼저 이해하고, 그 다음 숲에 있는 나무들을 봐야 합니다. 나무를 먼저 본다면, 그 나무들을 다 안다고 해도 전체 숲의 형태를 알 수 없습니다. 즉, 숲은 코딩의 목적이나 프로세스에 해당되고, 나무는 코드(명령어) 하나 하나에 해당될 것입니다. 코드는 외우는 것이 아니라 이해하는 것입니다. 코드를 영어 단어처럼 외우기 시작한다면 코딩을 포기할 확률이 높아 집니다. 숲의 형태를 이해하고, 그 형태에 맞는 나무를 봄으로써 전체를 이해할 수 있습니다.

• 첫째, 나에게 맞는 코드 에디터(편집기) 선택하기 (만들어진 Html문서 활용하기)

    코드를 편집할 수 있는 에디터는 수없이 많이 있습니다. 무료에디터 부터 유료에디터까지 정말 많은 종류의 에디터들이 있습니다. 여러분이 회사에 취업을 한다면 어떤 에디터를 사용할지 알 수 없습니다. 회사마다 그 회사의 업무 종류에 따라 다양하게 사용되고 있습니다. 그러나 에디터의 형태나 사용 방법등은 거의 유사 함으로 너무 걱정하지 않아도 됩니다. 코드 에디터(툴)의 사용방법이 중요한 것이 아니라, 코드 사용법(코딩능력)이 중요함을 잊지 마세요.
  아래의 링크된 무료 에디터 등을 수업하면서 다루게 될 것입니다.
  에디터 종류 살펴보기

• 둘째, 브라우저 종류의 선택

    웹디자인(웹관련 개발 포함) 작업에는 크롬이나 파이어폭스를 많이 쓰는 편이다. 하지만 웹은 크로스 브라우저 테스를 거쳐야 하므로, 모든 브라우저에서 테스트해야 한다. 그러나, 브라우저의 종류가 다양하고, 각각의 브라우저 특징에 맞게 개발하기는 어렵다. 또한 현재(2022기준)기준으로 대부분의 브라우저는 HTML5 표준에 거의 맞게 개발하고 있기 때문에, 모든 브라우저를 테스트 할 필요성은 없다. 현재 사용되는 대표 브라우저는 5개 정도로 구분할 수 있는데, 그 중에서도 사용빈도(점유율)가 높은 브라우저 선택이 현명할 것이다. 국내 데스트탑 브라우저의 사용자 점유율을 확인하면 1위는 크롬, 2위는 엣지, 3위는 웨일로 조사된다. (아래의 브라우저 점유율 링크 참조) 따라서 크롬 이나 엣지를 주 브라우저로 작업하면 된다. 어차피 둘 다 같은 렌더링엔진을 사용하고 있기 때문에 거의 유사하다.
  * 참고1 : 렌더링 엔진이란? Html,Css의 코드를 해석해서 사용자가 볼 수 있도록 브라우저에 표현하는 역할을 담당하고 있는 엔진.(시각화 담당)
  * 참고2 : 자바스크립트 엔진이란? 자바스크립트 코드를 해석해서 브라우저의 데이터 제어나 이벤트제어 등을 할 수 있게 하는 엔진.(데이터처리 및 로직 담당)
  * 참고3 : 개발용으로 파이어폭스 브라우저의 성능이 상당히 발전 되어 있으므로 관심을 가져 보는 것도 좋겠다.
  

  브라우저종류
  브라우저이름	크롬(Chrome)	엣지(Edge)	파이어폭스(Firefox)	사파리(Safari)	오페라(Opera)
  렌더링엔진	Blink	Blink	Gecko	Webkit	Webkit
  자바스크립트엔진	V8	차크라	라이노	Nitro	Carakan

  
  

  · 전세계 브라우저 점유율 확인하기	https://gs.statcounter.com/
  · 각 브라우저의 HTML5 성능비교	http://html5test.com/

  
  

• 셋째, 코딩관련 참고 사이트

    코딩관련 사이트는 온라인상에 넘쳐난다. 처음 공부하는 시점에는 중심이 되는 레퍼런스 사이트가 중요하다고 생각된다. 따라서 아래의 사이트 위주로 공부하는 것을 권장한다. 공부가 어느정도 익숙해 진다면, 그 때 부터는 필요한 레퍼런스 사이트를 찾는 방법도 익숙해 질 것이다. 수학을 공부할 때 처음부터 삼각함수나 미적분을 배우지 않는다. 처음에는 사칙연산, 그 다음에 삼각함수, 그다음에 미적분을 배우듯이 코딩도 마찬가지다. 온라인상의 코딩 관련사이트는 그러한 단계를 말해 주지 않는다. 처음 시작할 때는 내게 맞는 자료라면 그것으로 충분하다. 언젠가 그것을 부족하다고 느껴진면 자연스럽게 다음 단계로 넘어간다.
  * 참고1 : 렌더링 엔진이란? HTML,CSS의 코드를 해석해서 사용자가 볼 수 있도록 브라우저에 표현하는 역할을 담당하고 있는 엔진.(시각화 담당)
  * 참고2 : 자바스크립트 엔진이란? 자바스크립트 코드를 해석해서 브라우저의 데이터 제어나 이벤트제어 등을 할 수 있게 하는 엔진.(데이터처리 및 로직 담당)
  * 참고3 : 개발용으로 파이어폭스 브라우저의 성능이 상당히 발전 되어 있으므로 관심을 가져 보는 것도 좋겠다.
  

  코드 관련 사이트
  · 모질라 개발자 사이트	https://developer.mozilla.org/ko/
  · 사설 개발자 사이트	https://w3schools.com/
  · HTML유효성검사 사이트	https://validator.w3.org/
  · 특수문자 코드	https://entitycode.com/
  · 구글 웹폰트	https://fonts.google.com/

  색상 관련 사이트
  · 브라우저 색상 도구	https://colorzilla.com/
  · Adobe 색상 조합 도구	https://color.adobe.com/