💡수업 목표💡
1. 서버와 클라이언트의 역할에 대해 이해한다.
2. HTML, CSS의 기초 지식을 이해한다. 부트스트랩을 가져다 쓸 줄 안다!
3. Javascript 기초 문법을 익힌다.
서버와 클라이언트의 역할
Client 컴퓨터 : 서비스를 이용하는 컴퓨터로써 사용자
Server 컴퓨터 : 서비스를 제공하는 컴퓨터
필수 프로그램 설치
파이참 (PyCharm) 설치하기
파이참(PyCharm)은 IntelliJ에서 만든 파이썬 개발에 가장 널리 사용되는 통합 개발 환경(IDE, Integrated Development Environment) 또는 개발 도구 입니다.
보통 VScode를 많이 사용하나 스파르타코딩클럽 웹개발종합반에서는 백엔드로 파이썬과 Django를 배우기 때문에 파이참을 사용한다.
(예전에 내가 파이썬 배울때는 eclipse를 썼었는데...)
파이참은 Community / Professinal 버전이 있는데 파이썬 개발이 필요한 기능을 사용할려면 아무래도 유료결제를 해야한다. 설치하면 7일간 Professinal버전을 무료 체험이 있지만 그 이상을 사용하려면 연간 89달러 정도를 지불해야한다..... 생각보다 가격이 나가는 편이다.
스파르타 코딩클럽에서는 웹개발 종합반을 수강하면 Professinal버전의 4개월 크레딧을 지원해준다👍
https://www.jetbrains.com/pycharm/download
Download PyCharm: Python IDE for Professional Developers by JetBrains
Download the latest version of PyCharm for Windows, macOS or Linux.
www.jetbrains.com
HTML, CSS, JS 기본
html, css, js의 기초 문법은 강의에서 다루지 않는다. 디테일한 부분은 W3School을 참조해서 필요한 부분이 있을때마다 그때그때 찾아가면서 사용하면된다.
물론 개발에 관한 모든것을 외우는 것도 좋지만, 그것보다 필요한 부분을 잘 찾아가면서 활용할 줄 아는게 개발에서 가장 큰 도움이 된다.
W3Schools Free 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
HTML(HyperText Markup Language)
: 뼈대
: 하이퍼텍스트,링크 / 마크업, 태그</> / 언어
: 웹 페이지의 구조를 기술하기 위한 마크업 언어, 문서
CSS(Cascading Style Sheets)
: 살
: 마크업 언어(HTML, XML 등)가 실제 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정하여 콘텐츠 구조를 꾸며주는 정적 언어
: 웹의 시각적인 표현을 담당
JS(JavaScript)
: 움직임
: HTML과 CSS로 만들어진 웹페이지를 동적으로 변경해주는 프로그래밍 언어 (≠ JAVA)
example : login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
<style>
.myTitle{
background: darkgreen;
width: 300px;
height: 200px;
color: #fff;
text-align: center;
background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
background-size: cover;
background-position: center;
border-radius: 20px;
padding-top: 40px;
}
.wrap{
width: 300px;
margin: auto;
}
.mybtn{
padding: 20px 20px 20px 20px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="myTitle">
<h1>로그인페이지</h1>
<h5>아이디, 비밀번호를 입력해주세요. </h5>
</div>
<form>
<p>ID: <input type="text" name="id"/></p>
<p>PW: <input type="text" name="pw"/></p>
<button type="submit" class="mbtn">로그인하기</button>
</form>
</div>
</body>
</html>
'스파르타코딩클럽 > 웹개발' 카테고리의 다른 글
| 웹개발종합반 개발일지 | 1주차 (0) | 2022.08.16 |
|---|---|
| 웹개발종합반 개발일지 | 1주차 - 숙제 (0) | 2022.08.12 |
| 웹개발종합반 개발일지 | 1주차 - 12,13,14,15,16강 (0) | 2022.08.11 |
| 웹개발종합반 개발일지 | 1주차 - 8,9,10,11강 (0) | 2022.08.11 |
| 웹개발종합반 개발일지 | 0주차 개발환경셋팅 (0) | 2022.08.11 |
