스파르타코딩클럽 내일배움단 웹개발 종합반 1주차 개발일지

Bluewiz_YSH·2022년 5월 5일

국비지원코딩 내일배움카드 스파르타코딩클럽 코딩독학

스파르타코딩클럽 웹개발 종합반 개발일지

목록 보기

1/5

1. 웹의 동작원리와 1주차 전반적인 내용

우리가 보고 조작하는 컴퓨터 = 클라이언트

그런 클라이언트 화면에 떠 있는 데이터, 디자인, 기능, 레이아웃 등을 담은 파일들을

클라이언트에 전송하고 어떻게 구현해야하는지 지시하는 컴퓨터 = 서버

웹은 그런 클라이언트-서버간의 통신을 통해 구현된, 유용한 기능이 담긴 하나의 그림이자 동시에 그 그림을 만드는 수단.

1주차에는 웹페이지를 만들고 수정하는데 있어서 가장 기초가 되는 HTML, CSS, JS(Javascript)

언어를 배웠다. 더불어 그런 언어를 다루기 위한 기본적인 프로그램 PyCharm과 후일에 다룰

대표적인 클라우드 웹 서비스들 중 하나인 AWS(Amazon Web Service)을 가입하고 설치했다.

2. HTML과 CSS

HyperText Mark-up Language, HTML은 웹페이지를 만들고 수정하기 위해 개발자들끼리 약속한

가장 기본적인 언어이자 규약이며 '뼈대'이고 대략적으로 < head >와 < body >,

이 두 부분으로 구성되어 있다.

Cascading Style Sheets, CSS는 HTML을 기본 언어로 삼되 그 중 디자인 부분만 뽑아내어 따로

문서를 만들때 쓰는 '꾸미는' 디자인 전용 언어라고 배웠다.

다음은 HTML 중에서 가장 많이 쓰이는 태그들(<>표시, 웹페이지를 구성하는 코드 문서의 구조를

알려주며 여러가지 기능을 나타내는 도구이다, 일반적인 규칙은 항상 첫부분은 <태그이름>로

시작해서 마지막 부분은 </(태그이름)>으로 끝맺는다)을 모은것이다.

다음 코드들을 보자.

<html lang="en">
<head> 
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스파르타코딩클럽 | HTML 기초</title>
</head>
<body>
<!-- 구역을 나누는 태그들 -->
<div>나는 구역을 나누죠</div>
<p>나는 문단이에요</p>
<ul>
<li> bullet point!1 </li>
<li> bullet point!2 </li>
</ul>
  <!-- 구역 내 콘텐츠 태그들 -->
<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>
</body>
</html>

하나 하나씩 살펴보면,

<title>스파르타코딩클럽 | HTML 기초</title>

일단 < title > 태그는 위 사진처럼 해당 웹사이트의 표제목을 담당한다.

1) 구역을 나누는 태그

< div > 태그

<div>나는 구역을 나누죠</div>

나는 구역을 나누죠

div 태그에 감싸여진 문장,코드는 다른 코드들과 분리된다. 자기만의 영역을 가진다고 생각하면 된다.

< p > 태그

<p>나는 문단이에요</p>

나는 문단이에요

말그대로 문단을 나누는 태그이다.

< li > 태그

<li> bullet point!1 </li>
<li> bullet point!2 </li>

bullet point!1

bullet point!2

불릿 리스트를 이용할때 쓴다.

2) 구역 내 콘텐츠 태그

< h1 ~ h6 > 태그

<h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
<h2>h2는 소제목입니다.</h2>
<h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>

h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.

h2는 소제목입니다.

h3~h6도 각자의 역할이 있죠. 비중은 작지만..

제목을 나타내는 태그이다. h1이 제일 큰 대제목이고 h2, h3．．．h6로 갈수록 더 작은 소제목으로 기능한다.

< span > 태그

span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요

span 태그입니다: 특정 글자를 꾸밀 때 써요

태그 사이에 있는 글자를 꾸밀때 쓴다. (글자색)

< a > 태그

a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>

a 태그입니다: 하이퍼링크

해당 글자에 href에 걸어놓은 링크로 하이퍼링크 기능을 부여하는 태그이다.

< img > 태그

img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />

img 태그입니다:

src = "" 안에 주소만 넣으면 이미지가 뜨게 하는 태그이다.

< input > 태그

