웹 프로그래밍 기초, 용어 정리, 추천 도구 링크

웹사이트 종류

정적 웹사이트(Static Layout)

• 크기를 줄여도 변하지 않음

동적 웹사이트(Liquid Layout)

• 브라우저 크기를 줄였을 때 공간이 리사이즈 됨

적응형 웹사이트(Adaptive Layout)

• 레이아웃 형태(구조)까지 달라짐
• 이제는 스마트폰, 태블릿 등도 사용해서 이런 웹사이트 종류가 생겼음
• 공간의 크기가 툭툭 바뀜

반응형 웹사이트(Responsive Layout)

• 브라우저 크기를 줄였을 때 공간이 자연스럽게 리사이즈 되고
• 특정 지점에서 모바일버전 레이아웃으로 바뀜
• 요즘은 적응형 + 반응형 섞어서 제작도 함

알아야 할 용어

프론트엔드

• 고객이 보는 모든 화면을 제작하는 개발자 = 프론트엔드 개발자
• 백엔드는 고객이 보지 못하는 뒷단을 개발

크로스 브라우징

✏️ 웹 페이지 제작 시 모든 브라우저에서 깨지지 않고 올바르게(호환성) 나오게 하는 작업

웹표준

✏️ 정확한 태그에 맞춰 작성하는 것

 

웹 표준에 맞게 태그를 써야 구글 검색 엔진에서 노출될 확률이 높아진다.

예) <제목> 코로나종식! </제목> 이런식으로 제목과 태그를 맞게 써야함.

웹접근성

FTP

• 우리가 웹페이지를 제작하고 인터넷에 올려야 그게 보이는데 우리의 컴퓨터와 인터넷을 연결해주는 그런 채널의 역할을 하는 것이 FTP, 우리가 만든 결과물을 FTP를 통해 서버에 올리고 결과물은 도메인 주소로 확인

라이브러리

• 다른 사람들이 이미 만들어 놓은 기능 = 라이브러리 우리는 이 라이브러리를 사용해서 기능을 차용해서 씀

추천 도구, 링크 등

개발도구

• visual studio code
• sublime text
• webstrom(유료)

유튜브 채널

• 생활코딩 web1-html, web2-css, web3-javascript
• 얄팍한 코딩사전
• thenewboston
• web bos - javascript30 보면 좋다고 함

구글

• freecodecamp
• w3schools
• 모던 자바스크립트
• edwith -네이버거고 무료
• statcounter - 전세계 웹사이트 브라우저 점유율 확인 가능한 사이트
• can i use - 용어(단어)가 브라우저 버전에 영향 받는지 검색
• nuli - 널리
• html validator - 내 결과물이 잘 작성되었는지 체크를 할 수 있는 사이트
• 코드펜 codepen 다른 사람이 만들어놓은 결과물을 공유하고 확인할 수 있는 사이트
• 디비컷: https://www.dbcut.com/bbs/index.php
• 어워즈: https://www.awwwards.com/
• 국내외 여러 사이트가 있고 평가도 받을 수 있음
• 미디어쿼리: https://mediaqueri.es/
• 모바일 버전도 확인 가능
• 스트레이트라인: http://bm.straightline.jp/all
• 주로 일본 웹사이트 확인 가능