배열은 길이가 정해져있고 원소값을 자유롭게 더하고 빼기 어렵다는 단점이 있기 때문에 특정 원소값을 빼거나 추가하는 문제에서는 리스트로 변환이 필요하다.

for문을 이용한 간단한 방법

import java.util.*;

int[] arr = {1, 2, 3, 4, 5};
ArrayList<Integer> list = new ArrayList<>(); 

for (int i : arr) {
    list.add(i);
}

리스트를 만들고 for문으로 기존 배열을 순회하며 모든 원소를 list에 추가해주는 방법이 있다. (조금 없어보이지만 밑에 단점들을 보면 이 방법이 제일 좋다..)

Arrays를 이용한 방법

여기서는 두가지 케이스에 따라 방법이 나뉜다.

• 기존 배열의 타입이 기본형(primitive)일 경우
• 기존 배열의 타입이 래퍼 클래스(wrapper class)일 경우

Wrapper Class 배열 <-> List

배열 -> 리스트

Wrapper 클래스인 배열은 asList() 메소드로 간단하게 변환 가능하다.

import java.util.*;

String[] strArr = {"a", "b", "cd"};
List<String> newArr = Arrays.asList(strArr);

리스트 -> 배열

List<String> list = new ArrayList<>();
list.add("1");
list.add("2");
list.add("3");
// 방법1
String[] arr=list.toArray(String[]::new);
// 방법2
String[] arr2=list.toArray(new String[list.size()]);

리스트의 배열화는 toArray() 메소드를 사용하는데 안에 new 생성자 함수로 빈 배열을 넣어준다. 두가지 방법이 있는데 첫번째 방법처럼 사용하면 list의 크기를 알아서 추론해준다.

기본형 배열 <-> List

배열 -> 리스트

이번 내용에서 가장 중요한 부분이다. List는 래퍼클래스 타입만 담을 수 있기 때문에 기본형 배열을 List로 변환할 경우 모든 내용물을 변환해줘야 한다.

import java.util.*;
import java.util.stream.*; // Collectors

int[] arr = {1, 2, 3, 4, 5};
List<Integer> list = Arrays
            .stream(arr) // ->IntStream
            .boxed() // ->Stream<Integer>
            .collect(Collectors.toList()); // 담기

stream의 boxed()는 IntStream과 같은 원시타입 스트림을 Stream<Integer>와 같이 래퍼클래스 스트림으로 변환해준다. (Collectors에 담기 위함)

리스트 -> 배열

// 리스트
List<Integer> list = IntStream.range(1, 6)
                .boxed()
                .collect(Collectors.toList());
// Integer 배열로 변환
Integer[] arr = list.toArray(Integer[]::new);
// int형 배열로 변환
int[] arr2 = list.stream()
            .mapToInt(i->i).toArray();

Integer 배열을 int 배열로 변환할때는 mapToInt() 메소드로 하나씩 꺼내서 그대로 반환해주면 int형으로 변환해준다.

주의사항

List<Integer> list1 = Arrays.asList(arr);
List<Integer> list2 = List.of(arr); //java9에 추가됨

asList() 또는 List.of()로 변환된 리스트는 크기가 고정되에 추가 삭제가 안된다!...

따라서 동적으로 관리하려면 아래와 같이 생성자로 새로운 리스트를 만들어서 담아주어야한다.

List<Integer> notFixedList 
= new ArrayList<Integer>(Arrays.asList(arr));;

HTML을 학습하면서 video 태그로 동영상을 삽입해본적이 있는데요, 그렇다면 이런 유튜브 영상은 어떻게 삽입하는 걸까요?

방법은 의외로 간단합니다.

먼저 유튜브에서 원하는 영상을 선택합니다.

선택한 영상에서 공유를 클릭합니다.

여기서 퍼가기를 클릭하면 아래와 같은 정보가 나옵니다.

안에 있는 <iframe> 태그를 모두 복사해줍니다.

<div class="video-container">
            <iframe
              width="560"
              height="315"
              src="https://www.youtube.com/embed/rA2DrGkxMSY?si=9qtfZrhKzUp9lZ-e"
              title="YouTube video player"
              frameborder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              referrerpolicy="strict-origin-when-cross-origin"
              allowfullscreen
            ></iframe>
          </div>

복사후 이렇게 div 태그나 다른 태그를 통해 삽입해줄 수 있습니다.

사실 다른 태그를 추가로 사용하지 않아도 영상이 그냥 삽입되는데요, 벨로그는 마크다운 양식이기 때문에 유튜브에서 복사한 <iframe> 태그를 그냥 복사만해줘도 !youtube[rA2DrGkxMSY?si=GXpudsqzSa8EbWY9]

이렇게 영상이 첨부됩니다.

코랩에서 잘 사용하던 백테스트 시트가 갑자기 값이 이상하게 나왔다. 뭔가 이상해서 불러오는 주가 데이터를 확인해보니 시가,고가,종가 모두 비슷하지만 맞는 데이터가 없었다.

yahoo finance 공식 홈페이지의 주가와 비교해본 결과 2024년도 데이터 중 맞는게 거의 하나도 없었다.

혹시나 yahoo finance 공홈이 잘못됐다 싶어서 다른 증권사 데이터도 찾아봤지만 역시 yfinance 라이브러리에 문제가 있었다.. (이건 좀 심한데)

그래서 좀 더 신뢰성 있는 라이브러리로 바꾸려고 했지만 코드를 너무 많이 수정해야 했기에 다른 방법을 찾아보았다.

해결책

해결책은 의외로 간단했다. 문제가 되는 버전을 삭제하고 내가 코드를 작성할때 썼던 버전을 다운로드하면 된다.

!pip uninstall yfinance -y # 기존 버전 삭제
!pip install yfinance==0.2.48 # 0.2.48 버전 설치
import yfinance as yf 
print(yf.__version__) # 버전확인

물론 VS Code 같은 로컬환경에서 라이브러리를 설치해서 쓴다면 문제가 없겠지만, 나처럼 코랩(Colab) 환경에서 사용한다면 매번 새 버전이 자동으로 업데이트 되기 때문에 곤란한 상황을 겪을 수 있다.

깨달은점

보통 라이브러리도 제공해주고 깃허브랑 연동이 되기 때문에 코랩 환경을 많이 사용한다.

지금 사용하는 백테스트 시트는 yfinance 버전 업데이트 때문에 사용한지 1년도 안되서 4번 정도 오류가 발생해서 코드를 수정하였다.

앞으로 코랩에서 작업할때는 라이브러리의 버전을 주의해야겠다. 특히나 버전이 자주 업데이트 되는 라이브러리는 필수적으로 버전을 주석으로 기입해놓고 문제가 발생하면 오늘처럼 수정해야겠다.

checkbox와 radio 버튼

• checkbox: 여러개의 체크박스 중 2개 이상 선택할 수 있습니다.

<ul>
          <li>
            <label for="red">빨강</label>
            <input type="checkbox" id="red" value="red" />
          </li>
          <li>
            <label for="blue">파랑</label>
            <input type="checkbox" id="blue" value="blue" />
          </li>
          <li>
            <label for="green">초록</label>
            <input type="checkbox" id="green" value="green" />
          </li>
          <li>
            <label for="yellow">노랑</label>
            <input type="checkbox" id="yellow" value="yellow" />
          </li>
        </ul>

input태그의 type에 checkbox를 지정해주면 됩니다. 체크박스 선택시 value로 지정한 값이 서버로 전송됩니다.

• radio: 여러개의 라디오 항목 중 1개를 선택할 수 있습니다.

<ul>
          <li>
            <label for="free">무료</label>
            <input type="radio" id="free" value="free" name="delivery" />
          </li>
          <li>
            <label for="pay">유료</label>
            <input type="radio" id="pay" value="pay" name="delivery" />
          </li>
        </ul>

여러개 중 하나를 선택하도록 하려면 그 항목의 name속성에 같은 값을 기입해줍니다. 라디오박스 역시 value속성에 기입된 값이 서버로 전송됩니다.

textarea 태그

• <textarea>: 여러줄의 데이터를 입력받을 수 있습니다.

<textarea name="" id="" cols="40" rows="10">
</textarea>

cols와 rows 속성으로 텍스트 영역의 크기를 조절할 수 있습니다.

Select & Option 태그

<select> 태그는 옵션 메뉴를 제공합니다. <option> 태그로 각 항목을 나타내며 <select> 태그는 <option> 태그를 감싸줍니다.

<select name="goods" id="goods">
              <option value="apple_10kg">사과(10kg)</option>
              <option value="apple_20kg">사과(20kg)</option>
              <option value="apple_30kg">사과(30kg)</option>
              <option value="apple_40kg">사과(40kg)</option>
              <option value="apple_50kg">사과(50kg)</option>
            </select>

datalist

• <datalist>: 추천하는 선택지를 담는 <option> 여럿을 담습니다. 보통 input 태그와 함께 사용하며 input 태그의 list 속성과 option 태그의 id 속성을 일치시켜줘야합니다.

<li>
            <label for="flavor-choice">맛을 선택하세요.</label>
            <input list="flavors" id="flavor-choice" name="flavor-choice" />
            <datalist id="flavors">
              <option value="chocolate"></option>
              <option value="strawberry"></option>
              <option value="blueberry"></option>
              <option value="mint"></option>
            </datalist>
          </li>