input 태그입니다: <input type="text" />

input 태그입니다:

하얀 박스안에 무언가를 입력할수 있도록 만든 태그이다. type 코드를 통해 안에 입력될
내용 유형을 지정할수 있다.

< button > 태그

button 태그입니다: <button> 버튼입니다</button>

button 태그입니다: 버튼입니다

버튼을 만드는 태그이다.

< textarea > 태그

textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>

textarea 태그입니다:

하얀 박스에 기본적으로 입력되어있는 텍스트값을 정하고 텍스트를 입력받을수 있게끔 만드는 태그이다.

이외에도 여러가지 태그가 있지만 가급적이면 구글링해서 찾아보는것이 좋다고 하셨다.

3. CSS의 기초

CSS에 본격적으로 들어가기전에 앞으로 많이 쓰일 < div > 태그 기능의 중요성을 알려주셨다.

div 태그는 가장 바깥에 있는 것이 해당 전체 내용을 한 영역으로 나누는 기능을 하고

안쪽에 또다른 div 태그가 있으면 해당 내용의 < /div >줄까지 한 부분으로 나누어 그 부분만

다른 영역으로 또 구획이 나뉜다고 하셨다.

그래서 가장 바깥쪽 div 부분은 안쪽 div의 "부모"가 되고, 안쪽 div는 가장 바깥쪽 div의 "자식"이 된다고 하셨다.

그 뒤 CSS를 작성하는 법을 알려주셨는데 일단 CSS는 기본적으로 < head > 태그 안에서

< style > ~ < /style > 형태로 작성되야 하며, CSS를 통해 꾸미려는 해당 내용은 앞서 배웠던

< div > 태그안에 class 선언으로 먼저 지정해주고 ."클래스 이름" { } 형태로

어떻게 꾸밀지 코드를 적어줘야한다고 가르쳐주셨다.

