[22-23 동계 모각코] 3회차 목표 및 결과

vvon_joon·2023년 2월 2일
html모각코프론트엔드
0

(22-23) Winter Study

목록 보기
4/7

목표

3회차: 23/02/02 16:00 ~ 20:00
계획: HTML 기본 정리
목적: React 사용을 위함
방향: HTML의 기본 문법을 정리하고 간단한 웹페이지를 만들어보기

결과

기본 문법

태그(Tag)

  • HTML에서 꺾쇠(<>)를 사용하는 문법
  • 시작 태그<tag name>, 종료 태그</tag name> 형태로 내용을 감쌈
  • e.g.
<p>
  paragraph
</p>
<img src="img address or directory">

속성

  • 시작 태그에 속성 이름="속성 값" 형태로 사용
  • 태그의 속성을 지정
  • e.g.
<a href="https://naver.com">네이버</a>

HTML 기본 형태

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>
  • (!를 입력하고 enter 치면 위와 같은 기본 코드가 생성됨)
  • <!DOCTYPE html>: document type
  • <html>: html 태그
  • <head>: head 태그, 페이지의 정보를 담음(웹페이지 상에는 그 내용이 거의 드러나지 않음)
  • <body>: body 태그, 페이지의 내용이 들어감
  • meta charset="UTF-8: 한글을 지원하는 UTF-8 인코딩을 사용하도록 설정

사이트 이름

<head>
  <title>Title</title>
  ...
</head>
  • head 안에 작성
  • head의 내용 중 표면에 드러나는 정보

제목

<body>
  <h1>1st_head</h1>
  <h2>2nd_head</h2>
  ...
</body>
  • 제목 내용을 작성
  • <h1>부터 <h6>까지 글씨 크기 순으로 있음

단락(Paragraph)

<body>
  <p>
    paragraph
    ...<br>
    ...
  </p>
  ...
</body>
  • 단락을 나타냄
  • 코드에서의 줄 바꿈은 기본적으로 웹페이지에 반영되지 않음
  • 줄 바꿈(Break Line)은 <br>로

링크

<a href="https://naver.com">네이버</a>
  • 이동할 주소 설정
  • 태그 안의 내용은 하이퍼링크 처리 됨

이미지

<img src="img web address or directory">
  • 이미지의 웹 주소 혹은 디렉토리를 통해 설정

영역 나누기

<div>
  <h1>서시</h1>
  <h2>시인 <span>윤동주</span></h2>
</div>
<div>
  <p>
    죽는 날까지 하늘을 우러러<br>
    한 점 부끄럼이 없기를,<br>
    잎새에 이는 바람에도<br>
    나는 괴로워했다.<br>
    별을 노래하는 마음으로<br>
    모든 죽어가는 것을 사랑해야지<br>
    그리고 나한테 주어진 길을<br>
    걸어가야겠다.
  </p>
  <p>
    오늘 밤에도 별이 바람에 스치운다.
  </p>
  • 기본적으로 <div> 태그 사용
  • 부분적으로 텍스트 일부를 감쌀 때는 <span> 태그 사용
  • 영역을 나눠놓으면 CSS로 스타일링 할 때 용이

Newsletter 웹페이지 만들어보기

코드

  • CSS를 HTML 파일과 같이 적용
  • 다음 글에서 CSS에 대해 정리하고, 따로 CSS 파일을 만든 웹페이지를 만들어볼 예정
<!DOCTYPE html>
<html>
  <head>
    <title>Weekly News</title>
    <meta charset="utf-8">
    <meta name="description" content="금요일에 만나는 뉴스">
    <meta property="og:title" content="Weekly News">
    <meta property="og:url" content="https://weekly-newsletter.netlify.app/">
    <meta property="og:type" content="website">
    <meta property="og:image" content="">
    <meta property="og:description" content="유닉스 명령어, 추천 시스템, 그리고 HTML 코드 꿀팁들을 공유합니다.">
    <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@400;700&family=Poppins:wght@400;600&display=swap" rel="stylesheet">
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-HQ9HBSCZ3H"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'G-HQ9HBSCZ3H');
    </script>
  </head>
  <body style="color: #737373; font-family: 'Poppins', 'Noto Sans KR', sans-serif; margin: 0">
    <div style="background-color: #7542e0; text-align: center; padding: 20px">
      <h1 style="color: #ffffff; font-weight: 300">Weekly <span style="font-weight: 700">News</span></h1>
      <p style="color: #c1b7ff">금요일에 만나는 뉴스</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>
        <p>
          유닉스 커멘드를 사용할 때 알아두면 좋은, 작업 효율성을 
          UP!UP! 시켜주는 꿀팁 몇 가지를 준비해봤으니까, 한 번 
          살펴보세요!
        </p>
        <a href="https://naver.com">자세히 보기</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%">
        <h2 style="color: #2e2e2e; font-size: 20px">머신 러닝을 통한 추천 시스템 (내용 기반, 협업 필터링)</h2>
        <p>
          넷플릭스나 애플 뮤직은 어떻게 영화나 음악을 추천해주는 걸까요? 일단 추천 
          시스템이란 유저에게 유저가 좋아하거나 구매할 만한 상품을 추천해 주는 
          프로그램을 의미합니다.
        </p>
        <p>
          내가 평소에 쓰는 서비스들은 이미 추천 서비스를 사용하고 있을지도 모릅니다.
          (놀랍죠?) 유저 별로 아마존이나 쿠팡에서 물건들을, 넷플릭스에서 
          영화들을, 애플 뮤직에서 노래를 보여주는 것. 모두 추천 시스템을 사용해서 첫 
          화면에 보여주기 때문이죠.
        </p>
        <a href="https://naver.com">자세히 보기</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, &lt;html&gt;, &lt;head&gt;, &lt;body&gt; ... 적어야 할 것이 참 
          많습니다. 이럴 때 유용하게 쓸 수 있는 기능이 있는데요. VS Code에서는 
          !(느낌표)를 입력하고 Tab 키나 Enter 키를 누르면 HTML 코드를 한번에 입력할 
          수 있답니다!
        </p>
        <p>
          이건 Emmet이라고 부르는 문법의 일부인데요. Emmet은 개미라는 
          뜻이랍니다. 개미는 자기 몸집의 50배나 넘는 물건을 옮길 수 있다는데요. 
          개미처럼 Emmet의 문법도 짧은 단어만 입력하면 긴 HTML 코드를 뚝딱 만들어 낼 
          수 있으니까 한 번 살펴보시는 것도 좋을 거 같네요.
        </p>
        <a href="https://naver.com">자세히 보기</a>
      </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>
          빈 칸에 들어갈 다섯 글자를 답장으로 보내주세요.<br>
          선착순 200분께 굿즈를 보내드려요.
        </p>
      </div>
    </div>
    <div style="background-color:#46415a; color: #ffffff; text-align: center; padding: 40px 20px">
      <p>Weekly <span style="font-weight: 700">News</span></p>
      <p>Weekly News를 아직 구독하지 않으셨다면? <a href="subscribe.html" style="color: #ffffff">구독 신청하기</a></p>
      <p>수신 거부 Unsubscribe</p>
    </div>
  </body>
</html>

결과

Weekly Newsletter

profile
vvon_joon
김찬호 화이팅
이전 포스트

[22-23 동계 모각코] 2회차 목표 및 결과

다음 포스트

[22-23 동계 모각코] 4회차 목표 및 결과

0개의 댓글