Button

-<button>: 요소는 클릭 가능한 버튼을 나타냅니다. <form> 내부를 포함하여 버튼이 필요한 어디에나 배치할 수 있습니다.

<button type="submit">제출하기</button>
<button type="reset">리셋하기</button>
<button type="button" onclick="alert('Hello World!')">버튼</button>

type 속성은 버튼의 행동 양식을 결정합니다.

-<submit>: 버튼이 서버로 양식 데이터를 제출합니다. form 태그의 action 속성에 기입된 uri로 해당 양식을 제출합니다. (기본값) -<reset>: 모든 입력 필드를 초기값으로 되돌립니다. -<button>: 기본 행동이 없으며 주로 클릭 후 자바스크립트 측 코드를 명령할 때 사용합니다.

HTML에서의 폼(Form)은 사용자의 정보를 입력받기 위해 사용됩니다.

예를 들어 회원가입 페이지에서 이름,아이디,비밀번호,주소 등등 데이터를 입력받도록 형식이 지정되어 있는데요,

이때 입력받는 데이터들의 묶음을 폼(Form), 그리고 데이터를 폼 데이터(Form Data) 또는 필드(Field)라고 합니다.

action, method 속성

보통 폼 태그는 사용자로부터 입력받은 데이터를 서버와 통신할때 사용합니다. 따라서 action 속성과 method 속성이 자주 사용됩니다.

• action: 양식 데이터를 처리할 서버 프로그램 URI
• method: 양식을 제출할때 사용할 HTTP 메서드

label 태그, Input 태그

<input> 태그

폼 태그에서 데이터를 입력받을 수 있습니다. type 속성을 통해 다양한 방법으로 데이터를 입력받을 수 있습니다.

type 속성에는 다양한 타입을 지정할 수 있으며, HTML5에서는 text 필드가 데이터 용도에 맞게 사용할 수 있도록 다양한 타입이 추가되었습니다.

• email: email 데이터를 받기 위해 사용됩니다.(이메일 유효성 검증)
• tel: 전화번호 데이터를 받기 위해 사용됩니다.(모바일 접근시 키패드가 다름)

이외에도 다양한 type 속성이 있습니다.

<label> 태그

label 태그는 입력받는 필드를 설명할때 사용됩니다.

사용방법은 label 태그 하위에 input 태그를 위치시키거나, id와 for 속성을 사용하여 input 태그와 연결할 수 있습니다.

<!-- label 태그 하위 -->
<label>
이름:
<input type="text" id="name">
</label>


<!-- for와 id 속성으로 연결 -->
<label for="name">
이름:
</label>
<input type="text" id="name">

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Form Input</title>
  </head>
  <body>
    <form action="">
      <fieldset>
        <legend>Input tag</legend>
        <ul>
          <li>
            <label for="text">Text</label>
            <input type="text" id="text" required />
          </li>
          <li>
            <label for="email">email</label>
            <input type="email" id="email" />
          </li>
        </ul>
      </fieldset>
      <input type="submit" value="제출하기" />
    </form>
  </body>
</html>

폼 태그를 통해 텍스트와 이메일을 받을 수 있는 폼을 만들어 보았습니다.

required 속성

input 태그의 required 속성은 해당 데이터를 필수값으로 받도록 만들어줍니다.

현재 Text 부분이 require 속성으로 지정되어있기 때문에 해당 필드를 채우지않고 제출할 시 "이 입력란을 작성하세요." 와 같은 문구와 함께 폼이 제출되지 않습니다.

email 타입

마찬가지로 email 타입은 서버로 데이터를 전송하기 전에 해당 데이터가 이메일 형식에 맞는지 유효성 체크를 해줍니다.

기타 타입

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Form Input</title>
  </head>
  <body>
    <form action="">
      <fieldset>
        <legend>Input tag</legend>
        <ul>
          <li>
            <label for="text">Text</label>
            <input type="text" id="text" required />
          </li>
          <li>
            <label for="email">email</label>
            <input type="email" id="email" />
          </li>
          <li>
            <label for="tel">전화번호</label>
            <input type="tel" id="tel" />
          </li>
          <li>
            <label for="url">url</label>
            <input type="url" id="url" />
          </li>
          <li>
            <label for="number">number</label>
            <input type="number" id="number" min="5" max="10" />
          </li>
          <li>
            <label for="range">range</label>
            <input type="range" id="range" />
          </li>
        </ul>
      </fieldset>
      <fieldset>
        <legend>날짜관련</legend>
        <ul>
          <li>
            <label for="date">date</label>
            <input type="date" id="date" min="2025-01-01" max="2025-02-01" />
          </li>
          <li>
            <label for="month">month</label>
            <input type="month" id="month" />
          </li>
          <li>
            <label for="week">week</label>
            <input type="week" id="week" />
          </li>
          <li>
            <label for="time">time</label>
            <input type="time" id="time" />
          </li>
        </ul>
      </fieldset>
      <fieldset>
        <legend>그 외</legend>
        <ul>
          <li><input type="file" multiple /></li>
          <li><input type="hidden" /></li>
        </ul>
      </fieldset>
      <input type="submit" value="제출하기" />
    </form>
  </body>
</html>

Text나 email 타입 외에도 다양한 타입이 존재합니다. 각 타입은 해당 타입에 맞게 데이터를 받을 수 있도록 유효성을 체크해주기 때문에 input 태그 생성시에 type 속성을 잘 고려해서 만들어줘야 합니다.

참고: input 속성값

-required: 입력값이 필수임을 명시. -readonly: 필드를 읽기전용으로 만들 수 있음. -disabled: 해당 필드를 비활성화 시켜 서버로 데이터를 전송하지 않음. -autofocus: 초기에 해당 필드에 커서를 위치 시킬 수 있음. -placeholder: 입력 필드가 비어있을때 나타나는 설명문구 삽입.

<a> 태그는 다른 페이지나 같은 페이지의 특정위치,파일,이메일 주소와 그 외 다른 url로 연결할 수 있는 하이퍼링크를 생성합니다.

<a href="https://www.naver.com">네이버</a> 와
<a href="https://www.google.com">구글</a>
은 포털사이트이다.

네이버와 구글을 <a> 태그로 감싼 후 href 속성에 각각의 주소를 넣어 하이퍼링크를 생성하였습니다.

이제 네이버와 구글 문구를 클릭하면 각각에 연결된 사이트로 이동됩니다.

target 속성

<a href="https://www.naver.com" target="_blank">
네이버</a>

자주 사용하는 속성으로 target 속성이 있습니다. 이 속성값을 _blank로 지정해주면 해당 *하이퍼링크로 이동할때 새 창을 띄워줍니다. *

페이지 내 이동

페이지 내 이동은 href 속성에 #아이디로 이동할 수 있습니다.

<a href="#아이디">하이퍼링크</a>

div 태그를 통해 30개의 블록을 생성한 후 17번째 블록으로 이동해보겠습니다.

<div id="block17">17</div>

먼저 17번째 블록에 id 속성에 사용할 아이디를 명시합니다.

<a href="#block17">17번째 블록으로 이동하기</a>

이제 하이퍼링크를 생성하고 href 속성에 #아이디를 명시합니다.

이제 하이퍼링크를 클릭하면 해당 아이디로 이동하게 됩니다.

<img> 태그

<img> 태그는 HTML 문서에 이미지를 넣습니다.

ex)

<img src="images/apple.jpg" alt="사과">

• src: 이미지 태그에서 src는 필수값이며 사용할 이미지의 경로를 통해 이미지를 불러옵니다.
• alt: 필수 요소는 아니지만 사용자에게 이미지를 설명하는 역할을 합니다. 문제가 발생하여 이미지를 표시할 수 없을때 해당 이미지가 어떤 이미지인지 설명할 수 있습니다.
• height: 픽셀단위 이미지의 고유 크기.(정수)
• width: 이미지의 픽셀 기준 고유 너비.(정수)

이미지 태그로 간단한 실습을 해보겠습니다. 먼저 태그에 사용할 이미지를 다운받기 위해 pixabay 라는 사이트를 이용해보겠습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>이미지 태그</title>
  </head>
  <body>
    <h2>이미지 태그</h2>
    <img src="../mountains.jpg" alt="산" />
  </body>
</html>

이제 다운받은 이미지를 폴더에 넣어주고 생성한 이미지 태그에 경로와 alt를 입력해줍니다.

다운받은 이미지를 잘 불러오는것을 확인할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>이미지 태그</title>
  </head>
  <body>
    <h2>이미지 태그</h2>
    <img src="" alt="산" />
  </body>
</html>

src의 경로를 한번 지워봤습니다. 이미지 아이콘 옆에 alt에 명시한 설명이 출력됩니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>이미지 태그</title>
  </head>
  <body>
    <h2>이미지 태그</h2>
    <img width="150" src="../mountains.jpg" alt="산" />
    <img height="200" src="../mountains.jpg" alt="산" />
    <img width="100" height="100" src="../mountains.jpg" alt="산" />
  </body>
</html>

