1. 수업 소개
- 웹 사이트는 어떻게 만드나요?
→ HTML(Hyper Text Markup Language)는 웹사이트에 들어갈 내용을 담당
→ CSS(Cascading Style Sheet)는 웹사이트의 스타일을 담당
- 나의 첫 웹사이트
<!DOCTYPE html>
→ document type이 HTML 즉, HTML이라는 언어로 작성하겠다는 뜻
<html lang="ko">
→ HTML 파일 전체를 감싸는 태그
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
→ 꺾쇠로 단어를 감싼 것을 HTML에서는 태그라고 부른다.
→ 태그는 시작 태그와 종료 태그로 구성된다.
- 1분 만에 웹사이트 런칭하기
→ 내가 만든 HTML 파일은 내 컴퓨터 안에서만 실행된다.
→ 다른 사람들이 나의 웹사이트를 보게 하려면 인터넷에 내가 만든 HTML 파일을 올려야 한다.
(1) 구글에서 netlify라고 검색한다.
netlify는 웹 서비스 배포를 도와주는 클라우드 서비스
(2) 배포하기에서 배포를 하려는 파일을 선택하여 업로드한다.
(3) 변경한 사이트의 이름에 맞춰 주소를 가지고 모바일에서도 접속해보고 pc에서도 접속해보자.2. HTML 시작하기
- 사이트에 이름 붙이기
→ 탭의 이름이 127.0.0.1:5500/index.html인 이유는 사이트의 이름을 붙여주지 않아서
브라우저가 그냥 파일의 이름을 보여주는 것
→ 페이지의 이름은 title이라는 태그를 사용하여 사이트의 이름을 붙여줄 수 있다.index. html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weekly Codeit</title>
</head>
<body>
안녕 HTML
</body>
</html> → title태그는 페이지의 정보를 나타내는 head 태그 안에 있으므로 웹 사이트에서 보여지지 않는다.
→ HTML 파일에서는 화면에 나타나지 않아도 되는 페이지 정보를 담고 있는 head 태그와
안녕 HTML 처럼 화면에 나타나야 하는 내용이 담긴 body태그로 나눠진다.
→ head 태그 안에 title 태그가 있는 것처럼 태그 안의 태그가 있는 것을
하위 태그, 자식 태그라고 부른다.
→ 코드 안에 들여쓰기 즉, Indentation이 되어 있는 이유는 코드를 읽기 좋게 하기 위함이며,
동작에는 아무런 영향을 주지 않아 마음대로 넣을 수 있으나 시작 태그와 종료 태그의 들여쓰기를
일치시키고, 하위 태그는 한 단계 더 들여쓰는 방식으로 작성한다.- 구독 페이지 : 사이트 이름
→ 사이트의 이름을 "Weekly Codeit"로 변경
→ 페이지에 대한 정보랑 페이지 내용을 구분하기 위해서 <head> 태그랑 <body> 태그로 나눈다. <!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weekly Codeit</title>
</head>
<body>
안녕 HTML
</body>
</html>- 한글이 깨져요 !
→ 사파리 브라우저에서는 작성한 코드가 깨져서 나타난다.
브라우저마다 다르지만 글자가 깨져서 이상하게 보이거나 정상적으로 보이는 경우가 있다.
→ 글자가 깨지는 이뉴는 인코딩(Encoding)이 달라서 그런 것
인코딩(Encoding)이란 ?
→ 컴퓨터에서 문자를 저장할 때 숫자 형태로 저장하는데 어떤 숫자가 어떤 문자에 해당하는지
정해놓은 규칙을 인코딩이라고 한다.
→ 인코딩은 여러가지 종류가 있으므로 인코딩을 잘못 사용하면 엉뚱한 문자를 보여준다.
→ <meta charset="UTF-8"> UTF-8은 한글을 지원하는 대표적인 인코딩 방식으로 해당 코드를 작성하면
브라우저 환경이 다르더라도 한글이 깨져서 나타나는 현상을 방지한다.
- 제목
→ 제목은 h1, h2, h3 ... 이런 식으로 태그를 사용하여 작성
→ title은 웹 사이트의 이름을 말하는 태그이고, h1, h2와 같은 제목 태그는 화면에 나타나는 내용을
담은 태그 <!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weekly Codeit</title>
</head>
<body>
<h1>Weekly Codeit</h1>
<h2>생산성을 높여줄 유닉스 커맨드 꿀팁</h2>
<h2>머신 러닝을 통한 추천 시스템 (내용 기반, 협업 필터링)</h2>
<h2>Tips & Tricks: HTML 코드 편하게 입력하는 법</h2>
<h2>코둥이 퀴즈</h2>
</body>
</html>- 구독 페이지 : 제목 넣기
→ 아래 예시 이미지를 참고해서 제목을 넣어주세요.
<!DOCTYPE html>
<html>
<head>
<title>Weekly Codeit 구독하기</title>
<meta charset="utf-8">
</head>
<body>
<h1>Weekly Codeit</h1>
<h2>코드잇이 엄선한 프로그래밍 꿀팁</h2>
<h2>배움의 기쁨을 세상 모두에게. 많은 코둥이들이 구독하고 있어요!</h2>
<h2>코딩이 즐거워지는 뉴스레터, Weekly Codeit</h2>
</body>
</html>
→ 큰 제목은 h1 태그를 사용하여 작성하고, 작은 제목과 하위 제목은 h2, h3, h4...를 사용- 본문 넣기
→ 본문을 넣을 때, 본문의 내용을 태그 없이 그냥 넣어버리면 줄 구분이 되지 않는다.
→ p(paragraph) 태그를 사용하여 본문을 넣어주면 읽기 쉽도록 단락이 나눠저 구분이 잘 된다.
- 구독 페이지 : 본문 넣기
→ 예시 이미지를 참고해서 구독 페이지에 들어갈 본문을 작성
<!DOCTYPE html>
<html>
<head>
<title>Weekly Codeit 구독하기</title>
<meta charset="utf-8">
</head>
<body>
<h1>Weekly Codeit</h1>
<p>
금요일에 만나는 코딩 한 스푼
</p>
<h2>
코드잇이 엄선한 프로그래밍 꿀팁
</h2>
<p>
컴퓨터 개론, 프로그래밍 기초, 업무 자동화 ... 인기 코드잇 강의를 뉴스레터로 만나보세요.
</p>
<p>
유용한 팁과 개발 지식을 매주 금요일 여러분의 메일함으로 보내드려요.
</p>
<h2>
배움의 기쁨을 세상 모두에게.
많은 코둥이들이 구독하고 있어요!
</h2>
<p>
iloveprincess 님 안녕하세요, 5년차 코둥이입니다! 제가 구독 중인 뉴스레터 중 가장 읽기 편하고 재밌어요. 매주 금요일이 기다려지네요 :)
</p>
<p>
코드냠냠 님 뉴스레터 정말 잘 보고 있습니다. 다양한 주제에 대한 소개 덕분에 기술 면접에서도 당황하지 않을 수 있었어요! 항상 감사드립니다.
</p>
<p>
냐리 님 덕분에 프로그래밍 상식이 풍부해지는 느낌임. 깊이있는 내용을 알기 쉽게 소개해줘서 더 좋은듯. 초보 코둥이들에게 추천해요.
</p>
<h2>
코딩이 즐거워지는 뉴스레터,
Weekly Codeit
</h2>
<p>
Weekly Codeit
</p>
<p>
Weekly Codeit 을 아직 구독하지 않으셨다면? 구독 신청 Subscribe 최신 뉴스레터들을 놓치지 않기 위해 weekly@codeit.kr을 메일 주소록에 추가해주세요
</p>
<p>
(주)코드잇 | 서울 중구 청계천로 100 시그니쳐타워 동관 10층 | 수신 거부 Unsubscribe
</p>
</body>
</html>
- 줄 바꿈
→ HTML에서는 기본적으로 줄바꿈이 있더라도 보여지지 않는다.
→ 창이 넓어지면 넓어진 만큼 글을 채워서 보여주고, 창이 좁아지면 글을 넘겨서 보여준다.
→ 원하는 부분에서 줄을 바꾸고 싶다면 br(break line) 태그를 사용한다. <h2>코둥이 퀴즈</h2>
<p>머신 러닝에서 유저에게 유저가 좋아하거나<br>
구매할만할 상품을 추천해 주는 프로그램을<br>
□□ □□□ (이)라고 부른다.
빈 칸에 들어갈 다섯 글자를 답장으로 보내주세요.<br>
선착순 200분께 코드잇 시그니쳐 굿즈를 보내드려요.</p>
→ 이런 식으로 원하는 위치에서 줄이 잘 바뀌어 있는 것을 확인할 수 있다.- 구독 페이지 : 제목에 줄바꿈 넣기
→ 예시 이미지를 참고해서 작은 제목들에 줄 바꿈을 넣어보자.
<!DOCTYPE html>
<html>
<head>
<title>Weekly Codeit 구독하기</title>
<meta charset="utf-8">
</head>
<body>
<h1>Weekly Codeit</h1>
<p>
금요일에 만나는
코딩 한 스푼
</p>
<h2>
코드잇이 엄선한<br>
프로그래밍 꿀팁
</h2>
<p>
컴퓨터 개론, 프로그래밍 기초, 업무 자동화 ...
인기 코드잇 강의를 뉴스레터로 만나보세요.
</p>
<p>
유용한 팁과 개발 지식을 매주 금요일 여러분의 메일함으로 보내드려요.
</p>
<h2>
배움의 기쁨을 세상 모두에게. <br>
많은 코둥이들이 구독하고 있어요!
</h2>
<p>
iloveprincess 님
안녕하세요, 5년차 코둥이입니다! 제가 구독 중인 뉴스레터 중 가장 읽기 편하고 재밌어요.
매주 금요일이 기다려지네요 :)
</p>
<p>
코드냠냠 님
뉴스레터 정말 잘 보고 있습니다. 다양한 주제에 대한 소개 덕분에 기술 면접에서도 당황하지 않을 수 있었어요!
항상 감사드립니다.
</p>
<p>
냐리 님
덕분에 프로그래밍 상식이 풍부해지는 느낌임. 깊이있는 내용을 알기 쉽게 소개해줘서 더 좋은듯.
초보 코둥이들에게 추천해요.
</p>
<h2>
코딩이 즐거워지는 뉴스레터,<br>
Weekly Codeit
</h2>
<p>
Weekly Codeit
</p>
<p>
Weekly Codeit 을 아직 구독하지 않으셨다면? 구독 신청 Subscribe<br>
최신 뉴스레터들을 놓치지 않기 위해 weekly@codeit.kr을 메일 주소록에 추가해주세요
</p>
<p>
(주)코드잇 | 서울 중구 청계천로 100 시그니쳐타워 동관 10층 | 수신 거부 Unsubscribe
</p>
</body>
</html>
- 꺾쇠 기호 넣는 법
→ HTML 문법에서는 꺾쇠 기호(<, >)를 태그 작성 시 사용
페이지 내용에서 꺾쇠를 표현하고 싶을 때에는 어떻게 해야 할까?
<p>
HTML 파일을 작성하려면 DOCTYPE, <html>, <head>, <body> ... 적어야 할 것이 참
많습니다. 이럴때 유용하게 쓸 수 있는 기능이 있는데요. VS Code에서는
!(느낌표)를 입력하고 Tab 키나 Enter 키를 누르면 HTML 코드를 한번에
입력할 수 있답니다!
</p>
→ 위의 코드를 작성 후 확인하면 이미지처럼 꺾쇠가 있는 단어가 사라진다.
왜냐하면 웹 브라우저 입장에서는 꺾쇠가 있는 글자를 태그로 해석했기 때문이다.
→ 꺾쇠를 글자로 입력하고 싶을 때에는
<(앰퍼샌드 엘 티 세미콜론) >(앰퍼샌드 지 티 세미콜론)으로 입력해야 한다.<p>
HTML 파일을 작성하려면 DOCTYPE, <html>, <head>, <body> ...적어야 할 것이 참
많습니다. 이럴때 유용하게 쓸 수 있는 기능이 있는데요. VS Code에서는
!(느낌표)를 입력하고 Tab 키나 Enter 키를 누르면 HTML 코드를 한번에 입력할
수 있답니다!
</p>
- 링크
→ 하이퍼링크라고도 하며, 클릭했을 때 다른 페이지로 넘어가는 것을 링크라고 부른다.
→ 링크는 <a> 태그를 사용하여 넣을 수 있다.
→ href라는 속성을 사용하여 클릭했을 때 어디로 넘어가는지 주소를 넣을 수 있다.
이 때, href라는 것은 속성이고 = 이후의 따옴표 안의 주소는 속성값을 나타난다.
또, href는 hypertext Reference의 약자로 하이퍼텍스트 참조라는 뜻
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weekly Codeit</title>
</head>
<body>
<h1>Weekly Codeit</h1>
<h2>생산성을 높여줄 유닉스 커맨드 꿀팁</h2>
<p>생각만하면 모든게 이루어진다! 꿈 같은 이야기죠? 하지만 유닉스 커맨드를 사용하면 더 이상 꿈이 아니랍니다. 마우스 대신에 유닉스 명령어들을 사용하면 복잡한 일도 한 번에 뚝딱하거든요.
유닉스 커맨드를 사용할 때 알아두면 좋은, 작업 효율성을 UP! UP! 시켜주는 꿀팁 몇 가지를 준비해봤으니까, 한 번 살펴보세요!</p>
<a href="https://blog.codeit.kr/post/6052b25f701df852a9157516">자세히 보기</a>
<h2>머신 러닝을 통한 추천 시스템 (내용 기반, 협업 필터링)</h2>
<p>넷플릭스나 애플 뮤직은 어떻게 영화나 음악을 추천해주는 걸까요? 일단 추천 시스템이란 유저에게 유저가 좋아하거나 구매할 만한 상품을 추천해 주는 프로그램을 의미합니다.
내가 평소에 쓰는 서비스들은 이미 추천 서비스를 사용하고 있을지도 모릅니다. (놀랍죠?) 유저 별로 아마존이나 쿠팡에서 물건들을, 넷플릭스에서 영화들을, 애플 뮤직에서 노래를 보여주는 것. 모두 추천 시스템을 사용해서 첫 화면에 보여주기 때문이죠.
</p>
<a href="https://blog.codeit.kr/post/6054359298b173400407da01">자세히 보기</a>
<h2>Tips & Tricks: HTML 코드 편하게 입력하는 법</h2>
<p>HTML 파일을 작성하려면 DOCTYPE, html, head, body ... 적어야 할 것이 참 많습니다. 이럴때 유용하게 쓸 수 있는 기능이 있는데요. VS Code에서는 !(느낌표)를 입력하고 Tab 키나 Enter 키를 누르면 HTML 코드를 한번에 입력할 수 있답니다!
이건 Emmet 이라고 부르는 문법의 일부인데요. Emmet은 개미라는 뜻이랍니다. 개미는 자기 몸집의 50배나 넘는 물건을 옮길 수 있다는데요. 개미처럼 Emmet의 문법도 짧은 단어만 입력하면 긴 HTML 코드를 뚝딱 만들어 낼 수 있으니까, 한 번 살펴보시는 것도 좋을 거 같네요.
</p>
<h2>코둥이 퀴즈</h2>
<p>머신 러닝에서 유저에게 유저가 좋아하거나<br>구매할만할 상품을 추천해 주는 프로그램을<br>□□ □□□ (이)라고 부른다.
빈 칸에 들어갈 다섯 글자를 답장으로 보내주세요.<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>
- 구독 페이지 : 링크 추가하기
→ "수업 살펴보기"를 누르면 https://codeit.kr/catalog로 이동
→ "후기 더 보기"를 누르면 https://codeit.kr/reviews로 이동
<!DOCTYPE html>
<html>
<head>
<title>Weekly Codeit 구독하기</title>
<meta charset="utf-8">
</head>
<body>
<h1>Weekly Codeit</h1>
<p>
금요일에 만나는
코딩 한 스푼
</p>
<h2>
코드잇이 엄선한<br>
프로그래밍 꿀팁
</h2>
<p>
컴퓨터 개론, 프로그래밍 기초, 업무 자동화 ...
인기 코드잇 강의를 뉴스레터로 만나보세요.
</p>
<p>
유용한 팁과 개발 지식을 매주 금요일 여러분의 메일함으로 보내드려요.
</p>
<a href="https://codeit.kr/catalog">수업 살펴보기</a>
<h2>
배움의 기쁨을 세상 모두에게.<br>
많은 코둥이들이 구독하고 있어요!
</h2>
<p>
iloveprincess 님
안녕하세요, 5년차 코둥이입니다! 제가 구독 중인 뉴스레터 중 가장 읽기 편하고 재밌어요.
매주 금요일이 기다려지네요 :)
</p>
<p>
코드냠냠 님
뉴스레터 정말 잘 보고 있습니다. 다양한 주제에 대한 소개 덕분에 기술 면접에서도 당황하지 않을 수 있었어요!
항상 감사드립니다.
</p>
<p>
냐리 님
덕분에 프로그래밍 상식이 풍부해지는 느낌임. 깊이있는 내용을 알기 쉽게 소개해줘서 더 좋은듯.
초보 코둥이들에게 추천해요.
</p>
<a href="https://codeit.kr/reviews">후기 더 보기</a>
<h2>
코딩이 즐거워지는 뉴스레터,<br>
Weekly Codeit
</h2>
<p>
Weekly Codeit
</p>
<p>
Weekly Codeit 을 아직 구독하지 않으셨다면? 구독 신청 Subscribe<br>
최신 뉴스레터들을 놓치지 않기 위해 weekly@codeit.kr을 메일 주소록에 추가해주세요
</p>
<p>
(주)코드잇 | 서울 중구 청계천로 100 시그니쳐타워 동관 10층 | 수신 거부 Unsubscribe
</p>
</body>
</html>
→ 링크를 추가할 때는 <a>태그를 사용한다.
→ a태그의 href라는 속성으로 이동할 주소를 지정할 수 있다.- 이미지
→ img태그를 사용하여 페이지에 이미지를 넣을 수 있다.
img는 image의 약자이며, src는 source의 줄임말로 출처를 나타낸다.
→ 앞에서 배운 내용과 같이 img 태그는 src라는 속성을 가지고 있으며, 속성에 사진의 주소를 넣으면
사진의 주소는 속성 값에 해당한다.
→ img 태그는 안에 내용이 필요없기 때문에 시작태그 하나짜리로 쓸 수 있다. <!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weekly Codeit</title>
</head>
<body>
<h1>Weekly Codeit</h1>
<img src="https://commons.wikimedia.org/wiki/File:Kim_2011_World_Championship_FS.jpg" alt="">
<h2>생산성을 높여줄 유닉스 커맨드 꿀팁</h2>
<p>생각만하면 모든게 이루어진다! 꿈 같은 이야기죠? 하지만 유닉스 커맨드를 사용하면 더 이상 꿈이 아니랍니다. 마우스 대신에 유닉스 명령어들을 사용하면 복잡한 일도 한 번에 뚝딱하거든요.
유닉스 커맨드를 사용할 때 알아두면 좋은, 작업 효율성을 UP! UP! 시켜주는 꿀팁 몇 가지를 준비해봤으니까, 한 번 살펴보세요!</p>
<a href="https://blog.codeit.kr/post/6052b25f701df852a9157516">자세히 보기</a>
<h2>머신 러닝을 통한 추천 시스템 (내용 기반, 협업 필터링)</h2>
<p>넷플릭스나 애플 뮤직은 어떻게 영화나 음악을 추천해주는 걸까요? 일단 추천 시스템이란 유저에게 유저가 좋아하거나 구매할 만한 상품을 추천해 주는 프로그램을 의미합니다.
내가 평소에 쓰는 서비스들은 이미 추천 서비스를 사용하고 있을지도 모릅니다. (놀랍죠?) 유저 별로 아마존이나 쿠팡에서 물건들을, 넷플릭스에서 영화들을, 애플 뮤직에서 노래를 보여주는 것. 모두 추천 시스템을 사용해서 첫 화면에 보여주기 때문이죠.
</p>
<a href="https://blog.codeit.kr/post/6054359298b173400407da01">자세히 보기</a>
<h2>Tips & Tricks: HTML 코드 편하게 입력하는 법</h2>
<p>HTML 파일을 작성하려면 DOCTYPE, html, head, body ... 적어야 할 것이 참 많습니다. 이럴때 유용하게 쓸 수 있는 기능이 있는데요. VS Code에서는 !(느낌표)를 입력하고 Tab 키나 Enter 키를 누르면 HTML 코드를 한번에 입력할 수 있답니다!
이건 Emmet 이라고 부르는 문법의 일부인데요. Emmet은 개미라는 뜻이랍니다. 개미는 자기 몸집의 50배나 넘는 물건을 옮길 수 있다는데요. 개미처럼 Emmet의 문법도 짧은 단어만 입력하면 긴 HTML 코드를 뚝딱 만들어 낼 수 있으니까, 한 번 살펴보시는 것도 좋을 거 같네요.
</p>
<h2>코둥이 퀴즈</h2>
<p>머신 러닝에서 유저에게 유저가 좋아하거나<br>구매할만할 상품을 추천해 주는 프로그램을<br>□□ □□□ (이)라고 부른다.
빈 칸에 들어갈 다섯 글자를 답장으로 보내주세요.<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>김연아 이미지는 다음 라이선스를 따릅니다.
David W. Carmichael, CC BY-SA 3.0 https://creativecommons.org/licenses/by-sa/3.0, via Wikimedia Commons
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weekly Codeit</title>
</head>
<body>
<h1>Weekly Codeit</h1>
<img src="thumbnail-unix.png" alt="">
<h2>생산성을 높여줄 유닉스 커맨드 꿀팁</h2>
<p>생각만하면 모든게 이루어진다! 꿈 같은 이야기죠? 하지만 유닉스 커맨드를 사용하면 더 이상 꿈이 아니랍니다. 마우스 대신에 유닉스 명령어들을 사용하면 복잡한 일도 한 번에 뚝딱하거든요.
유닉스 커맨드를 사용할 때 알아두면 좋은, 작업 효율성을 UP! UP! 시켜주는 꿀팁 몇 가지를 준비해봤으니까, 한 번 살펴보세요!</p>
<a href="https://blog.codeit.kr/post/6052b25f701df852a9157516">자세히 보기</a>
<img src="thumbnail-machine-learning.png" alt="">
<h2>머신 러닝을 통한 추천 시스템 (내용 기반, 협업 필터링)</h2>
<p>넷플릭스나 애플 뮤직은 어떻게 영화나 음악을 추천해주는 걸까요? 일단 추천 시스템이란 유저에게 유저가 좋아하거나 구매할 만한 상품을 추천해 주는 프로그램을 의미합니다.
내가 평소에 쓰는 서비스들은 이미 추천 서비스를 사용하고 있을지도 모릅니다. (놀랍죠?) 유저 별로 아마존이나 쿠팡에서 물건들을, 넷플릭스에서 영화들을, 애플 뮤직에서 노래를 보여주는 것. 모두 추천 시스템을 사용해서 첫 화면에 보여주기 때문이죠.
</p>
<a href="https://blog.codeit.kr/post/6054359298b173400407da01">자세히 보기</a>
<img src="thumbnail-emmet.png" alt="">
<h2>Tips & Tricks: HTML 코드 편하게 입력하는 법</h2>
<p>HTML 파일을 작성하려면 DOCTYPE, html, head, body ... 적어야 할 것이 참 많습니다. 이럴때 유용하게 쓸 수 있는 기능이 있는데요. VS Code에서는 !(느낌표)를 입력하고 Tab 키나 Enter 키를 누르면 HTML 코드를 한번에 입력할 수 있답니다!
이건 Emmet 이라고 부르는 문법의 일부인데요. Emmet은 개미라는 뜻이랍니다. 개미는 자기 몸집의 50배나 넘는 물건을 옮길 수 있다는데요. 개미처럼 Emmet의 문법도 짧은 단어만 입력하면 긴 HTML 코드를 뚝딱 만들어 낼 수 있으니까, 한 번 살펴보시는 것도 좋을 거 같네요.
</p>
<h2>코둥이 퀴즈</h2>
<p>머신 러닝에서 유저에게 유저가 좋아하거나<br>구매할만할 상품을 추천해 주는 프로그램을<br>□□ □□□ (이)라고 부른다.
빈 칸에 들어갈 다섯 글자를 답장으로 보내주세요.<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>
- 구독 페이지 : 이미지 넣기
→ "코드잇이 엄선한 / 프로그래밍 꿀팁" 제목 아래에는 banner-programming.png라는 이미지
→ "배움의 기쁨을 세상 모두에게. / 많은 코둥이들이 구독하고 있어요!" 제목 아래에는
banner-students.png라는 이미지
<!DOCTYPE html>
<html>
<head>
<title>Weekly Codeit 구독하기</title>
<meta charset="utf-8">
</head>
<body>
<h1>Weekly Codeit</h1>
<p>
금요일에 만나는
코딩 한 스푼
</p>
<h2>
코드잇이 엄선한<br>
프로그래밍 꿀팁
</h2>
<img src="banner-programming.png">
<p>
컴퓨터 개론, 프로그래밍 기초, 업무 자동화 ...
인기 코드잇 강의를 뉴스레터로 만나보세요.
</p>
<p>
유용한 팁과 개발 지식을 매주 금요일 여러분의 메일함으로 보내드려요.
</p>
<p>
<a href="https://codeit.kr/catalog">
수업 살펴보기
</a>
</p>
<h2>
배움의 기쁨을 세상 모두에게.<br>
많은 코둥이들이 구독하고 있어요!
</h2>
<img src="banner-students.png">
<p>
iloveprincess 님
안녕하세요, 5년차 코둥이입니다! 제가 구독 중인 뉴스레터 중 가장 읽기 편하고 재밌어요.
매주 금요일이 기다려지네요 :)
</p>
<p>
코드냠냠 님
뉴스레터 정말 잘 보고 있습니다. 다양한 주제에 대한 소개 덕분에 기술 면접에서도 당황하지 않을 수 있었어요!
항상 감사드립니다.
</p>
<p>
냐리 님
덕분에 프로그래밍 상식이 풍부해지는 느낌임. 깊이있는 내용을 알기 쉽게 소개해줘서 더 좋은듯.
초보 코둥이들에게 추천해요.
</p>
<p>
<a href="https://codeit.kr/reviews">
후기 더 보기
</a>
</p>
<h2>
코딩이 즐거워지는 뉴스레터,<br>
Weekly Codeit
</h2>
<p>
Weekly Codeit
</p>
<p>
Weekly Codeit 을 아직 구독하지 않으셨다면? 구독 신청 Subscribe<br>
최신 뉴스레터들을 놓치지 않기 위해 weekly@codeit.kr을 메일 주소록에 추가해주세요
</p>
<p>
(주)코드잇 | 서울 중구 청계천로 100 시그니쳐타워 동관 10층 | 수신 거부 Unsubscribe
</p>
</body>
</html>
→ 이미지는 <img>태그를 사용하여 넣을 수 있고, 시작 태그 하나만 쓰는 태그
→ src 속성으로 경로를 적으면 원하는 이미지를 넣을 수 있다.- 위키 페이지 만들기
아래의 순서대로 요소를 넣어 주세요.
(1) <title> 태그에 인물 이름
(2) <h1> 태그에서 한글 이름과 줄 바꿈을 하고 괄호로 감싼 영문 이름
(3) <img> 태그에 인물 사진 (인터넷에 올라와 있는 이미지)
(4) <p> 태그에 간단한 설명
(5) 이 인물과 연관 있는 사이트로 링크 (<a> 태그) 한 개
The Royal Society, CC BY-SA 3.0 https://creativecommons.org/licenses/by-sa/3.0, via Wikimedia Commons
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<title>Elon Musk</title>
</head>
<body>
<h1>일론 머스크</h1>
<h1>Elon Musk</h1>
<img src="https://upload.wikimedia.org/wikipedia/commons/3/34/Elon_Musk_Royal_Society_%28crop2%29.jpg">
<p>전기차 기업 <a href="https://www.tesla.com/ko_kr">Tesla</a>의 테크노킹. 민간 우주 기업 SpaceX, 인공지능 기업 OpenAI 등 다양한 분야에서 활약중인 기업인이다.</p>
</body>
</html>
- 영역 나누기
→ 페이지의 내용은 HTML로 작성하고, 스타일은 CSS로 만든다.
→ CSS를 적용할 때 각 태그에다가 적용할 수도 있고, 영역을 나눠놓고 영역에다가 적용할 수도 있다.
→ div 태그와 span 태그를 사용하면 영역을 나눌 수 있다.
→ div 태그는 영역을 나누는 것 말고는 아무런 모양이나 의미가 없다.
쉽게 생각해서 눈에 보이지 않는 박스라고 생각하면 된다. <!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weekly Codeit</title>
</head>
<body>
<div>
<h1>Weekly <span>Codeit</span></h1>
<p>금요일에 만나는 코딩 한 스푼</p>
</div>
<div>
<img src="thumbnail-unix.png" alt="">
<h2>생산성을 높여줄 유닉스 커맨드 꿀팁</h2>
<p>생각만하면 모든게 이루어진다! 꿈 같은 이야기죠? 하지만 유닉스 커맨드를 사용하면 더 이상 꿈이 아니랍니다. 마우스 대신에 유닉스 명령어들을 사용하면 복잡한 일도 한 번에 뚝딱하거든요.
유닉스 커맨드를 사용할 때 알아두면 좋은, 작업 효율성을 UP! UP! 시켜주는 꿀팁 몇 가지를 준비해봤으니까, 한 번 살펴보세요!</p>
<a href="https://blog.codeit.kr/post/6052b25f701df852a9157516">자세히 보기</a>
</div>
<div>
<img src="thumbnail-machine-learning.png" alt="">
<h2>머신 러닝을 통한 추천 시스템 (내용 기반, 협업 필터링)</h2>
<p>넷플릭스나 애플 뮤직은 어떻게 영화나 음악을 추천해주는 걸까요? 일단 추천 시스템이란 유저에게 유저가 좋아하거나 구매할 만한 상품을 추천해 주는 프로그램을 의미합니다.
내가 평소에 쓰는 서비스들은 이미 추천 서비스를 사용하고 있을지도 모릅니다. (놀랍죠?) 유저 별로 아마존이나 쿠팡에서 물건들을, 넷플릭스에서 영화들을, 애플 뮤직에서 노래를 보여주는 것. 모두 추천 시스템을 사용해서 첫 화면에 보여주기 때문이죠.
</p>
<a href="https://blog.codeit.kr/post/6054359298b173400407da01">자세히 보기</a>
</div>
<div>
<img src="thumbnail-emmet.png" alt="">
<h2>Tips & Tricks: HTML 코드 편하게 입력하는 법</h2>
<p>HTML 파일을 작성하려면 DOCTYPE, html, head, body ... 적어야 할 것이 참 많습니다. 이럴때 유용하게 쓸 수 있는 기능이 있는데요. VS Code에서는 !(느낌표)를 입력하고 Tab 키나 Enter 키를 누르면 HTML 코드를 한번에 입력할 수 있답니다!
이건 Emmet 이라고 부르는 문법의 일부인데요. Emmet은 개미라는 뜻이랍니다. 개미는 자기 몸집의 50배나 넘는 물건을 옮길 수 있다는데요. 개미처럼 Emmet의 문법도 짧은 단어만 입력하면 긴 HTML 코드를 뚝딱 만들어 낼 수 있으니까, 한 번 살펴보시는 것도 좋을 거 같네요.
</p>
</div>
<div>
<h2>코둥이 퀴즈</h2>
<p>머신 러닝에서 유저에게 유저가 좋아하거나<br>구매할만할 상품을 추천해 주는 프로그램을<br>□□ □□□ (이)라고 부른다.
빈 칸에 들어갈 다섯 글자를 답장으로 보내주세요.<br>선착순 200분께 코드잇 시그니쳐 굿즈를 보내드려요.</p>
</div>
<div>
<p>Weekly Codeit</p>
<p>(주)코드잇 | 서울 중구 청계천로 100 시그니쳐타워 동관 10층</p>
<p>Weekly Codeit 을 아직 구독하지 않으셨다면? 구독 신청하기</p>
<p>뉴스레터가 보이지 않는다면, weekly@codeit.kr을 메일 주소록에 추가해주세요.</p>
<p>수신 거부 Unsubscribe</p>
</div>
</body>
</html>- HTML 문법 정리
기본 문법
(1) 태그 / Tag
→ HTML에서 태그는 꺾쇠(< 기호랑 > 기호)를 사용하는 문법
→ 태그는 시작 태그와 종료 태그로 내용을 감싸는데, <태그 이름>형태로 쓰고
종료 태그는 </태그 이름> 형태로 쓴다.
ex ) p 태그
<p>
단락은 이렇게 넣습니다.
</p>
ex ) img 태그
<img src="https://example.com/my-image.png">
※ <img>태그를 슬래시와 함께 쓰는 경우, 줄바꿈<br>이나 이미지(img)처럼 안에 내용이 없는
태그는 시작 태그만 사용가능
※ 마지막에 슬래시(/) 기호를 넣어서 하나짜리 태그라는 걸 표시하는 것도 올바른 문법
<img src="https://example.com/my-image.png" />
(2) 속성
→ 시작 태그에 [ 속성 이름 = "속성 값" ] 형태로 사용하는 문법
ex ) <a> 태그의 href 속성
<a href="https://codeit.kr">코드잇</a>
ex ) <img> 태그의 src 속성
<img src="https://example.com/my-image.png">
(3) HTML 파일의 기본 구조
→ 맨 윗줄에는 파일이 HTML 문법을 쓴다는 것을 알려주는 코드
<!DOCTYPE html>
→ 여기서 DOCTYPE은 문서타입(Document Type)이라는 뜻
→ 아래로는 html태그로 감싼 다음에 head와 body 태그로 나눈다.
→ head태그 안에는 페이지에 대한 정보가 들어가고 body 태그 안에는 페이지 내용이 들어간다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
(4) 배운 태그 정리
1. 사이트 이름
→ 웹 브라우저 탭이나 창에 보이는 제목을 정할 수 있다.
→ 페이지 내용이 아닌 페이지에 대한 정보이므로 head 태그 안에 구분하여 넣는다.
<head>
<title>윤동주 서시 - 한국 시 모음</title>
...
</head>
2. 인코딩 정하기
→ 한글을 지원하는 인코딩인 UTF-8을 사용하도록 정하는 코드
→ meta 태그를 사용하여 head 태그 안에 넣어준다.
<head>
<meta charset="utf-8">
...
</head>
3. 제목
→ 제목(Heading)은 제일 큰 것부터 작은 것까지 h1, h2, ..., h6태그를 사용
→ 사이트 이름에 쓰는 title 태그와 헷갈리지 않도록 주의
<h1>서시</h1>
<h2>시인 윤동주</h2>
4. 단락
→ 단락(paragraph)는 p태그를 사용하여 감싼다
→ 코드에서 줄 바꿈은 화면에 나타나지 않고 붙어서 보인다.
<p>
죽는 날까지 하늘을 우러러
한 점 부끄럼이 없기를,
잎새에 이는 바람에도
나는 괴로워했다.
별을 노래하는 마음으로
모든 죽어가는 것을 사랑해야지
그리고 나한테 주어진 길을
걸어가야겠다.
</p>
<p>
오늘 밤에도 별이 바람에 스치운다.
</p>
5. 줄 바꿈
→ HTML은 기본적으로 문장들을 이어서 보여준다.
→ 줄 바꿈(Break Line)은 br이라는 태그를 사용
→ 이 때, 줄 바꿈 태그 안에는 내용이 없으므로 시작 태그 하나만 사용한다.
<p>
죽는 날까지 하늘을 우러러<br>
한 점 부끄럼이 없기를,<br>
잎새에 이는 바람에도<br>
나는 괴로워했다.<br>
별을 노래하는 마음으로<br>
모든 죽어가는 것을 사랑해야지<br>
그리고 나한테 주어진 길을<br>
걸어가야겠다.
</p>
<p>
오늘 밤에도 별이 바람에 스치운다.
</p>
6. 링크
→ 링크는 a태그를 사용
→ href 속성을 사용하여 이동할 주소나 경로를 적어준다.
<a href="https://ko.wikipedia.org/wiki/%EC%84%9C%EC%8B%9C_(%EC%8B%9C)">
위키 문서 보기
</a>
7. 이미지
→ 이미지는 img 태그를 사용한다.
→ src 속성으로 이미지 파일의 주소나 경로를 적어준다.
ex 1. 인터넷에 올라와 있는 사진
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/Yun_Dong-ju.jpg">
※ 위에서 사용한 윤동주 이미지는 이미지는 Public domain 라이선스를 따릅니다.
ex 2. 같은 폴더에 있는 yun-dong-ju.jpg 파일 사용
<img src="yun-dong-ju.jpg">
ex 3. images라는 폴더 안에 있는 yun-dong-ju.jpg 파일 사용
<img src="images/yun-dong-ju.jpg">
8. 영역 나누기
→ div 태그로 여러 태그를 감싸거나 span 태그로 텍스트의 일부만 감싼다.
→ 이렇게 영역을 나누는 이유는 나중에 CSS를 사용할 때 스타일을 적용하는 용도로 사용
<div>
<h1>서시</h1>
<h2>시인 <span>윤동주</span></h2>
</div>
<div>
<p>
죽는 날까지 하늘을 우러러<br>
한 점 부끄럼이 없기를,<br>
잎새에 이는 바람에도<br>
나는 괴로워했다.<br>
별을 노래하는 마음으로<br>
모든 죽어가는 것을 사랑해야지<br>
그리고 나한테 주어진 길을<br>
걸어가야겠다.
</p>
<p>
오늘 밤에도 별이 바람에 스치운다.
</p>
</div>
- HTML 코드를 편하게 입력하는 법
→ VS Code를 열고 빈 HTML 문서에서 느낌표(!) 를 입력하면 아래처럼 자동 완성 창이 나타난다.
→ 이 상태에서 엔터 혹은 탭(Tab)키를 누르거나 마우스로 클릭하면 VS Code가 HTML 기본 코드를 완성
※ 인터넷 익스플로러에서 최신 표준 모드로 보여주는 코드
<meta http-equiv="X-UA-Compatible" content="IE=edge">
※ 모바일 기기에서 보여줄 비율을 조정하는 코드
<meta name="viewport" content="width=device-width, initial-scale=1.0">