๐ŸŽจ Frontend/HTML & CSS

HTML - ์—ฐ์Šต ๋ฌธ์ œ(์ง€์›์„œ, ์ฃผ๋ฌธํ•˜๊ธฐ ํผ ๋งŒ๋“ค๊ธฐ)

kongmi 2023. 3. 9. 18:21

1๋ฒˆ ๋ฌธ์ œ

์กฐ๊ฑด

  • ํผ ์š”์†Œ๋ฅผ ์‚ฝ์ž… ํ•  ๋•Œ <label> ํƒœ๊ทธ ์‚ฌ์šฉ
  • ‘์ด๋ฆ„'ํ•„๋“œ๋Š” ํ…์ŠคํŠธ ํ•„๋“œ๋กœ ์‚ฝ์ž…ํ•˜๊ณ  ‘๊ณต๋ฐฑ์—†์ด ์ž…๋ ฅํ•˜์„ธ์š”'๋ผ๋Š” ํžŒํŠธ ํ‘œ์‹œ
  • ‘์—ฐ๋ฝ์ฒ˜' ํ•„๋“œ๋Š” ์ „ํ™”๋ฒˆํ˜ธ์— ๋งž๋Š” ํ•„๋“œ๋กœ ์‚ฝ์ž…
  • ‘์ง€์› ๋™๊ธฐ'๋Š” ํ…์ŠคํŠธ๋ฅผ ์—ฌ๋Ÿฌ ์ค„ ์ž…๋ ฅ ํ•  ์ˆ˜ ์žˆ๋Š” ํ…์ŠคํŠธ ์˜์—ญ ํ•„๋“œ๋กœ ์‚ฝ์ž…
  • ํ…์ŠคํŠธ ์˜์—ญ์˜ ๊ธ€์ž ์ˆ˜๋Š” 70์ž, ํ™”๋ฉด์— ํ‘œ์‹œํ•  ์ค„ ๊ฐœ์ˆ˜๋Š” 5๊ฐœ๋กœ ์ง€์ •
  • ๋ฒ„ํŠผ์€ <input> ํƒœ๊ทธ๋‚˜ <button> ํƒœ๊ทธ๋ฅผ ์ด์šฉํ•ด ๋งŒ๋“ค๊ธฐ

์˜ˆ์‹œ

์ฝ”๋“œ

<!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>์—ฐ์Šต๋ฌธ์ œ2</title>
  <style>
    .container {
      width: 560px;
      border: 1px solid black;
      padding: 20px 40px;
    }
    .detail {
      margin: 4px 40px;
    }
  </style>
</head>
<body>
  <!-- ๋ฐ”๊นฅ ํ‹€์„ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด div ํƒœ๊ทธ ๋„ฃ๊ธฐ (style์€ class ์ •์˜)-->
  <!-- ๊ธฐ๋ณธ ์—ฌ๋ฐฑ๋“ค์ด ์žˆ์–ด์„œ ์Šคํƒ€์ผ ๋‚ ๋ฆฌ๊ณ  ํ•ด๋ณด์ž -->
  <div class="container">
    <h1>ํ”„๋ก ํŠธ์•ค๋“œ ๊ฐœ๋ฐœ์ž ์ง€์›์„œ</h1>
    <p>HTML, CSS, Javascript์— ๋Œ€ํ•œ ๊ธฐ์ˆ ์  ์ดํ•ด์™€ ๊ฒฝํ—˜์ด ์žˆ๋Š” ๋ถ„์„ ์ฐพ์Šต๋‹ˆ๋‹ค.</p>
    <hr>
    <form action="#">
      <h4>๊ฐœ์ธ์ •๋ณด</h4>
      <div class="detail">
        <label for="name">์ด๋ฆ„</label>
        <input type="text" id="name" placeholder="๊ณต๋ฐฑ์—†์ด ์ž…๋ ฅํ•˜์„ธ์š”.">
      </div>
      <div class="detail">
        <label for="tel">์—ฐ๋ฝ์ฒ˜</label>
        <input type="text" id="tel">
      </div>
      <h4>์ง€์›๋ถ„์•ผ</h4>
      <div class="detail">
        <input type="radio" name="field" id="publish" value="1">
        <label for="publish">์›นํผ๋ธ”๋ฆฌ์‹ฑ</label>
      </div>
      <div class="detail">
        <input type="radio" name="field" id="front" value="2">
        <label for="front">ํ”„๋ก ํŠธ์•ค๋“œ</label>
      </div>
      <div class="detail">
        <input type="radio" name="field" id="mobile" value="3">
        <label for="mobile">๋ชจ๋ฐ”์ผ์•ฑ</label>
      </div>
      <h4>์ง€์›๋™๊ธฐ</h4>
      <textarea name="desc" id="" cols="70" rows="5" placeholder="๋ณธ์‚ฌ ์ง€์› ๋™๊ธฐ๋ฅผ ๊ฐ„๋žตํžˆ ์จ ์ฃผ์„ธ์š”.">
      </textarea>
      <button type="submit">์ ‘์ˆ˜ํ•˜๊ธฐ</button>
      <button type="reset">๋‹ค์‹œ์“ฐ๊ธฐ</button>
    </form>
    
  </div>