width와 height를 통해 이미지의 크기를 조정할 수 있습니다. 픽셀(px) 단위로 명시하지 않고 정수값으로 크기를 명시해줍니다.

오디오/비디오 태그

<audio> 태그와 <video> 태그를 통해서 음성파일과 영상을 첨부할 수 있습니다. 태그 사용방식은 이미지 태그와 유사합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>오디오/비디오</title>
  </head>
  <body>
    <h2>오디오 태그</h2>
    <audio src="sound.mp3" controls></audio>
    <h2>비디오 태그</h2>
    <video width="300" src="video.mov" type="video/mov" controls></video>
  </body>
</html>

오디오/비디오 태그 속성

• controls: 플레이어 화면에 컨트롤바(재생막대)를 표시합니다.
• autoplay: 오디오나 비디오를 자동으로 실행합니다.
• loop: 오디오나 비디오를 반복 재생합니다.
• muted: 오디오나 비디오의 소리를 제거합니다.
• preload: 페이지를 불러올 때 오디오/비디오를 어떻게 로딩할지 지정합니다. 기본적으로 preload="auto" 가 적용됩니다.(auto,metadata,none 지정 가능)
• width height: 너비와 높이를 조절합니다. 너비와 높이 중 하나만 입력해주면 알아서 비율을 맞춰줍니다.
• poster="파일이름": 비디오 태그에서 사용하는 속성으로, 비디오가 재생되기 전까지 화면에서 사용할 포스터 이미지를 지정합니다.

이번시간에는 Block element와 Inline element에 대해 알아보도록 하겠습니다.

div 태그와 span 태그

Block 레벨 요소의 대표적인 케이스로 <div> 태그가 있으며, Inline 레벨 요소의 대표적인 케이스로는 <span> 태그가 있습니다. 두 태그를 통해서 Block 레벨 요소와 Inline 레벨 요소의 차이점을 비교해보겠습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        background-color: aquamarine;
      }
      span {
        background-color: brown;
      }
    </style>
  </head>
  <body>
    <div>div 태그는 Block Element이며 글자수에 관계없이 한 블록을 차지함.</div>
    <span> span 태그는 Inline Element이며 글자수만큼 공간을 차지함. </span>
  </body>
</html>

블록과 인라인의 차이가 보이시나요? div 태그는 글자수에 상관없이 한 블록을 차지하는 반면, span 태그는 글자수에 맞게 공간을 사용합니다.

또 다른 차이점으로는 너비와 높이 조절이 블록은 가능하나 인라인은 불가능하다는 차이점이 있습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        background-color: aqua;
        width: 100px;
        height: 100px;
        border: 1px solid blue;
      }
      span {
        background-color: red;
        width: 100px;
        height: 100px;
        border: 1px solid blue;
      }
    </style>
  </head>
  <body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <span>1</span><span>2</span><span>3</span>
  </body>
</html>

블록 요소인 div 태그는 CSS에서 width와 height을 통해 너비와 높이를 조절할 수 있는데요, 반면 span 태그는 너비와 높이를 조절해도 그대로인것을 알 수 있습니다. 즉 인라인 요소는 텍스트에 맞게 크기가 조절되기 때문에 CSS로 너비와 높이를 조절할 수 없습니다.

이번시간에는 Sementic(의미론적) 태그에 대해서 알아보겠습니다.

먼저 Sementic 태그를 사용하면 다음과 같은 이점을 얻을 수 있습니다.

• 검색엔진 최적화
• 웹 접근성 향상
• 가독성 향상

그럼 이제 HTML의 Sementic 태그에는 어떤것들이 있는지 살펴볼까요?

• <header>: 페이지에 대한 정보를 담는 태그. 보통 페이지 상단에 위치
• <nav>: 네비게이션 링크. 다른 페이지나 같은 페이지 안에 다른 부분으로 이어줌.
• <aside>: 페이지 전체 내용과는 관련이 있지만, 주요 내용과는 직접적인 연관이 없는 내용을 담고 있음.
• <main>: 문서의 body의 main content를 정의할 때 사용.
• <section>: 문서나 응용프로그램의 일반적인 섹션을 표현.
• <article>: 여러가지 아이템들을 묶어 재사용 가능하도록 그룹화.
• <footer>: 사이트 하단에 위치. 주로 저작권이나 서비스 제공자 등을 표시.
• <details>: 추가정보나 요약정보등을 나타냄.
• <summary>: details의 자녀요소. 내용에 대한 요약이나 캡션등을 나타냄.
• <figcaption>: details의 자녀요소. 내용에 대한 캡션이나 제목등을 나타냄.
• <figure>: 일러스트,사진,코드,다이어그램등에 주석을 다는 용도로 사용됨.
• <mark>: 하나의 문서 내에서 다른 문맥과의 관련성을 나타내기 위해서 참조 목록으로 마킹되거나 하이라이트된 텍스트를 표현.
• <time>: 24시간 혹은 그레고리력에서의 정밀한 시간을 나타낼 때 사용.

과거에는 div 태그의 class를 정의해서 사용하였지만, 현재는 위 그림과 같이 Sementic 태그를 사용해서 HTML을 작성하는것을 권장하고 있습니다.

실습

먼저 div 태그로 class를 정의하는 방법을 살펴보겠습니다.

참고로 div 태그로 클래스를 생성할때 .뒤에 만들고자 하는 태그이름을 붙이면 자동으로 생성해줍니다.

예를들어 .header 을 입력하면 <div class="header"> 가 생성됩니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Non Sementic Tag</title>
    <style>
      * {
        text-align: center;
      }
      .header {
        border: 2px solid red;
        line-height: 55px;
        height: 55px;
      }
      .nav {
        border: 2px solid blue;
        height: 110px;
      }
      .main {
        border: 2px solid green;
        height: 300px;
        line-height: 300px;
      }
      .footer {
        border: 2px solid black;
        height: 55px;
        line-height: 55px;
      }
      .ul {
        list-style: none;
        padding-left: 0px;
      }
    </style>
  </head>
  <body>
    <div class="header">Header 영역</div>
    <div class="nav">
      <ul>
        <li>menu1</li>
        <li>menu2</li>
        <li>menu3</li>
        <li>menu4</li>
      </ul>
    </div>

    <div class="main">Content 영역</div>
    <div class="footer">Footer 영역</div>
  </body>
</html>

먼저 div의 class를 통해서 만들면 모두 div 태그의 클래스를 정의해서 만들기 때문에 가독성이 떨어진다는 단점이 있습니다. CSS의 스타일을 정의할때도 앞에 .이 붙는다는 차이점이 있네요.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sementic</title>
    <style>
      * {
        text-align: center;
      }
      header {
        border: 2px solid red;
        line-height: 55px;
        height: 55px;
      }
      nav {
        border: 2px solid blue;
        height: 110px;
      }
      main {
        border: 2px solid green;
        height: 300px;
        line-height: 300px;
      }
      footer {
        border: 2px solid black;
        height: 55px;
        line-height: 55px;
      }
      ul {
        list-style: none;
        padding-left: 0px;
      }
    </style>
  </head>
  <body>
    <header>Header 영역</header>
    <nav>
      <ul>
        <li>main1</li>
        <li>main2</li>
        <li>main3</li>
        <li>main4</li>
      </ul>
    </nav>
    <main>Content 영역</main>
    <footer>Footer 영역</footer>
  </body>
</html>

이제 Sementic 태그를 이용해서 코드를 작성해보았습니다. 해당 내용이 어떤 파트인지 한눈에 알아보기 쉽게 가독성이 좋아졌습니다.

오늘의 About CRM 주제는 “대체 세일즈포스는 누구를 위한 플랫폼인가?” 입니다.

저번시간에 세일즈포스와 CRM에 대해서 알아봤는데요, 세일즈포스는 CRM의 대표주자로 고객관계관리 플랫폼입니다.

그렇다면 세일즈포스는 과연 누구를 위한 플랫폼일까요? 기업의 제품을 이용하는 고객들? 혹은 잠재 고객? 아니면 기업에서 일하는 마케팅 부서의 직원?

CRM vs 마케팅 자동화

오늘 주제에 대한 답을 알아보기 위해 먼저 CRM과 마케팅 자동화에 대해 알아보겠습니다.

먼저 CRM은 영업부서에서 기존 고객을 관리하기 위해 사용합니다. 마케팅 자동화는 마케팅 부서에서 잠재 고객을 관리하기 위해 사용합니다. 즉 CRM은 기존 고객에 대한 관리를, 마케팅 자동화는 잠재 고객에 대한 관리를 한다는 점에서 차이점이 있다고 할 수 있습니다.

CRM과 마케팅 자동화를 함께하면 가시성, 자동화, 보고 측면에서 고객을 관리할때 큰 시너지 효과를 볼 수 있다고 합니다. 세일즈포스에서 제공하는 서비스의 장점이 이러한 CRM과 마케팅 자동화의 시너지인것 같습니다.

세일즈포스 Customer 360은 어떤 플랫폼인가요?

저번시간에 세일즈포스에 대해 알아보며 Customer 360에 대해서 잠깐 언급했었는데요, 그렇다면 Customer 360은 구체적으로 어떤 플랫폼일까요?

