상세 컨텐츠

본문 제목

0721 퍼블리싱 기초 수업

카테고리 없음

by moonddang 2023. 7. 23. 21:07

본문

디자이너가 퍼블리싱을 하는 이유?
-개발자의 언어로 이야기하고 싶을때
-포트폴리오 사이트 만들기 위해서 
-디자인도 하고 개발도 하는 멀티인간이 되기 위해

 

1. 코딩공부할 때 참고하는 사이트

W3Schools : 온라인으로 웹 기술을 배우는 교육용 웹 사이트

기본적인 개발언어들에 대한 튜토리얼을 볼 수 있어 공부할 때 참고, 문법을 볼때 요 사이트 참고하면 됨

https://www.w3schools.com/ 

 

W3Schools Online Web Tutorials

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

생활코딩 : 개발 공부를 시작할때 제일 많이 접하는 사이트

https://www.opentutorials.org/course/1

 

생활코딩

hello world 생활코딩의 세계에 오신 것을 환영합니다. 생활코딩은 일반인들에게 프로그래밍을 알려주는 무료 온라인, 오프라인 수업입니다.  어떻게 공부할 것인가를 생각해보기 전에 왜 프로그

www.opentutorials.org

클라이언트 메뉴에서 들으면 됨

 

TPCSchool : 기본적인 이론을 공부하고 싶을 때 참고(동영상 강의보단 텍스트로 되어있음)

http://www.tcpschool.com/

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

 

2. html / css / javascript의 개념

html, css는 시간만 투자하면 다 할 수있다.

  • html: 웹문서를 만드는 기본언어 (구조)
  • css: 거기에 디자인을 입히는 것, 화면을 꾸미는 것, (표현)
  • javascript : 동적인 움직임을 만드는 것 (동작)_ JAVA랑 다르다

 

3. SPA / jQuary의 개념

SPA (Sinagle Page Aplication) :  단일 페이지로 구성된 웹 애플리케이션

  •  React, Vue/Angular 가 있다.
  • 위의 세개 언어(html, css, js)를 같이 전체 하나의 프레임워크로 묶어서 페이지를 맏드는 것 (조금 더 어렵다)
  • 프론트 엔드에서 많이 쓰는 추세
  • 컴포넌트들이 모여 한 페이지를 작성하고, 특정 부분만 데이터를 바인딩하는 개념이다.
  • 페이지 깜박임도 없고 컴포넌트를 이용해서 페이지를 더 원활하게 이동 할 수 있게 한다.
  • 유저의 입력이 데이터 베이스에서 원활하게 처리될 수있게 스파가 생김
  • 한국에서는 리액트가 점령함

 

jQuery : 자바을 조금더 쉽게 만드는 것

-> 기본적으로 자바에서 파생된 라이브러리

자바를 모르고서는 할 수 없다.

 

 


 

코딩을 위한 세팅을 해보자.

 

1. visual studio code 다운로드 하기

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

 

2. 플러그인 다운로드 하기   " Live server / color highlight "

 

3.  File > open file > 파일 추가 아이콘을 눌러서 생성하기

** 파일명은 영문+숫자로만 가능 / 특수문자는 _ - 만 가능 (한글안됨)

**문서 확장자는 .html / .css / .js

-> 본인은  ' 01.html ' 이라고 적었음

기본형식을 가진것을 기본태그라고 한다.

 

 

 

---

 

글자를 크게 만든다 할때 그 요소에 여러속