728x90

(1) 강의내용

  • 웹의 동작 개념
  • HTML, CSS 기본내용
    • HTML 기초
    • Quiz_간단한 로그인 페이지 만들어보기
    • CSS 기초
  • bootstrap 이란?
  • Quiz_나홀로 메모장 뼈대 잡기
  • Javascript 란?
    • Javascript 기초 문법
  • 1주차 숙제

(2) 숙제 코드 / 완성 이미지

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

<head>
    <!-- font   -->
    <link href="https://fonts.googleapis.com/css2?family=Play&display=swap" rel="stylesheet">

    <!-- 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>

    <style>
        *{
            font-family: 'Play', sans-serif;
        }
        .TextGroup{
            text-align: left;
            margin-bottom: 30px;
        }
        .TextGroup_span{
            font-size: 20px;
        }

        .InputGroup {
            margin-bottom: 20px;
        }
        .col-auto {
            margin-bottom: 15px;
        }


        .wrap {
            width: 600px;
            margin: auto;
            text-align: center;
        }
    </style>

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


</head>

<body>
<form>
    <div class="wrap">
        <img src="data:image/jpeg;base64,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" class="img-fluid" alt="Responsive image">
        <div class="TextGroup">
            <h1>KF-94 마스크 팝니다 <span class="TextGroup_span">가격: 1,500원/개</span></h1>
            <h6>KF94 인증은 평균 0.4μm 크기의 입자를 94% 이상, KF99 인증은 평균 0.4μm 크기의 입자를 99% 이상 걸러낼 수 있는 마스크에 주어진다.</h6>
        </div>
        <div class="InputGroup">
            <div class="col-auto">
                <label class="sr-only" for="inlineFormInputGroup">Username</label>
                <div class="input-group mb-2">
                    <div class="input-group-prepend">
                        <div class="input-group-text">주문자 이름</div>
                    </div>
                    <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="">
                </div>
            </div>
            <div class="col-auto">
                <label class="sr-only" for="inlineFormInputGroup2">Count</label>
                <div class="input-group mb-2">
                    <div class="input-group-prepend">
                        <div class="input-group-text">수량</div>
                    </div>
                    <select class="custom-select" id="inlineFormInputGroup2">
                        <option selected> -- 수량을 선택하세요 --</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                    </select>
                </div>
            </div>
            <div class="col-auto">
                <label class="sr-only" for="inlineFormInputGroup3">UserAddress</label>
                <div class="input-group mb-2">
                    <div class="input-group-prepend">
                        <div class="input-group-text">주소</div>
                    </div>
                    <input type="text" class="form-control" id="inlineFormInputGroup3" placeholder="">
                </div>
            </div>
            <div class="col-auto">
                <label class="sr-only" for="inlineFormInputGroup4">UserPhoneNumber</label>
                <div class="input-group mb-2">
                    <div class="input-group-prepend">
                        <div class="input-group-text">전화번호</div>
                    </div>
                    <input type="text" class="form-control" id="inlineFormInputGroup4" placeholder="">
                </div>
            </div>
        </div>
        <button onclick="btn_OnClick()" type="button" class="btn btn-primary">주문하기</button>
    </div>
</form>
</body>

</html>

(3) 느낀점

웹개발 종합반의 앞 부분은 이전 무료강의로 들었던 크리스마스 특집과 비슷한 내용으로 진행 되었습니다. 

하지만 크리스마스 특집에서는 VS code를 사용한 것과 달리 pycharm을 사용하게 되어 새로운 툴 사용법에 대해 익숙 해 질 수 있었습니다. bootstrap을 이용하여 하나하나 html, css를 작성하지 않고 기본적인 틀을 가져올 수 있었으며 시간을 단축 할 수 있었습니다.

1주차의 내용중에서는 대부분 아는 내용이였지만 2~5주차 내용을 기대하며 마무리 하였습니다.

 

반응형
저작자표시 (새창열림)

'Study > Sparta Coding Club' 카테고리의 다른 글

[스파르타코딩클럽] 웹 개발 종합반 - 5주차 (후기)  (1) 2021.03.11
[스파르타코딩클럽] 웹 개발 종합반 - 4주차 (후기)  (0) 2021.03.01
[스파르타코딩클럽] 웹 개발 종합반 - 3주차 (후기)  (1) 2021.02.26
[스파르타코딩클럽] 웹 개발 종합반 - 2주차 (후기)  (1) 2021.02.22
스파르타코딩클럽 - 크리스마스 특집  (0) 2021.01.06
728x90

