Daniel Kim

Daniel Kim

반갑습니다:)

HTML : Challenge [2]

Date:

카테고리:

태그:

What is Tag

HTML Tag란?

Goal

브라우저에게 a~b까지의 컨텐츠는 무엇인지 알려주기 위한 코드다!
여기서 a, b가 tag

즉, HTML tag 사이에 넣는 Text는 브라우저에게 어떻게 보여줄지 알려주는 역할을 한다.

<h1> 이란, header no 1을 의미한다. 닫을떈 </h1>
<h2></h2>
...
<h6></h6> 까지 존재한다.

<ul></ul> 내 text는 리스트의 정보가 된다.
<li></li> 는  list item으로 리스트내의 아이템이 된다.

<!-- 따라서 사용시에는 아래와 같이 사용한다. -->

<ul>
    <li> ```</li>
</ui>

<ui></ui>는 unordered list이다.  
<ol></ol>이 Ordered list이다.

Tags : Anchor

HTML Tag 중 a, href는 링크를 담당한다.

<!-- a는 Anchor의 약자로 링크를 의미하는 tag이다. -->
<a>Text</a> Text '만' 보여준다

<a>tag 내에 링크 주소를 삽입시, attribute tag가 필요하다.   

<!-- > href  는 Hyperlink Reference 의 약자로 링크 내용을 삽입시킨다. -->
<a href="http://google.com">Go to google.com</a>

<!-- > target의 default는 _self이다 .  이를 _blank로 바꾸면 새창에서 링크를 열 수 있다. -->
<a href="https://google.com" target=_blank> Go to google.com</a>

<img>태그는 '/' 로 닫지 않는다.  
<img>는 Self closing tag로 구성된다 (Text가 없기 때문)  
따라서 사용시에는 <img /> 로 사용한다.   

<img src="https://cdn.shopify.com/s/files/1/0580/5214/9415/files/Social_media_sharing_image_1200x675-1.jpg?v=1683719130"/>

<!-- 로컬 이미지를 추가할경우, 경로를 입력해주면 된다. -->
<img src="local_image.extension"/>

Tags : Body

HTML Body는 실제로 보여주는 요소로 구성된다.

HTML 작성 요령

HTML 문서의 작성 형태가 존재한다. 모든 HTML 문서는

<!DOCTYPE html>

로 시작한다.
이는 브라우저에게 TEXT파일이 아닌 HTML파일 임을 알려주는 역할을 한다.
그 다음은 아래와 같다.

<!DOCTYPE html>
<html>
    <head>
        ...
        여기에는 브라우저, 웹 사이트의 환경 설정에 대한 내용으로 구성된다. 
        (ex) title
        <title>Home - My first website.</title>
    </head>
    <body>
        ...
        여기에는 사용자가 볼 수 있는 내용으로 구성된다.
    </body>
</html>

브라우저에서 보여질 모든 내용들은 BODY안에 있어야 한다.

Tags : Title

  1. Title은 웹사이트의 제목을 보여준다.

  2. Meta : 부가적 요소를 의미한다.

    • charset : 문자의 인코딩 방식을 의미한다.
    • name : 부가적인 정보를 의미한다.
    • content : 부가적인 정보의 내용을 의미한다.
    • lang : 사이트에 사용되는 언어를 표기하는 meta. (번역 등 사용을 위함)
    • Descrtiption : title 하단 표시되는 정보
    • link : 웹사이트의 아이콘을 설정할 수 있음.
    • og:… : 다른 플랫폼, 어플에서 사용되는 메타 데이터

Tags : Others

<abbr></abbr> : abbriation 마우스를 올리면 설명이 나오는 태그. title이 요소다.
<cite></cite> : 기울임 표시  
<p></p> : paragraphs. (Container)

등 수많은 HTML 태그가 있지만, MDN에서 찾아보는게 낫다.
+) HTML은 못생긴게 당연, 꾸미는건 CSS!

Tags : Form

HTML Form은 말그대로 Form.

Tags : Label

  1. label 은 input과 같이 사용해야 된다.
  2. label의 for attribute와 input id attribute는 동일해야 된다.
  3. id 는 unique identity. 따라서 한 tag에는 하나의 id만 존재해야 된다.
<form>
    <label for="profile">Name</label>
    <input id="profile">'

<form></form> : 사용자에게 정보를 추가하는 레이아웃
<input ~/> : 사용자에게 정보를 받는 곳.

Input Attributes

placeholder : 사용자에게 입력을 유도하는 문구 submit : 제출 버튼 > value : Change Submit button text required : 필수 입력

Tags : Semantic

HTML의 철학..?!

Semantic Tag

사용하지만 의미가 없는 tags

  1. div : division, 박스
<div>
    <label ... ></label>
    <input ../>
</div>

HTML 코드 자체를 묶어주는 역할

  1. header : 해당 페이지의 제목을 보여준다는 tag. (작동은 없음)
<body>
    <header>
        <h1> Times </h1>
    </header> 
</body>
  1. main : 해당 페이지의 메인을 보여준다는 tag. (작동은 없음)
<body>
    <main>
        <p> Times </p>
    </main>
</body>
  1. footer : 해당 페이지의 하단을 보여준다는 tag. (작동은 없음)
<footer>
    &copy; 2021 Times
</footer>
  1. span : 짧은 text를 의미하는 tag
  2. 문단인 text는 p tag가 어울린다.

따라서 Semantic HTML은 의미를 전달하기 위한 표시 tag라고 이해하면 된다.

✏️ 개인 공부 기록용 블로그입니다! 틀린 부분이 있으면 언제든지 댓글로 알려주세요!
👍 항상 감사합니다!

HTML 카테고리 내 다른 글 보러가기

댓글 남기기

최근 글 10 개 :)