기업에는 세일즈,마케팅,서비스,관리부서 등등.. 많은 부서들이 있는데요, 각 부서마다 따로 정보를 관리하기 때문에 유기적으로 소통하기 힘들며 사일로 현상이 발생합니다.

Customer 360은 모두가 같은 플랫폼을 사용하고, 같은 데이터를 공유하며 유기적인 소통을 할 수 있기 때문에 위와 같은 팀 사일로 현상을 방지할 수 있습니다. 모든 고객에 대해 전방위적인 정보를 공유할 수 있게 되는것이죠. Customer 360의 360은 이러한 360도의 전방위적인 정보를 공유한다는 의미에서 붙여진 것 같네요.

Customer 360에는 Tableau, Einstein, 그리고 우리가 협업할 때 자주 사용하는 Slack까지 정말 많은 기능이 포함되어 있는데요, 위의 CRM과 마케팅 자동화의 사례에서도 알 수 있듯이 함께 사용할수록 시너지 효과를 볼 수 있는 기능들이 많습니다. 앞서 말씀드렸던 자동화, 가시성, 보고등에서 등에서 이점을 볼 수 있는것이죠.

이렇게만 본다면 세일즈포스는 기업을 위한 플랫폼인것 같습니다. 그렇다면 고객들은 어떠한 이점이 있을까요?

아마 대부분 제품을 이용하며 서비스 센터에 상담하며 불편을 느껴본 경험이 있을겁니다. 했던말을 또하고 자기 담당부서가 아니라며 이리저리 돌다보면 매우 화가나죠.

Customer 360은 유기적인 고객데이터 관리를 통해 이러한 문제점을 해결해줍니다. 즉 기업이 고객과 1대1로 소통하는 느낌인거죠. 따라서 고객은 일일이 설명하지 않아도 내가 필요한 서비스를 제공받을 수 있게 됩니다.

세일즈포스가 누구를 위한 플랫폼인가에 대한 정답은 없지만 중요한건 기업과 고객이 더욱 원할하게 소통할 수 있게 해준다는 점입니다.

<Trailhead Study>

Salesforce 표준 및 맞춤형 객체

• 리드(Lead): 잠재 고객
• 계정(Account): 비즈니스를 함께하는 기업
• 연락처(Contact): 계정(Account)에서 일하는 직원
• 기회(Opportunity): 구매할 자격있는 리드(Lead)

리드가 자격이 있다고 검증되면 계정,연락처,기회로 변환할 수 있다.

오늘배운 내용중에 가장 핵심내용입니다. 조금 추상적이라 이해하기 어려운데요, 예시를 들어 간단히 설명해보겠습니다.

먼저 B2B 서비스를 제공하는 세일즈포스 사용기업 A가 있다고 가정해보겠습니다. A 기업의 잠재고객인 기업을 B라고 한다면 B가 리드가 됩니다.

그리고 영업에 성공하여 B가 실제 고객이 된다면 B는 리드에서 계정(Account)으로 변환됩니다. 그리고 생성된 연락처(Contact)에 B기업에서 일하는 직원들을 관리할 수 있습니다. 기회(Opportunity)는 실제 판매 가능성이 있는 거래정보이며 구체적인 거래건을 관리하게 됩니다.

조금 더 이해하기 쉽게 화장품 회사의 고객관리 프로세스를 예시로 들어보겠습니다.

• 1.제품의 샘플 신청자 발생 -> 잠재고객이므로 리드로 등록
• 2.구매 의향 확인 -> 리드에서 개인 어카운트로 전환
• 3.구체적인 구매 상담 시작 -> 기회 생성(판매할 가능성이 있는 제품 등록)

Lightning Experience

Lightning Experience는 세일즈포스가 2015년에 출시한 현대적인 사용자 인터페이스입니다. 기존의 Classic 인터페이스를 대체하여 현대적인 디자인과 UX,향상된 생산성 기능,개발자 친화적 환경,성능 최적화 등의 특징이 있습니다.

Play Ground에서 간단하게 둘러보면서 Lightning Experience의 UX에 대해 체험해보았습니다.

실습

Account에서 New를 통해 새로운 계정을 생성할 수 있습니다. 많은 정보를 입력할 수 있지만 간단하게 이름, 타입, 산업 정도의 정보만 입력하여 계정을 생성하였습니다.

이제 Account에서 생성한 계정을 확인할 수 있습니다.

계정을 생성했으니 연락처가 있어야겠죠? Contact에서 New를 클릭하여 새 연락처를 생성해줍니다.

깜빡하고 Account Name을 등록안해줬네요. Edit을 통해 수정해줍니다. Account Name 필드를 클릭하면 자동으로 Account 목록에서 선택하거나 검색할 수 있도록 드롭다운 됩니다.

이제 해당 Account의 연락처에서 직원정보를 확인할 수 있습니다.

같은방법으로 기회도 생성해주었는데요, 검색창 오른쪽에 보면 테이블모양 아이콘이 있습니다. 클릭해주면 Kanban을 선택할 수 있는데요 선택해줍니다.

이제 프로세스를 더 한눈에 알아보기 쉽죠? 아마 이런게 세일즈포스의 Lightning Experience의 일종인것 같습니다.

보고서

이제 새로운 보고서를 만들어볼건데요, 먼저 Report에서 New Report를 클릭해줍니다.

기회에 대한 보고서를 만들어줄겁니다. Opportunities를 선택해주고 Start Report를 클릭해줍니다.

왼쪽에 보면 Outline과 Filters를 통해 원하는 보고서를 만들어줄 수 있습니다.

이대로 따라해주면 짜잔

100k 이상의 Amount와 기타 등등 조건에 맞는 기회 보고서가 만들어졌습니다.

오른쪽 상단에 표 모양을 클릭해주면 차트화해서 보는기능도 있습니다. Stage를 추가해주었기 때문에 Stage 별로 차트화해주는것 같네요.

이번시간에는 표(Table) 태그에 대해서 알아볼 예정입니다. 표 태그는 데이터베이스의 표(Table)과 같이 행열의 개념을 사용합니다.

테이블 기본 태그

• table: 표 생성. 표 전체를 감싸는 태그
• caption: 표의 제목 및 설명 (캡션 태그)
• tr: 표의 행. th(제목 열),td(일반 열)의 부모 태그
• th: 제목 열. tr 태그의 자식으로 사용.
• td: 일반 열. tr 태그의 자식으로 사용.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Table tag</title>
  </head>
  <body>
    <h1>기본 테이블</h1>
    <table>
      <caption>
        프로필 테이블
      </caption>
      <tr>
        <th>1행 1열</th>
        <th>1행 2열</th>
        <th>1행 3열</th>
      </tr>
      <tr>
        <td>2행 1열</td>
        <td>2행 2열</td>
        <td>2행 3열</td>
      </tr>
      <tr>
        <td>3행 1열</td>
        <td>3행 2열</td>
        <td>3행 3열</td>
      </tr>
    </table>
  </body>
</html>

테이블의 기본태그를 사용해서 3x3 테이블을 만들어보았는데요, 뭔가 허전하죠?

테이블 속성에 border 를 추가하면?

이렇게 boarder line을 생성해서 테이블을 보기 편하게 만들어줍니다.

다만 boarder 부분이 빨갛게 뜨는게 뭔가 찜찜하지 않으신가요?

이게 html이 문법에 매우 관대하기 때문에 그냥 실행되긴 하지만, 웹 표준을 준수하길 권장하기 때문에 이와 같이 boarder 옵션을 사용하는것을 지양한다고 합니다.

*즉 <table> 태그에 boarder 옵션을 사용하는 방법은 웹 표준에 따르면 권장하지 않는 방식인거죠. *

웹 표준은 아래와 같은 CSS 방식을 선호하는데요, 아직 CSS를 배우지 않았으니 이런 느낌으로 작성한다 정도만 보고 넘어가도록 하겠습니다.

<style>
    table {
      border: 1px solid black;
    }
    th,
    td {
      border: 1px solid black;
    }
  </style>

테이블 그룹태그

• colgroup: 열을 그룹으로 묶는 태그.
• col: <colgroup>의 자식태그로 열 단위를 나눔. (span 속성으로 열을 그룹으로 묶을지 설정. e.g. <col span = "3">)
• thead: 표의 제목 열들을 묶는 그룹태그.
• tbody: 표의 일반 데이터들을 묶는 그룹태그.
• tfoot: 표의 하단 영역을 묶는 그룹태그.

그룹태그는 테이블의 열 또는 행을 엮어서 한번에 처리해주는 태그인데요 직접 실습해보면서 알아보겠습니다.

</table>
    <hr />
    <h1>테이블 그룹태그</h1>
    <table>
      <tr>
        <th>반</th>
        <th>이름</th>
        <th>국어</th>
        <th>수학</th>
        <th>영어</th>
        <th>CS</th>
      </tr>
      <tr>
        <td>1반</td>
        <td>90</td>
        <td>100</td>
        <td>75</td>
        <td>80</td>
        <td>95</td>
      </tr>
      <tr>
        <td>1반</td>
        <td>50</td>
        <td>80</td>
        <td>70</td>
        <td>65</td>
        <td>95</td>
      </tr>
      <tr>
        <td>1반</td>
        <td>40</td>
        <td>35</td>
        <td>27.5</td>
        <td>87</td>
        <td>99</td>
      </tr>
    </table>

