AIκ΅μœ‘κ³Όμ • - HTML.2

best1370Β·2022λ…„ 10μ›” 24일
0

AIκ΅μœ‘κ³Όμ •

λͺ©λ‘ 보기
17/69

😣 λ‹·ν™ˆ ν˜ΈμŠ€νŒ… μ£Όμ˜μ‚¬ν•­

  • HTML 디렉토리에 파일 μ—…λ‘œλ“œ
  • 첫 νŽ˜μ΄μ§€λŠ” 항상 index.html둜 μ—…λ‘œλ“œ(무쑰건 μ†Œλ¬Έμž)

  • FTP(File Transfer Protocol)
    • ν΄λΌμ΄μ–ΈνŠΈ - μ„œλ²„(C/S)용 ν”„λ‘œν† μ½œ
    • ν΄λΌμ΄μ–ΈνŠΈκ°€ νŒŒμΌμ„ μš”μ²­ν•˜λ©΄ μ„œλ²„κ°€ μš”μ²­λœ νŒŒμΌμ„ 제곡
    • ν΄λΌμ΄μ–ΈνŠΈκ°€ μ„œλ²„λ‘œ νŒŒμΌμ„ 전달
    • 주둜 λŒ€λŸ‰μ˜ νŒŒμΌμ„ μ²˜λ¦¬ν•  λ•Œ μ‚¬μš©
    • 기본포트 : 21번
  • ν˜ΈμŠ€νŒ…
    • μ„œλ²„ μ»΄ν“¨ν„°μ˜ 전체 λ˜λŠ” 일정 곡간을 μ΄μš©ν•  수 μžˆλ„λ‘ μž„λŒ€ν•΄μ£ΌλŠ” μ„œλΉ„μŠ€
  • ftp-simle
    • λΉ„μ£Όμ–ΌμŠ€νŠœλ””μ˜€μ½”λ“œμ— FTP ν”„λ‘œκ·Έλž¨ μ‚¬μš©

      f1 - ftp-simple: conpig -FTP connection setting 을 선택

      f1 - ftp-simple: remote directory open to workspace


  • μ•„μ΄ν”„λ ˆμž„
    • inline frame 의 μ•½μž

    • μ›Ήμ‚¬μ΄νŠΈ μ•ˆμ— 또 λ‹€λ₯Έ μ›Ήμ‚¬μ΄νŠΈλ₯Ό μ‚½μž…

      <iframe src="μ‚½μž…ν•  νŽ˜μ΄μ§€μ˜ μ£Όμ†Œ λ˜λŠ” λ¬Έμ„œμœ„μΉ˜" style="크기λ₯Ό μ„€μ •ν•  cssμ½”λ“œ"></iframe>
  • 폼 νƒœκ·Έ
    • μ›ΉνŽ˜μ΄μ§€μ—μ„œ μ‚¬μš©μžλ‘œλΆ€ν„° μž…λ ₯을 받을 λ•Œ μ‚¬μš©ν•˜λŠ” νƒœκ·Έ

    • μ‚¬μš©μžκ°€ μž…λ ₯ν•œ 데이터λ₯Ό μ„œλ²„λ‘œ 보낼 λ•Œ form μš”μ†Œλ₯Ό μ‚¬μš©

      		<form action="μ„œλ²„μ—κ²Œ 전달할 νŒŒμΌμœ„μΉ˜" method="전솑방법">
      	form νƒœκ·Έ μ•ˆμ— form μš”μ†Œλ₯Ό 톡해 데이터λ₯Ό μ„œλ²„λ‘œ 전달
      </form>
  • μž…λ ₯ μƒμž <input>
    • type 속성
      • text: 문자λ₯Ό μž…λ ₯ λ°›λŠ” κΈ€μƒμž
      • password: λΉ„λ°€λ²ˆν˜Έλ₯Ό μž…λ ₯ λ°›λŠ” κΈ€μƒμž
      • radio: μ—¬λŸ¬ 개의 μ˜΅μ…˜ μ€‘μ—μ„œ 단 ν•˜λ‚˜μ˜ μ˜΅μ…˜λ§Œμ„ μž…λ ₯ 받을 수 μžˆλ„λ‘ ν•˜λŠ” λ²„νŠΌ
        • 그룹을 λ§ΊκΈ° μœ„ν•΄ name μ†μ„±μ˜ 값이 동일해야함
      • checkbox: μ—¬λŸ¬ 개의 μ˜΅μ…˜ μ€‘μ—μ„œ λ‹€μˆ˜μ˜ μ˜΅μ…˜μ„ μž…λ ₯ 받을 수 μžˆλ„λ‘ ν•˜λŠ” λ²„νŠΌ (μžλ°”μ—μ„œ λ°°μ—΄λ‘œ 받을 수 있음)
      • file: μ›ν•˜λŠ” νŒŒμΌμ„ μ„œλ²„λ‘œ μ „μ†‘ν•˜κΈ° μœ„ν•œ κΈ€μƒμž
      • email: 이메일을 μž…λ ₯ λ°›λŠ” κΈ€μƒμž(@ ν•„μš”)
      • url: μ›Ήμ‚¬μ΄νŠΈλ₯Ό μž…λ ₯ λ°›λŠ” κΈ€μƒμž(http ν•„μš”)
      • tel: μ „ν™”λ²ˆν˜Έλ₯Ό μž…λ ₯ λ°›λŠ” κΈ€μƒμž(λͺ¨λ°”μΌμ—μ„œ 숫자 ν‚€νŒ¨νŠΈλ₯Ό μžλ™ μ‚¬μš©)
      • date: μ›ν•˜λŠ” λ‚ μ§œλ₯Ό μž…λ ₯ λ°›λŠ” κΈ€μƒμž
      • number: μ›ν•˜λŠ” 숫자λ₯Ό μž…λ ₯ λ°›λŠ” κΈ€μƒμž
        <input type="number" min="μ΅œμ†Œκ°’" max="μ΅œλŒ€κ°’" step="증가값">
      • color: μ›ν•˜λŠ” 색상을 μž…λ ₯ λ°›λŠ” μš”μ†Œ
        • μ„ νƒν•œ 색상은 16μ§„μˆ˜ RGB컬러 κ°’μœΌλ‘œ μ„œλ²„μ— 전달
      • search: 검색어λ₯Ό μž…λ ₯ λ°›λŠ” κΈ€μƒμž
      • range: 일정 λ²”μœ„ μ•ˆμ— κ°’λ§Œμ„ μž…λ ₯ν•˜λŠ” μ‘°μ ˆλ°”
        <input type="range" min="μ΅œμ†Œκ°’" max="μ΅œλŒ€κ°’" value="ν˜„μž¬κ°’">
      • hidden : λ³΄μ΄μ§€λŠ” μ•ŠμœΌλ‚˜ μ„œλ²„μ— 값을 μ „λ‹¬ν•˜κ³  싢을 λ•Œ μ‚¬μš©ν•˜λŠ” μš”μ†Œ
      • button: μ΄λ²€νŠΈκ°€ μ—†λŠ” 일반 λ²„νŠΌ
      • reset: μž…λ ₯ 받은 데이터λ₯Ό μ΄ˆκΈ°ν™” ν•˜λŠ” λ²„νŠΌ
      • submit: μž…λ ₯ 받은 데이터λ₯Ό μ„œλ²„μ— μ œμΆœν•˜λŠ” λ²„νŠΌ
    • 속성
      • name: μš”μ†Œμ˜ 이름을 μ„€μ •, μ„œλ²„μ—μ„œ 값을 전달 받을 λ•Œ ν‚€λ‘œ μ‚¬μš©
      • id: μš”μ†Œμ˜ μœ μΌν•œ 이름을 μ„€μ •, HTMLλ¬Έμ„œμ—μ„œ ν•΄λ‹Ή μš”μ†Œμ˜ μŠ€νƒ€μΌμ„ μ£Όκ±°λ‚˜ 동적인 ν”„λ‘œκ·Έλž˜λ°μ„ ν•  λ•Œ μ‚¬μš©(ν•˜λ‚˜μ˜ HTML λ¬Έμ„œμ—μ„œ λ‹€λ₯Έ μš”μ†Œμ™€ 값이 같을 수 μ—†μŒ)
      • maxlength: κ°’μ˜ μ΅œλŒ€ 길이λ₯Ό μ„€μ •ν•˜λŠ” 속성
      • placeholder: μž…λ ₯ μ „ νŠΉμ • 데이터λ₯Ό μž…λ ₯ν•˜λ„λ‘ μ•ˆλ‚΄ν•˜λŠ” κ°’
      • value: μ„œλ²„λ‘œ μ „λ‹¬λœ μž…λ ₯ μ–‘μ‹μ˜ 값을 μ„€μ •
      • checked: λΌλ””μ˜€ λ˜λŠ” μ²΄ν¬λ°•μŠ€ μ€‘μ—μ„œ 미리 μ„ νƒν•˜λŠ” μ˜΅μ…˜μ„ μ„€μ •
      • readonly: 데이터λ₯Ό λ³Ό 수 μžˆμœΌλ‚˜ μˆ˜μ •ν•  수 μ—†κ²Œ μ„€μ •
        • μ„œλ²„λ‘œ 데이터가 전달됨
      • disabled: μž…λ ₯ ν•„λ“œλ₯Ό μ‚¬μš©ν•  수 μ—†κ²Œ μ„€μ •
        • μ„œλ²„λ‘œ 데이터가 μ „λ‹¬λ˜μ§€ μ•ŠμŒ
      • required: 데이터λ₯Ό ν•„μˆ˜λ‘œ μž…λ ₯ν•˜λ„λ‘ κ°•μ œν•˜λŠ” μ„€μ •

  • 라벨
    • 폼 양식에 이름을 λΆ™μ΄λŠ” μš”μ†Œ

    • λ‹€λ₯Έ μš”μ†Œλ₯Ό μ—°κ²°ν•˜λ©΄ ν•΄λ‹Ή μ˜μ—­μ΄ 넓어짐

    • radio, checkbox의 μŠ€νƒ€μΌμ„ μ„€μ •

      <label for="μš”μ†Œμ˜ id">ν…μŠ€νŠΈ λ˜λŠ” 이미지</label>
  • λ²„νŠΌ
    • κΈ°λ³Έ κΈ°λŠ₯은 <input type=”submit”>

    • 일반 λ²„νŠΌμœΌλ‘œ μ‚¬μš©ν•˜λ €λ©΄ <button type=”button”></button>

      <button>λ²„νŠΌμ— 쓰일 ν…μŠ€νŠΈ</button>
  • μ„ νƒμƒμž
    • μ—¬λŸ¬ 개의 μ˜΅μ…˜μ΄ λ“œλ‘­λ‹€μš΄ 리슀트둜 λ˜μ–΄ 있으며 κ·Έ μ€‘μ—μ„œ 단 ν•˜λ‚˜μ˜ μ˜΅μ…˜λ§Œμ„ 선택

      <select name=''>
      	<option value="">μ•„μ΄ν…œ1</option>
      	<option value="">μ•„μ΄ν…œ1</option>
      	...
      </select>
  • μ—¬λŸ¬μ€„ κΈ€μƒμž
    • μ—¬λŸ¬μ€„μ˜ ν…μŠ€νŠΈλ₯Ό μž…λ ₯λ°›λŠ” κΈ€μƒμž

      <textarea name="">value</textarea>

  • HTMl의 λ””μŠ€ν”Œλ ˆμ΄
    1. inline
      • content 크기만큼 자리λ₯Ό μ°¨μ§€ν•˜λŠ” μš”μ†Œ
      • ν…μŠ€νŠΈ, img, span
      • 문자(ν…μŠ€νŠΈ)의 νŠΉμ§•μ„ 가지고 있음
    2. block
      • 라인을 λͺ¨λ‘ μ°¨μ§€ν•˜λŠ” μš”μ†Œ
      • p, h, ul, li, div…
      • 면의 νŠΉμ§•μ„ 가지고 있음
    • span νƒœκ·Έ
      • 쀄 λ‹¨μœ„λ‘œ μ˜μ—­μ΄ μ„€μ •
      • inline νŠΉμ§•μ„ 가지고 있음
    • div νƒœκ·Έ
      • λ©΄ λ‹¨μœ„λ‘œ μ˜μ—­μ΄ μ„€μ •
      • block νŠΉμ§•μ„ 가지고 있음
  • μ‹œλ§¨ν‹± νƒœκ·Έ
    • Semantic: 의미둠적인

    • μ˜λ―Έκ°€ μžˆλŠ” νƒœκ·Έλ₯Ό μ‚¬μš©

      πŸ˜‹ μ‹œλ§¨ν‹± νƒœκ·Έμ˜ μž₯점

    1. 검색엔진 μ΅œμ ν™”
    2. 슀크린 리더λ₯Ό μ‚¬μš©ν•˜μ—¬ νŽ˜μ΄μ§€λ₯Ό 탐색할 λ•Œ 도움
    3. λμ—†λŠ” divλ₯Ό νƒμƒ‰ν•˜λŠ” 것보닀 효율적
    4. κ°œλ°œμžμ—κ²Œ λͺ…ν™•ν•œ 의미λ₯Ό 전달
    • header
      • νŽ˜μ΄μ§€μ˜ 제λͺ©κ³Ό 같은 μ†Œκ°œ λ‚΄μš©μ„ 포함
      • heading νƒœκ·Έλ‚˜ 둜고 μ €μž‘κΆŒ 정보, 검색 양식, μž‘μ„±μž 이름 등을 포함
    • nav
      • 메뉴, λͺ©μ°¨ 등에 μ‚¬μš©
    • main
      • 지배적인 컨텐츠 μ˜μ—­μ„ λ‚˜νƒ€λ‚΄λŠ” νƒœκ·Έ
    • section
      • ꡬ체적인 μ‹œλ§¨ν‹± νƒœκ·Έκ°€ μ—†λŠ” λ¬Έμ„œμ˜ 독립적인 μ˜μ—­μ„ λ‚˜νƒ€λƒ„
      • μ„Ήμ…˜μ—λŠ” 항상 제λͺ©μ΄ μžˆλŠ” 것이 일반적
    • article
      • 자체둜 μ˜λ―Έκ°€ μžˆλŠ” μ›Ήμ‚¬μ΄νŠΈ 뢀뢄이며, λ…λ¦½μ μœΌλ‘œ 배포 λ˜λŠ” μž¬μ‚¬μš©λ˜λ„λ‘ μ˜λ„λœ λ¬Έμ„œ
      • κ²Œμ‹œλ¬Ό, μž‘μ§€ λ˜λŠ” 신문기사
    • footer
      • μž‘μ„±μžμ— λŒ€ν•œ 정보, μ €μž‘κΆŒ 데이터 λ˜λŠ” κ΄€λ ¨ λ¬Έμ„œμ— λŒ€ν•œ 링크, μΉ΄ν”ΌλΌμ΄νŠΈλ₯Ό 포함
    • aside
      • κ°„μ μ μœΌλ‘œ λ¬Έμ„œμ™€ κ΄€λ ¨λœ λ‚΄μš©
      • μ‚¬μ΄λ“œλ°” λ˜λŠ” μ½œμ•„μ›ƒ μƒμž


  • indent-rainbow : 듀여쓰기에 μ»¬λŸ¬κ°€ μž…ν˜€μ§

  • CSS(Cascading Style Sheets)
    • μ›Ή νŽ˜μ΄μ§€μ˜ νŠΉμ • μš”μ†Œ λ˜λŠ” μš”μ†Œ 그룹에 μ μš©ν•  μŠ€νƒ€μΌ 그룹을 μ§€μ •ν•˜λŠ” κ·œμΉ™μ„ μ •μ˜ν•˜λŠ” μ–Έμ–΄
  • CSS 문법
    • HTML <head> μš”μ†Œ μ•ˆμ— <style> μš”μ†Œλ₯Ό μ‚¬μš©ν•˜μ—¬ CSS 문법을 적용

      μ„ νƒμž {속성λͺ…1: 속성값;...}
  • 주석문
    • / ~ / 사이에 λ‚΄μš©μ„ μž…λ ₯
  • CSSλ₯Ό μ μš©ν•˜λŠ” 방법
    1. inline μŠ€νƒ€μΌ

      • HTML μš”μ†Œ 내뢀에 style 속성을 μ‚¬μš©ν•˜μ—¬ μ μš©ν•˜λŠ” 방법
    2. λ‚΄λΆ€ μŠ€νƒ€μΌ

      • HTML λ¬Έμ„œμ˜ <head>~</head> 사이에 <style>~</style> μš”μ†Œλ₯Ό μ‚¬μš©ν•˜μ—¬ μ μš©ν•˜λŠ” 방법
    3. μ™ΈλΆ€ μŠ€νƒ€μΌ

      • μ›Ή μ‚¬μ΄νŠΈ μ „μ²΄μ˜ μŠ€νƒ€μΌμ„ ν•˜λ‚˜μ˜ νŒŒμΌμ—μ„œ λ³€κ²½
      <link href="css 파일경둜" rel="stylesheet">

      πŸ˜‘ rel

      ν˜„μž¬ λ¬Έμ„œμ™€ 링크된 λ¬Έμ„œ μ‚¬μ΄μ˜ μ—°κ΄€ 관계λ₯Ό λͺ…μ‹œ

  • μ„ νƒμž
    1. 전체 μ„ νƒμž

      • μŠ€νƒ€μΌμ„ λͺ¨λ“  μš”μ†Œμ— 적용

      😣 κ°œλ³„μ μœΌλ‘œ μ μš©ν•œ μŠ€νƒ€μΌμ€ 전체 μ„ νƒμžμ— μ μš©ν•œ μŠ€νƒ€μΌλ³΄λ‹€ μš°μ„ 

    2. μš”μ†Œ μ„ νƒμž

      • νŠΉμ • μš”μ†Œκ°€ 쓰인 λͺ¨λ“  μš”μ†Œμ— μŠ€νƒ€μΌμ„ 적용

      πŸ™„ 상속

      λΆ€λͺ¨ μš”μ†Œμ˜ 속성값이 μžμ‹ μš”μ†Œμ—κ²Œ μ „λ‹¬λ˜λŠ” 것

profile
tistory둜 이전! https://sweet-rain-kim.tistory.com/

0개의 λŒ“κΈ€