Daily/Today I Learned

22.07.08_TIL

ν˜Έλ°€μ΄ 2022. 7. 8. 10:38

πŸ“Œ μ›Ή ν‘œμ€€κ³Ό SEOλŠ” κ°œλ…μ„ μ•Œκ³  있긴 ν•˜μ§€λ§Œ 살짝 μ•Œκ³  μžˆμ„ 뿐이고 기술 λ©΄μ ‘μ—μ„œ 자주 λ‚˜μ˜€λŠ” λΆ€λΆ„μ΄λ‹ˆ μ—΄μ‹¬νžˆ μ•”κΈ°ν•΄μ•Ό ν•˜λŠ” ν•™μŠ΅μ΄λ‹€.!

 

πŸ“— 였늘 ν•™μŠ΅ν•œ λ‚΄μš©

인터넷 

  • μ „ μ„Έκ³„μ μœΌλ‘œ μ—°κ²°λ˜μ–΄ μžˆλŠ” 컴퓨터 λ„€νŠΈμ›Œν¬ 톡신망

μ›Ή

  • λ¬Έμ„œ, 이미지, μ˜μƒ λ“± λ‹€μ–‘ν•œ 정보λ₯Ό μ—¬λŸ¬ μ‚¬λžŒλ“€κ³Ό κ³΅μœ ν•  수 μžˆλŠ” 곡간

μ›Ή ν‘œμ€€

  • W3C(World Wide Web Consortium)μ—μ„œ κΆŒκ³ ν•˜λŠ” 'μ›Ήμ—μ„œ ν‘œμ€€μ μœΌλ‘œ μ‚¬μš©λ˜λŠ” κΈ°μˆ μ΄λ‚˜ κ·œμΉ™'
  • μ‚¬μš©μžκ°€ μ–΄λ–€ν•œ μš΄μ˜μ²΄μ œλ‚˜ λΈŒλΌμš°μ €λ₯Ό μ‚¬μš©ν•˜λ”λΌλ„ μ›ΉνŽ˜μ΄μ§€κ°€ λ™μΌν•˜κ²Œ 보이고 μ •μƒμ μœΌλ‘œ μž‘λ™ν•  수 μžˆλ„λ‘ ν•˜λŠ” μ›Ή νŽ˜μ΄μ§€ μ œμž‘κΈ°λ²•
  • μ›Ή ν‘œμ€€μ— 맞게 μ›Ή νŽ˜μ΄μ§€λ₯Ό μž‘μ„±ν•˜λ©΄ μ–΄λ–€ λΈŒλΌμš°μ €λ₯Ό μ‚¬μš©ν•˜λ“  λ™μΌν•œ 결과물을 얻을 수 μžˆλ‹€.

μ›Ή ν‘œμ€€μ˜ μž₯점

  • μœ μ§€ 보수의 μš©μ΄μ„±
  • μ›Ή ν˜Έν™˜μ„± 확보
  • 검색 νš¨μœ¨μ„± μ¦λŒ€
  • μ›Ή μ ‘κ·Όμ„± ν–₯상

Semantic HTML

  • semantic: μ˜λ―Έκ°€ μžˆλŠ”
  • HTML: ν™”λ©΄μ˜ ꡬ쑰λ₯Ό λ§Œλ“œλŠ” λ§ˆν¬μ—… μ–Έμ–΄

HTML을 μ‚¬μš©ν•˜λŠ” 두 가지 방식

  • <div>와 <span>으둜 ν™”λ©΄ ꡬ성
    • 두 κ°€μ§€μ˜ μš”μ†Œλ§Œ μ•Œλ©΄ μΆ©λΆ„νžˆ ν™”λ©΄μ˜ ꡬ쑰λ₯Ό λ§Œλ“€ 수 μžˆμ§€λ§Œ, μ–΄λ–€ λ‚΄μš©μ΄ λ“€μ–΄κ°ˆμ§€λŠ” λͺ…μ‹œλ˜μ§€ μ•Šμ•„μ„œ κ²½ν—˜μ„ ν† λŒ€λ‘œ νƒœκ·Έκ°€ μ–΄λ–€ 역할을 ν•˜λŠ”μ§€ μΆ”μΈ‘ν•΄μ•Όν•˜λŠ” 어렀움이 μžˆλ‹€.
  • μ‹œλ§¨ν‹± μš”μ†Œλ‘œ ν™”λ©΄ ꡬ성
    • <header>, <nav>, <main>, λ“± μ—¬λŸ¬κ°€μ§€ νƒœκ·Έλ₯Ό μ‚¬μš©ν•˜μ—¬ μ–΄λ–€ 역할을 ν•˜λŠ” ν•˜λŠ”μ§€ ν™•μ‹€ν•˜κ²Œ μ•Œ 수 μžˆλ‹€.

