πŸ–₯️ [UIUX] 1120 HTML Coding, μ½”λ”© 기초 2

You_Jin.Β·2024λ…„ 11μ›” 20일
CodingUIUXhtmltaguxuiλΉ„μ£Όμ–ΌμŠ€νŠœλ””μ˜€μ½”λ“œμ½”λ”©μ½”λ”© 기초
post-thumbnail

✏️ 2024. 11μ›” 20일 / Coding, μ½”λ”© 기초 2

πŸ“Ί μ½”λ”© 기초 - Visual Studio Code
βœ–οΈ

μ§€λ‚œλ²ˆ ν¬μŠ€νŒ…μ—μ„œλŠ” html의 μ •μ˜μ™€ html 그리고 tagκ°€ 무엇인지에 λŒ€ν•˜μ—¬ μž‘μ„±ν–ˆλŠ”λ°μš”.
μ½”λ“œλ₯Ό μž‘μ„±ν•˜κΈ° μœ„ν•œ ν”„λ‘œκ·Έλž¨μ΄ ν•˜λ‚˜ ν•„μš”ν•©λ‹ˆλ‹€.
그것이 λ°”λ‘œ Visual Studio Code μž…λ‹ˆλ‹€.
μ˜€λŠ˜μ€ 이 λΉ„μ£Όμ–Ό μŠ€νŠœλ””μ˜€ μ½”λ“œ ν”„λ‘œκ·Έλž¨μ„ ν†΅ν•˜μ—¬
html μ½”λ“œλ₯Ό μ•Œλ €λ“œλ¦¬λ € ν•©λ‹ˆλ‹€.

πŸ–±οΈ Visual Studio Code μ‹œμž‘
βœ–οΈ

μš°μ„  처음 보게 λ˜λŠ” 화면이 μ΄λ ‡κ²Œ λ³΄μΌκ±°μ—μš”.

μ™Όμͺ½μ— μžˆλŠ” 메뉴듀을 자주 μ‚¬μš©ν•˜κ²Œ 될 μ˜ˆμ •μ΄κΈ°μ—
ν•˜λ‚˜ν•˜λ‚˜ μ„€λͺ…ν•˜κ³  λ„˜μ–΄κ°€λ„λ‘ ν•˜κ² μŠ΅λ‹ˆλ‹€.

β˜€οΈ μš°μ„  ν•΄λ‹Ή 뢀뢄은 탐색기이며, 폴더λ₯Ό 탐색할 수 μžˆμ–΄μš”.
~폴더에 무슨 파일이 μžˆλŠ”μ§€ λ³΄μ—¬μ£ΌλŠ” 뢀뢄이라고 λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€.

β˜€οΈ 돋보기 λͺ¨μ–‘μ˜ ν•΄λ‹Ή 뢀뢄은 검색 κΈ°λŠ₯이며, 찾고싢은 κΈ€μžμ™€ νƒœκ·Έ 등을 검색할 수 μžˆμ–΄μš”.

β˜€οΈ ν•΄λ‹Ή 뢀뢄은 ~λΆ€λΆ„κΉŒμ§€ ν–ˆλ‹€ λ“±, μž‘μ—… 쀑간 λ§ˆλ‹€ λ©”λͺ¨λ₯Ό μž‘μ„±ν•΄λ‘” 것듀을 κΉƒκ³Ό μ†ŒμŠ€ μ½”λ“œλ₯Ό 톡해 μ—°κ²°ν•˜λŠ” 메뉴 μž…λ‹ˆλ‹€.

β˜€οΈ μžκ·Έλ§ˆν•œ 벌레 λͺ¨μ–‘μ˜ ν•΄λ‹Ή 뢀뢄은 λ””λ²„κ·ΈμΈλ°μš”.
버그(였λ₯˜)λ₯Ό μž‘λŠ” κΈ°λŠ₯μž…λ‹ˆλ‹€.

