Guidelines

맀λ ₯μžˆλŠ” μ›Ήμ‚¬μ΄νŠΈμ˜ 핡심 ꡬ성 μš”μ†Œ

  1. κΉ”λ”ν•œ 첫인상: μ‚¬λžŒμ—κ²Œ 첫인상이 μ€‘μš”ν•œ κ²ƒμ²˜λŸΌ, μ›Ήμ‚¬μ΄νŠΈλ„ 첫인상이 μ€‘μš”ν•©λ‹ˆλ‹€. κΉ”λ”ν•˜κ³  전문적인 λ””μžμΈμœΌλ‘œ 방문자의 λˆˆκΈΈμ„ ν•œλˆˆμ— μ‚¬λ‘œμž‘μ•„μ•Ό ν•©λ‹ˆλ‹€.

  2. λͺ…ν™•ν•œ μ„Ήμ…˜ ꡬ성: 정보λ₯Ό κ΅¬μ‘°ν™”λœ μ„Ήμ…˜(Section)으둜 λ‚˜λˆ„μ–΄ 보기 μ‰½κ²Œ ꡬ성해야 ν•©λ‹ˆλ‹€. 예λ₯Ό λ“€μ–΄ 포트폴리였 μ›Ήμ‚¬μ΄νŠΈλŠ” 이λ ₯, μž‘ν’ˆ μ†Œκ°œ, μ—°λ½μ²˜ 등을 각각의 μ„Ήμ…˜μœΌλ‘œ ꡬ성할 수 μžˆμŠ΅λ‹ˆλ‹€.

  3. μ‹ λ’° 확보 μš”μ†Œ: ν›„κΈ°, μˆ˜μƒ λ‚΄μ—­, μΆ”μ²œμ„œ λ“± 신뒰성을 λ†’μ΄λŠ” μš”μ†Œλ₯Ό 포함해 μ›Ήμ‚¬μ΄νŠΈ 방문자의 μ‹ λ’°λ₯Ό μ–»μ–΄μ•Ό ν•©λ‹ˆλ‹€.

  4. 동적인 μš”μ†Œ: μ›Ήμ‚¬μ΄νŠΈμ— μΈν„°λž™ν‹°λΈŒ(Interactive)ν•œ 동적 μš”μ†Œ(예: μ• λ‹ˆλ©”μ΄μ…˜, μΈν„°λž™ν‹°λΈŒ κ·Έλž˜ν”½ λ“±)λ₯Ό 포함해 방문자의 참여와 관심을 μœ λ°œν•˜λŠ” 것이 μ’‹μŠ΅λ‹ˆλ‹€.

  5. μ—°λ½μ²˜ 정보: λ°©λ¬Έμžκ°€ μ›Ήμ‚¬μ΄νŠΈ κ΄€λ¦¬μžμ—κ²Œ 연락할 수 μžˆλ„λ‘ 이메일과 같은 μ—°λ½μ²˜ μ •λ³΄λ‚˜ λ¬Έμ˜ν•˜κΈ° 폼(Form)을 λ°°μΉ˜ν•©λ‹ˆλ‹€.


κ·Έλ ‡λ‹€λ©΄ 맀λ ₯적인 μ›Ήμ‚¬μ΄νŠΈλ₯Ό μ–΄λ–»κ²Œ μ½”λ”©ν•  수 μžˆμ„κΉŒμš”?

μ§€κΈˆλΆ€ν„° μ›Ήμ‚¬μ΄νŠΈλ₯Ό λ‚΄ μ†μœΌλ‘œ 직접 λ§Œλ“œλŠ” 방법을 ν•˜λ‚˜μ”© λ°°μ›Œλ³΄κ² μŠ΅λ‹ˆλ‹€ πŸ‘

Mission
0 / 1

CSS둜 ν…μŠ€νŠΈ 색상 λ³€κ²½ν•˜κΈ°

CSSλŠ” μ›ΉνŽ˜μ΄μ§€μ˜ λ””μžμΈμ„ κΎΈλ―ΈλŠ” μ–Έμ–΄μž…λ‹ˆλ‹€. CSS 탭을 ν΄λ¦­ν•˜λ©΄

1) μ•„λž˜μͺ½ ν…Œλ‘λ¦¬(border-bottom)둜
2) 5px λ‘κ»˜μ˜
3) μ‹€μ„ (solid)으둜 κ΅¬μ„±λœ
4) 연두색(yellowgreen) 선을 μ •μ˜ν•˜λŠ”

border-bottom: 5px solid yellowgreen;

CSS μ½”λ“œλ₯Ό ν™•μΈν•˜μ‹€ 수 μžˆμŠ΅λ‹ˆλ‹€. μ—¬κΈ°μ„œ ν…μŠ€νŠΈμ˜ 색상을 연두색이 μ•„λ‹Œ νŒŒλž€μƒ‰μœΌλ‘œ λ³€κ²½ν•˜λ €λ©΄, μ•„λž˜ 빈칸과 같이 yellowgreenκ°€ 있던 μœ„μΉ˜μ— blueλ₯Ό μž…λ ₯ν•˜λ©΄ λ©λ‹ˆλ‹€.

λΉˆμΉΈμ— blueλ₯Ό μž…λ ₯ν•˜κ³  정닡을 확인해 λ³΄μ„Έμš”! πŸ‘¨πŸ»β€πŸ’»

.border-highlight {

  border-bottom: 5px solid 
;

}

Guidelines

AI Tutor

Publish

Design

Upload

Notes

Favorites

Help