[LG헬로비전 DX DATA SCHOOL 4기] 오리엔테이션, HTML 기본 태그 (241230)

mini_bang·2025년 1월 2일

LG헬로비전 DX DATA SCHOOL 4기

목록 보기

1/36

LG헬로비전 DX DATA SCHOOL 4기 OT(24.12.30)

LG헬로비전의 주요 프로젝트 및 프로그램에서 제공될 데이터 소개
강사님의 조언
HTML 기본 태그와 예제

LG헬로비전의 주요 프로젝트 및 프로그램에서 제공될 데이터 소개

1. 주요 프로젝트

VOD 추천 시스템
- 개요: 디지털 상품 사용자의 시청 패턴을 분석해 개인화된 VOD 콘텐츠를 추천.
- 적용 데이터:
  - 총 97개 변수(메타데이터 포함).
  - 260만 세탑박스 사용자의 데이터.
- 운영 방식:
  - 모델 튜닝: 2~3주마다.
  - 모델 업데이트: 6개월 주기.
  - 성과 분석: 추천 콘텐츠 열람 여부, 구매 전환율 분석.
- 특징:
  - 50~70대 연령층을 주요 고객으로 설정.
  - 추천 콘텐츠 성과에 따라 마케팅 전략 조정(예: 쿠폰 발행).
TPS(Churn Prediction) 데이터 활용
- 목적: 고객 이탈 가능성 예측(헤지 스코어링) 및 사전 대응.
- 적용 데이터:
  - 고객의 이용 기간, 추가 서비스 여부 등 약 35개 변수.
  - 개인정보 제외, 단방향 암호화된 키값 사용.
- 활용 방법:
  - 이탈 가능성이 높은 고객 대상 맞춤형 액션(예: 할인 제공).
- 현업 연계:
  - 이탈률 감소 및 고객 유지율 향상.

2. 프로젝트 진행에 있어서 제공되는 데이터

데이터 크기: 약 30GB(11개월치 데이터).
개인정보보호 규정에 따라 필터링 및 암호화 후 제공.
데이터 융합 가능성:
- 공공 데이터, 예를 들어 MBTI 데이터 등과의 결합으로 더 나은 분석 가능.

3. 교육 및 당부

참여자 격려: 높은 경쟁률을 통과한 만큼 자부심과 열정을 가지고 참여할 것.
학습 전략:
- 적극적인 질문과 피드백 요청.
- 프로젝트 중 다양한 데이터 융합 아이디어 실험.
목표:
- 6~7개월간의 교육 과정을 성공적으로 마치고 실질적인 역량 강화.

4. LG헬로비전 소개

소개:
- 국내 최대 케이블 TV 사업자.
- 초고속 인터넷, 가전 렌탈 등 다양한 라이프스타일 서비스 제공.
- 지역 채널 운영 및 지역사회와의 소통 강화.
목표:
- 고객 일상의 질 향상.
- 지역민과의 상생 및 성장.

강사님의 조언

학습 태도:
- 비전공자도 노력과 집중으로 충분히 성과를 낼 수 있음.
- "피 터지게 노력한 적 있는지"를 자문하며 진지하게 임할 것.
학습 전략:
- 집중 시간: 9시~6시까지 최대한 집중, 그 외 시간은 휴식을 통해 재충전.
- 주말 활용: 쉬면서 에너지를 비축해 월요일부터 최상의 컨디션 유지.
- 협업과 질문: 모르는 부분은 주저하지 말고 강사나 동료에게 질문.
교육 환경 관리:
- 프로그램 내 연애 지양(개인 간 갈등과 성추행 방지).
- 상호 존중과 예의를 바탕으로 협력적 분위기 조성.
면접 준비:
- 복잡한 개념을 쉽게 설명하는 능력 필요(예: 유치원생에게 함수를 설명할 수 있는가?).
- 단순 암기보다 개념의 본질적 이해를 중시.
경쟁 상황:
- 동기간 뿐 아니라, 외부에서도 경쟁 심화 예상(6개월 내 약 3천 명 교육 수료).
- 차별화된 실력을 갖추기 위한 철저한 준비 강조.
코딩테스트 준비와 면접:
- 코딩테스트 준비는 매우 중요.(기초를 탄탄하게)
- 면접 질문 예시:
  - "교육을 듣는 6개월 동안 어땠나요?"
  - "힘들었다면 어떻게 해결했나요?"(해결 과정이 중요)