먼저 <hr/> 태그로 선을 긋고 아래에 새로운 테이블을 만들어보았습니다.

<colgroup>, <col> 태그

<table>
      <colgroup>
        <col class="col1" />
        <col class="col2" />
        <col class="col3" />
        <col class="col4" />
        <col class="col5" />
        <col class="col6" />
      </colgroup>
      <tr>

생성한 테이블에 colgroup 태그를 생성하고 하위 태그인 col 태그를 열의 수에 맞게 생성하였습니다.

생성한 col 태그의 속성을 직접 바꿔줘도 적용이 되긴 하지만 위에서 언급했듯이 웹 표준에 맞지 않기 때문에 CSS를 활용하는 방법을 소개하겠습니다.

CSS를 활용해서 수정하려면 각 컬럼을 구분할 수 있어야 하니까 class 속성으로 각 컬럼의 이름을 명시해주었습니다.

<style>
    table {
      border: 1px solid black;
    }
    th,
    td {
      border: 1px solid black;
    }
    .col1 {
      width: 80;
    }
    .col2 {
      background-color: aqua;
    }
  </style>

이제 이전에 CSS를 다룰때 만들었던 style 태그에 위와 같이 컬럼을 추가해서 width(너비), background-color 등을 수정할 수 있습니다.

thead,tbody,tfoot

<thead>
        <tr>
          <th>반</th>
          <th>이름</th>
          <th>국어</th>
          <th>수학</th>
          <th>영어</th>
          <th>CS</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1반</td>
          <td>90</td>
          <td>100</td>
          <td>75</td>
          <td>80</td>
          <td>95</td>
        </tr>
        <tr>
          <td>1반</td>
          <td>50</td>
          <td>80</td>
          <td>70</td>
          <td>65</td>
          <td>95</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>1반</td>
          <td>40</td>
          <td>35</td>
          <td>27.5</td>
          <td>87</td>
          <td>99</td>
        </tr>
      </tfoot>

<thead>는 <th> 태그로 작성된 제목열들을 묶어주었고, <tfoot>은 최하단 열들을, 마지막으로 남은 중간 열들은 <tbody> 태그로 묶어주었습니다.

사실 표의 외관에는 변화가 없지만 추후에 CSS 스타일링, 유지보수와 개발 용이성 등 때문에 사용한다고 합니다.

colspan, rowspan

• <th>,<td>
  • colspan : 열 병합 e.g. <td colspan="2">
  • rowspan : 행 병합 e.g <td rowspan="2">

colspan과 rowspan은 엑셀에서 셀 병합하는 기능과 같다고 보시면 됩니다. <th>태그나 <td>태그에서 사용되며 위에서 나눈 그룹태그 단위로 병합이 가능합니다.

<tbody>
        <tr>
          <td rowspan="2">1반</td>
          <td>90</td>
          <td>100</td>
          <td>75</td>
          <td>80</td>
          <td>95</td>
        </tr>
        <tr>
          <td>50</td>
          <td>80</td>
          <td>70</td>
          <td>65</td>
          <td>95</td>
        </tr>
      </tbody>

<tbody>부분의 rowspan을 2로 해보겠습니다.

바디부분의 두 셀이 묶인거 보이시죠? 하지만 rowspan을 3으로 설정해도 그 아래는 묶이지 않는데요, 그 이유는 맨 아래는 <tfoot> 태그로 다른 그룹이기 때문입니다.

목록태그

• <ol> Ordered List : 순서가 있는 목록 (type 속성으로 글머리 기호를 변경할 수 있음)
• <ul> Unordered Lists : 순서가 없는 목록
• <li> Listed Item : 목록의 하위 항목 (ul,ol 태그의 하위 항목으로 사용됨)
• <dl> Definition List : 정의목록, 사전처럼 용어를 설명하는 목록 ( eg.A는 B이다 와 같이 key=value 형태로 사용)
• <dt> Definition Term : 정의되는 용어의 제목을 넣을때 사용
• <dd> Definition Description : 용어를 설명할 때 사용

주의사항

• <dl>태그는 하나 이상의 <dt>``<dd> 쌍의 태그를 가져야함 (단 <dt> <dd> 태그가 반드시 하나의 짝으로 지어져야 하는것은 아님)
• <li> , <dt>``<dd> 태그는 하위태그로 존재해야하기 때문에 독립적으로 사용불가 (<li> 태그는 <ol> 또는 <ul> 태그 안에, <dt> <dd> 태그는 <dl> 태그 안에 하위 태그로 존재)

실습

ol 태그

이제 나무위키의 계란후라이 조리법으로 목록태그 실습을 해보도록 하겠습니다.

먼저 <ol>태그를 생성한 후 목록에 있는 조리법을 복사해서 붙여넣기 해줍니다.

Tip

여기서 VS Code 내장기능에 대한 팁이 있는데요 ctrl+alt 를 누른 상태로 화살표를 아래로 내려주면 여러줄을 선택할 수 있게 됩니다.

이렇게하면 한번에 <li>태그를 생성할 수 있습니다 👍

제가 앞에서 실수를한게 있는데요 ol 태그는 순서가 있는 태그라 위와 같이 1,2,3.. 등의 순번을 제거하고 사용해줍니다.

이렇게 알아서 순서를 부여해주거든요

ul 태그

이제 순서가 없는 목록인 <ul>태그로 목록을 만들어볼건데요 여기서도 팁이 있습니다.

li*갯수와 같이 갯수를 입력하고 엔터를 누르면 이렇게 여러개의 <li>태그를 자동으로 생성해주는데요

이렇게 자동생성된 태그는 Tab키를 누르면 자동으로 다음 <li>태그로 넘어가는 기능도 사용할 수 있습니다.

dl, dt+dd 태그

dl 태그와 하위태그들은 하위태그를 나타내는 > 와 함께 dl>(dt+dd)*갯수 이런식으로 한번에 생성할 수 있습니다.

dl 태그의 dt,dd는 dt에 설명할 용어를 넣고 dd에 용어에 대한 설명을 넣는방식으로 아래와 같이 작성합니다.

<dl>
      <dt>HTML</dt>
      <dd>
        Hyper Text Markup Language의<br />
        약자로 웹 문서를 만들기 위한 <b>마크업</b>언어이다.
      </dd>
      <dt>CSS</dt>
      <dd>
        Cascading Style Sheets의<br />
        약자로 HTML을 꾸미는 <b>스타일 시트</b>이다.
      </dd>
      <dt>JavaScript</dt>
      <dd>
        웹 페이지를 생동감 있게 동작시키기 위한<br />
        <b>프로그래밍 언어</b>이다.
      </dd>
    </dl>

이러한 구조로 용어를 설명하는데 사용됩니다.

글꼴 태그

• <h1>~<h6> Heading : 제목 또는 부제목 (숫자가 작을수록 크기가 커짐)
• <p> Paragraph : 하나의 문단을 표시
• <hr> Horizontal Rule : 가로선 긋기 (종료태그 X)
• <br> Break : 줄바꿈 (종료태그 X)
• <i> Italic : 이텔릭체 로 표시
• <em> Emphasis : 이텔릭체 로 강조
• <b> Bold : 볼드체로 진하게 표시
• <strong> : 볼드체로 진하게 강조

여기서 <i>,<b> 태그와 em,strong 태그의 차이점을 짚고 넘어가자면 표시와 강조의 차이라고 할 수 있는데요, 이는 브라우저에서 스크린리더(Screen Reader) 기능을 사용할 경우 음성 합성 기술이 해당 부분을 강조하여 읽을때 차이가 발생한다고 합니다.

Live Server

간단한 실습을 하기 전에 VS Code에 Live Server라는 어플리케이션을 설치해서 적용해보려고 합니다.

Live Server를 설치한 후 우측하단에 Go live를 클릭하면 "Server is Started at port : 5500"이라는 알림과 함께 웹페이지가 열리게 됩니다.

이렇게하면 수정된 HTML 코드를 Ctrl+s로 저장하면 실시간으로 반영해서 보여주게 됩니다. 참 편리하죠👍?

Prettier

이번에는 Prettier 라는 코드 포맷터를 설치해볼건데요 간단히 설명하자면 코드를 좀 더 이쁘게 짜는걸 도와주는 기능을 제공합니다.

Format on Save

설치가 끝나면 먼저 crtl+,로 설정창을 열어서 Format On Save에 체크해줍니다. 이제 Save와 동시에 포맷이 적용됩니다!

Tab Width

이제 Prettier로 검색해서 최하단에 보시면 Tab Width를 조절할 수 있는데요 보통 현업에서 두칸으로 권장한다고 합니다.

Prettier Quote

이제 Prettier Quote를 검색해서 1)Single Quote에 체크 2)JavaScript의 Quote Style : single 로 설정해줍니다. 이렇게하면 자바스크립트의 Quote를 Single Quote로 일관성있게 통일시켜줍니다.

Default Formatter 설정

Default Formatter를 Prettier로 설정해줍니다.

이제 마지막으로 우클릭->Format Document with... ->Configure Default Formatter... -> Prettier 으로 HTML도 Prettier가 디폴트로 적용되게 해줍니다.

