[TIL] 220429(금)

BeanxxΒ·2022λ…„ 4μ›” 29일
0

TIL

λͺ©λ‘ 보기
4/120
post-thumbnail

β˜‘οΈΒ HTML (HyperText Markup Language)

: μ›Ή νŽ˜μ΄μ§€μ˜ λΌˆλŒ€(ν‹€)λ₯Ό κ΅¬μ„±ν•˜λŠ” λ§ˆν¬μ—… μ–Έμ–΄. (ꡬ쑰λ₯Ό ν‘œν˜„ν•˜λŠ” μ–Έμ–΄),
Β Β tagλ“€μ˜ 집합

<!DOCTYPE html>
<html>
	<head>
		<title>Page title</title>
	</head>

	<body>
		<h1>Hello world</h1>
		<div>Contents here
			<span>Here too!</span>
		</div>
	</body>
</html>

HTMLCSSJS
Structure(ꡬ쑰)Presentation(μŠ€νƒ€μΌ)Interaction(μƒν˜Έμž‘μš©)

TagRole
<div>Division (ν•œ 쀄 전체 차지)
<span>Span (μ½˜ν…μΈ  크기만큼 곡간 차지)
<img src=”url”>Image
*<a href="url" target="_blank">Link
<ul> & <li>Unordered List & List Item
<ol>Ordered List
<input type="checkbox" checked>Input(Text, Radio, Checkbox)
<textarea>Multi-line Text Input
<button>Button
<p>ν•˜λ‚˜μ˜ 문단 ν‘œν˜„

*<a target=”_blank”> : μƒˆ νƒ­μœΌλ‘œ 링크 νŽ˜μ΄μ§€ 이동

πŸ’‘Β Input

<!-- placeholder 속성: μž…λ ₯폼 μ•ˆμ— μž‘μ„±ν•΄μ•Ό ν•˜λŠ” λ‚΄μš© 힌트 제곡 κ°€λŠ₯ -->
<input type="text" placeholder="ID"></input>
<input type="password"></input>

<!-- name이 같은 Checkbox νƒ€μž… 쀑 μ—¬λŸ¬ 개 체크 κ°€λŠ₯ -->
<input type=”checkbox” name=”fruits”>

<!-- name이 같은 Radio νƒ€μž… 쀑 ν•˜λ‚˜λ§Œ 체크 κ°€λŠ₯ -->
<input type=”radio” name=”subject”>

πŸ’‘Β μ‹œλ§¨ν‹±(semantic) μš”μ†Œ

: Semantic μ΄λž€ β€˜μ˜λ―Έκ°€ μžˆλŠ”, 의미둠적인'. β†’ 의미λ₯Ό 가진 μš”μ†Œ

<article>독립적이고 자체 ν¬ν•¨λœ μ½˜ν…μΈ  지정
<aside>본문의 μ£Όμš” 뢀뢄을 ν‘œμ‹œν•˜κ³  남은 뢀뢄을 μ„€λͺ…ν•˜λŠ” μš”μ†Œ. (μ‚¬μ΄λ“œλ°”, κ΄‘κ³ μ°½)
<footer>νŽ˜μ΄μ§€λ‚˜ ν•΄λ‹Ή 파트의 κ°€μž₯ μ•„λž«λΆ€λΆ„μ— μœ„μΉ˜ (μ‚¬μ΄νŠΈ λΌμ΄μ„ μŠ€, μ£Όμ†Œ ...)
<header>νŽ˜μ΄μ§€λ‚˜ ν•΄λ‹Ή μ„Ήμ…˜μ˜ κ°€μž₯ μœ—λΆ€λΆ„μ— μœ„μΉ˜ (μ‚¬μ΄νŠΈ 제λͺ©)
<nav>상단바 λ“± μ‚¬μ΄νŠΈλ₯Ό μ•ˆλ‚΄ν•˜λŠ” μš”μ†Œμ— μ‚¬μš© (보톡 <ul>을 λ„£μ–΄ λͺ©λ‘ ν˜•νƒœλ‘œ μ‚¬μš©)
<main>λ¬Έμ„œμ˜ 주된 μ½˜ν…μΈ  ν‘œμ‹œ
<section>제λͺ©, μ½˜ν…μΈ κ°€ ν¬ν•¨λœ κ΅¬νšμ„ λ‚˜λˆŒ λ•Œ μ‚¬μš©. (<div>와 μ—­ν•  λΉ„μŠ·)
<form>μ‚¬μš©μžκ°€ μž…λ ₯ν•œ 값을 λ‹€λ₯Έ νŽ˜μ΄μ§€λ‘œ μ „μ†‘ν•˜λŠ” μ—­ν• 
(보톡 <input>, <button> μš”μ†Œ λ“±μ˜ μžμ‹ μš”μ†Œλ₯Ό κ°μ‹ΈλŠ” κ²½μš°μ— 자주 μ‚¬μš©)

βœ‹Β <div>, <span> μš”μ†ŒλŠ” μ‹œλ©˜ν‹± μš”μ†Œλ‘œ λΆ„λ₯˜ X

πŸ’‘Β id & class

  • id : κ³ μœ ν•œ 이름을 뢙일 λ•Œ μ‚¬μš© (# 으둜 ν‘œμ‹œ) β‡’ 쀑볡 ν—ˆμš© X

  • class : λ°˜λ³΅λ˜λŠ” μ˜μ—­μ„ μœ ν˜•λ³„λ‘œ λΆ„λ₯˜ν•  λ•Œ μ‚¬μš© (. 으둜 ν‘œμ‹œ)

    βœ‹Β μ½κΈ° μ˜μ—­ μžμ²΄λŠ” 고유 β‡’ id둜 이름 ν‘œμ‹œ
    βœ‹Β λ°˜λ³΅λ˜λŠ” ν•­λͺ© β‡’Β class둜 지정 (같은 class 값을 지정 β†’ λ™μΌν•œ μœ ν˜•)

    HTML tagSelector
    <div id=”writing-section”>div#writing-section
    <li class=”comment”>li.comment
     <!-- μ•„λž˜μ˜ class value와 같이 ν•˜λ‚˜μ˜ νƒœκ·Έμ— μ—¬λŸ¬ 개의 classλ₯Ό μž‘μ„±ν•˜κ³  싢을 땐 λ„μ–΄μ“°κΈ°λ‘œ ꡬ뢄 -->
      <!-- id, class, type : attribute name(속성 이름) -->
      <!-- "id-input", "input focus" ... : attribute value(속성 κ°’) -->
      <input id="id-input" class="input focus" type="text" placeholder="ID"></input>
  • <script> μš”μ†Œ: Javascript 싀행을 μœ„ν•΄ μ‚¬μš©
    <script src="my-java-script.js"></script>
    
profile
FE developer

0개의 λŒ“κΈ€