강의와 학습의 성공은 집중력, 끈기, 그리고 협력적 태도에 달려 있습니다. 6개월이라는 짧은 기간 동안 최대한의 성과를 얻기 위해 스스로에게 엄격히, 하지만 체계적으로 학습 계획을 세우고 실행해야 합니다.

HTML 기본 태그와 예제

[! + enter]를 하면 기본적인 코드 뼈대를 생성 가능하다.

1. 이미지와 하이퍼링크 삽입

하이퍼링크(<a> 태그)
- href 속성을 사용해 링크를 연결합니다.
- 링크 텍스트나 이미지를 감싸서 클릭 가능한 요소를 만듭니다.
이미지 삽입(<img> 태그)
- src 속성을 사용하여 이미지 파일의 경로를 지정합니다.
- 경로는 상대경로(현재 파일 기준)와 절대경로(전체 경로)로 지정할 수 있습니다.

// 적용 예시
<a href="https://www.example.com"> Example
    <img src="./example.jpg">
</a>

주석: 으로 작성하며, HTML 문서에서 설명이나 비활성화된 코드를 포함할 때 사용됩니다.

// 실습 코드
<!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> <!--이렇게 하면 주석을 달 수 있다.-->
    <a href="https://www.naver.com"> 네이버
    <!--./네이버.jpg(상대경로), C:\Users\user\Downloads\네이버.jpg(절대경로)-->
    <img src="./네이버.jpg"></a>    
    <br> <!--br : break-- 단순히 HTML에서 줄바꿈을 할 때 사용된다.-->

    <a href="https://www.google.com"> 구글
    <img src="./구글.png"></a>
    <!--이렇게 head와 body로 연결된다.-->
</body>
</html>

2. p태그와 h1~h6태그

헤딩 태그(<h1> ~ <h6>):
- 텍스트의 제목을 나타냅니다.
- 숫자가 작을수록 더 중요한 제목을 의미하며, 크기도 커집니다.
단락 태그(<p>):
- 텍스트를 단락으로 나눌 때 사용합니다.

// 적용 예시
<h1>안녕하세요, HTML!</h1>
<p>이 페이지는 p태그와 h1 태그만 포함되어 있습니다.</p>

// 실습 코드
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>간단한 HTML</title>
</head>
<body>
    <h1>안녕하세요, HTML!</h1>
    <h2>안녕하세요, HTML!</h2>
    <h3>안녕하세요, HTML!</h3>
    <h4>안녕하세요, HTML!</h4>
    <h5>안녕하세요, HTML!</h5>
    <p>이 페이지는 p태그와 h1 태그만 포함되어 있습니다.</p>
</body>
</html>

3. 강조 텍스트와 기울임꼴

<em> 태그:
- 의미적으로 중요한 텍스트를 강조할 때 사용합니다.
- 브라우저에서 기본적으로 기울임꼴로 표시되지만, 추가적으로 검색엔진 최적화(SEO)에도 유리합니다.
<i> 태그:
- 단순히 기울임꼴을 적용하는 데 사용합니다.
- 의미적 강조는 없으며, 스타일링 목적에 가깝습니다.

// 적용 예시
<p>HTML에서 <em>강조</em>하고 싶은 텍스트를 표현할 때 사용합니다.</p>
<p>HTML에서 단순히 <i>기울임꼴</i>을 적용하고 싶을 때 사용합니다.</p>

