728x90

(1) 강의내용

1일차 HTML, CSS 기초 - 로그인 폼 만들기

  • 웹페이지 동작 원리의 기초를 배우고, HTML, CSS의 역할을 이해합니다.
  • HTML, CSS의 기본문법을 익히고, 프론트엔드를 실제로 코딩해봅니다.
  • 그럴싸한 로그인 페이지를 만들면서, HTML, CSS의 사용법을 익혀봅니다.
  • 숙제 - 버튼모양 예쁘게 바꿔보기

2일차  크리스마스 카드 만들기, Javascript 맛보기

  • HTML과 CSS를 응용해서, 크리스마스 카드를 직접 디자인합니다.
  • 기초적인 Javascript를 사용해서, 버튼을 누르면 카드가 펼쳐지게 만듭니다.
  • 모바일도 잊으면 안되겠죠! 반응형 웹의 기초를 배워봅니다.
  • 직접 만든 카드를 업로드하고, 친구에게 공유 가능한 URL을 받아 자랑합니다!
  • 숙제 - 내 URL을 제출하기

(2) 코드 / 빌드 링크

  • 1일차
<!DOCTYPE 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>

 

  • 2일차
    • Login.html 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>로그인페이지</title>

    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&display=swap" rel="stylesheet">

    <style>
        * {
            font-family: 'Nanum Gothic Coding', monospace;
        }

        .mytitle {
            color: white;
            width: 300px;
            height: 200px;

            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;
            text-align: center;
            padding-top: 40px;
        }

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

        .mybtn {
            width: 300px;
            height: 50px;
            border-radius: 10px;
            background-color: brown;
            color: white;
        }
    </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>

 

  • x-mas.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2020년을 보내며</title>

    <link rel="shortcut icon" href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSfJW0hgZrN4wdXMVy4a4gBvg3-B8-tDPv15A&usqp=CAU">

    <meta property="og:image" content="https://www.buckinghamtahoerentals.com/wp-content/uploads/2018/12/christmas-800x400.jpg">
    <meta property="og:title" content="남석이의 카드">
    <meta property="og:description" content="2020을 추억하며">

    <script src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/xmas/snow.js"></script>

    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poor+Story&display=swap" rel="stylesheet">

    <style>
        * {
            font-family: 'Poor Story', cursive;
        }

        body {
            background-color: #9b070f;
        }

        .envelope {
            width: 200px;
            height: 200px;

            background-image: url('https://pngimg.com/uploads/envelope/envelope_PNG18366.png');
            background-size: cover;
            background-position: center;

            margin: 200px auto 0 auto;

            cursor: pointer;
        }

        .envelope-msg {
            color: white;
            text-align: center;
        }

        .letter-close {
            display: block;
        }

        .letter-open {
            display: none;
        }

        .rtan {
            width: 200px;
            height: 200px;

            background-image: url('https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/xmas/rtan.gif');
            background-size: cover;
            background-position: center;
            background-color: white;

            margin: 100px auto 0 auto;

            border-radius: 100px;
            border: 5px solid white;
            box-shadow: 0px 0px 10px 0px white;
        }

        h1 {
            color: white;
            text-align: center;
            margin-top: 30px;
            margin-bottom: 30px;
        }

        .messagebox {
            width: 400px;

            font-size: 20px;
            line-height: 30px;
            padding: 30px;
            color: brown;
            margin: auto;

            background-color: ivory;
            box-shadow: 0px 0px 10px 0px white;
        }

        .from {
            text-align: right;
            margin-bottom: 0px;
        }

        @media screen and (max-width: 760px) {
            .messagebox {
                width: 300px;
                padding: 20px;
            }

            .rtan {
                width: 150px;
                height: 150px;
                margin: 70px auto 0 auto;
            }

            h1 {
                font-size: 28px;
            }

            .envelope {
                margin: 150px auto 0px auto;
            }
        }
    </style>

    <script>
        function open_letter() {
            document.getElementsByClassName("letter-close")[0].style.display = 'none';
            document.getElementsByClassName("letter-open")[0].style.display = 'block';
        }

        function go_rtan() {
            alert('앗,어떻게 찾았지!');
            window.location.href='https://dev-code-notepad.tistory.com/';
        }
    </script>