다음과 같은 실습 코드를 통해 CSS를 어떻게 적어야 하는지 알 수 있었다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>로그인페이지</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Batang&display=swap" rel="stylesheet">
    <style>
        * {
            font-family: 'Gowun Batang', serif;
        }
        .mytitle {
            background-color: green;

            width: 300px;
            height: 200px;

            color: white;
            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: 10px;

            padding-top: 20px;
        }

        .wrap {
            width: 300px;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class ="wrap">
        <div class="mytitle">
            <h1>로그인페이지</h1>
            <h5>아이디, 패스워드를 입력해주세요</h5>
        </div>

        <p>ID: <input type="text"/></p>
        <p>PW: <input type="text"/></p>
        <button class="mybtn">로그인하기</button>
    </div>
</body>
</html>

먼저 head 태그 안에 style 태그를 만들고 body 태그 안에 가장 바깥쪽 div 태그로

지정된 div 태그 첫 말 안쪽에 "wrap" 클래스를,

안쪽 '로그인페이지와 아이디 패스워드를 입력해주세요' 부분을 영역 지정한 안쪽 div에는

"mytitle" 클래스를 선언을 한 뒤 style 태그 안에 .wrap, .mytitle { } 작성후 중괄호 안에

원하는 모양에 맞게 코드를 적는것이었다. 해당 페이지는 전체 내용을 담는 wrap 영역에

가로 길이를 width: 300px로 제한하고 (기본 가로길이 무제한), margin: auto로

내용을 가운데 정렬하였으며 그 다음 mytitle영역은 배경 색깔은 초록색으로

(background-color), 가로-세로는 300px-200px로 맞췄으며(width, height) 글자색은

흰색(color), 배경이미지(background-image)를 주소로 넣고 이미지 크기는

전체 이미지 맞춤에 중앙으로 정렬(background-size, background-position)하였으며

영역 테두리선은 10px 둥글게(border-radius), 내용 부분과 바깥 영역의

윗부분 안쪽 여백은 40px로 (padding-top) 내용 부분이 안쪽 사진의 정중앙에 오게끔

맞추었다.

결과물은 다음과 같이 나왔다.

기능별로 정리하자면 이렇다.

배경
background-color
background-image
background-size

사이즈
width
height

폰트
font-size
font-weight
font-famliy
color

간격
margin (영역 바깥쪽 여백)
padding (내용~영역 안쪽 여백)

4. CSS 폰트, 주석, 파일 분리

CSS에 적용할 수 있는 수많은 폰트들이 있겠지만, 강사님은 구글 웹폰트를 추천해주셨다.

맞는 폰트 스타일을 정하면 < link > 태그 내용이 나오는데 head 태그로 복사-붙여넣기를 하고

"CSS rules to specify families" 내용은 style 태그 안에 * { } 형식으로 넣으면

전체 내용에 해당 글꼴이 적용된다.

주석은 실제 코드로 작동하지 않는 부분으로 더이상 필요없어진 코드를 삭제 대신 임시로

작동불능으로 만들고 싶을때 혹은 코드에 대한 간단한 설명을 적고 싶을때 쓴다.

단순히 해당 내용을 적고 내용을 범위 설정한뒤 ctrl + / 만 치면 주석처리가 된다.

적용해야할 디자인이 많아져서 CSS 부분 코드가 길어질때, CSS 코드만 따로 파일 분리도 가능하다고 하셨다.

style.css 파일을 같은 폴더에 만들고 만든 css 파일에 해당 CSS 코드들을 복사해 붙여넣기 후

본 파일인 html 문서에서 head 태그에 다음과 같이 코드들을 적어 불러오는것이 방법이라고 하셨다.

<link rel="stylesheet" type="text/css" href = "(css파일이름).css">

5. 부트스트랩 (Bootstrap)

부트스트랩은 "예쁜 CSS 모음집"이라고 설명하시면서 대표적인 부트스트랩 사이트를 알려주셨다.

해당 부트스트랩을 쓸려면 head 태그에는 꼭 다음과 같은 코드를 꼭 넣어야 한다고 설명하셨다.

<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 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>

강사님과 함께 실습하면서 만든 부트스트랩 웹페이지 코드는 다음과 같다.

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 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 rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Stylish&display=swap" rel="stylesheet">

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

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

        .posting-box {
            width: 500px;
            margin: 10px auto 30px auto;
            border: 3px solid black;
            border-radius: 10px;
            padding: 30px;
        }

        .comment {
            color: blue;
            font-weight: bold;
        }
    </style>
    <script>
        function hey() {
            alert('안녕!!');
        }
    </script>
</head>

<body>
<div class="wrap">
    <div class="jumbotron">
        <h1 class="display-4">나홀로 링크 메모장!</h1>
        <p class="lead">중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다</p>
        <hr class="my-4">
        <p class="lead">
            <a onclick = "hey()" class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>
        </p>
    </div>
    <div class = "posting-box">
        <div class="form-group">
            <label for="exampleInputEmail1">아티클 URL</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="">
            <small id="emailHelp" class="form-text text-muted"></small>
        </div>
        <div class="form-group">
            <label for="exampleFormControlTextarea1">간단 코멘트</label>
            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
        </div>
        <button type="submit" class="btn btn-primary">기사저장</button>
    </div>
    <div class="card-columns">
        <div class="card">
            <img class="card-img-top"
                 src="https://t1.daumcdn.net/thumb/R720x0/?fname=http://t1.daumcdn.net/brunch/service/user/5xq2/image/0lp8RLaJ2IgctTWVl2nEa-JRCSc.jpg"
                 alt="Card image cap">
            <div class="card-body">
                <a href="http://naver.com/" class="card-title">여기 기사 제목이 들어가죠</a>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top"
                 src="https://t1.daumcdn.net/thumb/R720x0/?fname=http://t1.daumcdn.net/brunch/service/user/5xq2/image/0lp8RLaJ2IgctTWVl2nEa-JRCSc.jpg"
                 alt="Card image cap">
            <div class="card-body">
                <a href="http://naver.com/" class="card-title">여기 기사 제목이 들어가죠</a>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top"
                 src="https://t1.daumcdn.net/thumb/R720x0/?fname=http://t1.daumcdn.net/brunch/service/user/5xq2/image/0lp8RLaJ2IgctTWVl2nEa-JRCSc.jpg"
                 alt="Card image cap">
            <div class="card-body">
                <a href="http://naver.com/" class="card-title">여기 기사 제목이 들어가죠</a>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top"
                 src="https://t1.daumcdn.net/thumb/R720x0/?fname=http://t1.daumcdn.net/brunch/service/user/5xq2/image/0lp8RLaJ2IgctTWVl2nEa-JRCSc.jpg"
                 alt="Card image cap">
            <div class="card-body">
                <a href="http://naver.com/" class="card-title">여기 기사 제목이 들어가죠</a>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top"
                 src="https://t1.daumcdn.net/thumb/R720x0/?fname=http://t1.daumcdn.net/brunch/service/user/5xq2/image/0lp8RLaJ2IgctTWVl2nEa-JRCSc.jpg"
                 alt="Card image cap">
            <div class="card-body">
                <a href="http://naver.com/" class="card-title">여기 기사 제목이 들어가죠</a>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top"
                 src="https://t1.daumcdn.net/thumb/R720x0/?fname=http://t1.daumcdn.net/brunch/service/user/5xq2/image/0lp8RLaJ2IgctTWVl2nEa-JRCSc.jpg"
                 alt="Card image cap">
            <div class="card-body">
                <a href="http://naver.com/" class="card-title">여기 기사 제목이 들어가죠</a>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top"
                 src="https://t1.daumcdn.net/thumb/R720x0/?fname=http://t1.daumcdn.net/brunch/service/user/5xq2/image/0lp8RLaJ2IgctTWVl2nEa-JRCSc.jpg"
                 alt="Card image cap">
            <div class="card-body">
                <a href="http://naver.com/" class="card-title">여기 기사 제목이 들어가죠</a>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top"
                 src="https://t1.daumcdn.net/thumb/R720x0/?fname=http://t1.daumcdn.net/brunch/service/user/5xq2/image/0lp8RLaJ2IgctTWVl2nEa-JRCSc.jpg"
                 alt="Card image cap">
            <div class="card-body">
                <a href="http://naver.com/" class="card-title">여기 기사 제목이 들어가죠</a>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top"
                 src="https://t1.daumcdn.net/thumb/R720x0/?fname=http://t1.daumcdn.net/brunch/service/user/5xq2/image/0lp8RLaJ2IgctTWVl2nEa-JRCSc.jpg"
                 alt="Card image cap">
            <div class="card-body">
                <a href="http://naver.com/" class="card-title">여기 기사 제목이 들어가죠</a>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
            </div>
        </div>
    </div>
</div>
</body>

</html>

wrap 영역은 가로 제한 900px을 두고 margin: auto로 가운데 정렬, posting-box 영역은 아티클 URL ~ 기사저장 내용으로 경계선 실선 3px (solid black) 넣어주면서 바깥영역 시계 방향으로 윗부분 10px, 오른쪽 가운데 auto, 아래 30px, 왼쪽 가운데 auto, 경계선 10px 둥글게, 안쪽 여백 30px하고 comment 부분은 파란색과 굵은 글씨체를 넣어줬다.(font-weight: bold) 또한, "여기 기사 제목이 들어가죠" 부분은 a 태그를 이용해 네이버 홈페이지로 하이퍼링크 처리를 했다.

결과물은 다음과 같이 나왔다.

6. 자바스크립트(JavaScript)

HTML,CSS를 배웠으니 다음엔 '동작'과 관련된 뼈대를 만드는 자바스크립트 차례였다.

만약 다음과 같은 함수가 담긴 (function) 자바스크립트 코드를 웹페이지에 넣는다고 했을때,

function hey(){
	alert('안녕!');
}

HTML 문서에 넣으려면 head 태그 안에 script 태그를 따로 만들어 넣고 입력한 뒤,

<button onclick="hey()" type="button" class="btn btn-primary">기사저장</button>

위의 문장을 body 태그 안에 있는 해당 내용에 수정하면 된다.

그럼 "기사저장" 버튼을 클릭(onclick)했을때 'hey'함수가 실행되면 함수 안에 있는 내용,

alert('안녕!')이 실행된다. (alert는 경고문을 ( )안에 담긴 내용과 함께 팝업으로 실행한다.

이것이 HTML에서 자바스크립트가 기본적으로 동작하는 형태이다.

다음엔 기본적인 변수/기본연산 방법과 리스트/딕셔너리 그리고 기본 사칙연산 함수가 무언인지를 알아보았다.

크롬에서 F12를 눌러 콘솔(console)을 띄우고 시작한다.

1) let -> 어떤 값을 변수에 대입시 첫 앞부분에 꼭 써줘야 하는 변수 선언 단어

ex) let a = 2