// 실습 코드
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>em과 i태그 예시</title>
</head>
<body>
    <h1>em 태그와 i 태그와 차이</h1><!--<b></b>를 사용하면 볼드체를 사용할 수 있음-->
    
    <h2>1. em 태그</h2>
    <p>HTML에서 <em>강조</em>하고 싶은 텍스트를 표현할 때 사용합니다.</p>
    <p>예를 들어, <em>중요한 메세지</em>를 강조해야 할 때 유용합니다.</p>

    <h2>2. i 태그</h2>
    <p>HTML에서 단순히 <i>기울임꼴</i>을 적용하고 싶을 때 사용합니다.</p>
    <p>예를 들어, 책 제목 <i>데미안</i> 또는 라틴어 단어 <i> et cetera</i>를 표시할 때 적합합니다.</p>
</body>
</html>

4. 순서가 있는 목록과 항목

순서가 있는 목록(<ol> 태그):
- 항목이 순서를 가지는 리스트를 만듭니다.
- type 속성을 사용하여 숫자 대신 문자나 로마숫자를 사용할 수 있습니다.
  - type="A": A, B, C...
  - type="a": a, b, c...
  - type="I": I, II, III...
  - type="i": i, ii, iii...
목록 항목(<li> 태그):
- 각 리스트의 항목을 나타냅니다.
- <li> 태그는 <ol>뿐만 아니라 순서 없는 목록(<ul>)에도 사용됩니다.

// 적용 예시
<ol>
    <li> HTML 배우기 </li>
    <li> CSS 배우기 </li>
    <li> JavaScript 배우기 </li>
</ol>
<ol type="A">
    <li> 첫 번째 항목 </li>
    <li> 두 번째 항목 </li>
    <li> 세 번째 항목 </li>
</ol>

// 실습 코드
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ol태그와 li태그 예시</title>
</head>
<body>
    <h1>순서가 있는 목록 예시</h1>

    <h2>1. 기본 순서 있는 목록</h2>
    <ol>
        <li> HTML 배우기 </li>
        <li> CSS 배우기 </li>
        <li> JavaScript 배우기 </li>
    </ol>
    <h2>2. 중첩된 순서 있는 목록</h2>
    <ol>
        <li>프로그래밍 언어
            <ol>
                <li>파이썬</li>
                <li>자바스크립트</li>
                <li>자바</li>
            </ol>
        </li>
        <li> 데이터베이스
            <ol>
                <li>MySQL</li>
                <li>MongoDB</li>
            </ol>
        </li>
    </ol>
    <h2>3. 순서 스타일 변경</h2>        <!--ol보다는 li를 많이 사용함-->
    <ol type="A">
        <li> 첫 번째 항목 </li>
        <li> 두 번째 항목 </li>
        <li> 세 번째 항목 </li>
    </ol>
    
</body>
</html>

정리

태그	설명	속성 및 주요 기능
`<a>`	하이퍼링크를 생성합니다.	`href`: 링크 주소 지정. `target="_blank"`: 새 탭에서 열기.
`<img>`	이미지를 삽입합니다.	`src`: 이미지 경로 지정. `alt`: 이미지 대체 텍스트.
`<h1>`~`<h6>`	제목(헤딩)을 정의합니다. `<h1>`은 가장 큰 제목, `<h6>`은 가장 작은 제목.	크기와 중요도를 나타냄.
`<p>`	단락을 정의합니다.	텍스트를 논리적으로 나눌 때 사용.
`<em>`	중요한 텍스트를 강조합니다.	브라우저에서 기본적으로 기울임꼴로 표시. SEO 친화적.
`<i>`	단순히 텍스트를 기울임꼴로 표시합니다.	의미적 강조 없이 스타일링 목적.
`<ol>`	순서가 있는 목록을 정의합니다.	`type`: 순서 스타일 지정. 기본값은 숫자, `A`, `a`, `I`, `i` 등으로 변경 가능.
`<ul>`	순서가 없는 목록을 정의합니다.	항목에 불릿 포인트 사용.
`<li>`	목록 항목을 정의합니다.	`<ol>`과 `<ul>` 내에서 사용.
`<!-- ... -->`	주석을 작성합니다.	HTML 코드에 대한 설명을 추가하거나 비활성화된 코드를 표시.
`<br>`	줄바꿈을 생성합니다.	단독으로 사용, 추가적인 속성 없음.