(1) LocalStorage, SessionStorage 란?

  • DOM 저장소 ( 문서 개체 모델 저장소) 라고도하는 웹 저장소는 클라이언트 측 데이터를 저장하기위한 메서드와 프로토콜을 웹 앱에 제공 합니다. 
  • 웹 저장소는 쿠키와 유사 하지만 용량이 크게 향상되고 HTTP 요청 헤더에 저장된 정보가없는 영구 데이터 저장소를 지원합니다.
  • 웹 저장소는 Local Storage와 Session Storage는로 나누어져 있습니다.
  • Local Storage는 세션이 종료되어도 데이터가 사라지지 않고 남아있으며 Session Storage는 세션종료(페이지 종료)시 데이터가 사라집니다.

(2) LocalStorage, SessionStorage 사용법

Local Storage와 Session Storage는 동일한 메소드와 프로퍼티를 제공합니다.

//키-값 쌍을 보관
localStorage.setItem(key, value)
sessionStorage.setItem(key, value)

//키에 해당하는 값 반환
let val = localStorage.getItem(key)
let val = sessionStorage.getItem(key)

//키에 해당하는 값 제거
localStorage.removeItem(key)
sessionStorage.removeItem(key)

//모두 삭제
localStorage.clear()
sessionStorage.clear()

//index에 해당하는 키값 반환
let key = localStorage.key(index)
let key = sessionStorage.key(index)

//저장된 항목의 개수 반환
let size = localStorage.length
let size = sessionStorage.length

참조 - en.wikipedia.org/wiki/Web_storage, ko.javascript.info/localstorage#ref-30

반응형
저작자표시 (새창열림)

'Study > JavaScript' 카테고리의 다른 글

[JavaScript] DIV 보이기, 감추기  (0) 2021.02.22
[JavaScript] 논리 연산자  (0) 2021.01.18
[JavaScript] var, let, const 차이점  (0) 2021.01.17
728x90

(1) 중복처리 하는 이유

웹 사이트를 만드는 경우 상단(nav)/하단(footer) 등 여러 페이지에 중복해서 사용되는 부분이 있다. 이러한 경우 html마다 작성하게 되면 보기에도 불편하며 나중에 수정이 생길 경우 하나하나 다 바꿔야 하는 번거로움이 생기며 오타로 인한 오류가 발생할 수 있다. 이러한 문제점을 해결하기 위해 하나의 코드를 작성 후 필요한 html에서 불러오는 방법을 사용할 수 있다.

(2) Code

{% include '????.html' %}

{% include 'nav.html' %}

{% include 'footer.html' %}

//상대 경로로 인한 html호출
{% include_relative somedir/footer.html %}

nav.html, footer.html과 같이 중복적으로 사용할 html을 따로 만들어 놓은 후 사용하길 원하는 곳에 해당 코드를 입력하면 됩니다.

사용 예제

반응형
저작자표시 (새창열림)

'Study > HTML&CSS' 카테고리의 다른 글

[HTML/CSS] CSS, JS, img파일 변경 후 적용시키기  (1) 2021.03.02
[HTML/CSS] html 에서 카카오맵 불러오기 및 가운데 정렬 (!important)  (3) 2021.02.20
[HTML/CSS] 부트스트랩 시작 템플릿  (0) 2021.02.15
728x90

(1) 부트스트랩 이란

부트스트랩(Bootstrap)은 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크이다. 하나의 CSS로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동한다. 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와준다.

 

(2) 부트스트랩 시작 템플릿 코드

 

<!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>
</head>

<body>

</body>

</html>

(3) 부트스트랩 참고 사이트

getbootstrap.com/docs/4.0/components/alerts/

 

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

getbootstrap.com

startbootstrap.com/

 

Free Bootstrap Themes, Templates, Snippets, and Guides

Start Bootstrap develops free to download, open source Bootstrap 4 themes, templates, and snippets and creates guides and tutorials to help you learn more about designing and developing with Bootstrap.

startbootstrap.com

출처 :

ko.wikipedia.org/wiki/%EB%B6%80%ED%8A%B8%EC%8A%A4%ED%8A%B8%EB%9E%A9_(%ED%94%84%EB%9F%B0%ED%8A%B8%EC%97%94%EB%93%9C_%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC),

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

반응형
저작자표시 (새창열림)

'Study > HTML&CSS' 카테고리의 다른 글

[HTML/CSS] CSS, JS, img파일 변경 후 적용시키기  (1) 2021.03.02
[HTML/CSS] html 에서 카카오맵 불러오기 및 가운데 정렬 (!important)  (3) 2021.02.20
[HTML/CSS] 중복되는 html 처리방법(flask)  (3) 2021.02.17
728x90

(1) 논리 연산자

  • 논리 연산자는 보통 부울 값으로 사용하지만, 그렇지 않을 경우 실제로 명시된 피연자들 중 하나를 반환한다.
//예시
true && false; // false
true && "Hello World"; // Hello World

true || false; // true
"Hello World" || true; //"Hello World"

(2) &&(논리곱, AND) 연산자

  •  expr1 && expr2 인 경우 expr1을 true로 변환할 수 있는 경우 expr2을 반환하고, 그렇지 않으면 expr1을 반환합니다.
true && true;     // t && t returns true
true && false;    // t && f returns false
false && true;     // f && t returns false
false && (3 == 4); // f && f returns false
"Cat" && "Dog";    // t && t returns Dog
false && "Cat";    // f && t returns false
"Cat" && false;    // t && f returns false

(3) ||(논리합, OR) 연산자

  • expr1 || expr2 인 경우 expr1을 true로 변환할 수 있으면 expr1을 반환하고, 그렇지 않으면 expr2를 반환합니다.
true || true;      // t || t returns true
false || true;     // f || t returns true
true || false;     // t || f returns true
false || (3 == 4); // f || f returns false
"Cat" || "Dog";    // t || t returns Cat
false || "Cat";    // f || t returns Cat
"Cat" || false;    // t || f returns Cat

(4) !(NOT) 연산자

  • 단일 피연산자를 true로 변환할 수 있으면 false를 반환합니다. 그렇지 않으면 true를 반환합니다.
!true;  // !t returns false
!false; // !f returns true
!"Cat"; // !t returns false

참조 - developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators#%EB%85%BC%EB%A6%AC_%EC%97%B0%EC%82%B0%EC%9E%90

 

반응형
저작자표시 (새창열림)

'Study > JavaScript' 카테고리의 다른 글

[JavaScript] DIV 보이기, 감추기  (0) 2021.02.22
[JavaScript] Local Storage 와 Session Storage  (0) 2021.02.18
[JavaScript] var, let, const 차이점  (0) 2021.01.17
728x90

(1) 블록 레벨 스코프

대부분의 프로그래밍 언어는 블록 레벨 스코프(Block-level scope)를 따르지만 자바스크립트는 함수 레벨 스코프(Function-level scope)를 따른다.

  • 함수 레벨 스코프(Function-level scope) - 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. 즉, 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다.
  • 블록 레벨 스코프(Block-level scope) - 모든 코드 블록(함수, if 문, for 문, while 문, try/catch 문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 즉, 코드 블록 내부에서 선언한 변수는 지역 변수이다.

var선언 시 함수 레벨 스코프를 따르는 모습

위와 같이 var키워드 특성 상 변수 a는 전역변수로 할당 되며 변수 a의 재정의, 재할당 하는것에 있어 문법적으로 문제가 없는 것을 확인할 수 있다. 이러한 경우 의도하지 않은 변수값의 변경이 일어날 가능성이 크다. 이것을 방지하기 위해 블록 레벨 스코프를 따르는 let키워드를 제공한다.

 

let선언 시 블록 레벨 스코프를 따르는 모습

(2) 변수 중복 선언

var 키워드로는 동일한 이름을 갖는 변수를 중복해서 정의할 수 있다. 하지만 let 키워드는 동일한 이름을 갖는 변수를 중복해서 선언 할 수 없다.

var선언 시 정상작동 / let 선언 시 30line Error

(3) 재할당

const키워드는 let키워드와 비슷하지만 const는 반드시 선언과 동시에 할당이 이루어져야 한다. 또한 이미 할당한 값을 변경할 수 없으며 변경경우 문법적으로 에러가 발생한다.

const선언으로 재할당 할 시 Error

(4) Const와 객체

const는 재할당이 금지되지만, const타입의 객체인 경우 객체의 프로퍼티는 변경이 가능하다.

name을 let -> Kim 으로 변경 가능

참조 - poiemaweb.com/es6-block-scope

반응형
저작자표시 (새창열림)

'Study > JavaScript' 카테고리의 다른 글

[JavaScript] DIV 보이기, 감추기  (0) 2021.02.22
[JavaScript] Local Storage 와 Session Storage  (0) 2021.02.18
[JavaScript] 논리 연산자  (0) 2021.01.18
728x90

(1) 문제

길이가 n이고, 수박수박수박수....와 같은 패턴을 유지하는 문자열을 리턴하는 함수, solution을 완성하세요. 예를들어 n이 4이면 수박수박을 리턴하고 3이라면 수박수를 리턴하면 됩니다.

(2) 제한사항

  • n은 길이 10,000이하인 자연수입니다.

(3) 코드

function solution(n) {
    var answer = '';
    
    for(var i = 0; i < n; i++)
        {
            if(i % 2 == 0)
                {
                    answer += '수';
                }
            else
                {
                    answer += '박';
                }
            
        }
    
    return answer;
}

(4) 실행결과

반응형
저작자표시 (새창열림)

'Programmers > JavaScript' 카테고리의 다른 글

[프로그래머스] 코딩테스트 연습 > 연습문제 > 가운데 굴자 가져오기 (JavaScript)  (0) 2021.01.15
[프로그래머스] 코딩테스트 연습 > 연습문제 > 서울에서 김서방 찾기 (JavaScript)  (1) 2021.01.15
728x90

(1) 문제

단어 s의 가운데 글자를 반환하는 함수, solution을 만들어 보세요. 단어의 길이가 짝수라면 가운데 두글자를 반환하면 됩니다.

(2) 제한사항

  • s는 길이가 1 이상, 100이하인 스트링입니다.

(3) 코드

function solution(s) {
    var answer = '';
    
    answer = s[parseInt(s.length / 2)];
    
    if(s.length % 2 == 0)
        {
           answer = s[s.length / 2 - 1] + s[s.length / 2];
        }
    
    return answer;
}

(4) 실행결과

반응형
저작자표시 (새창열림)

'Programmers > JavaScript' 카테고리의 다른 글

[프로그래머스] 코딩테스트 연습 > 연습문제 > 수박수박수박수박수박수?(JavaScript)  (1) 2021.01.15
[프로그래머스] 코딩테스트 연습 > 연습문제 > 서울에서 김서방 찾기 (JavaScript)  (1) 2021.01.15
728x90

(1) 문제

String형 배열 seoul의 element중 Kim의 위치 x를 찾아, 김서방은 x에 있다는 String을 반환하는 함수, solution을 완성하세요. seoul에 Kim은 오직 한 번만 나타나며 잘못된 값이 입력되는 경우는 없습니다.

(2) 제한사항

  • seoul은 길이 1 이상, 1000 이하인 배열입니다.
  • seoul의 원소는 길이 1 이상, 20 이하인 문자열입니다.
  • Kim은 반드시 seoul 안에 포함되어 있습니다.

(3) 코드

function solution(seoul) {
    var answer = '';
    
    for(var i =0; i < seoul.length; i ++)
        {
            if(seoul[i] == "Kim")
                {
                    answer = "김서방은 " + i + "에 있다";
                }           
        }  
    
    return answer;
}

(4) 실행결과

 

반응형
저작자표시 (새창열림)

'Programmers > JavaScript' 카테고리의 다른 글

[프로그래머스] 코딩테스트 연습 > 연습문제 > 수박수박수박수박수박수?(JavaScript)  (1) 2021.01.15
[프로그래머스] 코딩테스트 연습 > 연습문제 > 가운데 굴자 가져오기 (JavaScript)  (0) 2021.01.15
728x90

(1) 탐욕법(그리디) 알고리즘 이란?

매 선택에서 지금 이 순간 최적의 답을 선택하는 알고리즘이다.

단, 매 선택이 각 단계에서는 최적이지만 종합적으로 보았을 경우 최적이라는 보장이 없다.

예를 들어 매 순간 최적을 따라가게되면 1-1-1-100으로 갈경우 매 순간 최적이 아니더라도 1-1-10-10이 종합적으로 보았을 경우 더 최적일 수 있는 경우가 생긴다.

 

탐욕법(그리디) 알고리즘은 한번의 선택이 다음 선택에는 전혀 무관한 값이여야 하며 매 순간의 최적해가 문제에 대한 최적해인 경우 문제를 해결하는데 강점이있다.

반응형
저작자표시 (새창열림)

'Study > Algorithm' 카테고리의 다른 글

[Algorithm] 이분탐색  (0) 2024.12.20
[Algorithm] 슬라이딩 윈도우  (1) 2024.12.20

+ Recent posts

티스토리툴바