https://www.codeit.kr/topics/intro-to-web-publishing
간단히 웹 사이트를 만드는 방법을 배우고 html, css개념과 자주 사용하는 태그를 배웠다!
수업 소개
웹사이트를 만드는 방법
- HTML, CSS 가 웹사이트를 만드는 언어
- HTML : 사이트의 내용을 작성
- CSS(cascading style sheet) : 웹사이트에 들어갈 스타일을 담
필요한 프로그램
.html 형식의 파일을 만들고 웹 브라우저에서 열면 우리가 평소에 보는 웹사이트를 화면에서 볼 수 있음.
1. VS Code
.html 파일을 만들 에디터 프로그램
2. 크롬
웹 브라우저
웹사이트 런칭
Netlify 사이트 활용.
HTML 시작하기
.html파일의 기본 구조
<!DOCTYPE html>
<html>
<head>
</head>
<body>
안녕 html!
</body>
</htm>
가장 먼저 DOCTYPE html 로 시작후
head와 body로 나뉨.
head -> 페이지에 대한 정보
body -> 페이지 내용
두 파트는 위의 정보를 가지고 있음.
<강의 들으며 작성한 코드>
<!DOCTYPE html>
<html>
<head>
<title>
Weekly Codeit
</title>
<meta charset="utf-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
</head>
<body style="color : #737373; font-family: Poppins,'Noto Sans KR', sans-serif; ">
<div style="background-color : #7542e0; text-align: center; padding: 20px">
<h1 style="color : #ffffff; font-weight: 300; text-align: center; "> Weekly <span style="font-weight: 700;">Codeit</span></h1>
<p>금요일에 만나는 코딩 한 스푼</p>
</div>
<div style="padding: 40px 20px;">
<div style="width : 560px; margin:0 auto">
<img src="thumbnail-unix.png" style="width :100%;">
<h2 style="color : #2e2e2e; font-size: 20px">생산성을 높여줄 유닉스 커맨드 꿀팁</h2>
<p>
생각만하면 모든게 이루어진다! 꿈 같은 이야기죠?
하지만 유닉스 커맨드를 사용하면 더 이상 꿈이 아니랍니다.
마우스 대신에 유닉스 명령어들을 사용하면 복잡한 일도 한 번에 뚝딱하거든요.
</p>
유닉스 커맨드를 사용할 때 알아두면 좋은, 작업 효율성을 UP! UP!
시켜주는 꿀팁 몇 가지를 준비해봤으니까, 한 번 살펴보세요!
<p>
<a href="https://codeit.kr">자세히 보기</a>
</div>
</div>
<div style="background-color: #fbfbff; padding: 40px 20px;">
<div style="width : 560px; margin:0 auto">
<img src="thumbnail-machine-learning.png" style="width :100%">
</p>
<h2>머신 러닝을 통한 추천 시스템 (내용 기반, 협업 필터링)</h2>
<p>
넷플릭스나 애플 뮤직은 어떻게 영화나 음악을 추천해주는 걸까요?
일단 추천 시스템이란 유저에게 유저가 좋아하거나 구매할 만한 상품을 추천해 주는 프로그램을 의미합니다.
</p>
<p>
내가 평소에 쓰는 서비스들은 이미 추천 서비스를 사용하고 있을지도 모릅니다. (놀랍죠?) 유저 별로 아마존이나 쿠팡에서 물건들을, 넷플릭스에서 영화들을, 애플 뮤직에서 노래를 보여주는 것.
모두 추천 시스템을 사용해서 첫 화면에 보여주기 때문이죠.
</p>
<a href="https://codeit.kr">자세히 보기</a>
</div>
</div>
<div style="padding: 40px 20px;">
<div style="width:560px; margin:0 auto ">
<img src="thumbnail-emmet.png" style="width :100%">
<h2 style="color : #2e2e2e;font-size: 20px ">Tips & Tricks: HTML 코드 편하게 입력하는 법</h2>
<p>
HTML 파일을 작성하려면 DOCTYPE, html, head, body ... 적어야 할 것이 참 많습니다.
이럴때 유용하게 쓸 수 있는 기능이 있는데요.
VS Code에서는 !(느낌표)를 입력하고 Tab 키나 Enter 키를 누르면 HTML 코드를 한번에 입력할 수 있답니다!
</p>
이건 Emmet 이라고 부르는 문법의 일부인데요.
Emmet은 개미라는 뜻이랍니다. 개미는 자기 몸집의 50배나 넘는 물건을
옮길 수 있다는데요. 개미처럼 Emmet의 문법도 짧은 단어만 입력하면 긴 HTML 코드를 뚝딱
만들어 낼 수 있으니까, 한 번 살펴보시는 것도 좋을 거 같네요.
</div>
</div>
<div style="background-color: #fbfbff; text-align: center; padding: 40px 20px; ">
<div style="width:560px; margin:0 auto;">
<h2 style="color : #2e2e2e; font-size: 20px; ">코둥이 퀴즈</h2>
<p style="background-color: #f6f1ff; color: #7844e8; padding: 16px; margin:32px;">
머신 러닝에서 유저에게 유저가 좋아하거나<br> 구매할만할
상품을 추천해 주는 프로그램을<br> □□ □□□ (이)라고 부른다.
</p>
<p>
빈 칸에 들어갈 다섯 글자를 답장으로 보내주세요.
선착순 200분께 코드잇 시그니쳐 굿즈를 보내드려요.
</p>
</div>
</div>
<div style="background-color: #46415a; color: #ffffff; text-align: center;padding: 40px 20px; margin:0 auto;">
<p>Weekly <span style="font-weight: 700;">Codeit</span></p>
<p>(주)코드잇 | 서울 중구 청계천로 100 시그니쳐타워 동관 10층</p>
<p>Weekly Codeit 을 아직 구독하지 않으셨다면? <a href="subscribe.html" style="color: #ffffff;">구독 신청하기</a></p>
<p>뉴스레터가 보이지 않는다면, weekly@codeit.kr을 메일 주소록에 추가해주세요.</p>
<p>수신 거부 Unsubscribe</p>
</div>
</body>
</html>
수업에서 배운 태그들
태그 사용 예시
<태그 속성 : 속성값>내용</태그>
head 에 작성하는 태그 >
title : 웹 브라우저의 탭, 창에 보이는 제목
meta : 인코딩 정하기 <meta charset="utf-8">
body 에 작성하는 태그 >
h1~h6 : 제목. 가장 큰 제목 h1 , 가장 작은 제목 h6
p : 단락. 줄바꿈 반영 x
<br> : 줄바꿈. only 시작태그만 있음.
a : href속성에 이동할 경로 작성하면 선택시 경로로 이동해줌.
img : 이미지. src 속성 - 이미지 파일 주소 / 경로
div, span : 영역 나누기
CSS 시작하기
태그에 스타일을 적용하려면 style 속성을 사용
ex) <div style=" color: #272928; background-color: #eeeeee ">
style 여러 개 작성하려면 ; 로 구분하면 됨.
강의에서 배운 CSS 속성들
background-color : 배경색 설정
color : 글자색 설정
font-family : Poppins, 'Noto Sans KR', sans-serif
*구글에서 폰트 가져오기.
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
원하는 폰트 선택 후, 'get embed code ' 클릭해 해당 코드를 <head> 부분에 입력
font-size : 글자 크기. 픽셀로 설정16px
font-weight : 글자 굵기. 100~900까지 100단위.
너비와 높이 : width, height
안쪽 여백 : padding
바깥 여백 : margin
완성하기
페이지 연결하기
<p>Weekly Codeit 을 아직 구독하지 않으셨다면? <a href="subscribe.html" >구독 신청하기</a></p>
다른 페이지 모두 vscode에 넣고 링크로 연결하면 된다!
끄읕