HTML

heeyunkwonΒ·2021λ…„ 1μ›” 23일
0

Frontend

λͺ©λ‘ 보기
2/5

πŸ’‘ HTML 문법


κΈ°λ³Έ ν˜•νƒœ

νƒœκ·ΈλŠ” 각자의 의미λ₯Ό 가지고 있으며 λ‹€μŒκ³Ό 같은 ν˜•νƒœλ₯Ό 가진닀.

<TAG></TAG>
<TAG>CONTENT</TAG>
  • νƒœκ·ΈλŠ” 열리고 λ‹«νžˆλŠ” νƒœκ·Έ ꡬ쑰λ₯Ό 가지고 있으며 μ΄λŠ” ν•œ μŒμ΄λ‹€.
  • 이 κ΅¬μ‘°λŠ” νƒœκ·Έμ˜ λ²”μœ„λ₯Ό λ§Œλ“€μ–΄ μ€€λ‹€.
  • νƒœκ·Έμ™€ μš”μ†ŒλŠ” κ°™μ§€λ§Œ μ •ν™•ν•œ μ˜λ―ΈλŠ” λ‹€λ₯΄λ‹€.

⭐ λ‹«νžˆλŠ” νƒœκ·ΈλŠ” νƒœκ·Έ 이름 μ•žμ— /κ°€ λΆ™λŠ”λ‹€.

<!--- λŒ€μ£Όμ œ --->
<h1></h1>
  • h1 ~ h6 : 주제

  • p : 문단


속성(Attributes)κ³Ό κ°’(Value)

νƒœκ·Έ(μš”μ†Œ)의 κΈ°λŠ₯을 ν™•μž₯ν•˜κΈ° μœ„ν•΄ 속성을 μ‚¬μš©ν•  수 μžˆλ‹€.

<TAG 속성="κ°’"></TAG>

<img src="./my_photo.jpg" alt="λ‚΄ ν”„λ‘œν•„ 사진" />
<div class="animal">cat</div>
  • src : μ‚½μž…ν•  μ΄λ―Έμ§€μ˜ 경둜 지정 (source)

  • alt : 이미지λ₯Ό 좜λ ₯ν•˜μ§€ λͺ»ν•˜λŠ” 상황에 이미지 λŒ€μ‹  λ³΄μ—¬μ§ˆ ν…μŠ€νŠΈ 지정 (alternative)

  • class : νƒœκ·Έ 별λͺ…


λΆ€λͺ¨μ™€ μžμ‹ μš”μ†Œ

<PARENT>
	<CHILD></CHILD>
</PARENT>
  • μžμ‹μ˜ μžμ‹ πŸ‘‰πŸ» 후손(μžμ†, ν•˜μœ„) μš”μ†Œ

  • λΆ€λͺ¨μ˜ λΆ€λͺ¨ πŸ‘‰πŸ» 쑰상(μƒμœ„) μš”μ†Œ

λΆ€λͺ¨μ™€ μžμ‹ μš”μ†ŒλŠ” μƒλŒ€μ μΈ κ°œλ…μ΄λ‹€.
μš”μ†Œκ°€ 가지고 μžˆλŠ” ꡬ쑰λ₯Ό νŒλ‹¨ν•  수 μžˆλ‹€.
CSSλ₯Ό HTML에 μ μš©ν•˜λŠ” μƒν™©μ—μ„œ ꡉμž₯히 μ€‘μš”ν•œ κ°œλ…μœΌλ‘œμ¨ μ‚¬μš©ν•œλ‹€.


빈 νƒœκ·Έ

λ‹«νžˆλŠ” κ°œλ…μ΄ μ—†λŠ” νƒœκ·Έμ΄λ©°, λ²”μœ„κ°€ μ‘΄μž¬ν•˜μ§€ μ•ŠλŠ”λ‹€.

<!--- `/`κ°€ μ—†λŠ” 빈 νƒœκ·Έ --->
<TAG>
  
<!--- `/`κ°€ μžˆλŠ” 빈 νƒœκ·Έ --->
<TAG/>
<TAG />
  • 개발 ν™˜κ²½μ— 따라 달라진닀.

  • <TAG> : HTML 1,2,3,4

  • <TAG/>, <TAG /> : XHTML, 린트(Lint) ν™˜κ²½

νƒœκ·Έκ°€ 가진 μ˜λ―Έλ³΄λ‹€ κ·Έ 의미λ₯Ό ν™•μž₯ν•΄μ„œ μ“Έ 수 μžˆλŠ” 속성="κ°’"의 ν˜•νƒœκ°€ 빈 νƒœκ·Έμ— ν¬ν•¨λœλ‹€.


⭐ **ν˜Όμš©ν•΄μ„œ μ‚¬μš©ν•˜λ©΄ μ•ˆλœλ‹€.**

πŸ’‘ HTML λ¬Έμ„œμ˜ λ²”μœ„


<!DOCTYPE html>
<html>
  <head>
    λ¬Έμ„œμ˜ 정보
  </head>
  <body>
    λ¬Έμ„œμ˜ ꡬ쑰
  </body>