</body>
</html>
  • class ์ง€์ •ํ•ด์„œ style ์ ์šฉํ•˜๊ธฐ
  • div ํƒœ๊ทธ๋กœ ๋ธ”๋ก(?) ๋‚˜๋ˆ„๊ธฐ
  • ์ถ”ํ›„ ์„œ๋ฒ„๋กœ ๋ฐ์ดํ„ฐ ๋ณด๋‚ด๊ธฐ ์œ„ํ•œ form ํƒœ๊ทธ ๊ฐ์‹ธ๊ธฐ

2๋ฒˆ ๋ฌธ์ œ

์กฐ๊ฑด

  • ์ฃผ๋ฌธ ์ƒํ’ˆ์€ readonly
  • ๋ฐฐ์†ก์ง€ ์ฃผ์†Œ๋Š” ํ•„์ˆ˜ ์‚ฌํ•ญ

์ฝ”๋“œ

<!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>์—ฐ์Šต๋ฌธ์ œ 3๋ฒˆ</title>
  <style>
    label {
      display: inline-block;
      width: 100px;
      margin-bottom: 8px;
    }
    input {
      width: 300px;
      height: 24px;
      margin-bottom: 10px;
    }
    input[type="date"] {
      width: 150px;
    }
    button {
      width: 150px;
      height: 40px;
      margin-left: 10px;
      margin-right: 10px;
    }
    .btn {
      margin-top: 20px;
      display: flex;
      justify-content: center;
    }
    span {
      font-size: 80%;
    }
  </style>
</head>
<body>
  <h1>์•„์ดํŒจ๋“œ ์ฃผ๋ฌธํ•˜๊ธฐ</h1>
  <form action="#">
    <fieldset>
      <legend>๋ฐฐ์†ก ์ •๋ณด</legend>
      <div>
        <label for="product">์ฃผ๋ฌธ ์ƒํ’ˆ</label>
        <input type="text" id="product" value="์•„์ดํŒจ๋“œ 12.9์ธ์น˜" readonly>
      </div>
      <div>
        <label for="name">์ด๋ฆ„</label>
        <input type="text" id="name" autofocus>
      </div>
      <div>
        <label for="address">๋ฐฐ์†ก ์ฃผ์†Œ</label>
        <input type="text" id="address" required>
      </div>
      <div>
        <label for="mail">์ด๋ฉ”์ผ</label>
        <input type="text" id="mail">
      </div>
      <div>
        <label for="tel">์—ฐ๋ฝ์ฒ˜</label>
        <input type="text" id="tel" placeholder="ํ•˜์ดํ”ˆ ๋นผ๊ณ  ์ž…๋ ฅํ•ด ์ฃผ์„ธ์š”.(01012345678)">
      </div>
      <div>
        <label for="date">๋ฐฐ์†ก์ผ ์ง€์ •</label>
        <input type="date" id="date">
        <span>(์ฃผ๋ฌธ์ผ๋กœ๋ถ€ํ„ฐ ์ตœ์†Œ 3์ผ ์ดํ›„)</span>
      </div>
    </fieldset>
    <div class="btn">
      <button type="submit">์ฃผ๋ฌธํ•˜๊ธฐ</button>
      <button type="submit">์ทจ์†Œํ•˜๊ธฐ</button>
    </div>
  </form>
</body>
</html>
  • ์ผ๋ถ€๋ถ„๋งŒ style ์ ์šฉํ•˜๊ธฐ
    ์˜ˆ์‹œ) input [type="date"] {}
์ €์ž‘์žํ‘œ์‹œ ๋น„์˜๋ฆฌ ๋ณ€๊ฒฝ๊ธˆ์ง€ (์ƒˆ์ฐฝ์—ด๋ฆผ)