실습

이제 세팅이 완료되었으니 위에 배운 태그들을 사용해서 간단한 실습을 해보도록 하겠습니다.

사전에 설치한 Prettier와 Live Server 엄청 편리하네요👍 html 문서 수정하면서 일일히 새로고침하고 줄맞추고 했던거 생각하면..🥲 지금이라도 알아서 다행입니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>제목1</h1>
    <h2>제목2</h2>
    <h3>제목3</h3>
    <h4>제목4</h4>
    <h5>제목5</h5>
    <h6>제목6</h6>
    <hr />
    <h1>김치볶음밥</h1>
    <p>
      김치볶음밥은 한국의 대중적인 요리의 하나이자 볶음밥의 일종으로서 김치와
      밥을 주재료로 프라이팬 등에서 볶은 요리다.[1] 조리하기 편하고 간단하여,
      한국의 음식점인 분식점에서 대부분 팔고 있는 음식이다.[1]
    </p>
    <hr />
    <h1>애국가</h1>
    <h3>1</h3>
    <i>동해</i> 물과 <em>백두산</em>이 마르고 닳도록<br />
    하느님이 보우하사 우리나라 만세.<br />
    무궁화 삼천리 화려 강산<br />
    대한 사람, 대한으로 길이 보전하세.<br />
    <h3>2</h3>
    <b>남산</b> 위에 저 <strong>소나무</strong>, 철갑을 두른 듯<br />
    바람 서리 불변함은 우리 기상일세.<br />
    무궁화 삼천리 화려 강산<br />
    대한 사람, 대한으로 길이 보전하세.<br />
    <h3>3</h3>
    가을 하늘 공활한데 높고 구름 없이<br />
    밝은 달은 우리 가슴 일편단심일세.<br />
    무궁화 삼천리 화려 강산<br />
    대한 사람, 대한으로 길이 보전하세.<br />
    <h3>4</h3>
    이 기상과 이 맘으로 충성을 다하여<br />
    괴로우나 즐거우나 나라 사랑하세.<br />
    무궁화 삼천리 화려 강산<br />
    대한 사람, 대한으로 길이 보전하세.<br />
  </body>
</html>

이렇게 오늘 배운 태그들을 왈용해서 위키피디아 느낌으로 html을 만들어보았는데요 Live Server와 Prettier 덕분에 시간이 두배 이상은 단축된것 같네요👍

다음시간에는 다른 종류의 태그들에 대해서 더 다뤄보도록 하겠습니다.

태그

보통 태그는 시작 태그와 종료 태그 사이에 텍스트를 넣는 방식으로 사용되는데요, 시작 태그에는 속성이라는 부분이 존재하여 속성명에 속성값을 할당하여 사용할 수 있습니다. 속성값을 생략하여 사용하면 디폴트값이 적용되겠죠?

HTML 기본 구조

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

html 파일을 생성한 뒤 !+Enter 커맨드를 입력하면 기본적인 HTML 구조가 생성됩니다.

• DOCTYPE : 문서의 타입을 의미
• html : html 문서의 시작과 끝을 정의 (lang은 html 문서의 언어를 의미. 한국어는 "ko")
• head : 웹페이지의 보이지 않는 부분의 정보를 담당 ( eg. title 태그 ...)
• body : 웹페이지의 실제 문서 내용을 담당
• <!-- 주석 --> : 주석은 꺾쇠 안에 !와 -- 를 사이에 넣어서 작성합니다.
• ctrl+/ : 선택한 부분을 주석처리 합니다. (윈도우 커맨드 한정이며 VS code 환경 이외에도 지원되는지는 모르겠습니다)

그동안 웹개발을 하면서 프론트쪽 코드에서 HTML을 많이 접해봤는데요 정작 제대로 공부해본 적은 없어서 이참에 친해져(?) 보고자 HTML과 CSS에 대해 공부하는 시간을 가져보려고 합니다.

HTML이란?

HTML ? HTML(Hypertext Markup Language)은 웹사이트의 프론트엔드를 구축하는 데 사용되는 코딩 언어입니다. 텍스트, 이미지, 링크 및 멀티미디어와 같은 요소를 통합하여 콘텐츠의 구조와 레이아웃을 제공합니다.

여기서 포인트는 HTML이 구조와 레이아웃을 제공한다는 점입니다. HTML, CSS, JS의 역할을 이해하기 쉽게 분류하자면 HTML은 웹의 구조, CSS 는 디자인적 요소, JS는 기능적 요소를 담당한다고 보면 됩니다.

VS Code 환경에서 실습

먼저 HTML 실습을 진행하기 위해 폴더를 생성한 후 index.html 파일을 생성해줍니다.

!+Enter 단축키로 HTML을 시작할 수 있습니다.

저장경로에 생성된 index.html 파일을 들어가줍니다.

아직은 아무 내용도 없습니다.

프로그래밍 처음 시작할때 국룰 아시죠? body 부분에 Hello World! 입력해주고 다시 들어가보겠습니다.

파이썬을 처음 배울때가 생각나네요😊

이제 이런 느낌으로 구조를 만들어보려고 합니다. 먼저 위 텍스트를 복붙해서 body에 넣어줍니다.

역시 생각한대로 안나오네요.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello HTML!</title>
</head>
<body>
    <h1>헬스</h1>
    <hr/>
    <p> 위키백과, 우리 모두의 백과사전. </p>
    <p>헬스(health)는 기본적으로 
    <a href="https://ko.wikipedia.org/wiki/%EA%B1%B4%EA%B0%95">건강</a>을 
        가리키며, 대한민국에서는 근력 트레이닝이나 웨이트 트레이닝을 의미하기도 한다.
        그 외에 다음을 가리킨다.</p>
    <ul>
        <li>
            의료
        </li>
        <li>
            보건
        </li>
        <li>
            체력 (게이밍)
        </li>
        <li>
            패션 헬스(Fashion health)
        </li>
        <li>
            헬스클럽(health club)
        </li>
        <li>
            구글 헬스: 구글이 제공하는 개인 의료 정보 서비스
        </li>
    </ul>

</body>
</html>

<h1>,<hr/>,<p>,<ul>,<li> ,<a href>등의 태그를 사용해서 구조를 만들어보았습니다. 거의 비슷하죠?

다음시간에는 각 태그가 어떤 기능을 하는지 더 자세히 알아보도록 하겠습니다.

세일즈포스 그리고 CRM에 대해 배우기 전에 '무엇을' 또 '왜' 만드는지 알아보는 시간입니다.

☁️Salesforce = CRM?

클라우드하면 AWS가 가장 먼저 떠오르듯이 CRM하면 Salesforce를 빼놓을 수 없습니다. 그렇다면 위의 명제는 참이라고 할 수 있을까요? 사실 정확히 따지자면 포함관계가 맞다고 생각하지만, 현재 CRM 분야에서 압도적인 점유율을 고려한다면 위 명제가 참이 될수도 있겠네요!

1) CRM은 무엇이며 어떻게 작동하나요?

고객에게 맞춤형 광고를 보내고, 물건을 구입할때 추가적으로 필요한 물건을 추천해주고, 물건을 구입한 고객에게 주의사항이 담긴 메일을 보내는 등 고객관리에는 엄청 다양한 프로세스가 존재합니다.

이러한 고객관리 프로세스들을 모두 통틀어서 CRM(고객 관계 관리), CRM을 팀 단위로 좀 더 체계적으로 관리할 수 있게 하는 것이 세일즈포스라고 이해하면 될 것 같습니다.

2) 왜 많은 기업들이 세일즈포스를 사용하나요?

다음은 Salesforce Explained 라는 시리즈의 내용인데요, 세일즈포스에 대해 궁금한 내용을 좀 더 쉽게 풀어서 설명해주는 시리즈인것 같습니다. 교양수업처럼 편하게 들으면 될 것 같네요👍

Salesforce Customer 360

Salesfoce Customer 360은 모든 단계에서 발생하는 고객 데이터를 한곳에서 수집하여 영업,마케팅,서비스,커머스,IT 등 모든 팀이 동일한 정보를 공유할 수 있도록 합니다. 즉, 고객과의 신뢰를 향상시키고 개인화된 경험을 제공하기 위해 360도로 고객을 볼 수 있게 해주는 고객 관계 관리(CRM) 시스템 입니다.

해당 영상에서는 세일즈포스의 Customer 360의 중요성에 대해 강조했는데요, 그 효과로 ROI(Return On Investment)를 통한 비용절감과 빠른성장(코로나 기준 최대 5배)을 꼽았습니다.

ROI의 간단한 방정식에서 알 수 있듯이 Net Income(수익률) / Cost of Investment(투자 비용) 즉, 투자 비용 대비 수익률을 의미합니다. 즉 ROI를 높이는 방법에는 1) 수익률을 극대화 시키거나 , 2) 투자 비용 절감 등의 방법이 있겠네요

그렇다면 Customer 360은 어떤 방식으로 기업들의 ROI를 극대화 시켜줄까요?

Customer 360 서비스 도입 전에는 여러팀에서 고객데이터를 따로 관리하여 평균 976개의 앱을 사용하였다고 합니다. 이는 비용적인 측면에서 비효율적일 뿐만 아니라 팀 사일로(팀 이기주의) 및 데이터 불균형으로 인해 데이터를 사용하는 시점에서 더 이상 유용한 데이터가 아닌 문제등이 발생하였습니다.

