<!DOCTYPE html>
<html>
    <head>
    <title>Weekly Codeit</title>
    <meta charset="utf-8">
    </head>
    <body>
    <h1>Weekly Codeit</h1>
    <h2>생산성을 높여줄 유닉스 커맨드 꿀팁</h2>
    <p>
        생각만하면 모든게 이루어진다! 꿈 같은 이야기죠? 하지만 유닉스 커맨드를
        사용하면 더 이상 꿈이 아니랍니다. 마우스 대신에 유닉스 명령어들을 사용하면
        복잡한 일도 한 번에 뚝딱하거든요.
    </p>
    <p>보기</a>
        유닉스 커맨드를 사용할 때 알아두면 좋은, 작업 효율성을 UP! UP! 시켜주는
        꿀팁 몇 가지를 준비해봤으니까, 한 번 살펴보세요!
    </p><a>자세히보기</a>
    <h2>머신 러닝을 통한 추천 시스템 (내용 기반, 협업 필터링)</h2>
    <p>
        넷플릭스나 애플 뮤직은 어떻게 영화나 음악을 추천해주는 걸까요? 일단 추천
        시스템이란 유저에게 유저가 좋아하거나 구매할 만한 상품을 추천해 주는
        프로그램을 의미합니다.
    </p>
    <p>
        내가 평소에 쓰는 서비스들은 이미 추천 서비스를 사용하고 있을지도 모릅니다.
        (놀랍죠?) 유저 별로 아마존이나 쿠팡에서 물건들을, 넷플릭스에서
        영화들을, 애플 뮤직에서 노래를 보여주는 것. 모두 추천 시스템을 사용해서 첫
        화면에 보여주기 때문이죠.
    </p>
    <h2>Tips & Tricks: HTML 코드 편하게 입력하는 법</h2>
    <p>
        HTML 파일을 작성하려면 DOCTYPE, &lt;html&gt;, &lt;head&gt;, &lt;body&gt; ... 적어야 할 것이 참
        많습니다. 이럴때 유용하게 쓸 수 있는 기능이 있는데요. VS Code에서는
        !(느낌표)를 입력하고 Tab 키나 Enter 키를 누르면 HTML 코드를 한번에 입력할
        수 있답니다!
    </p>
    <p>
        이건 Emmet 이라고 부르는 문법의 일부인데요. Emmet은 개미라는
        뜻이랍니다. 개미는 자기 몸집의 50배나 넘는 물건을 옮길 수 있다는데요.
        개미처럼 Emmet의 문법도 짧은 단어만 입력하면 긴 HTML 코드를 뚝딱 만들어 낼
        수 있으니까, 한 번 살펴보시는 것도 좋을 거 같네요.
    </p>
    <h2>코둥이 퀴즈</h2>
    <p>
        머신 러닝에서 유저에게 유저가 좋아하거나<br>
        구매할만할 상품을 추천해 주는 프로그램을<br>
        □□ □□□ (이)라고 부른다.
    </p>
    <p>
        빈 칸에 들어갈 다섯 글자를 답장으로 보내주세요.<br>
        선착순 200분께 코드잇 시그니쳐 굿즈를 보내드려요.
    </p>
    <p>Weekly Codeit</p>
    <p>(주)코드잇 | 서울 중구 청계천로 100 시그니쳐타워 동관 10층</p>
    <p>Weekly Codeit 을 아직 구독하지 않으셨다면? 구독 신청하기</p>
    <p>뉴스레터가 보이지 않는다면, weekly@codeit.kr을 메일 주소록에 추가해주세요.</p>
    <p>수신 거부 Unsubscribe</p>
    </body>
</html>
반응형

'웹퍼블리싱' 카테고리의 다른 글

