왕초보 시작반(1)

euniiee·2021년 10월 4일

스파르타 왕초보시작반

sparta

목록 보기

1/5

수업 목표!

서버와 클라이언트의 역할에 대해 이해한다.
HTML, CSS 기초 지식을 이해한다. 부트스트랩을 가져다 쓸 줄 안다.
Javascript 기초 문법을 익힌다.

1주차 1강

브라우저가 하는일은 1) 요청을 보내고, 2) 받은 HTML 파일을 그려준다.
---> 어디에다가 요청을 할까?🤔
서버가 만들어 놓은 "API" 라는 창구에 미리 정해진 요청을 보내는 것.
예) https://naver.com/
-> 이것은 "naver.com"이라는 이름의 서버에 있는, "/" 창구에 요청을 보낸 것!

☝🏼 그럼 항상 html만 내려주나요? ❌
데이터만 받아서 받아 끼우게 되는 경우도 있다.

데이터만 내려올 경우는 아래 형식처럼 생겼습니다. 이런 생김새를 JSON형식 이라고 합니다.

1주차 3강

HTML은 head와 body로 구성된다.
head 안에는 페이지의 속성 정보 ex)meta,script, link,title...
body안에는 페이지의 내용을 ex) div, p, ul...
div 태그는 묶어서 옮긴다. p 태그는 문단을 나눌때 쓰인다.

1주차 4강

Quiz_로그인 페이지 만들기
💡 p 태그 안에 input 태그!!

 <p>ID: <input type="text"/></p>
 <p>PW: <input type="text"/></p>

1주차 5강

CSS는 head 안에 style 태그로 공간을 만들어서 작성하기, 따로 파일을 만들어서 작성 가능!! 따로 파일을 만들 경우

 <link rel="stylesheet" href="파일 경로">

1주차 6강

💡 margin과 padding 헷갈리지 않기!
margin은 바깥 여백 padding은 내부 안쪽 여백

1주차 7강

구글 웹 폰트

1주차 8강

부트스트랩
부트스트랩을 쓸려면 아래 코드가 꼭 있어야 한다.

<!-- Bootstrap CSS -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>

1주차 9강

Bootstrap 써보기!

1주차 10강

Quiz_페이지 발전시키기!
💡 a 태그 이용하기

<a href="링크">링크로 이동하기</a>

1주차 11강

Quiz_페이지 완성하기!
💡 margin 이용하기

<4면 한꺼번에 margin 지정하기>
margin: 위 오른쪽 아래 왼쪽 순
<4면이 모두 같을 때>
margin: 100px;
<위, 오른쪽&왼쪽, 아래 지정하기>
margin: 5px 10px 0px;
<위&아래, 오른쪽&왼쪽 지정하기>
margin: 5px 10px;

1주차 12강

Javascript는 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어입니다.
head 안에 script태그로 공간 만들어서 작성하기, 따로 파일을 만들어서 작성하기가 있다. 따로 파일을 만들 경우

<script defer src="경로"></script>

💡 alert 창 만들기!!

 function hi() {
    alert('안녕!');
}
여기서 hi는 함수... 이 함수를 html에 적용
함수는 정해진 동작을 하는것이다. 즉, 부르면 정해진 동작을 한다.
 <a onclick="hi()" class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>

1주차 13강

변수는 값을 저장하는 박스/ 한 번 선언했으면, 다시 선언하지 않고 값을 넣습니다.

1주차 14강

💡 함수

 // 만들기
 function 함수이름(필요한 변수들) {
     내릴 명령들을 순차적으로 작성
 }
 // 사용하기
 함수이름(필요한 변수들);

💡 조건문

function is_adult(age){
	if(age > 20){
		alert('성인이에요')
	} else {
		alert('청소년이에요')
	}
}
is_adult(25)
And 조건:
function is_adult(age, sex){
if(age > 20 && sex == '여'){
OR 조건:
function is_adult(age, sex){
if(age > 20 || sex == '여'){

💡 반복문

for (let i = 0; i < 100; i++) {
	console.log(i);
}
예시)
for (let i = 0 ; i < scores.length ; i++) {
	if (scores[i]['score'] < 70) {
		console.log(scores[i]['name']);
	}
}
// 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.

euniiee

코린이

다음 포스트