2) console.log( ) -> ( )안에 값을 넣으면 콘솔창에 출력되게 하는 단어

ex) console.log(a)

3) +,-,％,X 일반적인 숫자를 통한 사칙연산은 모두 가능,

+를 이용한 합치기는 문자-문자, 숫자-문자까지 다 가능하다.

(다만, 숫자-문자시 숫자를 문자로 변형후 사칙연산 실행)

4) 변수 표기법은 camel case와 snake case 둘 중에 하나를 할 것.

ex) BobStake (camel) 혹은 Bob_stake (snake)

5) 리스트는 순서를 가지고 있는 데이터 모음의 형태이다.(대괄호[] 사용)

ex) let a_list = [1,2,3] <- a_list라는 변수 안에 1,2,3 데이터 값이 모두 들어 있음.

특히, 리스트의 첫번째 값은 무조건 0번이다.

ex) console.log(a_list[0]) -> 1이 출력

+ a_list.length 입력시 리스트안에 데이터가 몇 개 있는지 그 값을 반환

6) 딕셔너리는 키(key)-값(value) 값의 묶음이다.(중괄호{} 사용)

ex) let a_phonebook = {'name': 'ken', 'phone_number' : 010-1234-5678}

a_phonebook['name'] -> ken 출력

a_phonebook['phone_number'] -> 010-1234-5678 출력

+ a_phonebook['location'] = 'texas' 입력하면

a_phonebook = {'name': 'ken', 'phone_number' : 010-1234-5678, 'location' : 'texas'}로 바뀐다.

7) 리스트와 딕셔너리의 조합 (리스트는 여러개의 딕셔너리를 품을 수 있다.)

names = [{'name':'bob','age':20},{'name':'carry','age':38}]

// names[0]['name']의 값은? 'bob'
// names[1]['name']의 값은? 'carry'

//새로운 딕셔너리 형성후 .push 기능을 이용해 names 변수에 데이터 추가

new_name = {'name':'john','age':7}
names.push(new_name)

// names의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
// names[2]['name']의 값은? 'john'

그 외 보면 좋을 기본 함수들

let a = 10
let b = 3

a % b = 1 (나머지 계산)

let myName = bluewiz

myName.toUpperCase() = BLUEWIZ (모든 문자 대문자 처리)

let myemail = 'sparta@gmail.com'

let result = myemail.split('@') // ['sparta','gmail.com']

(괄호 안 문자 기준으로 양 옆 나눠서 데이터 값 저장)

result[0] // sparta
result[1] // gmail.com

let result2 = result[1].split('.') // ['gmail','com']

result2[0] // gmail -> 우리가 알고 싶었던 것!
result2[1] // com

myemail.split('@')[1].split('.')[0] // gmail -> 간단하게 쓸 수도 있다!

let txt = '서울시-마포구-망원동'

let names = txt.split('-'); // ['서울시','마포구','망원동']

let result = names.join('>'); // '서울시>마포구>망원동'

(문자열 넣어서 다같이 합치기!)

8) 함수 만드는 법

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

ex)

// 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function minus(num1, num2) {
console.log('num1: ', num1, ', num2: ', num2);
return num1 - num2;
}

sum(3, 5); // -2
sum(4, -1); // 5

9) 조건문 만드는 법

if(조건1) {
(조건1이 참일때 실행됨)
}
else if(조건2) {
(조건2이 참일때 실행됨)
}
else if(조건3) {
(조건3이 참일때 실행됨)
}
.
.
.
else{
(모든 조건에 거짓일때 실행됨)
}

ex)

function is_adult(age){
if(age > 20){
alert('성인이에요')
} else if (age > 10) {
alert('청소년이에요')
} else {
alert('10살 이하!')
}
}

is_adult(12) -> 청소년이에요 출력

10) AND / OR 조건 만드는법

AND -> 조건 1 && 조건 2

OR -> 조건 1 || (쉬프트 누르고 역슬래쉬 원화키 두번) 조건 2

// AND 조건은 이렇게
function is_adult(age, sex){
if(age > 20 && sex == '여'){
alert('성인 여성')
} else if (age > 20 && sex == '남') {
alert('성인 남성')
} else {
alert('청소년이에요')
}
}

// 참고: OR 조건은 이렇게
function is_adult(age, sex){
if (age > 65 || age < 10) {
alert('탑승하실 수 없습니다')
} else if(age > 20 && sex == '여'){
alert('성인 여성')
} else if (age > 20 && sex == '남') {
alert('성인 남성')
} else {
alert('청소년이에요')
}
}