</html>

HTML (전체 λ²”μœ„)

<html> λŠ” HTML λ¬Έμ„œμ˜ 전체 λ²”μœ„λ₯Ό μ§€μ •ν•œλ‹€. (μ‹œμž‘, 끝)

μ›Ή λΈŒλΌμš°μ €κ°€ 해석해야 ν•  HTML λ¬Έμ„œκ°€ μ–΄λ””μ—μ„œ μ‹œμž‘ν•˜λ©°, μ–΄λ””μ—μ„œ λλ‚˜λŠ”μ§€ μ•Œλ €μ£ΌλŠ” 역할을 ν•œλ‹€.


HEAD (정보 λ²”μœ„)

μ›Ή λΈŒλΌμš°μ €κ°€ 해석해야 ν•  HTML λ¬Έμ„œμ˜ 정보 λ²”μœ„λ₯Ό μ§€μ •ν•œλ‹€.

정보

  • μ›Ή νŽ˜μ΄μ§€μ˜ 제λͺ©
  • 문자 인코딩 방식
  • μ—°κ²°ν•  μ™ΈλΆ€ 파일의 μœ„μΉ˜
  • μ›Ή νŽ˜μ΄μ§€λ₯Ό κ΅¬μ‘°ν™”ν•˜κΈ° μœ„ν•œ κΈ°λ³Έ μ„ΈνŒ… κ°’

πŸ‘‰πŸ» 화면을 κ΅¬μ„±ν•˜κΈ° μœ„ν•œ κΈ°λ³Έ μ„€μ •

BODY (ꡬ쑰 λ²”μœ„)

μ›Ή λΈŒλΌμš°μ €κ°€ 해석해야 ν•  HTML λ¬Έμ„œμ˜ ꡬ쑰 λ²”μœ„λ₯Ό μ§€μ •ν•œλ‹€.

ꡬ쑰

  • 둜고, 헀더, ν‘Έν„°, λ‚΄λΉ„κ²Œμ΄μ…˜, 메뉴, λ²„νŠΌ, μž…λ ₯μ°½, νŒμ—…, κ΄‘κ³  λ“± λ³΄μ΄λŠ” λͺ¨λ“  것듀

πŸ‘‰πŸ» μ‚¬μš©μžκ°€ 화면을 ν†΅ν•΄μ„œ λ³Ό 수 μžˆλŠ” λ‚΄μš©(μ½˜ν…μΈ )의 ν˜•νƒœλ‚˜ λ ˆμ΄μ•„μ›ƒ 등을 μ˜λ―Έν•œλ‹€.

πŸ‘‰πŸ» BODY λ²”μœ„ μ•ˆμ—μ„œλ§Œ μƒμ„±ν•œλ‹€.

DOCTYPE (DTD, 버전 지정)

λ§ˆν¬μ—… μ–Έμ–΄μ—μ„œ λ¬Έμ„œ ν˜•μ‹μ„ μ •μ˜ν•œλ‹€.
버전 쀑 μ–΄λŠ 버전을 μ‚¬μš©ν•˜λŠ”μ§€ λͺ…μ‹œν•œλ‹€.

HTML 버전

  • 1, 2, 3, 4, X-, 5

ν˜„μž¬μ˜ ν‘œμ€€ λͺ¨λ“œλŠ” HTML5 이닀.

<!--- HTML 5 --->
<!DOCTYPE html>

X-HTML 버전을 μ‚¬μš©ν•˜λŠ” μ‚¬μ΄νŠΈκ°€ κ½€ λ§Žλ‹€.

πŸ’‘ HTML λ¬Έμ„œμ˜ 정보(head νƒœκ·Έ)


TITLE

HTML λ¬Έμ„œμ˜ 제λͺ©μ„ μ •μ˜ν•œλ‹€.
μ›Ή λΈŒλΌμš°μ €μ˜ 각 μ‚¬μ΄νŠΈ νƒ­μ—μ„œ μ΄λ¦„μœΌλ‘œ ν‘œμ‹œλœλ‹€.

<head>
  <title>넀이버</title>
</head>
  • κ΅¬μ‘°ν™”ν•˜κΈ° 보닀 정보λ₯Ό λ‚˜νƒ€λ‚΄λŠ” νƒœκ·Έμ΄λ©° μ•„μ΄μ½˜ ν‘œμ‹œλŠ” λ³„κ°œμ΄λ‹€.

  • μ›Ή μ‚¬μ΄νŠΈμ˜ 제λͺ©μ΄λ‚˜ 이름 κ·Έ μžμ²΄μ΄λ‹€.


META

HTML λ¬Έμ„œμ— κ΄€ν•œ 정보λ₯Ό κ²€μƒ‰μ—”μ§„μ΄λ‚˜ λΈŒλΌμš°μ €μ— μ œκ³΅ν•œλ‹€.
빈 νƒœκ·Έμ΄λ‹€.