</head>

<body>
    <div class="letter-close">
        <div class="envelope" onclick="open_letter()"></div>
        <h2 class="envelope-msg">봉투를 열어봐!</h2>
    </div>

    <div class="letter-open">
        <div class="rtan" onclick="go_rtan()"></div>
        <h1>2020년 수고 많았어!</h1>
        <div class="messagebox">
            친구들에게. <br />
            올해 이런저런 일이 많았는데 <br />
            너희 덕분에 하나도 힘들지 않았어 <br />
            내년에도 우리 우정 변치말자 <br />
            연말에 다 같이 못 봐서 아쉽다 <br />
            <p class="from">2020.12.22 남석이가</p>
        </div>
    </div>
</body>
</html>

 

 

(3) 느낀점

1일차 

html에 관하여 간단한 설명과 태그 검색 방법, 태그의 종류 등 알기쉽게 잘 설명해주셔서 어려움 없이 진행 할 수 있었습니다.

 

2일차

대학교에서 접해본html과 달리 css는 접해본 경험이 없어 어떤것일까 많이 궁금하기도 했고, 기대하며 수업을 들었습니다. 생각했던거와 달리 css는 html을 좀 더 이쁘게 꾸며주기 위한 클래스 개념처럼 이해했으며, 수업 중 반복적으로 학습할 수 있게 진행하셨으며, 과제를 통해 또 한번 되새김질 할 수 있도록 하는 수업이었습니다. 간단한 function을 이용해 자바스크립트를 간접적으로 체험 할 수 있었으며, 개인 pc에서만 실행 되는 오프라인 홈페이지가 아닌 과제 제출 시 링크를 주어 다른 가족, 친구, 지인들에게 공유할 수 있어 만족스러웠습니다.

(4) 수료증

 

반응형
저작자표시

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

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

(1) 문제

이중 우선순위 큐는 다음 연산을 할 수 있는 자료구조를 말합니다.

명령어수신 탑(높이)

I 숫자 큐에 주어진 숫자를 삽입합니다.
D 1 큐에서 최댓값을 삭제합니다.
D -1 큐에서 최솟값을 삭제합니다.

이중 우선순위 큐가 할 연산 operations가 매개변수로 주어질 때, 모든 연산을 처리한 후 큐가 비어있으면 [0,0] 비어있지 않으면 [최댓값, 최솟값]을 return 하도록 solution 함수를 구현해주세요.

(2) 제한사항

  • operations는 길이가 1 이상 1,000,000 이하인 문자열 배열입니다.
  • operations의 원소는 큐가 수행할 연산을 나타냅니다.
    • 원소는 “명령어 데이터” 형식으로 주어집니다.- 최댓값/최솟값을 삭제하는 연산에서 최댓값/최솟값이 둘 이상인 경우, 하나만 삭제합니다.
  • 빈 큐에 데이터를 삭제하라는 연산이 주어질 경우, 해당 연산은 무시합니다.

(3) 코드

#include <string>
#include <vector>
#include <algorithm>

using namespace std;

vector<int> solution(vector<string> operations) {
    vector<int> answer;
    vector<int> answer_temp;

    string temp = "";

    for (int i = 0; i < operations.size(); i++)
    {    
        temp = operations[i].substr(0,1);
        
        if (temp == "I")
        {
            temp = operations[i].substr(2);
            
            answer_temp.push_back(stoi(temp));
        }
        else if (temp == "D" && !answer_temp.empty())
        {
            temp = operations[i].substr(2, 1);
            sort(answer_temp.begin(), answer_temp.end());
            if (temp == "-")
            {
                answer_temp.erase(answer_temp.begin());
            }
            else
            {
                answer_temp.erase(answer_temp.begin() + answer_temp.size() - 1);
            }
        }   
    }

    sort(answer_temp.begin(), answer_temp.end());

    if (answer_temp.empty())
    {
        answer.push_back(0);
        answer.push_back(0);
    }
    else
    {
        answer.push_back(answer_temp[answer_temp.size() - 1]);
        answer.push_back(answer_temp[0]);
    }

    return answer;
}

(4) 실행결과

 

반응형
저작자표시

'Programmers > C++' 카테고리의 다른 글

[프로그래머스] 코딩테스트 연습 > 힙 > 더 맵게 (C++)  (0) 2020.12.20
[프로그래머스] 코딩테스트 연습 > 스택/큐 > 프린터(C++)  (0) 2020.12.14
[프로그래머스] 코딩테스트 연습 > 스택/큐 > 다리를 지나는 트럭(C++)  (0) 2020.12.14
[프로그래머스] 코딩테스트 연습 > 해시 > 베스트앨범(C++)  (0) 2020.12.14
[프로그래머스] 코딩테스트 연습 > 해시 > 위장(C++)  (0) 2020.12.14
728x90

(1) 문제

매운 것을 좋아하는 Leo는 모든 음식의 스코빌 지수를 K 이상으로 만들고 싶습니다. 모든 음식의 스코빌 지수를 K 이상으로 만들기 위해 Leo는 스코빌 지수가 가장 낮은 두 개의 음식을 아래와 같이 특별한 방법으로 섞어 새로운 음식을 만듭니다.

섞은 음식의 스코빌 지수 = 가장 맵지 않은 음식의 스코빌 지수 + (두 번째로 맵지 않은 음식의 스코빌 지수 * 2)

Leo는 모든 음식의 스코빌 지수가 K 이상이 될 때까지 반복하여 섞습니다.
Leo가 가진 음식의 스코빌 지수를 담은 배열 scoville과 원하는 스코빌 지수 K가 주어질 때, 모든 음식의 스코빌 지수를 K 이상으로 만들기 위해 섞어야 하는 최소 횟수를 return 하도록 solution 함수를 작성해주세요.

(2) 제한사항

  • scoville의 길이는 2 이상 1,000,000 이하입니다.
  • K는 0 이상 1,000,000,000 이하입니다.
  • scoville의 원소는 각각 0 이상 1,000,000 이하입니다.
  • 모든 음식의 스코빌 지수를 K 이상으로 만들 수 없는 경우에는 -1을 return 합니다.

(3) 코드

#include <string>
#include <vector>
#include <algorithm>
#include <queue>

using namespace std;

int solution(vector<int> scoville, int K) {
    int answer = 0;
    int temp = 0;

    priority_queue<int,vector<int>, greater<int>> pq;

    for (int i = 0; i < scoville.size(); i++)
    {
        pq.push(scoville[i]);
    }

    while (true)
    {
        if (pq.top() >= K)
        {
            break;
        }

        temp = pq.top();
        pq.pop();

        temp += pq.top() * 2;
        pq.pop();
        pq.push(temp);

        answer++;

        if (pq.size() == 1 && pq.top() < K)
        {
            return -1;
        }
    }
    return answer;
}

(4) 실행결과

 

반응형
저작자표시

'Programmers > C++' 카테고리의 다른 글

[프로그래머스] 코딩테스트 연습 > 힙 > 이중우선순위큐 (C++)  (0) 2020.12.20
[프로그래머스] 코딩테스트 연습 > 스택/큐 > 프린터(C++)  (0) 2020.12.14
[프로그래머스] 코딩테스트 연습 > 스택/큐 > 다리를 지나는 트럭(C++)  (0) 2020.12.14
[프로그래머스] 코딩테스트 연습 > 해시 > 베스트앨범(C++)  (0) 2020.12.14
[프로그래머스] 코딩테스트 연습 > 해시 > 위장(C++)  (0) 2020.12.14

+ Recent posts

티스토리툴바