is_adult(25,'남') -> 성인 남성 출력

11) 반복문 만드는 법

for (1. 시작조건; 2. 반복조건; 3. 더하기) {
4. 매번실행
}

1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3

와 같은 순서로 실행됩니다.
i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.

기본 모형은 아래와 같다.

for (let i = 0; i < n; i++) {
(증가되는 i를 변수로 받아서 i가 n-1이 될때까지 실행될 내용)
}

ex)

let people = ['철수','영희','민수','형준','기남','동희']

// 이렇게 하면 리스트의 모든 원소를 한번에 출력할 수 있겠죠?
// i가 1씩 증가하면서, people의 원소를 차례대로 불러올 수 있게 됩니다.
for (let i = 0 ; i < people.length ; i++) {
console.log(people[i])
}

12) 마지막 총 실습 (서울시 따릉이 현황)

for (let i = 0; i < bikes.length; i++) {
if (bikes[i]['parkingBikeTotCnt'] <= 5) {
let station = bikes[i]['stationName'];
console.log(station);
}
}

bikes 변수는 서울시 따릉이의 총 데이터 모음이고, 그 중 parkingBikeTotCnt는

해당 정류장명(stationName)에 있는 자전거의 개수이다. 자전거 대수가 5개 이하인

정류장 명을 구한다고 했을때 필요한 반복문은 위와 같이 적으면 된다.

함수로 만들고 싶을땐 아래와 같이 적으면 된다.

// 이러면 아래와 같은 것이 가능!
show_names(10) // 10개 이하 주차된 정류소만 출력!
show_names(5) // 5개 이하 주차된 정류소만 출력!

7. 1주차 숙제

-쇼핑몰 메인 페이지 만들기-

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 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 rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Gowun+Batang&display=swap" rel="stylesheet">

    <style>
        .item_image {
            height: 500px;
            width: 500px;
            background-image: url("https://ae01.alicdn.com/kf/HTB1ywReyY9YBuNjy0Fgq6AxcXXaO/4-8-JDH99.jpg_Q90.jpg_.webp");
            background-position: center;
            background-size: cover;
        }

        .price {
            font-size: 17px;
        }

        .item_desc {
            width: 500px;
            margin-top: 15px;
            margin-bottom: 15px;
        }

        .item_order {
            width: 500px;

        }

        .btn_order {
            margin: auto;
            width: 120px;
            display: block;
        }

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

        * {
            font-family: 'Gowun Batang', serif;
        }
    </style>

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

    </script>
</head>

<body>
<div class="wrap">
    <div class="item_image"></div>
    <div class="item_desc">
        <h1>기름 램프를 팝니다 <span class="price">가격: 3000원/개</span></h1>
        <p>이 램프는 사실 소원을 들어주는 램프입니다. 기름을 넣고 불을 키면 어떤 소원이든지 들어드려요. 게다가 좋은 아로마 향도 난답니다.</p>
    </div>
    <div class="item_order">
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroup-sizing-default">주문자이름</span>
            </div>
            <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
        </div>

        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <label class="input-group-text" for="inputGroupSelect01">수량</label>
            </div>
            <select class="custom-select" id="inputGroupSelect01">
                <option selected>-- 수량을 선택하세요 --</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </div>

        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroup-sizing-default">주소</span>
            </div>
            <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
        </div>

        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroup-sizing-default">전화번호</span>
            </div>
            <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
        </div>

        <button type="button" class="btn_order btn-primary" onclick="order()">주문하기</button>
    </div>
</div>
</body>

</html>

Bluewiz_YSH

다음 포스트

스파르타코딩클럽 내일배움단 웹개발 종합반 1주차 개발일지

스파르타코딩클럽 웹개발 종합반 개발일지

1. 웹의 동작원리와 1주차 전반적인 내용

2. HTML과 CSS

1) 구역을 나누는 태그

2) 구역 내 콘텐츠 태그

h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.

h2는 소제목입니다.

h3~h6도 각자의 역할이 있죠. 비중은 작지만..

3. CSS의 기초

4. CSS 폰트, 주석, 파일 분리

5. 부트스트랩 (Bootstrap)

6. 자바스크립트(JavaScript)

7. 1주차 숙제

스파르타코딩클럽 내일배움단 웹개발 종합반 2주차 개발일지

0개의 댓글