[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프(프론트엔드) 4회차

📝 수업 내용

주제 : 웹표준과 HTML5

<!DOCTYPE html>
  <html lang="ko">
  <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>첫 html 페이지</title>
    <style>
      #myHeader {
        background-color: coral;
        padding: 40px;
        text-align: center;
      }

      div {
        border: 1px solid;
      }

      img {
        width: 100px;
        height: 100px;
      }

      a:link{
        color: green;
      }

      a:visited {
        color: purple;
      }

      a:hover{
        color: tan;
      }

      a:active{
        color:coral
      }


    </style>
  </head>
  <body>
    <h1 id="myHeader">my header</h1>
    <!-- h1~h6 -->
    <h3>1. html 제목은 &lt;h1&gt; ~ &lt;h6&gt;태그로 정의됩니다.
      <br>&lt;h1&gt;은 가장 중요한 제목을 &lt;h6&gt;은 가장 중요하지 않은 제목을 정의합니다.
    </h3>
    <div>
      <h1>This is heading 1</h1>
      <h2>This is heading 2</h2>
      <h3>This is heading 3</h3>
    </div>

    <h3>2.단락은 &lt;p&gt;태그로 정의됩니다.</h3>
    <div>
      <p>This is a paragraph.</p>
      <p>This is another paragraph.</p>
    </div>

    <h3>3. 링크는 &lt;a&gt;태그로 정의됩니다.</h3>
    <div>
      <a href="">This is safehomes link</a>
    </div>

    <h3>4. 이미지는 &lt;img&gt; 태그로 정의됩니다. 소스파일(src), 대체 텍스트(alt), 너비 및 높이가 속성으로 제공됩니다.</h3>
    <div>
      <img src="https://search.pstatic.net/common?type=f&size=304x304&quality=95&direct=true&src=http%3A%2F%2Fshop1.phinf.naver.net%2F20210409_107%2F1617952898542dMwx3_JPEG%2F54088515996857622_-609342890.jpeg" alt="">
    </div>

    <!-- ui, li -->
    <h1>장바구니 목록</h1>
    <ul>
      <li>사과</li>
      <li>바나나</li>
      <li>딸기</li>
    </ul>

    <!-- table -->
    <table>
      <th>과일</th>
      <th>수량</th>
      <tr>
        <td>사과</td>
        <td>10</td>
      </tr>
      <tr>
        <td>바나나</td>
        <td>5</td>
      </tr>
      <tr>
        <td>딸기</td>
        <td>3</td>
      </tr>
    </table>

    <!-- form -->
    <form>  
      <label for="name">이름:</label>
      <input type="text" id="name">
      <br>
      <label for="email">이메일:</label>
      <input type="email" id="email">
      <br>
      <label for="password">비밀번호:</label>
      <input type="password" id="password">
      <br>
      <input type="submit" value="가입하기"></input>
    </form>

    <h1 style="background-color: blue;">hello world</h1>
    <p style="background-color: red;">hi hi</p>
    <h1 style="color: red;">hello world</h1>
    <p style="color: blue;">hi hi</p>

    <!-- lick hover active visited -->
    <a href="https://www.udemy.com/" target="_blank">visit udemy!</a>
    <a href="https://www.udemy.com/">send email</a> 
    <button>HTML Tutorial</button>
    <a href="https://www.udemy.com/" target="_blank">visit our html tutorial</a>

    <!-- iframe -->
    <iframe src="demo.html" style="border: none;" title="iframe example"></iframe>
  </body>
  </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>
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
      }

      header {
          background-color: #333;
          color: #fff;
          padding: 20px;
          text-align: center;
      }

      nav {
          background-color: #555;
          color: #fff;
          padding: 10px;
      }

      nav ul {
          list-style-type: none;
          margin: 0;
          padding: 0;
          overflow: hidden;
      }

      nav ul li {
          display: inline-block;
      }

      nav ul li a {
          color: #fff;
          display: block;
          padding: 10px;
          text-decoration: none;
      }

      main {
          margin: 20px;
      }

      footer {
          background-color: #333;
          color: #fff;
          padding: 10px;
          text-align: center;
      }

    </style>
  </head>
  <body>
    <header><h1>웹 사이트 제목</h1></header>
    <nav>
      <ul>
        <li><a href="#">홈</a></li>
        <li><a href="#">소개</a></li>
        <li><a href="#">서비스</a></li>
        <li><a href="#">문의</a></li>
      </ul>
    </nav>
    <main>
      <h2>웹 사이트 내용</h2>
      <p>이곳에 웹 사이트의 내용을 추가하세요</p>
    </main>
    <footer>저작권 2023 웹사이트. all rights reserved.</footer>
  </body>
  </html>

🔥 실습

https://github.com/udemy-team18/230612_practice/tree/yueun

GitHub - udemy-team18/230612_practice: 충돌 테스트

충돌 테스트. Contribute to udemy-team18/230612_practice development by creating an account on GitHub.

github.com

🔎 느낀 점

세이프홈즈 대표이사이신 정동훈 강사님의 첫 수업 날이자 팀원들과 오프라인으로 처음 만나는 날.

오전에는 html의 기본에 대해 이론 수업을 듣고 오후에는 4가지의 실습을 진행했다.

1. 자기소개 페이지 만들기

2. 웅진씽크빅 홈페이지와 웅진IT 홈페이지 태그 분석 후 시맨틱 태그 사용 이유 공부하기

3. 로그인 폼과 메인 페이지 만들기

4. 오늘 만든 실습 페이지 한 페이지로 만들기

팀원과 상의도 하며 정신없이 만드느라 시간이 어떻게 흘러갔는지도 모르겠다.

여러 실습들을 해보고 나니 html에 대해 좀 더 자세히 알게 된 느낌이다.

오늘 우리 팀원들, 오프라인 수강생들을 만나고 나는 앞으로 정말 열심히 해야 한다는 생각이 들었다.

모두의 속도는 다른 만큼 나만의 속도로 페이스를 잃지 말고 묵묵히 걸어가라는 정동훈 강사님의 말씀대로 남들이 아닌 어제의 나와 비교하며 꾸준히 내 길을 나아갈 것이다.🔥🔥🔥🔥🔥

📖 배운 점

1. iframe

iframe 태그는 다른 html 페이지를 삽입할 때 사용한다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/iframe

HTML <iframe> 요소는 중첩 브라우징 맥락을 나타내는 요소로, 현재 문서 안에 다른 HTML 페이지를 삽입합니다.

developer.mozilla.org

2. 내 브랜치 생성 및 팀 깃허브에 올리기

git branch yueun -> yueun에서 작업 -> git add . -> git commit -m "내용" -> git push origin yueun

수업 내용 및 이미지 출처 : [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 정동훈 강사님 강의 자료

—————————————————————————————————————————
본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
—————————————————————————————————————————

[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프(프론트엔드) 5회차 - CSS (0)	2023.06.15
[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프(프론트엔드) 3회차 - Git&Github, 서비스 기획 3 (0)	2023.06.09
[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프(프론트엔드) 2회차 - 서비스 기획 2 (0)	2023.06.08

Yuniverse

티스토리 뷰