[HTML] 태그

태그

📌 태그

: <태그명>content</태그명>

https://developer.mozilla.org/ko/docs/Web/HTML/Element

HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN

 

태그 - <h1></h1> - <h6></h6>

📌 <h1> </h1> - <h6></h>

: 구획 제목을 나타냄.

<h1>This is HTML file</h1>
<h2>This is HTML file</h2>
<h3>This is HTML file</h3>
<h4>This is HTML file</h4>
<h5>This is HTML file</h5>
<h6>This is HTML file</h6>

 

태그 - <ol></ol>, <ul></ul>, <li></li>

📌 list

: 목록

① ordered list : 순서가 있는 목록

② unordered list : 순서가 없는 목록

 

<ol></ol> : ordered list

<ul></ul> : unordered list

<li></li> : list item

<ol>
    <li>국어</li>
    <li>영어</li>
    <li>수학</li>
    <li>과학</li>
</ol>

<ul>
    <li>국어</li>
    <li>영어</li>
    <li>수학</li>
    <li>과학</li>
</ul>

 

태그 - <a></a>

📌 <a></a>

: 링크(anchor : 닻).

 

💡 attribute

: 부가적인 정보.

  link의 경우 attribute가 필요함.

 

📌 attribute

- href(HTTP reference or hyperlink reference) : 이동할 경로를 나타내는 attribute.

- target

  : "_self" : 현재 창에서 열림.

    "_blank" : 새로운 창에서 열림.

<a href="http://www.google.com" target="_blank">link : google.com</a>

 

태그 - <img />

📌 <img />

: 이미지.

 

💡 self-closing tag(자체 닫기 태그)이기 때문에 </img>가 없음.

 

📌 attribute

- src : 이미지 경로 적는 attribute.

 

① 인터넷에 있는 이미지를 띄우는 경우

<img src="data:image/png;base64,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"/>

 

② .html과 같은 폴더 안에 있는 이미지인 경우, 경로를 적어야 함

<img src="dolphin1.jpg">

 

③ .html과 다른 폴더에 있는 이미지인 경우

<img src="img/dolphin1.jpg">

 

태그 - <p></p>

📌 <p></p>

:  하나의 문단을 나타냄.

 

태그 - <pre></pre>

📌 <pre></pre>

:  미리 서식을 지정한 텍스트를 나타내며, HTML에 작성한 내용 그대로 표현함.

 

태그 - <abbr></abbr>

📌 <abbr></abbr>

: 설정한 단어에 마우스를 올리면 title이 뜸.

 

예시

<!DOCTYPE html>
<html lang="kr">
    <head>
        <title>HTML 기본 형식</title>
    </head>
    <body>
        <h1>
            HTML 연습중
        </h1>
        <p>longgggggggggggggggggggggggggggggggggggg text</p>
        <pre>longgggggggggggggggggggggggggggggggggggg text</pre>
        <p>What is <abbr title="this is abbreviation">abbrevaition?</abbr></p>
        <a href="http://google.com" target="_blank">link : google.com</a>
    </body>
</html>

💡 <html></html> attribute : lang

: 구글, 네이버 등과 같은 검색엔진들에 도움을 주기 위해 사용.
  사이트에서 사용하는 주된 언어가 무엇인지 검색엔진에 알려줌.

 

태그 - <form></form>

📌 <form></form>

: 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획.

 

태그 - <input></input>

📌 <input></input>

: 사용자의 데이터를 받을 수 있는 대화형 컨트롤.

 

📌 attribute 

- type : 형식

  : "text" : 텍스트 입력창.

    "file" : 선택할 file 창이 띄워짐. accept로 선택할 파일 형식을 지정할 수 있음.

    "submit" : 제출 버튼이 생성됨. value로 버튼 내용을 변경할 수 있음.

- required : 필수로 입력해야함을 의미함.

- minlength : 최소 글자수를 의미함.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input

<input>: 입력 요소 - HTML: Hypertext Markup Language | MDN

 

태그 - <label></label>

📌 <label></label>

: label 클릭 시 for과 같은 id의 input이 실행됨.

  input과 같이 사용해야 함.

 

💡 id 

: body 안의 모든 태그에 넣을 수 있는 attribute(고유 식별자).
  태그 당 하나의 id만 가질 수 있음.

 

태그 - <div></div>

📌 <div></div>

: 분할하는 태그.

  의미는 없음.

 

태그 - Semantic 태그

📌 Semantic 태그

: <div>와 같은 역할을 하며 대체가 가능함.

  어떤 내용인지 알기 쉬움.

 

📌 Semantic 태그 종류

- <header></header> : 소개 및 탐색에 도움을 주는 콘텐츠를 나타냄.

- <main></main> : body의 주요 콘텐츠.

- <footer></footer> 

예시

<!DOCTYPE html>
<html>
    <head>
        <title>HTML 기본 형식</title>
    </head>
    <body>
        <header>
            <h1>HTML Practice</h1>
        </header>
        <main>
            <form>
                <div>
                    <label for="profile">Profile Photo</label>
                    <input id="profile" type="file" accept="image/*"/>
                </div>
    
                <div>
                    <input required placeholder="Name" type="text"/> 
                    <input required placeholder="Email" type="email"/>
                    <input required placeholder="Website" type="url"/>
                    <input required placeholder="Password" minlength="10" type="password"/>
                </div>
                
                <input type="submit" value="create"/>
            </form>
        </main>
        <footer>
            &copy; 2022 L.Y.J
        </footer>
    </body>
</html>