μ‹œλ§¨ν‹± HTML의 ν•„μš”μ„±

  1. κ°œλ°œμžκ°„ μ†Œν†΅
  2. 검색 νš¨μœ¨μ„±
  3. μ›Ή μ ‘κ·Όμ„±

자주 ν‹€λ¦¬λŠ” νƒœκ·Έ

  • 인라인 μš”μ†Œ μ•ˆμ— 블둝 μš”μ†Œ λ„£κΈ°
    • 인라인 μš”μ†Œ(<span>)
      • 컨텐츠가 μ°¨μ§€ν•˜λŠ” 만큼 μ˜μ—­ 지정
      • 항상 블둝 μš”μ†Œ μ•ˆμ— λ“€μ–΄κ°€μ•Ό ν•œλ‹€.
    • 블둝 μš”μ†Œ(<div>)
      • κ°€λ‘œλ‘œ λ„“κ²Œ ν™”λ©΄ μ˜μ—­μ„ μ°¨μ§€ν•œλ‹€.
  • <b>, <i> μš”μ†Œ μ‚¬μš©
    • μ›Ή ν‘œμ€€μ„ μ€€μˆ˜ν•˜κΈ° μœ„ν•΄μ„œλŠ” 이 μš”μ†Œλ“€μ„ μ‚¬μš©ν•˜μ§€ μ•ŠλŠ” 것이 μ’‹λ‹€.
    • ν‘œν˜„μ„ κΈ°μ€€μœΌλ‘œ 이름이 지어진 μš”μ†Œμ΄κΈ° λ•Œλ¬Έμ΄λ‹€.
    • λŒ€μ‹  <strong>, <em>을 μ‚¬μš©ν•˜λŠ” 것이 μ’‹λ‹€.
  • <hgroup> λ‚œλ°œν•˜μ—¬ μ‚¬μš©
    • κΈ€μžμ— μŠ€νƒ€μΌ 속성을 μ μš©ν•˜κΈ° μœ„ν•œ λͺ©μ μœΌλ‘œ μ‚¬μš©ν•˜λ©΄ μ•ˆλœλ‹€.
  • <br/> 연속 μ‚¬μš©
    • μ΄μ–΄μ§€λŠ” ν…μŠ€νŠΈ 흐름에 쀄 λ°”κΏˆμ„ ν•˜κΈ° μœ„ν•΄ μ‚¬μš©
    • μš”μ†Œ 사이에 간격이 ν•„μš”ν•œ 경우 λ³„λ„μ˜ λ‹¨λ½μœΌλ‘œ κ΅¬λ³„ν•˜κ±°λ‚˜, CSS 속성에 여백을 μ£ΌλŠ” 것이 μ’‹λ‹€.
  • 인라인 μŠ€νƒ€μΌλ§ μ‚¬μš©
    • HTML μš”μ†Œ μ•ˆμ—μ„œ μŠ€νƒ€μΌλ§μ„ ν•˜λŠ” 방법보닀 CSS μ½”λ“œλ₯Ό λΆ„λ¦¬ν•˜μ—¬ μž‘μ„±ν•˜λŠ” 것이 μ’‹λ‹€.
    • HTML μ•ˆμ— μž‘μ„±ν•  경우 λΆ„λ¦¬ν•œ μ˜μ—­μ„ λ‹€μ‹œ ν•©μΉ˜λŠ” 것이 되기 λ•Œλ¬Έμ΄λ‹€.

