스파르타코딩클럽 웹개발 종합반 - 1주차

"배운 것"

-[수업목표]
1. 서버와 클라이언트의 역할에 대해 이해한다.
2. HTML, CSS의 기초 지식을 이해한다. 부트스트랩을 가져다 쓸 줄 안다!
3. Javascript 기초 문법을 익힌다.

<단축키 모음>
-. 새로고침 : F5
-. 저장 : ctrl+S
-. 전체선택 : ctrl+A
-. 잘라내기 : ctrl+X
-. 콘솔창 줄바꿈 : shift+enter
-. 코드정렬 : ctrl+Alt+L
-. 들여쓰기 : Tab, 들여쓰기 취소 : shift+Tab
-. 주석 : ctrl+/

1. 서버와 클라이언트의 역할

-. 브라우저 : 서버에게 요청함 -> 결과물을 받아서 그대로 그려줌
-. 서버 : 만들어 놓은 통로, 창구로 뭔가를 내보냄. 주로 HTML, CSS, Javascript
ㄴ. HTML : 뼈대
ㄴ. CSS : 꾸미기
ㄴ. Javascript : 움직이게 하는 것
-. 그릴 것 : 데이터

2-1. HTML, CSS의 기초

(파이참 사용)

[HTML]
: 'head'와 'body'로 구성

-. head : body외의 나머지 필요한 태그들로 구성
(예시로, 아이콘, 구글 검색 엔진이 내 사이트를 퍼가기 좋게 만드는 것, 꾸미기(CSS), 움직이기(Javascript) 등.)
-. body : 내 눈에 보이는 부분
참고)코드들은 외워서 사용하는 것이 아니라 가져다가 사용하면 됨.

---

스파르타코딩클럽 | HTML 기초

나는 문단이에요

• bullet point!1
• bullet point!2

<!-- 구역 내 콘텐츠 태그들 -->
<h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
<h2>h2는 소제목입니다.</h2>
<h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
<hr>
span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
<hr>
a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
<hr>
img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
<hr>
input 태그입니다: <input type="text" />
<hr>
button 태그입니다: <button> 버튼입니다</button>
<hr>
textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>

---

예제) 간단한 로그인 페이지 만들어보기

로그인페이지

로그인 페이지

ID:

PW:

로그인하기

---

[CSS]
: 뭔가를 꾸민다는 것 = 가리켜야 가능.(명찰을 달아주는 것, 지칭)

• class=""로 명찰을 달아준 후 -> 'style'탭에서 지칭하여 꾸며줌.
  폰트 색깔, 사이즈, 굵기 등

  <자주쓰는 CSS>
  -. background-color : 배경색. 주로 div 확인 할 때 사용
  -. width : 가로길이
  -. height : 세로길이
  -. color : 글자 색
  -. text-align : 글자 정렬. 가운데로 정렬할 시 center로 값 넣어줌.
  -. background-image: url("주소");
  background-size: cover;
  background-position: center; => 이미지 삽입 할 때 주로 사용. 3가지를 세트로 묶어서 사용하면 좋음.
  -. border-radius : 모서리 둥굴게
  -. padding : 안쪽으로 여백
  -. margin : 바깥쪽으로 여백. ㅇㅇpx ㅇㅇpx ㅇㅇpx ㅇㅇpx 상, 우, 하, 좌 시계방향으로 여백이 들어감(순서). 또는 '-top'으로 지정여백값 가능.

• div를 가운데로 오게 하는 것 = 내 양쪽 여백이 동등하다.
  : margin을 auto로 값을 넣어 주면 됨.

• 간혹 margin의 auto값이 적용 안되는 경우가 있음. 이유는 html에는 글속성과 박스속성이 있는데, 박스속성은 가로세로의 개념이 적용되나 글속성에는 적용되지 않기 때문.
  : 그래서 글속성을 강제로 박스로 옮겨주면 됨. display에 block으로 값을 넣어주면 가능.

• 또한, 명칭(class)은 중첩이 가능함. 두개를 매겨줄 수 있음.
  : class="ㅇㅇㅇ ㅇㅇㅇ" 이렇게.

  <폰트>
  구글웹폰트(https://fonts.google.com/?subset=korean)에서 복사하여 사용 가능.
  
  <주석처리>
  ctrl+/

  <파일분리>

2-2. 부트스트랩

[부트스트랩]
: 남이 만들어 놓은 예쁜 CSS 모음집
-. 부트스트랩 주소 : https://getbootstrap.com/docs/4.0/components/alerts/
-. 부트스트랩 시작 템플릿

---

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+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>

<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>

이걸로 시작해보죠!

---

이 시작 템플릿에 부트스트랩에서 원하는 CSS코드를 복사하여 붙여넣어 사용.

예제) 나홀로메모장틀 만들기

3. Javascript 기초 문법

[Javascript]
: 처음 배우는 프로그래밍 언어. 브라우저가 알아들을 수 있는 프로그래밍 언어. 명령을 내리는 것.(명령을 내리고 수행 할 수 있도록 소통하는 언어)

위 사진과 같이 'style'탭 아래에 'script'탭을 만들어주고 그 안에 'function'을 통해 명령.

이 명령을 수행할 태그에 가서 'onclick'으로 적용해주면 페이지에서 해당 버튼을 눌렀을 때 아래와 같이 작동함.

• 참고) Javascript 문법 사용 시 만든 페이지를 구글로 켜고 페이지에서 마우스 오른쪽 클릭하여 '검사'를 클릭해 나오는 개발자도구로 주로 쓸 것임. 검사를 눌러서 창이 나왔을 때 'console'탭에서 작업을 하면 파이참의 'script'와 이어진다고 생각하면 됨.

