HTML

April 6, 2021

HTML

~웹은 언어들로 구성되어 있다. 가장 크게 3가지로 나누면, HTML, CSS, JavaScript가 있다.

HTML: 뼈대, CSS: 근육, JavaScript: 뇌

HTML : Hypertest Markup Language –> 브라우저에게 컴퓨터의 언어로 content에 대해 알려주는 것

더 많은 tag와 attribute에 대해 알고 싶다면 MDN을 이용하자!!

제목 Tag

제목을 설정해주는 태그로 숫자가 커질수록 글씨 크기가 작아진다.

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

각 content를 정렬해주는 역할을 한다.
ordered는 순서를 표시하고 unordered는 순서를 표시하지 않는다.

<ol>
  <li>beer</li>
  <li>kimchi</li>
  <li>meat</li>
  <li>milk</li>
</ol>

<ul>
  <li>beer</li>
  <li>kimchi</li>
  <li>meat</li>
  <li>milk</li>
</ul>

anchor Tag & Image Tag

태그는 각각 속성 (attribute)를 넣을 수 있다.
href : http reference라고 하며 클릭 시 다른 사이트로 넘겨준다.
taget : 기본값은 self이고, _blank를 누를 땐 새 탭에서 링크가 열리도록 만들어준다.
img : 닫는 태그가 존재하지 않는 ‘자체 태그’ 이다. src에 주소를 넣으면 그 이미지 자체가 생성된다.

<h1>Hello!</h1>
<a href="http://google.com" target="_blank"> go to google</a>
<img
  src="https://encrypted-tbn0.gstatic.com/images?
  q=tbn:ANd9GcSQfPaD3prMPLL_d-3WsNInzcjQFSjoTU5tmmrRi34XBsPpR75qV
  -Z18qQcrCVLoSYcJcs&usqp=CAU"
  alt=""
/>

Image는 외부 링크가 아닌 로컬을 통해서도 가져올 수 있다. (같은 폴더에 있어야 한다.)

screenshot1

html rule / head, body role

html 문서는 다음과 같은 규칙을 가진다.
1. 가장 머리말에 DOCTYPE html을 적어줌으로써 html 문서라는 것을 명시해준다.
2. html 내부에는 head와 body 두가지로 나뉜다. head는 웹사이트의 환경 / 보이지 않는 곳을 만들어준다. body는 웹사이트에서 보여지는 곳을 만든다.
3. head내에 출력을 시킬 순 있다. 하지만 css, javascript를 이용할 때 오류를 낼 수 있으므로 head에선 출력하지 말자.

head와 meta tag

meta 태그에서 meta란? 부가적인 정보를 뜻한다.
meat 태그는 self-closing 태그이다.
meta description을 통해 부가설명을 알려준다. –> 검색 엔진이 검색할 때 이 부분을 찾는다. & title도 그렇 다.
lang : 검색 엔진에게 우리가 어떤 언어를 쓰는 지 알려준다.
head는 브라우저에게 나의 사이트가 어떻게 보이는 지 알려주는 곳이다. 따라서 어떤 브라우저에서 나의 사이트를 찾기위해 head를 먼저 살피고, 각 브라우저, 앱마다 규칙이 있다. ex) Kakao : og:image
link에서 rel 속성은 홈페이지의 아이콘을 나타내주고 title은 홈페이지의 제목 description은 검색했을 때 부가설명으로 나오게 된다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <link
      rel="shortcut icon"
      type="image/x-icon"
      href="https://www.naver.com/favicon.ico?1"
    />
    <meta charset="UTF-8" />
    <meta name="description" content="hi hihihiihihi" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>hello my first homepage</title>
  </head>
  <body>
    <h1>Hello</h1>
    <a href="http://google.com" target="_blank">oh,, shit</a>
  </body>
</html>

Form Tag

다음과 같이 form 내부에 input을 넣어 다양한 표현을 할 수 있다.
input 요소는 다양한 attribute를 가지고 있다. (MDN 참조) ** input의 attribute인 ‘required’의 용도는 true, false를 검증할 때 쓴다. ** input의 용도, 쓰는 법은 MDN 검색을 이용하자 !!

<!DOCTYPE html>
<html lang="kr">
  <head>
    <title>Home - My first website.</title>
  </head>
  <body>
    <form>
      <input required placeholder="name" type="text" name="" id="" />
      <input required placeholder="first" type="text" name="" id="" />
      <input required placeholder="second" type="text" name="" id="" />
      <input required placeholder="Password" type="password" name="" id="" />
      <input type="submit" value="Create Account" />
    </form>
  </body>
</html>

More Tags and IDs

id는 태그 하나 당 하나만 가질 수 있는 고유값이다.
css는 id를 이용해서 스타일을 만들어준다. label 또한 id를 가져와서 지은 것, label을 클릭하면 커서가 올라온다.

<body>
    <form>
      <label for="profile">Profile Photo</label>
      <input id="profile" required placeholder="name" type="text" />

      <label for="first-name">First Name</label>
      <input id="first-name" required placeholder="first" type="text" />

      <label for="second-name">Second Name</label>
      <input id="second-name" required placeholder="second" type="text" />

      <label for="password">Password</label>
      <input id="password" required placeholder="Password" type="password" />

      <label for="website">Website</label>
      <!-- <input id="website" required placeholder="Website" type="url" /> -->
      <input id="website" required placeholder="Website" type="email" />

      <input type="submit" value="Create Account" />
    </form>
  </body>

Semantic HTML

아무런 의미를 가지고 있지 않지만 box를 만들어주는 기능 ex) <div> , , <p>
div는 의미를 가지고 있지 않아 HTML작성 시 가독성이 떨어진다.
따라서 같은 기능을 가지고, 의미를 부여한 semantic tag를 이용한다.

ex)

 <header></header> <!--(머릿말) -->
<main></main>
<footer></footer> <!--(꼬릿말) -->
<address></address>

모두 div로 바꿔줘도 결과는 나온다. 하지만 보고 어려움이 생길 수 있다. 또 다른 tag들은 MDN을 통해 알아보자. 가독성을 위해 semantic tag를 이용하자.

<body>
    <header>
      <h1>hyun soo</h1>
    </header>
    <main>
      <address>123123</address>
    </main>
    <footer></footer>
  </body>

Recap(복습)

html은 뼈대, CSS는 근육, JS는 뇌를 나타낸다.
태그를 열면 다시 닫아줘야 한다.
attribute를 이용해서 태그를 강력하게 만들어준다. 항상 큰따음표(“”)를 이용한다.
태그마다 attribute가 다를 수도 같을 수도 있다.
(ex : id (모든 태그), type (특정 태그), src (특정 태그)
header, main , footer, navigation, sidebar 는 container의 기능을 가지고 div로 대체 가능하다. 의미 파악을 위해 semantic으로 쓴다.
Do not memorize !

Twitter Facebook LinkedIn

Hyuns Kim

HTML

HTML

제목 Tag

anchor Tag & Image Tag

html rule / head, body role

head와 meta tag

Form Tag

More Tags and IDs

Semantic HTML

Recap(복습)

공유하기

참고

JavaScript-Basic Grammer

Deep Mind - Alphacode

노타 코딩테스트 & LG전자 사전점검

[백준] 단어정렬

Hyuns Kim

HTML

제목 Tag

ordered list / unordered list Tag

anchor Tag & Image Tag

html rule / head, body role

head와 meta tag

Form Tag

More Tags and IDs

Semantic HTML

Recap(복습)

공유하기

참고

JavaScript-Basic Grammer

Deep Mind - Alphacode

노타 코딩테스트 & LG전자 사전점검

[백준] 단어정렬