β˜€οΈ ν•΄λ‹Ή 뢀뢄은 ν™•μž₯ ν”„λ‘œκ·Έλž¨ μž…λ‹ˆλ‹€.
λ§Žμ€ κ°œλ°œμžλΆ„λ“€μ΄ λΉ„μ£Όμ–Ό μŠ€νŠœλ””μ˜€ μ½”λ“œ μ΄μš©μ— νŽΈλ¦¬ν•œ ν”„λ‘œκ·Έλž¨λ“€μ„ λ§Œλ“€μ–΄ λͺ¨μ•„λ‘” κ³³μž…λ‹ˆλ‹€.

β˜€οΈ μΆ”κ°€λ‘œ ν•΄λ‹Ή 뢀뢄을 톡해 창의 ν…Œλ§ˆ(색상) 변경을 ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

πŸ”’ ν•„μš” ν™•μž₯ ν”„λ‘œκ·Έλž¨ 3가지 λ‹€μš΄λ‘œλ“œ
βœ–οΈ
μ½”λ“œ μž‘μ„±μ— 도움을 μ£ΌλŠ” ν™•μž₯ ν”„λ‘œκ·Έλž¨ 3가지λ₯Ό λ¨Όμ € λ‹€μš΄λ°›μ€ ν›„, 진행해볼 μ˜ˆμ •μž…λ‹ˆλ‹€.

μš°μ„  ν™•μž₯ ν”„λ‘œκ·Έλž¨ 창을 μ—΄μ–΄μ£Όμ‹  λ’€, μ•„λž˜ νŒŒμΌλ“€μ„ λ‹€μš΄ λ°›μ•„μ£Όμ„Έμš”.

⭐ ν•΄λ‹Ή ν”„λ‘œκ·Έλž¨μ€ ν•œκ΅­μ–΄λ‘œ μ„€μ •ν•˜λŠ” ν”„λ‘œκ·Έλž¨ μž…λ‹ˆλ‹€.

⭐ ν•΄λ‹Ή ν”„λ‘œκ·Έλž¨μ€ μž‘μ—…μ„ μ–΄λ””κΉŒμ§€ ν–ˆλŠ”μ§€ λ³΄μ—¬μ£ΌλŠ” ν”„λ‘œκ·Έλž¨ μž…λ‹ˆλ‹€.

⭐ ν•΄λ‹Ή ν”„λ‘œκ·Έλž¨μ€ 문법 였λ₯˜λ₯Ό μžλ™μœΌλ‘œ μˆ˜μ •ν•΄μ£ΌλŠ” ν”„λ‘œκ·Έλž¨μ΄λ©°, 듀여쓰기도 μžλ™μ μœΌλ‘œ ν•΄μ£ΌκΈ° λ•Œλ¬Έμ— ꡉμž₯히 νŽΈλ¦¬ν•œ ν”„λ‘œκ·Έλž¨ μž…λ‹ˆλ‹€.

βš™οΈ μ½”λ“œ μž‘μ„± μ‹œμž‘ μ „, 이건 μ•Œκ³  κ°€λ³ΌκΉŒμš”?
βœ–οΈ

μ½”λ“œλ₯Ό μž‘μ„±ν•˜λ‹€λ³΄λ©΄ 파일이 λ¬΄μˆ˜ν•˜κ²Œ λ§Žμ•„μ§€κΈ° λ•Œλ¬Έμ—,
λ°˜λ“œμ‹œ νŒŒμΌμ€ πŸ“ ν•˜λ‚˜μ˜ 폴더λ₯Ό λ§Œλ“€μ–΄μ„œ κ·Έ μ•ˆμ— 또 폴더λ₯Ό λ§Œλ“œλŠ” ν˜•μ‹μœΌλ‘œ μ €μž₯ν•΄μ£Όμ–΄μ•Ό ν•©λ‹ˆλ‹€.
ν΄λ”μ˜ 이름은 λ°˜λ“œμ‹œ μ˜μ–΄λ‘œ μž‘μ„±ν•΄μ•Ό ν•˜λ©°, 파일λͺ…은 λͺ¨λ‘ μ˜μ–΄ ν˜•μ‹μœΌλ‘œλ§Œ μ§€μ›ν•˜κ³  μžˆμ–΄μš”.
νŒŒμΌμ„ λ§Œλ“œλŠ” 파일 λͺ…λͺ… κ·œμΉ™μ΄ μžˆμ–΄ μ΄λ―Έμ§€λ‘œ μ„€λͺ…ν•΄λ“œλ¦¬κ² μŠ΅λ‹ˆλ‹€.