크둜슀 λΈŒλΌμš°μ§•(Cross Browsing)

  • μ›Ή μ‚¬μ΄νŠΈμ— μ ‘κ·Όν•˜λŠ λΈŒλΌμš°μ €μ˜ μ’…λ₯˜μ— 상관 없이 λ™λ“±ν•œ ν™”λ©΄κ³Ό κΈ°λŠ₯을 μ œκ³΅ν•  수 μžˆλ„λ‘ λ§Œλ“œλŠ” μž‘μ—…
  • λͺ¨λ“  λΈŒλΌμš°μ €μ—μ„œ μ™„μ „νžˆ λ˜‘κ°™μ΄ 화면이 보이도둝 ν•˜λŠ” 것은 μ•„λ‹Œ, λͺ¨λ“  λΈŒλΌμš°μ €μ—μ„œ λ™λ“±ν•œ μˆ˜μ€€μ˜ 정보와 κΈ°λŠ₯을 μ œκ³΅ν•˜λŠ” 것이닀.

크둜슀 λΈŒλΌμš°μ§• μ›Œν¬ ν”Œλ‘œμš°

  1. 초기 기획
    • μ–΄λ–€ μ›Ή μ‚¬μ΄νŠΈλ₯Ό λ§Œλ“€ 것인지 μ •ν™•ν•˜κ²Œ κ²°μ •
    • μ–΄λ–€ 컨텐츠와 κΈ°λŠ₯, λ””μžμΈμ€ μ–΄λ–»κ²Œ 할지 λ“±μ˜ 사항을 κ²°μ •ν•œλ‹€.
  2. 개발
    1. μ½”λ“œλ₯Ό μž‘μ„±ν•  λ•Œ μ‚¬μš©ν•˜λŠ” μ½”λ“œκ°€ 각 λΈŒλΌμš°μ €μ—μ„œμ˜ ν˜Έν™˜μ„±μ΄ 어떀지 νŒŒμ•…ν•˜κ³  μ‚¬μš©ν•΄μ•Ό ν•œλ‹€.
    2. https://caniuse.com/
  3. ν…ŒμŠ€νŠΈ / 발견
    1. μ•ˆμ •μ μΈ ν…ŒμŠ€ν¬ν†± λΈŒλΌμš°μ €μ—μ„œ ν…ŒμŠ€νŠΈλ₯Ό μ§„ν–‰ν•œλ‹€.
    2. νœ΄λŒ€ν° 및 νƒœν”Œλ¦Ώ λΈŒλΌμš°μ €μ—μ„œ ν…ŒμŠ€νŠΈλ₯Ό μ§„ν–‰ν•œλ‹€.
    3. 초기 기획 λ‹¨κ³„μ—μ„œ λͺ©ν‘œν–ˆλ˜ λΈŒλΌμš°μ €κ°€ μžˆλ‹€λ©΄ ν•΄λ‹Ή λΈŒλΌμš°μ €μ—μ„œ ν…ŒμŠ€νŠΈλ₯Ό μ§„ν–‰ν•œλ‹€.
    4. Window, Linux, Mac λ“± λ‹€μ–‘ν•œ 운영 μ²΄μ œμ—μ„œλ„ ν…ŒμŠ€νŠΈλ₯Ό μ§„ν–‰ν•œλ‹€.
  4. μˆ˜μ • / 반볡
    • λ²„κ·Έμ˜ μˆ˜μ •μ„ ν•˜κΈ° μœ„ν•¨

SEO (Search Engine Optimization, 검색 엔진 μ΅œμ ν™”)

  • SEOλ₯Ό 톡해 검색 μ—”μ§„μ—μ„œ μ›Ή νŽ˜μ΄μ§€λ₯Ό 보닀 더 μƒμœ„μ— λ…ΈμΆœ 될 수 μžˆκ²Œλ” ν•  수 μžˆλ‹€.
  • On-Page SEO
    • νŽ˜μ΄μ§€ λ‚΄λΆ€μ—μ„œ 진행할 수 μžˆλŠ” SEO, 제λͺ©κ³Ό 컨텐츠, 핡심 ν‚€μ›Œλ“œμ˜ 배치, 효율적인 HTML μš”μ†Œ μ‚¬μš©λ²• 등을 μ΄μš©ν•˜λŠ” 방법
  • Off-Page SEO
    • μ›Ή μ‚¬μ΄νŠΈ μ™ΈλΆ€μ—μ„œ μ΄λ£¨μ–΄μ§€λŠ” SEO, μ†Œμ…œ λ―Έλ””μ–΄ 홍보, 백링크 등을 μ΄μš©ν•˜λŠ” 방법