Customer 360는 AI, 자동화 시스템, 실시간 고객 데이터 활용 등의 기능을 꼽을 수 있는데요, 가장 큰 특징으로 모든 팀원이 동일 고객에 대한 데이터를 공유하여 관리한다는 장점이 있습니다.

따라서 한가지 플랫폼에서 동일 고객의 실시간 데이터를 모든 팀원이 공유하며 관리하기 때문에 기존의 문제점을 모두 해결할 수 있습니다.

이 과정에서 불필요한 지출이 감소하고, 적절한 마케팅에 따른 수익률이 증가하여 ROI가 증가한다고 볼 수 있는데요, 고객사의 무려 98%가 목표 ROI에 달성하였다고 합니다!

<Trailhead Study>

오늘 트레일헤드 과제는 Salesforce Platform 기초 과정이었습니다.

트레일헤드에서는 가상의 회사를 사례로 들어서 효율성 개선등을 주제로 과제를 진행하는것 같습니다.

아래는 앱,개체,레코드,필드 등에 대한 설명인데요 기존에 사용하는 데이터베이스와 매우 흡사한 개념인 것 같네요.

• Salesforce에서 app(앱)은 비즈니스 프로세스를 지원하는 개체, 필드 및 기타 기능의 집합입니다. 사용 중인 앱을 확인하고 앱 시작 관리자(앱 시작 관리자 아이콘)를 사용하는 앱 간에 전환할 수 있습니다.
• Objects(개체)는 특정 종류의 정보를 저장하는 Salesforce 데이터베이스의 테이블입니다. 그래픽에서 볼 수 있는 Property 개체와 같은 custom objects, Accounts 및 Contacts 같은 standard objects가 있습니다.
• Records(레코드)는 개체 데이터베이스 테이블의 행입니다. 레코드는 개체와 연결된 실제 데이터입니다. 여기서는 구/군/시 속성이 레코드입니다.
• Fields(필드)는 개체 데이터베이스 테이블의 열입니다. 표준 및 맞춤형 개체에는 모두 필드가 있습니다. Property 개체에는 주소 및 가격과 같은 필드가 있습니다.

Dreamhouse

오늘 사용한 앱은 Dreamhouse라는 앱인데요, 과제의 설명을 보니 아마 부동산 중개사 분들을 위한 고객 관리 어플리케이션인 것 같습니다.

오늘의 미션은 Contacts(연락처) 필드에 새로운 항목을 추가해보는 겁니다.

먼저 세팅에서 Import Data를 통해서 샘플 데이터를 Import 해줍니다.

이제 연락처에 샘플데이터가 생성되는데요, 여기서 아무 연락처를 고른다음 세부 정보를 확인해줍니다.

고객의 이름부터 연락처, 생일, 계좌번호 등등 많은 필드가 포함되어 있는데요 새로 추가할 항목은 고객의 대출 승인 가능 여부입니다.

먼저 우측 상단의 톱니바퀴 모양을 클릭해서 -> SetUP 을 선택해줍니다.

여기서 Home 옆에 있는 Object Manager를 선택해주면 다양한 오브젝트를 관리할 수 있는데요, 저희가 원하는건 연락처 관리니까 Contact를 선택해줍니다.

여기서 Field & Relationships를 선택하면 연락처 항목에 포함된 모든 필드들을 확인할 수 있는데요 오른쪽 위에 보시면 New 를 통해 새 필드를 생성할 수도 있습니다.

New를 클릭하면 새로운 커스텀 필드에 대해 Data Type 을 설정할 수 있는 선택창과 그 옆에 설명이 적혀있습니다.

대출가능 여부는 Y/N 이기 때문에 체크박스(Checkbox) 타입이 좋아보이네요.

두번째 스텝으로 넘어가면 필드의 라벨, 이름, 디폴트값, 설명 등등을 설정할 수 있습니다. 대출가능 여부이기 때문에 Prequalified? 로 지었습니다.

세번째 스텝은 각종 보안관련 설정이기 때문에 일단 넘어가줍니다.

마지막으로 해당 필드를 포함할 레이아웃을 선택할 수 있는데요, 일단 모두 선택하고 Save 해줍니다.

돌아와서 확인해주면 Prequalified? 라는 체크박스 형식의 필드가 추가되었음을 확인할 수 있습니다.

과제를 완료하면 이렇게 포인트를 주는데요 뱃지를 많이 획득할수록 세일즈포스 분야에서 어느정도 실력을 인정해준다고 합니다.

Salesforce Architecture

세일즈포스 플랫폼에는 정말 다양한 기능들이 있는데요 세일즈 포스의 아키텍처를 이해하려면 신뢰, 멀티테넌시, 메타데이터, API 등을 먼저 이해해야합니다.

• 신뢰 세일즈포스는 클라우드 서비스 기업이기 때문에 무엇보다 신뢰가 중요합니다. 구체적으로 신뢰란 보안을 의미하는것 같습니다. 예시로 AI 안전을 위해 Einstein Trust Layer를 구축하였고, 데이터 프라이버시나 거버넌스를 손상시키지 않고 회사 및 고객 데이터에 생성형 AI를 사용할 수 있도록 보안 조치를 추가하였다고 합니다.

• 멀티테넌시(Multitenancy) 멀티 테넌시(Multi-tenancy)는 소프트웨어 애플리케이션의 단일 인스턴스가 여러 고객에게 서비스를 제공하는 아키텍처를 말합니다. 아파트를 예로 설명하자면 입주민들이 물과 전력, 그리고 건물등을 공유하는 상황으로 비유할 수 있겠네요. 클라우드 서비스의 기본이 되는 개념인것 같은데 여기서 핵심은 동일한 컴퓨팅 성능,데이터 저장소,및 핵심 기능을 제공하고 고객의 데이터를 안전하게 보장할 수 있도록 신뢰를 제공한다는 점입니다.

• Data Cloud

  Data Cloud는 회사의 모든 데이터를 세일즈포스의 Einstein 1 Platform에 통합하는 데이터 플랫폼으로, 모든 팀이 고객을 종합적으로 파악하여 자동화 및 분석을 추진하고, 참여를 개인화하며, 신뢰할 수 있는 AI를 구현할 수 있도록 지원합니다.

여기서 핵심은 모든 데이터를 세일즈포스 플랫폼에서 이용할 수 있다! 입니다.

• 메타데이터

  메타데이터는 시간이 지남에 따라 많은 양의 데이터를 수집, 저장 및 분석할 수 있도록 일관된 방식으로 구조화된, 다른 데이터를 설명하는 데이터입니다. 빅 데이터를 데이터 웨어하우스에 저장하여 쉽게 검색하고 관리하려면 메타데이터가 필요합니다.

추상적으로 어렵게 들릴 수 있는데요, 일단 데이터에 대한 데이터 정도로 이해하면 될 것 같습니다.

• API

  API(application programming interface 애플리케이션 프로그래밍 인터페이스, 응용 프로그램 프로그래밍 인터페이스)는 컴퓨터나 컴퓨터 프로그램 사이의 연결이다. 일종의 소프트웨어 인터페이스이며 다른 종류의 소프트웨어에 서비스를 제공한다.

  API로 서로 다른 소프트웨어 조각이 서로 연결되고 정보를 교환할 수 있도록 하며, API 이름을 사용하여 찾고 있는 메타데이터와 데이터를 검색합니다.

  세일즈포스에서의 API도 크게 의미가 다른것 같지 않습니다.

Setup

Setup(설정) 메뉴로 간편하게 작업하기 위해 Setup(설정) 메뉴에는 Administration(관리), Platform Tools(플랫폼 도구) 및 Settings(설정)의 세 가지 주요 카테고리에 대해 알아보겠습니다.

• Administration(관리): 관리 범주는 사용자와 데이터를 관리하는 곳입니다. 사용자 추가, 권한 변경, 데이터 가져오기 및 내보내기, 이메일 템플릿 생성 등의 작업을 수행할 수 있습니다.
• Platform Tools(플랫폼 도구): 플랫폼 도구에서 대부분의 사용자 정의를 수행합니다. 데이터 모델을 보고 관리하고, 앱을 만들고, 사용자 인터페이스를 수정하고, 사용자에게 새 기능을 배포할 수 있습니다. 프로그래밍 방식 개발을 시도하기로 결정한 경우 플랫폼 도구에서 코드도 관리할 수 있습니다.
• Settings(설정): 마지막으로 설정에서 회사 정보 및 조직 보안을 관리할 수 있습니다. 업무 시간 추가, 로캘 변경, 조직 내역 보기 등의 작업을 수행할 수 있습니다.

AppExchange

AppExchange란 무엇인가요? Salesforce에는 Salesforce Platform의 유연성을 사용하여 누구나 사용할 수 있는 놀라운 앱 및 기타 솔루션을 구축하는 파트너 커뮤니티가 있습니다. 이러한 서비스/기능은 AppExchange에 설치할 수 있습니다(일부는 무료, 일부는 유료임).