<head>
  <meta charset="UTF-8">
  <meta name="author" content="홍길동">
  <meta name="description" content="우리 μ‚¬μ΄νŠΈκ°€ 졜고!">
</head>
μ†μ„±μ˜λ―Έκ°’
charset문자 인코딩 방식UTF-8, EUC-KR λ“±..
name검색엔진 등에 μ œκ³΅ν•˜κΈ° μœ„ν•œ μ •λ³΄μ˜ μ’…λ₯˜author, description, keywords, viewport λ“±..
contentname μ΄λ‚˜ http-equiv μ†μ„±μ˜ 값을 제곡

μ™ΈλΆ€ λ¬Έμ„œλ₯Ό μ—°κ²°ν•  λ•Œ μ‚¬μš©ν•œλ‹€.

  • 특히, HTML μ™ΈλΆ€μ—μ„œ μž‘μ„±λœ CSS (html, icon) λ¬Έμ„œλ₯Ό λΆˆλŸ¬μ™€ μ—°κ²°ν•  λ•Œ μ‚¬μš©ν•œλ‹€.

  • 빈 νƒœκ·Έμ΄λ‹€.

<head>
  <link rel="stylesheet" href="./css/main.css">
  <link rel="icon" href="./favicon.png">
</head>
μ†μ„±μ˜λ―Έκ°’
rel(ν•„μˆ˜)ν˜„μž¬ λ¬Έμ„œμ™€ μ™ΈλΆ€ λ¬Έμ„œμ™€μ˜ 관계λ₯Ό 지정stylesheet, icon λ“±..
hrefμ™ΈλΆ€ λ¬Έμ„œμ˜ μœ„μΉ˜λ₯Ό μ§€μ •κ²½λ‘œ

STYLE

CSSλ₯Ό μ™ΈλΆ€ λ¬Έμ„œμ—μ„œ μž‘μ„±ν•˜μ—¬ μ—°κ²°ν•˜λŠ” 것이 μ•„λ‹ˆκ³  HTML λ¬Έμ„œ 내뢀에 μž‘μ„±ν•  λ•Œ μ‚¬μš©ν•œλ‹€.

<style>
  img {
    width: 100px;
    height: 200px;
  }
  p {
    font-size: 20px;
    font-weight: bold;
  }
</style>

⭐ λ°˜λ“œμ‹œ style νƒœκ·Έ μ•ˆμ— μž‘μ„±ν•΄μ•Ό ν•œλ‹€.


SCRIPT

JS νŒŒμΌμ„ λΆˆλŸ¬μ˜€κ±°λ‚˜ HTML λ¬Έμ„œ μ•ˆμ—μ„œ μž‘μ„±ν•  수 μžˆλ‹€.

<!-- 뢈러였기 -->
<script src="./js/main.js"></script>

<!-- μž‘μ„±ν•˜κΈ° -->
<script>
  function windowOnClickHandler(event) {
    console.log(event);
  }
  window.addEventListener('click', windowOnClickHandler);
</script>

πŸ’‘ HTML λ¬Έμ„œμ˜ ꡬ쑰(body νƒœκ·Έ)


DIV

'div'λŠ” 'division'의 μ•½μžλ‘œ 'λΆ„ν• '을 λœ»ν•˜κ³  λ¬Έμ„œμ˜ λΆ€λΆ„μ΄λ‚˜ μ„Ήμ…˜μ„ μ •μ˜ν•œλ‹€.

  • λͺ…ν™•ν•œ 의미λ₯Ό 가지지 μ•ŠκΈ° λ•Œλ¬Έμ— 정말 λ§Žμ€ 경우 λ‹¨μˆœνžˆ νŠΉμ • λ²”μœ„λ₯Ό λ¬ΆλŠ”(wrap) μš©λ„λ‘œ μ‚¬μš©ν•œλ‹€.

  • λͺ¨μ–‘을 λ§Œλ“€μ–΄λ‚΄λŠ”λ° νŠΉν™”

묢인 λΆ€λΆ„

πŸ‘‰πŸ» CSSλ₯Ό ν†΅ν•΄μ„œ 예쁘게 κΎΈλ―Έκ±°λ‚˜ JSλ₯Ό ν†΅ν•΄μ„œ λ™μž‘μ„ μ œμ–΄ν•œλ‹€.


IMG

HTML에 이미지λ₯Ό μ‚½μž…ν•  λ•Œ μ‚¬μš©ν•œλ‹€.

<body>
  <img src="./kitty.png" alt="μ•Όμ˜Ήμ΄">
</body>
μ†μ„±μ˜λ―Έκ°’
src(ν•„μˆ˜)μ΄λ―Έμ§€μ˜ URLURL
alt(ν•„μˆ˜)μ΄λ―Έμ§€μ˜ λŒ€μ²΄ ν…μŠ€νŠΈ(alternate)λ₯Ό 지정

πŸ“š μ°Έκ³ 


profile
νŒŒμ΄νŒ…

0개의 λŒ“κΈ€