HTML - 1

HTML(Hypertext Markup Language)

HTML은 브라우저에게 웹사이트의 content가 어떻게 구성되어 있는지 설명할 때 사용한다.

<tag>content</tag>

👉 tag 참고
https://developer.mozilla.org/en-US/docs/Web/HTML/Element

✔ <h1></h1>

<h1>content</h1>
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>까지 있다.

✔ <ol></ol> (ordered list)

번호가 매겨진 목록으로 나온다.

<ol>
  <li>mix flour</li>
  <li>baking powder</li>
  <li>sugar</li>
  <li>salt</li>
  <li>milk</li>
</ol>

1. mix flour
2. baking powder
3. sugar
4. salt
5. milk

✔ <ul></ul> (unordered list)

번호가 안 매겨지고 번호 대신 앞에 불릿(•)으로 나온다.

<ul>
  <li>mix flour</li>
  <li>baking powder</li>
  <li>sugar</li>
  <li>salt</li>
  <li>milk</li>
</ul>

• mix flour
• baking powder
• sugar
• salt
• milk

✔ <li></li> (list item)

<ol>, <ul>에서 동일하게 사용된다. 목록의 항목을 나타낸다.

✔ <a></a> (anchor)

href(hyperlink reference) 속성을 써서 다른 웹사이트로 이동하거나, 같은 웹사이트 안에서 어느 위치로 이동하거나, 파일, 이메일 주소 등 다른 URL로 연결할 수 있는 링크를 만든다.

<a href="링크주소">링크에 대한 설명</a>
<a href="http://www.google.com">Go to google</a>
 📙 앞에 "http://" 꼭 붙여주기

Go to google

👉 attributes
  - target
    target="_self"    현재 페이지에서 이동, 기본값
    target="_blank"   새 탭에서 열림
    <a href="http://google.com" target="_blank">Go to google.com</a>
    
    📙 attributes는 모든 tag에서 사용 가능한 게 있고, 특정 tag에서만 사용 가능한 게 있다.

✔ <img />

• self-closing tag
• src가 img의 content
• img 태그에서 src 속성은 필수이다.

👉 attributes
  - src (source)
    <img src="복사한 이미지 주소" />
    <img src="https://i.guim.co.uk/img/media/c9b0aad22638133aa06cd68347bed2390b555e63/
    0_477_2945_1767/master/2945.jpg?width=1200&height=1200&quality=85&auto=
    format&fit=crop&s=97bf92d90f51da7067d00f8156512925" />
  
    <img src="내 컴퓨터 파일 경로" />
    <img src="banana.jpg" />      이미지 파일이 같은 폴더에 있는 경우
    <img src="img/banana.jpg" />  이미지 파일이 img라는 폴더에 있는 경우 
               ↑ path notation(경로 표기법)
  
    📙 src 속성은 img 태그에서만 작동한다.