웹사이트 어떻게 만들나요?  (0) 2024.03.11

 

  • root 노드(뿌리 노드): 트리의 시작 노드, 뿌리가 되는 노드를 말합니다. 보통 트리를 표현할 때 위 그림처럼 가장 위에 root 노드를 놓는 방식으로 나타냅니다.

 

  • 부모 노드: 특정 노드의 직속 상위 노드입니다. 노드 G, J, K가 있는 노란색 박스를 살펴보면 G가 J와 K의 부모 노드입니다.

 

  • 자식 노드: 특정 노드의 직속 하위 노드입니다. 부모 노드와 반대되는 개념인데요. 노드 G, J, K가 있는 노란색 박스를 살펴보면 J와 K가 G의 자식 노드입니다.

 

  • 형제 노드: 같은 부모를 갖는 노드입니다. D와 E는 둘다 그 부모가 B죠? 이럴 때 D와 E는 서로 형제 노드입니다.

 

  • leaf 노드 (잎/말단 노드): 자식 노드를 갖고 있지 않은, 가장 말단에 있는 노드입니다. 트리의 끝에 있다고 해서 root(뿌리) 노드와 반대되는 표현으로 leaf(잎) 노드라고 부릅니다. 위 그림에서 노란색 박스로 둘러싼 F가 leaf 노드입니다. F뿐만 아니라 D, H, I, J, K 모두 leaf 노드입니다.

 

  • 깊이: 특정 노드가 root 노드에서 떨어져 있는 거리입니다. 깊이는 해당 노드로 가기 위해서 root 노드에서 몇 번 아래로 내려와야 하는지를 나타냅니다. 예를 들어 위 그림에서 root 노드의 자식 노드인 B와 C는 깊이가 1입니다. D, E, F, G는 깊이가 2이고, H, I, J, K는 깊이가 3입니다. 결국 깊이라는 건 특정 노드가 root 노드로부터 얼마나 멀리 떨어져 있는지를 나타냅니다.

 

  • 레벨: 깊이 + 1. 깊이랑 거의 똑같은 개념입니다. 그냥 깊이에 1을 더한 값이죠. 레벨 1에 있는 노드들, 레벨 2에 있는 노드들… 이런식으로 특정 깊이인 노드들을 묶어서 표현할 때 사용하는 용어입니다.

 

  • 높이: 트리에서 가장 깊이 있는 노드의 깊이입니다. 위 그림의 트리에서는 H, I, J, K가 가장 깊이 있는 노드들이고 그 깊이는 모두 3입니다. 그래서 트리의 높이는 3입니다.

 

부분 트리 (sub-tree): 현재 트리의 일부분을 이루고 있는 더 작은 트리를 말합니다. 위 그림의 트리는 root 노드가 A인 트리입니다. 그런데 이 트리를 좀더 작은 단위로 쪼개보면 더 작은 부분 트리들을 발견할 수 있습니다. 예를 들어 위 그림의 노란색 큰 박스 안을 보세요. 노란색 큰 박스 안에는 ‘C가 root 노드인 트리’가 있는데요. 이런 걸 바로 부분 트리라고 합니다. 지금 C가 A의 오른쪽 자식이죠? 그래서 노란색 큰 박스 안에 있는 부분 트리를 A의 “오른쪽 부분 트리”라고 합니다. 특정 노드를 root 노드라고 생각하고 바라본다면 여러 가지 부분 트리들을 발견할 수 있습니다. 하나의 전체 트리에 여러 부분 트리들이 존재하는 겁니다.

반응형

'개발자알면좋은 내용들' 카테고리의 다른 글

템플릿 변수  (0) 2024.04.25

반응형

'파이썬' 카테고리의 다른 글

파이썬 추상화  (0) 2024.03.08
파이썬 자료형 문자열 불린 정수 소수  (0) 2024.03.08
파이썬 기초 문법  (0) 2024.03.08

HTML 문서

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

 

 

HTML 제목 

<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

</body>
</html>

 

 

 

<!DOCTYPE html>
<html>
<body>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>
반응형

'웹퍼블리싱 > HTML' 카테고리의 다른 글

HTML 문법  (0) 2024.03.19
HTML 기본  (0) 2024.03.12
HTML이란 무엇입니까?  (0) 2024.03.11
<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

</body>
</html>​
HTML 문서
모든 HTML 문서는 문서 유형 선언으로 시작해야 합니다. <!DOCTYPE html>.

HTML 문서 자체는 다음으로 시작합니다. <html> 그리고 그것으로 끝납니다. </html>.

HTML 문서에서 보이는 부분은 다음과 같습니다. <body> 그리고. </body>.

 

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

<!DOCTYPE> 선언문

<!DOCTYPE> 선언은 문서 유형을 나타내며 브라우저에서 웹 페이지를 올바르게 표시하는 데 도움이 됩니다.

선언은 페이지 상단(HTML 태그 앞에)에 한 번만 표시되어야 합니다.

<!DOCTYPE> 선언은 대소문자를 구분하지 않습니다.

HTML5의 <!DOCTYPE> 선언은 다음과 같습니다:

<!DOCTYPE html>

 

 

HTML 제목

HTML 제목은 <h1>에서 <h6> 태그로 정의됩니다.

<h1>은 가장 중요한 제목을 정의합니다. <h6>은 가장 중요하지 않은 제목을 정의합니다:

 

<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

</body>
</html>

 

 

HTML 문단

HTML 단락은 다음과 같이 정의됩니다. <p> 태그

 

<!DOCTYPE html>
<html>
<body>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

 

HTML 소스를 보는 방법

웹 페이지를 보고 "어떻게 저렇게 만들었을까?"라고 궁금해한 적이 있나요?

HTML 소스 코드를 확인하세요:

HTML 페이지에서 CTRL + U를 클릭하거나 페이지를 마우스 오른쪽 버튼으로 클릭하고 '페이지 소스 보기'를 선택합니다. 그러면 페이지의 HTML 소스 코드가 포함된 새 탭이 열립니다.

HTML 요소 검사하기:

요소(또는 빈 영역)를 마우스 오른쪽 버튼으로 클릭하고 '검사'를 선택하면 어떤 요소로 구성되어 있는지 확인할 수 있습니다(HTML과 CSS가 모두 표시됩니다). 열리는 요소 또는 스타일 패널에서 HTML 또는 CSS를 즉석에서 편집할 수도 있습니다.

반응형

'웹퍼블리싱 > HTML' 카테고리의 다른 글

HTML 문법  (0) 2024.03.19
HTML 문서 제목 문단 링크 이미지 버튼 목록  (0) 2024.03.12
HTML이란 무엇입니까?  (0) 2024.03.11

.hwp 파일을 작성하려면 아래아한글, .ppt 파일을 만들려면 파워포인트 프로그램같이 파일을 열고 편집할 수 있는 프로그램이 필요한데요. 우리도 본격적으로 시작하기 전에 필요한 프로그램 몇 가지를 설치해야한다 

 

 

웹사이트를 만들 때는 기본적으로 .html 형식의 파일을 만드는데요. HTML 파일을 편집한 다음에 웹 브라우저에서 열면 우리가 평소에 보는 웹사이트처럼 화면에서 볼 수 있습니다.

 

  코드를 작성하는 데 사용할 에디터(편집기) 프로그램이랑, HTML 파일을 열어서 보여줄 웹 브라우저가 필요합니다. 다양한 선택지가 있지만  혼란을 덜기 위해서 VS Code와 크롬을 사용하겠습니다

 

VS Code는 전문적으로 프로그램을 만드는 개발자들도 많이 사용하는 편집기

 

 

VS Code 설치하기

그럼, 먼저 VS Code 를 설치해 봅시다. VS Code는 Visual Studio Code의 약자인데, 구글 같은 검색 사이트에서 VS Code 로 검색하면 쉽게 찾을 수 있으실 겁니다.

아마 맨 위에 뜨는 대표 사이트로 들어가면 메인 화면에 곧바로 내가 사용 중인 운영체제(윈도우즈, 맥)에 맞는 다운로드 버튼이 나올 겁니다. 이걸 눌러서 설치하시면 됩니다.

 

 

 

 

크롬 브라우저 설치하기

크롬은 구글에서 만든 웹 브라우저인데요. 대중적으로 많이 사용하는 브라우저기 때문에  이 브라우저를 사용할 겁니다.

검색 사이트에서 Chrome 또는 한글로 크롬을 검색하면 위쪽에 대표 사이트가 나오는데요. 들어가면 VS Code 사이트처럼 자신이 사용하는 운영체제(윈도우즈, 맥)에 맞는 다운로드 버튼이 나옵니다.

버튼을 클릭하면 다운로드가 진행되고, 설치 프로그램의 안내에 따라서 크롬을 설치하시면 됩니다.

 

 

 

반응형
  • CSS는 Cascading Style Sheets의 약자입니다.
  • CSS는 HTML 요소를 화면에 표시하는 방법을 설명합니다. 종이, 또는 다른 미디어에서
  • CSS는 많은 작업을 절약합니다. 레이아웃을 제어할 수 있습니다. 한 번에 여러 개의 웹 페이지
  • 외부 스타일시트는 CSS 파일에 저장됩니다.

