프론트엔드 frontend/웹프로트엔드 기초

html

코딩개발 2023. 7. 29. 11:02
728x90
반응형

<div class="box">박스</div>

<a href="google.com">구글</a>

 

<div></div>는 태그라고 함

class="box" 은 속성이라고 함. 이 class속성을 이용해서 나중에 CSS로 스타일링을 할 수 있음

엘레먼트라고 부름

 

<img src="" />

video

 

<a href="" target="_blank"></a>

target="_blank" -> 새창으로

 

 

 

<table border="1">
  <thead>
    <tr>
      <th>이름</th>
      <th>나이</th>
    </tr>
    </thead>
    <tbody>
      <tr>
        <td>test</td>
        <td>hi</td>
      </tr>
    </tbody>
  </table>

<ol>
  <li>test</li>
  <li>12354</li>
  </ol>
  
  <ul>
  <li>test</li>
  <li>12345</li>
  </ul>

 

 

  텍스트 <input type="text" /></br>
  체크박스 <input type="checkbox" /></br>
  라디오 <label><input type="radio" name="fruit" value="apple"/>Apple</label></br>
  색깔 <input type="color" /></br></br>
  여러 문장 <textarea></textarea></br>
  드랍다운 <select name="name">
  <option value="test">test</option>
  <option value="1234">1234</option>
  </select>

 

  <form>
  <input type="email" placeholder="이메일" /></br>
  <input type="password" placeholder="비밀번호" /></br>
  <button type="submit">
  로그인
  </button>
  </form>

 

https://www.youtube.com/watch?v=50JOpxN0554 

 

 

 

<strong></strong> bold로

<br/>

 

https://www.youtube.com/watch?v=rgI930gqdaY 

 

 

 

<input type="text" maxlength="5" />
  <input type="button" value="PUSH" />
  <input type="date" />

 

  <h1>키우고 싶은 동물 고르기</h1>
  <form action="exam.php" method="POST">
    <input type="text" placeholder="NAME" name="name">
    <br>
    <select name="pet">
      <option vlue="dog"> 강아지</option>
      <option vlue="cat"> 고양이</option>
      <option vlue="parrot"> 앵무새</option>
    </select>
    <br>
    <input type="submit" vlue="전송">
  </form>

https://www.youtube.com/watch?v=eXUxuCR9RKU&list=PLFeNz2ojQZjtQc7mt8E9fNzIh9or34A61&index=15 

<!DOCTYPE html>
<html>
<head>
  <title>HTML, CSS and JavaScript demo</title>
</head>
<body>
<br>
Start your code here
  <table border="1">
  <thead>
    <tr>
      <th>이름</th>
      <th>나이</th>
    </tr>
    </thead>
    <tbody>
      <tr>
        <td>test</td>
        <td>hi</td>
      </tr>
    </tbody>
  </table> 
  
  <ol>
  <li>test</li>
  <li>12354</li>
  </ol>
  
  <ul>
  <li>test</li>
  <li>12345</li>
  </ul>
  
  텍스트 <input type="text" /></br>
  체크박스 <input type="checkbox" /></br>
  라디오 <label><input type="radio" name="fruit" value="apple"/>Apple</label></br>
  색깔 <input type="color" /></br></br>
  여러 문장 <textarea></textarea></br>
  드랍다운 <select name="name">
  <option value="test">test</option>
  <option value="1234">1234</option>
  </select>
  </br></br>

  <form>
  <input type="email" placeholder="이메일" /></br>
  <input type="password" placeholder="비밀번호" /></br>
  <button type="submit">
  로그인
  </button>
  </form>
  </br></br>
  <input type="text" maxlength="5" /></br>
  <input type="button" value="PUSH" /></br>
  <input type="date" />
  </br></br>


  <h1>키우고 싶은 동물 고르기</h1>
  <form action="exam.php" method="POST">
    <input type="text" placeholder="NAME" name="name">
    <br>
    <select name="pet">
      <option vlue="dog"> 강아지</option>
      <option vlue="cat"> 고양이</option>
      <option vlue="parrot"> 앵무새</option>
    </select>
    <br>
    <input type="submit" vlue="전송">
  </form>

</body>
</html>

 

 

 

728x90
반응형