<변수, 자료형, 함수, 조건문, 반복문. 이정도 알면 그래도 거의 원하는 노직을 만들 수 있다고 함.>

1) 변수 : 값을 담는 것.
-. '' : 문자열(""도 상관없음.), 변수 이름을 지정할 때는 남이 알아봐도 알아보기 쉬운 이름으로 짓는다.

2) 자료형
-. list형 : 순서가 중요한 담기. (예, '시장에가면~' 같은 게임. 즉, 순서가 중요함.) []대괄호를 사용함. 셀 때 0부터 셈. 중간에 추가할 때는 .push('')로 추가하면 됨.

-. dictionary형 : 일상생활에서 정말 많이 씀. (예, 생일.) dict에서 중간에 추가 할 때는 []안에 이름을 넣고 추가해주면 됨. 'key(키):value(값)'이 형식을 꼭 지켜야 함. 이 형식의 순서 변경은 상관 없음.

위 사진처럼 list를 불러와서 같이 값을 낼 수 있음.

---

#) 그 외 알고 있으면 유용한 것 -. {}중괄호는 주로 명령할 때 사용, []대괄호는 주로 명령한 값에서 값을 불러올 때 사용 -. 나누고 나머지 값 구하기 : %

-. 특정 문자열로 나누고 싶을 때 : split

---

3) 함수 : 정해진 동작을 하는 것. -. return : 끝내고 나를 변신시켜줘

아래처럼 경고창을 띄우게 할 수도 있음.

값 없이도 기능을 동작시키게 할 수 있음.


따라서, 함수 function은 정해진 동작을 하게 함!!

4) 조건문
-. 기본 if문 : 제일 많이 씀. 직관적이라 헷갈려하지 않는 편.
if (age > 20) {
console.log('성인입니다')
} else {
console.log('청소년입니다')
}

주의) and : &&, equal : ==, or : ||(backspace아래에 있는 버튼 shift누르고 치면 됨)

이렇게도 가능함. if, else 반복

5) 반복문
(반복문을 제일 많이 헷갈려 함.)

-. 주로 사용하는 반복문 예제들.

예제1)

예제2)

여기에서 다른 함수들로 원하는 값을 추출해 낼 수 있음.

scores를 가지고 있는 갯수 안에서 돌리고

이름대로 한 번, 이름과 점수대로 한 번 돌린 다음

if문을 넣어 원하는 값을 얻어낼 수 있음.
처음에는 어색하고 어렵게 느껴지겠지만 여러 예제를 통해 경험해보고 계속 접해보면 익숙해 질 것이라고 함.

---

-. 전형적인 패턴 연습하기.

연습1)

서울시 내 구별의 미세먼지 수치를 가지고 구이름, 수치값으로 정렬하게 돌린 다음, if문을 사용해 40보다 큰 구들로 정리하게 함.

연습2)

서울시 따릉이 현황 수치값을 정류소 이름별로 정리하고 주차되어 있는 자전거 수로 정리하고 거기에서 5대 미만으로 값을 추출함.

"실수한 것"

1. 예제) 간단한 로그인 페이지 만들어보기
   에서 문단을 나누는 'p'태그를 사용하여 만들지 못함.
   

로그인페이지

로그인 페이지

로그인하기

2. 예제) 나홀로메모장틀 만들기
   에서 글자를 두껍게 만드는 방법을 몰라서 못함. 10분의 제한시간안에 만들었어야 했는데 15분 정도 걸림. 글자를 두껍게 만드는 방법은 구글에서 CSS로 검색하면 알아 낼 수 있었음. 구글링을 잘 활용하자!!
   
   

"앞으로 배울 것"

: 2주차에서 배울 예정인

1. Javascript 문법에 익숙해진다.
2. jQuery로 간단한 HTML을 조작할 수 있다.
3. Ajax로 서버 API(약속)에 데이터를 주고, 결과를 받아온다.

에 대해서 배울 것이다.

# 번외 - 1주차 숙제

-. 원페이지 쇼핑몰 HTML+CSS 만들기

---

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+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>

<title>나만의 쇼핑몰 | 메인페이지-청심환 구매</title>

<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=Hahmlet:wght@300&display=swap"
      rel="stylesheet">

<style>
    * {
        font-family: 'Gowun Dodum', sans-serif;
    }

    .wrap {
        width: 500px;
        margin: auto;
    }

    .mybtn {
        width: 100px;
        margin: auto;
        margin-bottom: 20px;
        display: block;
    }

    .item-desc {
        width: 500px;
        margin-top: 80px;
        margin-bottom: 20px;
    }

    .item-img {
        width: 500px;
        height: 300px;
    }

    .item-order {
        width: 500px;
    }

    .price {
        font-size: 20px;
    }

</style>

<script>
    function order() {
        alert('주문이 완료되었습니다.');
    }
</script>

---

이 코드로 만든 페이지 화면의 일부분은 아래와 같다.

이렇게 직접 페이지도 만들어보니 강의를 수강하면서 배우고 들었던 코드들을 정리하면서 적용해보게 되고 기억에 더 잘 남는 과정을 거친 것 같아 뿌듯하고 좋다. 비록 한페이지이고 실제로 주문이 되는 기능을 가진 페이지는 아니지만 여기까지 해 낸 스스로가 기특하다. 앞으로 배울 내용도 기대가 된다.