폴더 이름 δΈ­ ⭐index.html은
μ›ΉνŽ˜μ΄μ§€μ—μ„œ λ§¨μ²˜μŒμ— λ‚˜μ˜€λŠ” 메인 νŽ˜μ΄μ§€ λ¬Έμ„œμΈλ°μš”.
이름은 μˆ˜μ •ν•΄μ„œλŠ” μ•ˆλ˜λ©°, λ°˜λ“œμ‹œ ⭐index.html의 μ΄λ¦„λ§Œ μ„€μ •ν•΄μ•Ό ν•©λ‹ˆλ‹€.

πŸ“‡ html μ½”λ“œ μž‘μ„± 01
βœ–οΈ
본격적으둜 μ‹œμž‘ν•˜κΈ° μ•žμ„œ 폴더λ₯Ό ν•˜λ‚˜ λ§Œλ“€μ–΄μ£Όκ² μŠ΅λ‹ˆλ‹€.
파일λͺ…은 web01둜 μž‘μ„±ν•˜κ² μŠ΅λ‹ˆλ‹€.


μƒμ„±λœ 폴더λ₯Ό λΉ„μ£Όμ–Ό μŠ€νŠœλ””μ˜€ μ½”λ“œλ‘œ λŒμ–΄μ˜€κ² μŠ΅λ‹ˆλ‹€.


이후 μƒˆνŒŒμΌμ„ λ§Œλ“€μ–΄μ€„κ±΄λ°μš”, 이름은 web01.html둜 ν•˜κ² μŠ΅λ‹ˆλ‹€.
+ ⭐ λ°˜λ“œμ‹œ ν™•μž₯자 이름은 . λ’€λ‘œ μž‘μ„±ν•΄μ£Όμ–΄μ•Ό ν•˜λ©°, 이름에 . 온점이 λ“€μ–΄κ°€μ„œλŠ” μ•ˆλ©λ‹ˆλ‹€.
html μ½”λ“œλ₯Ό μž‘μ„±ν•  μ˜ˆμ •μ΄κΈ°μ— ν™•μž₯μžλŠ” .html둜 μ„€μ •ν•˜κ² μŠ΅λ‹ˆλ‹€.


처음으둜 μ„€λͺ…ν•΄λ“œλ¦΄ 뢀뢄은 πŸ“μ£Όμ„μž…λ‹ˆλ‹€.
πŸ“ ν˜•νƒœ <!--(λ‚΄μš©)-->
주석은 ~λΆ€ν„° ~κΉŒμ§€λŠ” κΈ°λŠ₯μž…λ‹ˆλ‹€ / ~κΉŒμ§€ μˆ˜μ •ν–ˆμŠ΅λ‹ˆλ‹€ λ“± μ›Ή λ¬Έμ„œ μ•ˆμ—μ„œ μ“°λŠ” λ©”λͺ¨ 같은 ν˜•νƒœλΌκ³  λ³΄μ‹œλ©΄ λ©λ‹ˆλ‹€.
λ‹¨μˆœνžˆ λ©”λͺ¨μ΄κΈ° λ•Œλ¬Έμ—, λΈŒλΌμš°μ € 상에 λ…ΈμΆœλ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.
β˜€οΈλ‹¨μΆ•ν‚€ - Ctrl + /

λ‘λ²ˆμ§Έλ‘œ μ„€λͺ…ν•΄λ“œλ¦΄ 뢀뢄은 상단 이미지에 λŒ€ν•œ λ‚΄μš©μΈλ°μš”.
!λ₯Ό μž…λ ₯ν•˜κ³  Enterλ₯Ό λˆ„λ₯΄λ©΄ ν•΄λ‹Ή 화면이 λ³΄μΌκ±°μ—μš”.
ν•΄λ‹Ή 뢀뢄은 μ›Ή λ¬Έμ„œλ₯Ό μ“°λ €λ©΄ λ°˜λ“œμ‹œ λ¨Όμ € μ ν˜€μžˆμ–΄μ•Ό ν•˜λŠ” νƒœκ·Έ μž…λ‹ˆλ‹€.
λΆ€λΆ„μ μœΌλ‘œ μ„€λͺ…ν•˜κ² μŠ΅λ‹ˆλ‹€.
⭐ <DOCTYPE html>

⭐ <html lang="ko">

⭐ <head> </head> / <meta/>

⭐ <title> </title>

⭐ <body> </body>

πŸ“Ί 개발자 λ„κ΅¬λ‘œ μ‚΄νŽ΄λ³΄λŠ” μ½”λ“œ
βœ–οΈ
웹듀은 λͺ¨λ‘ μ½”λ“œλ‘œ κ΅¬μ„±λ˜μ–΄ μžˆλŠ”λ°, μ–΄λ””μ—μ„œ κ·Έ μ½”λ“œλ₯Ό λ³Ό 수 μžˆμ„κΉŒμš”?
방법은 μ•„μ£Ό κ°„λ‹¨ν•©λ‹ˆλ‹€.
아무 μ›ΉνŽ˜μ΄μ§€ ν•˜λ‚˜λ₯Ό μ—΄μ–΄μ€€ λ’€ β˜€οΈF12λ²„νŠΌμ„ λˆŒλŸ¬μ£Όμ„Έμš”.

μ΄λ ‡κ²Œ κ°„λ‹¨ν•˜κ²Œ 개발자 도ꡬλ₯Ό 톡해 ν˜„μž¬ μ›Ή νŽ˜μ΄μ§€μ˜ μ½”λ“œ ꡬ성에 λŒ€ν•΄ μ•Œμ•„λ³Ό 수 μžˆλ‹΅λ‹ˆλ‹€.

πŸ”” λ°˜λ“œμ‹œ μ•Œκ³  μžˆμ–΄μ•Ό ν•˜λŠ” μ›Ή ν‘œμ€€μ— λŒ€ν•˜μ—¬

πŸ—¨οΈ μ†μœΌλ‘œ 직접 κ³΅λΆ€ν•œ λ‚΄μš©μ„ λ°”νƒ•μœΌλ‘œ μž‘μ„±ν•œ κΈ€μ΄λžλ‹ˆλ‹€ !
βœ–οΈ
μ•žμœΌλ‘œλ„ μ—΄μ‹¬νžˆ κ³΅λΆ€ν•΄μ„œ λ§Žμ€ λ‚΄μš©μ„ κ³΅μœ ν•˜κ² μŠ΅λ‹ˆλ‹€ :)

profile
You_Jin.
🎧 α΄˜ΚŸα΄€ΚΙͺΙ΄Ι’: UXUI (Feat: coding) ─────────βšͺ───── 𝟸:𝟷𝟾 / 𝟹:πŸ»πŸΌβ € γ…€ ◄◄⠀▐▐⠀►► ───○ πŸ”Š
이전 포슀트

☁️ [UXUI] 1120 FIGMA - ν”Όκ·Έλ§ˆ 기초 3

λ‹€μŒ 포슀트

☁️ [UXUI] 1121 FIGMA - ν”Όκ·Έλ§ˆ 기초 4

0개의 λŒ“κΈ€