On-Page ν†΅μ œ μš”μ†Œ

  1. <title> μš”μ†Œ
    • 검색 결과창에 제λͺ©μ— ν•΄λ‹Ήν•˜λŠ” μš”μ†Œμ΄λ©°, <head>의 μžμ‹ μš”μ†Œμ΄λ‹€.
    • μ–΄λ–€ λ‚΄μš©μ„ μž‘μ„±ν•˜λŠ”κ°€μ— λ”°λΌμ„œ 검색 ν›„ μœ μž…κΉŒμ§€ μœ λ„ν•  수 μžˆλ‹€. (제λͺ© 길이λ₯Ό 짧게)
    • 핡심 ν‚€μ›Œλ“œκ°€ ν¬ν•¨λ˜λ©΄ μƒμœ„μ— λ…ΈμΆœλ  ν™•λ₯ μ΄ 높아진닀. (핡심 ν‚€μ›Œλ“œλŠ” ν•œλ²ˆλ§Œ 포함)
  2. <meta> μš”μ†Œ
    • 메타 데이터λ₯Ό λ‹΄λŠ” μš”μ†Œμ΄λ©°, <head>의 μžμ‹μš”μ†Œμ΄λ‹€.
    • μ›Ή μ‚¬μ΄νŠΈμ—μ„œ 닀루고 μžˆλŠ” 데이터가 무엇인지에 λŒ€ν•œ 데이터
    • 검색 κ²°κ³Όμ°½μ—μ„œ 제λͺ© 밑에 λ”°λΌμ˜€λŠ” μ„€λͺ…κΈ€
  3. <hgroup> μš”μ†Œ
    • 제λͺ©μ„ ν‘œμ‹œν•˜λŠ” μš©λ„
  4. 컨텐츠
    • κ°œμ„±μžˆλŠ” λΈŒλžœλ”©
    • 볡사 + λΆ™μ—¬λ„£κΈ° κΈˆμ§€
    • κ°„κ²°ν•œ 제λͺ©κ³Ό μ„€λͺ…κΈ€
    • μ΅œλŒ€ν•œ κΈ€μžλ‘œ μž‘μ„±ν•˜κΈ°

 

πŸ“˜ μΆ”κ°€λ‘œ 곡뢀할 λ‚΄μš©

[udemy] React μ™„λ²½ κ°€μ΄λ“œ κ°•μ˜ 보기 (맀일 μ‘°κΈˆμ”© 이라도 κΎΈμ€€νžˆ λ“£κΈ°)

[python] leetcode λ¬Έμ œν’€μ΄

[React] 혼자 μ œμž‘ν•œ CRUD ν”„λ‘œμ νŠΈ λ¦¬νŒ©ν† λ§

 

πŸ“ μ€‘μš”ν•œ λ‚΄μš©

  • μ›Ή ν‘œμ€€μ΄λž€?
  • μ›Ή ν‘œμ€€μ„ μ§€μΌœμ•Ό ν•˜λŠ” 이유
  • μ›Ή ν‘œμ€€μ„ μ‚¬μš©ν–ˆμ„ 경우의 μž₯점
  • 자주 ν‹€λ¦¬λŠ” νƒœκ·Έ(μ‹œλ§¨ν‹± νƒœκ·Έλ₯Ό ν™œμš©ν•˜λŠ” 방법)
  • 크둜슀 λΈŒλΌμš°μ§•
  • SEO, 검색 엔진 μ΅œμ ν™”

'Daily > Today I Learned' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

22.07.12_TIL  (0) 2022.07.12
22.07.11_TIL  (2) 2022.07.11
22.07.07_TIL  (0) 2022.07.07
22.07.06_TIL  (0) 2022.07.06
22.07.05_TIL  (0) 2022.07.05

'Daily/Today I Learned'의 λ‹€λ₯ΈκΈ€

  • ν˜„μž¬κΈ€22.07.08_TIL

κ΄€λ ¨κΈ€

ν‹°μŠ€ν† λ¦¬νˆ΄λ°”