앱스토어처럼 새로운 앱을 설치하여 서비스와 기능을 추가할 수 있습니다. 설치한 앱은 다음과 같은 방법으로 찾아서 사용할 수 있습니다.

• Setup(설정)에서 Quick Find(빠른 찾기) 상자에서 Installed Packages(설치된 패키지)를 검색하고 선택합니다.
• 설치한 패키지 이름을 클릭합니다. AppExchange 다운로드 페이지의 이름과 동일합니다.
• 패키지에 대한 자세한 정보를 보려면 View Components(구성 요소 보기)를 클릭합니다. Package Details(패키지 세부 사항) 페이지에는 패키지의 사용자 정의 필드, 맞춤형 개체 및 Apex 클래스를 포함한 모든 구성 요소가 표시됩니다. 이 정보는 사용자 정의에 충돌이 있는지 여부를 판별하는 데 도움이 됩니다.

세일즈포스라는 분야에 관심이 생겨서 오늘부터 공부를 통해 정리해보고자 합니다. 정확히는 CRM(Customer Relationship Management: CRM) 이라는 분야인데요, 세일즈포스(Salesforce) 라는 기업이 해당 분야에서 세계적으로 가장 우수한 솔루션을 제공하는 기업이라고 합니다. 클라우드 서비스의 대명사로 AWS가 있는 것 처럼 CRM의 대명사로 세일즈포스가 있다고 생각하면 될 것 같습니다.

제가 지원하려고 하는 청년 CRM101은 앞서 말씀드린 세일즈포스 개발자를 양성하는 과정인데요, 응시료가 비싼 자격증 지원부터 세일즈포스를 활용한 프로젝트까지 세일즈포스 개발자로 커리어를 시작하기에 매우 적합한 교육인것 같아보입니다.

그리고 세일즈포스 교육 자체가 매우 적고 수업료도 비싼데, 오히려 돈을 받으면서 체계적으로 교육을 받을 수 있다는점도 매리트인것 같네요.

CRM101 과정은 두가지 전형이 존재하는데요, 특이하게 프리패스 전형이 존재합니다. 바로 사전학습을 완료하면 서류전형 패스와 면접 가산점이라는 혜택을 준다고 합니다. 해당 과정이 4.5개월로 짧은데에 비해 교육할 내용은 매우 방대하기 때문에 혜택을 주면서까지 사전교육을 장려하는것 같습니다.

저로서는 세일즈포스를 경험해보고 지원 혜택까지 받을 수 있기 때문에 무조건 해야겠다! 싶었습니다 😶

이번 시리즈에서 다뤄볼 내용은 사전교육 과정인 Road to Trailblazer에 대한 내용인데요, 아마 CRM101 과정에 합류하게 된다면 시리즈가 더 길어질수도 있겠네요.

사전교육인 Road to Trailblazer 과정은 총 7일치 과정으로 구성되어 있습니다.

학습 플랜은 하루 분량의 학습 과제를 노션으로 정리해서 제공되며 1) About CRM, 2) Trailhead Study, 3) Basic IT Programming 등으로 구성되어있습니다.

저는 1,2번에 대해서는 거의 문외한이라 아마 About CRM과 Trailhead Study를 중심적으로 글을 정리할 것 같네요.

"AWS와 함께하는" 부분에서 알 수 있듯이 AWS 사옥 방문은 물론 AWS 전문가분들이 제공하는 사전교육도 받을 수 있는 좋은 기회여서 바로 지원하게 되었습니다!

행사일정

1) 사전교육

• 온라인 교육 : 8월 19일(월)~ 8월 23일(토)

• 오프라인 교육 : 8월 24일(토)

2) 해커톤 대회 : 8월 30일(금)~8월 31일(토)

저는 해커톤 참여가 처음이라서 몰랐는데 해커톤 치고는 사전교육이 매우 체계적으로 되어있었습니다! (보통 해커톤에서는 사전교육을 제공하지 않는다고 합니다.)

먼저 해커톤에 참여하기 위해서는 AWS 온라인 교육을 통한 이수증이 필수인데요

저는 기존에 이수했던 교육이라 이수증을 바로 제출할 수 있었습니다.

오프라인 교육

오프라인 교육은 역삼역에 있는 AWS Trainning Center에서 진행되었습니다.

입구부터 호텔 뺨치는 시설에 감탄했습니다😧

교육생들에게 제공된 임시 QR코드로 출입할 수 있었는데 뭔가 회사원이 된 것 같은 기분이었습니다.

사옥 입구도 너무 멋져서 한번 찍어봤습니다.

사전교육은 오전 10시부터 오후 5시까지 두가지 트랙으로 나누어서 진행되었습니다.

• Track 1(10시 ~ 오후 2시) : Bedrock 활용 Chat bot 개발(Gen AI 활용 - 텍스트 생성)

첫번째 트랙은 AWS의 Bedrock이라는 서비스를 통해 Chat bot을 개발해보는 트랙이었습니다.

Amazon Bedrock이란 무엇인가요? Amazon Bedrock은 통합을 통해 주요 AI 회사 및 Amazon의 고성능 파운데이션 모델(FMs)을 사용할 수 있도록 하는 완전 관리형 서비스입니다. 다양한 파운데이션 모델 중에서 선택하여 사용 사례에 가장 적합한 모델을 찾을 수 있습니다.

AWS Bedrock으로 챗봇을 구현하고 Streamlit을 통해 UI를 제공하는데요 개인적으로 강사님께서 수업도 너무 잘해주시고 개발자로서 조언도 많이 해주셔서 재밌게 들었던것 같습니다.

• Track 2(2시 ~ 오후 5시) : Canva 활용 App 개발(Gen AI 활용 - 이미지 생성)

Canva는 그래픽 디자인 플랫폼인데요 저도 공유 PPT 작업할때 종종 사용하곤 합니다. 그런데 여기서 나만의 App 서비스를 만드는 기능도 제공하는건 처음 알았네요!

실습에서 진행한건 Aws의 Lambda를 활용해서 Faceswap 기능을 제공하는 Canva App을 만드는거였는데 해당 실습은 환경설정에서 막혀서 제대로 구현해보지는 못했습니다.🥲

실습했던 내용들이 쓸만한 내용들이 많아서 나중에 따로 정리해볼 계획입니다!

교육이 끝나고 집에 가는데 뭔가 교육내용도 알차고 시설도 너무 좋아서 집에 가는길이 아쉬웠습니다.

제가 사진같은건 잘 안찍는 편인데 오늘은 하루종일 사진만 찍었던것 같네요 ㅎㅎ.. (교육도 열심히 들었습니다)

그래서 알아보던 중 Github에 Readme를 만들어 간단히 자기소개 할 수 있는 방법이 있었습니다!

상당히 심심한 내 깃허브 메인..

README 페이지 만들기

Readme 페이지는 깃허브 프로필을 꾸미는 하나의 레포지토리라고 합니다? 신기하네요 만드는 방법은 간단합니다

먼저 레포지토리 생성으로 들어가서 레포지토리 이름에 자신의 아이디를 입력해줍니다.

및에 고양이 이모티콘과 함께 README를 만들어주는 special 레포지토리 라는 설명이 나옵니다. 신기하죠? 공개 범위를 Public으로 설정하고 "Add a README file"에 체크해준 후 Create repository 눌러줍니다. 자 이제 메인이 README 파일로 바뀌었습니다.

README 꾸미기

자 이제 수정 버튼을 눌러서 본격적으로 README 페이지를 꾸며 보겠습니다. 들어가보면 "Hi there" 부분 아래에 주석 처리 된 부분에 마크다운 양식(?)을 볼 수 있습니다. README는 마크다운 언어와 HTML으로 꾸밀 수 있다고 하네요.

저는 깔끔한게 보기 좋아 보여서 (디자인에 자신이 없는것도 있지만..ㅎㅎ) 마크업 언어 위주로 간단히 작성해보았습니다!

중간중간에 Preview로 디자인 봐가면서 수정해주시면 편합니다!

결과물

이제 조금 덜 심심한 느낌이 드네요😊

찾아보면 화려하게 꾸밀 수 있는 다양한 기능이 있으니 검색을 통해 적용해보시면 되겠습니다!

귀찮으시다면 저처럼 간단하게 정리해놓고 차차 시간 날때마다 꾸며가는것도 나쁘지 않을것 같네요👍

공개 범위 변경

먼저 깃허브 레포지토리에 들어가면 레포지토리 이름 옆에 public 또는 private 으로 되어있는데, 이는 공개 범위를 의미합니다. 즉 private으로 되어있는 레포지토리는 권한이 있는 사용자만 볼 수 있는거죠. 이제 변경을 원하는 레포지토리로 들어가면 상단에 Settings가 보일겁니다. 클릭해줍니다.

Settings 맨 하단에 Danger Zone 이 있습니다. 여기에 Change visibility 를 클릭해주면 됩니다.

레포지토리 삭제

이제 필요없는 레포지토리를 삭제해보겠습니다.

변경할때와 동일하게 삭제할 레포지토리의 Settings로 들어가 가장 하단의 Danger Zone 으로 가줍니다.

몇 가지 확인사항 클릭 후 최종적으로 확인문구를 입력해줍니다.

생각보다 정말 간단하죠?😊