코코아톡 클론코딩(3일차) -1

Posted Feb 1, 2024

By KIM YEONGBEOM

5 min read

내일까지 하면 작심삼일 끝! 내일부터 다시 작심삼일 해보자! 그것이.. 꾸준함이니까..

HTML tag 를 모두 외울 필요도 없고, 외울 수도 없으니 mdn 통해서 그때그때사용법 찾아보는 것이 보다 효율적. 이해하는 게 중요한 거지 tag 몇 개나 외웠는지가 중요한게 아니니까!

  
<p>My name is <abbr title="YEONGBEOM KIM">YBK</abbr></p>
<cite>hello</cite>
<p>I want to play <mark>game</mark> </p>

tag 의 tag 는 abbrieviation attribute 임. content 에 마우스를 올리면 title 의 내용을 보여줌.

  
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <form action="">
    <input type="color">
  </form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <form action="">
    <input required placeholder="Name" type="text" name="" id="">
    <input required placeholder="Last Name" type="text" name="" id="">
    <input required placeholder="Id" type="text" name="" id="">
    <input required placeholder="Password" type="password" name="" id="">
    <input value="create" type="submit" name="" id="">
  </form>
</body>
</html>

이런 식으로 강의에서 form tag를 사용해봤는데, 웹 페이지의 방문자와 상호작용할 수 있는 대부분의 기능을 지원하는 듯? 파일 첨부나, 입력을 받을 수 있는 다양한 칸을 만들 수 있다!

  
<!DOCTYhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <label for="Profile">Profile Photo</label>
  <input type="file" name="" id="Profile">

  <label for="no">nono</label>
  <img src="123.png" alt="" id="no">
</body>
</html>

4.label tag 는 input 과 함께 사용해야 제대로 기능함. 이때, label tag 에서는 for, input tag 에서는 id attribute 가 서로 같아야 label 과 input 이 연결(?)됨. label 의 content 를 클릭하면, 연결된 input 으로 커서를 옮겨줌. img 같은 것이랑은 안 됨.

  
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <label for="url">Please write</label>
    <input placeholder="email" type="email" name="" id="url" />
    <input value="send" type="file" name="" id="url" />
  </body>
</html>


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="">
      <label for="url">Please write</label>
      <input placeholder="email" type="email" name="" id="url" />
      <input value="send" type="file" name="" id="url" />
    </form>
  </body>
</html>

위 box 에서 첫 번째 코드와 두 번째 코드의 차이는?? input 이나 label tag 는 반드시 form 으로 먼저 감싸주고 사용해야함!!! 그렇지 않으면 작동을 안 함.
id attribute 는 tag 마다 unique 해야 함. 첫 번째 코드에서 두 개의 input 모두 id=”url” 으로 동일해서 나중에 css 로 디자인 할 때 문제가 생길 수 있음. → 모든 html tag 는 id 를 가질 수 있음.
semantic 의 의미. 보기만 해도 의미를 짐작할 수 있는 것. 그렇다면, div 태그는 semantic 한가??

  
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="">
      <div>
        <label for="url">Please write</label>
      </div>

      <div>
        <input placeholder="email" type="email" name="" id="url" />
        <input value="send" type="submit" name="" id="url" />
      </div>

    </form>
  </body>
</html>

위 코드를 보면, div tag 가 있는데 어떠한 attr 도 없음. → 의미가 없는 tag. So, <div> is not a semantic tag. div 내의 content 들을 box 에 담는 것인데, 이 box 는 한 줄에 하나 밖에 존재하지 못함. → 이런 기능이 있지만. semantic tag 를 사용하면 코드 가독성이더 좋으니까!!

  
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <h1>THIS IS HEADER</h1>
    </div>
    <div>
      <p>THIS IS MAIN</p>
    </div>
    <div>
      &copy; KYB
    </div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <header>
      <h1>THIS IS HEADER</h1>
    </header>
    <main>
      <p>THIS IS MAIN</p>
    </main>
    <footer>
      &copy; KYB
    </footer>
  </body>
</html>

위 아래 코드 모두 동일한 내용의 웹 페이지를 보여주지만, 아래 코드가 조금 더 웹사이트 구조(어떤 내용을 어디에 넣을지)를 잘 보여준다!

Development, Web

This post is licensed under CC BY 4.0 by the author.

Trending Tags