CSS는 우리가 웹 페이지를 스타일링하는 데 사용하는 언어입니다.

 

 

 

CSS를 사용하는 이유

CSS는 디자인, 레이아웃을 포함하여 웹 페이지의 스타일을 정의하는 데 사용됩니다. 그리고 다양한 장치와 화면 크기에 대한 디스플레이의 변화.

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

실행

 

CSS 구문

 

 

선택기는 스타일을 지정하려는 HTML 요소를 가리킵니다.
선언 블록에는 세미콜론으로 구분된 하나 이상의 선언이 포함됩니다.
각 선언에는 콜론으로 구분된 CSS 속성 이름과 값이 포함됩니다.
여러 CSS 선언은 세미콜론으로 구분되며 선언 블록은 중괄호로 둘러싸여 있습니다.

 

 

이 예제에서는 모든 <p> 요소가 가운데 정렬되고 텍스트 색상이 빨간색으로 표시됩니다:


<!DOCTYPE html>
<html>
<head>
<style>
p {
  color: red;
  text-align: center;
} 
</style>
</head>
<body>

<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>

</body>
</html>

 

p는 CSS의 선택기입니다(스타일을 지정하려는 HTML 요소인 <p>를 가리킴).
color는 속성이고red은 속성 값입니다.
text-align은 속성이고 center는 속성 값입니다.

 

반응형

  • HTML은 하이퍼 텍스트 마크업 언어를 나타냅니다.
  • HTML은 웹 페이지를 만들기 위한 표준 마크업 언어입니다.
  • HTML은 웹 페이지의 구조를 설명합니다.
  • HTML은 일련의 요소로 구성됩니다.
  • HTML 요소는 브라우저에 내용을 표시하는 방법을 알려줍니다.
  • HTML 요소는 "This is aheading", "This is a heading"과 같은 내용을 레이블로 지정합니다. 는 단락, "이것은 링크입니다" 등입니다.

 

간단한 HTML 문서

 

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

실행

 

<!DOCTYPE html> 선언은 정의합니다. 이 문서가 HTML5 문서라는 것.
 <html> 요소는 HTML의 루트 요소입니다. 페이지입니다.
 <head> 요소에 대한 메타 정보가 포함되어 있습니다. HTML 페이지
<title> 요소는 다음에 대한 제목을 지정합니다. HTML 페이지(브라우저의 제목 표시줄 또는 페이지의 탭에 표시됨)
 <body> 요소는 다음을 정의합니다. 문서 본문은 다음과 같은 모든 가시적인 내용을 위한 컨테이너입니다. 제목, 단락, 이미지, 하이퍼링크, 표, 목록 등
 <h1> 요소는 큰 제목을 정의합니다.
 <p> 요소는 단락을 정의합니다.

 

 

 

HTML 요소란?

HTML 요소는 시작 태그, 일부 내용 및 끝 태그로 정의됩니다.

<tagname>콘텐츠가 여기로...</tagname>

HTML 요소는 시작 태그부터 끝 태그까지 모든 것입니다.

<h1>마이. 첫 번째 제목</h1>
<p저의 첫 단락.</p>

 

참고: 일부 HTML 요소에는 콘텐츠가 없습니다(<br>과 같이). 원소) 이러한 요소를 빈 요소라고 합니다. 빈 요소에는 끝 태그가 없습니다

 

 

웹 브라우저

웹 브라우저(Chrome, Edge, Firefox, Safari)의 목적은 HTML 문서를 읽고 표시하는 것입니다. 정확하게

브라우저는 HTML 태그를 표시하지 않지만 이 태그를 사용하여 문서를 표시하는 방법을 결정합니다.

 

 

HTML 페이지 구조

다음은 HTML 페이지 구조를 시각화한 것입니다.

 

 

참고 : <본문> 섹션 내의 내용 브라우저에 표시됩니다. <title> 요소 내부의 내용은 다음과 같습니다. 브라우저의 제목 표시줄이나 페이지 탭에 표시됩니다.

 

 

반응형

'웹퍼블리싱 > HTML' 카테고리의 다른 글

HTML 문법  (0) 2024.03.19
HTML 문서 제목 문단 링크 이미지 버튼 목록  (0) 2024.03.12
HTML 기본  (0) 2024.03.12

+ Recent posts