HTML | HTML의 태그들

14876 단어 htmlTILTIL

HTML이란?

HTML(HyperText Matkup Language)
웹사이트를 만드는 가장 기초가 되는 마크업 언어
웹페이지의 내용와 구조를 담당하는 언어
브라우저에게 정보를 어떤 형식으로 보여주어야 하는지를 전달해주는 역할

<head> 안의 태그와 속성들

<title> : 탭 제목 표시
<meta> : 문서에 대한 정보를 넣어주는 역할
<link>

<link rel="stylesheet" href="style.css">

<body> 안의 태그와 속성들

<h1> ~ <h6> : 폰트 크기, heading, 콘텐츠의 중요도 차이

<strong> : 강조(bold)
<b> : bold
<em> : 강조(italic)
<i> : italic

<b>는 시각적으로만 강조되는 반면 <strong>은 실제로 페이지 내 중요한 부분으로 브라우저에게 알려주는 역할을 하게 되며 이는 웹 접근성에 큰 기여를 한다. 이는 <i>와 <em> 태그에서도 동일하게 적용된다.

<u> : underline
<br> : 줄바꿈, 종료태그X
<hr> : 수평줄

<ol> : ordered list
<ul> : unordered list
<il> : list

<ol>
  <li>Head east on Prince St</li>
  <li>Turn left on Elizabeth</li>
</ol>

<ul>
  <li>Cookies</li>
  <li>Milk</li>
</ul>

<p> : paragragh
<span> : generic container : new line (block level)
<div> : generic container : same line (inline container)

<span>과 <div>의 차이
CSS 효과를 적용할 때 span은 inline, div는 block

  • Inline elements fit in alongside other elements
  • Block level elements take up a whole "block" of space

<img> : image, 종료태그X

# 웹상의 이미지
<img src=“http://url”>
# 같은 폴더 내 이미지
<img src=“untitled.png”>
<img src="cat_image.png" alt="cat">

alt 속성 : 이미지를 불러오지 못했을 때 보이는 설명

<video>

<video src="test-video.mp4" controls>
  Video not supported
</video>

controls : 컨트롤러
시작태그와 종료태그 사이의 내용은 동영상을 불러오지 못했을 때 보이는 설명

<a> : link

# 웹페이지로 이동
<a href="https://www.wikipedia.org/" target="_blank">This Is
A Link To Wikipedia</a>
<a href="https://www.wikipedia.org/"><img src="logo.jpg">
Click this image</a>
# 같은 폴더 내 파일로 이동
<a href="contact.html">Contact</a>
# 같은 페이지 내 이동
<p id="top">This is the top of the page!</p>
<a href="#top">This is A Link To the top of the page</a>

target 속성 : 새로운 탭을 생성하여 웹페이지 이동
img 태그를 사이에 넣으면 이미지를 누르면 웹페이지 이동

<table> 

<table border="1">

    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Breed</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Rusty</td>
            <td>2</td>
            <td>Mutt</td>
        </tr>
        <tr>
            <td>Wyatt</td>
            <td>13</td>
            <td>Golden</td>
        </tr>
    </tbody>

</table>

종료태그가 없는 태그들
<br> <hr> <img> <input> <link> <meta>

백준 - 달팽이는 올라가고 싶다 [2869]
chrome 크로스 로컬 파일 읽기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage