본 포스팅은 교육에서 들은 내용은 스스로 공부하고자 정리한 내용이며, 필자는 그냥 교육생이며 관련 전문가나 개발자가 아님을 먼저 말씀드립니다.
1) 웹 프로그래밍이란
사용하는 웹 사이트를 제작하는 일
개발언어 : HTML, CSS, 자바스크립트
웹사이트 레이아웃 : 정적, 동적, 적응형, 반응형
* 요즘 사이트는 대부분 적응형 또는 반응형 Web(최적화가능)
개발용어 : 프론트엔드 개발자, 백엔드 개발자
웹 개발 시 체크리스트
1. 크로스 브라우징
여러 브라우저(익스플로러, 크롬, 사파리 등)에서 작업가능하도록 웹사이트를 통일하는 기술?
2. 웹 표준
다양한 웹 기술을 통해 많은 콘텐츠가 공유되고 확산되면서, 웹 접근성, 사생활 보호, 보안, 국제화 등을 고려하여 웹 기술을 표준화 하는 서비스
3. 웹 접근성
누구나 인터넷(웹) 개별 사이트에 접근하기 쉽게 기술적으로 보장하는 일. 특히 장애인이거나 나이가 많아 인터넷을 이용하기 어려운 사용자를 위한 것
4. FTP
PC-서버 연결해주는 서비스
5. 라이브러리
타인이 만든 여러 기능의 결과물 즉, 컴퓨터 프로그램에서 자주 사용되는 부분 프로그램들을 모아 놓은 것
2) 웹 프로그래밍 독학(공부) 사이트 추천
1. 에디터 사이트(VS CODE, Sublimetext, Webstorm)
https://code.visualstudio.com/(입문자)
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
Sublime Text - the sophisticated text editor for code, markup and prose
Available on Mac, Windows and Linux
www.sublimetext.com
WebStorm: JetBrains가 만든 스마트한 JavaScript IDE(유료, 추천)
WebStorm: JetBrains가 만든 스마트한 JavaScript IDE
최신 JavaScript 개발을 위한 강력한 IDE로서, JavaScript, TypeScript 및 가장 잘 알려진 웹 프레임워크에 코드 완성 및 리팩터링 기능을 제공합니다.
www.jetbrains.com
2. 웹 사이트 디자인, 기획 시 참고사이트(디비컷, 지디웹, awwwards, media queries, straightline bookmark, 코드팬)
https://www.dbcut.com/bbs/index.php
디비컷 - 웹디자인 벤치마킹 및 우수 웹사이트 모음
디비컷은 신규 오픈한 국내외 웹사이트를 소개 평가하는 웹디자이너 커뮤니티입니다.
www.dbcut.com
굿디자인웹
국내 최우수 웹디자인 선정, 웹사이트. 굿디자인웹
www.gdweb.co.kr
Awwwards - Website Awards - Best Web Design Trends
Awwwards are the Website Awards that recognize and promote the talent and effort of the best developers, designers and web agencies in the world.
www.awwwards.com
https://mediaqueri.es/(PC,MOBILE,TABLET 모두)
Media Queries
mediaqueri.es
http://bm.straightline.jp/all(일본)
straightline bookmark
bm.straightline.jp
CodePen
An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.
codepen.io
3. 웹프로그래밍 독학(공부) 사이트(영상기반, 텍스트기반)
영상기반(생활코딩, 얄팍한 코딩사전, thenewboston, wesbos)
생활코딩 (opentutorials.org)+생활코딩 유튜브
생활코딩
hello world 생활코딩의 세계에 오신 것을 환영합니다. 생활코딩은 일반인들에게 프로그래밍을 알려주는 무료 온라인, 오프라인 수업입니다. 어떻게 공부할 것인가를 생각해보기 전에 왜 프로그
opentutorials.org
얄팍한 코딩사전
www.youtube.com
thenewboston
Tons of sweet computer related tutorials and some other awesome videos too!
www.youtube.com
Wes Bos
HTML, CSS, JavaScript and WordPress web development tutorials!
www.youtube.com
텍스트기반(freecodecamp,w3school,모던자바스크립트,에드위드)
Learn to Code — For Free — Coding Courses for Busy People (freecodecamp.org)
freeCodeCamp.org
Learn to Code — For Free
www.freecodecamp.org
모던 JavaScript 튜토리얼
ko.javascript.info
W3Schools Online Web Tutorials
W3Schools Online Web Tutorials
HTML Example:
This is a heading
This is a paragraph.
Try it Yourself CSS Example: body { background-color: lightblue; } h1 { color: white; text-align: cente
www.w3schools.com
에듀케이션위드 : edwith
에드위드(edwith)는 네이버(NAVER)와 네이버 커넥트재단(NAVER Connect)이 제공하는 온라인 강좌(MOOC : Massive Online Open Course) 교육 플랫폼입니다. 에듀케이션위드(education with) 에드위드(edwith)로 분야별 명
www.edwith.org
4. 기타 참고 사이트(statcounter, can i use, NULI, HTML Validator)
StatCounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share(웹사이트 점유율 파악)
https://caniuse.com/(웹사이트 단어버젼확인)
Can I use... Support tables for HTML5, CSS3, etc
caniuse.com
https://nuli.navercorp.com/(웹사이트 노하우)
NULI
nuli.navercorp.com
https://validator.w3.org/(웹사이트 타당성 검토)
URL, 파일, CODE 타당성 검토가능, 빨간색은 수정필수, 노란색은 수정권고
The W3C Markup Validation Service
Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website.
validator.w3.org
https://www.edwith.org/(웹사이트 노하우, NULI와 비슷)
에듀케이션위드 : edwith
에드위드(edwith)는 네이버(NAVER)와 네이버 커넥트재단(NAVER Connect)이 제공하는 온라인 강좌(MOOC : Massive Online Open Course) 교육 플랫폼입니다. 에듀케이션위드(education with) 에드위드(edwith)로 분야별 명
www.edwith.org
'자기개발 > IT' 카테고리의 다른 글
| Microsoft Teams(마이크로소프트 팀즈) 효과적으로 활용하기!! 3탄(미팅 및 회의) (0) | 2021.06.17 |
|---|---|
| Microsoft Teams(마이크로소프트 팀즈) 효과적으로 활용하기!! 2탄(문서협업) (0) | 2021.06.11 |
| Microsoft365 Teams(마이크로소프트 팀즈) 효과적으로 활용하기!! 1탄(구성 및 기능활용) (0) | 2021.06.09 |
| Microsoft365 아웃룩(outlook)으로 메일 및 일정 관리하기!!! (0) | 2021.06.01 |
| S2) 스마트워크, 디지털 마케팅 정리 (0) | 2021.05.07 |