[TIL] 210827

Lee SyongΒ·2021λ…„ 8μ›” 27일
0

TIL

λͺ©λ‘ 보기
9/204
post-thumbnail

πŸ“ 였늘 ν•œ 것

1. λ°•μŠ€ λ‚˜λˆ„κΈ°

2. μ‹œλ©˜ν‹± νƒœκ·Έ

3. λ§ˆν¬μ—…

  • 컀밋 μ™„λ£Œ! 😁

  • μ—˜λ¦¬ λ‹˜μ΄ 배포해주신 포트폴리였 pdf 파일만 보고 λ°•μŠ€λ₯Ό λ‚˜λˆˆ ν›„ 직접 μ²˜μŒλΆ€ν„° λκΉŒμ§€ μ½”λ“œλ₯Ό μž‘μ„±ν•΄λ΄€λ‹€. λ„ˆλ¬΄ 재밌고 μ‹ κΈ°ν•œ κ²½ν—˜μ΄μ—ˆλ‹€. λͺ¨λ₯΄λŠ” 뢀뢄도 μžˆμ—ˆμ§€λ§Œ μ½”λ”©ν•˜λ©΄μ„œ 생긴 μ§ˆλ¬Έλ“€μ€ κ·Έλ•Œκ·Έλ•Œ λ©”λͺ¨μž₯에 λ”°λ‘œ μ •λ¦¬ν•΄λ‘μ—ˆλ‹€. μ•„μ§κΉŒμ§€ 닡을 λͺ» κ΅¬ν•œ μ§ˆλ¬Έλ“€λ„ μžˆμ§€λ§Œ, κ°œμ€‘μ—λŠ” 검색을 톡해 λ°”λ‘œ ν•΄κ²°ν•œ μ§ˆλ¬Έλ„ μžˆμ—ˆκ³ , λ‚˜μ€‘μ— κ°•μ˜λ₯Ό λ“€μœΌλ©΄μ„œ 닡을 κ΅¬ν•œ μ§ˆλ¬Έλ„ μžˆμ—ˆλ‹€.

  • 이둠만 μ­‰ λ°°μš°λ©΄μ„œ κ°„λ‹¨ν•œ 예제둜 μ—°μŠ΅ν•˜λŠ” 것보닀 백만 λ°° 더 μž¬λ°ŒλŠ” κ±° κ°™λ‹€. μ™œ μ—¬κΈ°μ €κΈ°μ„œ 이둠을 배울 λ•Œ λ―Έλ‹ˆ ν”„λ‘œμ νŠΈ 완성을 λͺ©ν‘œλ‘œ ν•˜κ³  κ³΅λΆ€ν•˜λΌλŠ” 건지 λͺΈμ†Œ 느꼈던 μ‹œκ°„μ΄μ—ˆλ‹€.

  • λ°•μŠ€ λ‚˜λˆ„κΈ°κ°€ 많이 도움이 됐닀. λ ˆμ΄μ•„μ›ƒμ„ λ°•μŠ€λ‘œ λ‚˜λˆ„κ³  이λ₯Ό λ°”νƒ•μœΌλ‘œ ꡬ쑰λ₯Ό λ©”λͺ¨μž₯에 λΆ„μ„ν•œ ν›„ HTML둜 μž‘μ„±ν–ˆλ‹€. λ°˜λ³΅λ˜λŠ” 것듀이 무엇이 μžˆλŠ”μ§€ ν™•μΈν•˜κ³  classλ₯Ό λΆ€μ—¬ν•  λ•Œ κ³ λ €ν–ˆλ‹€.

  • κ·ΈλŸ¬λ‚˜ λ‹Ήμ—°ν•˜κ²Œλ„ λ‚΄κ°€ μž‘μ„±ν•œ μ½”λ“œμ™€ μ—˜λ¦¬ λ‹˜μ΄ μž‘μ„±ν•œ μ½”λ“œλŠ” μ—„μ²­λ‚œ 차이가 났닀. κ°•μ˜λ₯Ό λ³΄λ©΄μ„œ 많이 놀라고 λ°°μ› λ‹€. λͺ°λžλ˜ 것도 μžˆμ—ˆμ§€λ§Œ, λΆ„λͺ… λͺ¨λ₯΄λŠ” 게 μ•„λ‹Œλ° μ—¬κΈ°μ„œ μ™œ μ΄λ ‡κ²Œ ν–ˆμ„κΉŒ μ•ˆνƒ€κΉŒμš΄ 것도 λ§Žμ•˜λ˜ κ±° κ°™λ‹€. ν™•μ‹€νžˆ 주어진 과제λ₯Ό λ¨Όμ € 직접 ν•΄λ³Έ ν›„ κ°•μ˜λ₯Ό λ³΄λŠ” 게 백만 λ°° 더 도움이 λ˜λŠ” λ“―ν•˜λ‹€.


πŸ™‹β€β™€οΈ μ½”λ”©ν•˜λ©΄μ„œ 생긴 질문

Q1. μ–΄λ””κΉŒμ§€ classλ₯Ό λΆ€μ—¬ν•΄μ•Ό ν•˜λŠ” 걸까? 계속 μ“°λ‹€ λ³΄λ‹ˆ μ„ νƒμžκ°€ λ„ˆλ¬΄ λ§Žμ•„μ§€λŠ” κ±° κ°™λ‹€. κ·Έλž˜λ„ 계속 BEM(Block Elements Modifier) κ·œμΉ™μ— 따라 μƒˆλ‘œμš΄ 클래슀λ₯Ό 지정해 λ‚˜κ°€μ•Ό ν•˜λŠ” 건지 μ•„λ‹ˆλ©΄ μ›¬λ§Œν•œ 건(이 'μ›¬λ§Œν•œ κ±°'의 기쀀도 λͺ¨λ₯΄κ² μŒ) μ„ νƒμž 지정 없이 λ‚˜μ€‘μ— CSSμ—μ„œ μ˜μ‚¬ 클래슀λ₯Ό ν™œμš©ν•΄μ•Ό ν•˜λŠ” 건지 λͺ¨λ₯΄κ² λ‹€.

κ°•μ˜λ₯Ό λ“€μ–΄λ³΄λ‹ˆ μ „μžκ°€ λ§žλŠ” κ±° κ°™λ‹€. κ°€λŠ₯ν•˜λ‹€λ©΄ classλ₯Ό 뢀여해라. 단, λ°˜λ³΅λ˜λŠ” 것듀이 μžˆλŠ”μ§€ ν™•μΈν•˜κ³  효율적으둜 λΆ€μ—¬ν•  것.

Q2. <h1> νƒœκ·Έμ˜ μ •ν™•ν•œ μ •μ˜κ°€ 무엇인가?

h1은 λ¬Έμ„œμ˜ μ΅œμƒμœ„ 제λͺ©μ„ λ‚˜νƒ€λ‚΄λŠ” νƒœκ·Έλ‘œμ„œ ν•˜λ‚˜μ˜ λ¬Έμ„œμ— ν•œ 번만 μ§€μ •ν•˜λŠ” 것이 μ’‹λ‹€. 보톡은 header λ‚΄μ˜ μ‚¬μ΄νŠΈ λ‘œκ³ μ— ν•΄λ‹Ήν•œλ‹€.

κ·ΈλŸ¬λ‚˜ sectionλ³„λ‘œ ν•˜λ‚˜μ”© λΆ€μ—¬ν•  μˆ˜λ„ μžˆλ‹€. 이 κ°•μ˜μ˜ κ²½μš°λ„ κ·ΈλŸ¬ν•˜λ‹€.

Q3. projects-box λΆ€λΆ„ μ½”λ“œλ₯Ό μ–΄λ–»κ²Œ μ§œμ•Όν• μ§€ λͺ¨λ₯΄κ² λ‹€. 일반적인 nav도 μ•„λ‹Œ κ±° 같은데 μ–΄λ–€ μΉ΄ν…Œκ³ λ¦¬λ₯Ό λˆ„λ₯΄λŠλƒμ— 따라 λ°‘μ˜ λ°•μŠ€κ°€ λͺ‡ 개만 λ³΄μ˜€λ‹€ μ•ˆ λ³΄μ˜€λ‹€ ν•˜λŠ” 건 λŒ€μ²΄ μ–΄λ–»κ²Œ ν•˜λŠ” 걸까?

navκ°€ μ•„λ‹ˆλΌ buttonμ΄μ—ˆλ‹€πŸ˜…

Q4. <a> νƒœκ·ΈλŠ” ν•¨κ»˜ν•˜λŠ” λ‹€λ₯Έ νƒœκ·Έλ“€μ˜ λ°”κΉ₯에 μ”Œμš°λŠ” 것인가? μ•ˆμ— μ”Œμš°λŠ” 것인가?

결과적으둜 화면상에 λ‚˜νƒ€λ‚˜λŠ” λͺ¨μ–‘μ΄λ‚˜ νš¨κ³ΌλŠ” μ „λΆ€ λ˜‘κ°™μ§€λ§Œ, <block><inline></inline></block> 법칙에 따라 λŒ€κ°œ a νƒœκ·ΈλŠ” λ‹€λ₯Έ νƒœκ·Έλ“€μ˜ μ•ˆμͺ½μ— μœ„μΉ˜ν•˜κ²Œ λœλ‹€. κ·ΈλŸ¬λ‚˜ μ˜ˆμ™ΈμΈ κ²½μš°λ„ μžˆλ‹€. - [HTML] a tag / li tag λ¬Έμ œν•΄κ²° μ°Έκ³ 

Q5. λ‹€λ₯Έ λΆ€λΆ„κ³Ό κ΅¬λΆ„λ˜λŠ” ν…μŠ€νŠΈλ“€μ΄ μžˆλŠ” 뢀뢄은 <div>λ₯Ό 써야 ν•˜λ‚˜? <p>λ₯Ό 써야 ν•˜λ‚˜?

λ‘˜ λ‹€ 블둝 레벨 μš”μ†Œμ΄λ©΄μ„œ div νƒœκ·Έλ„ p νƒœκ·Έμ²˜λŸΌ ν…μŠ€νŠΈ μž…λ ₯이 κ°€λŠ₯ν•˜μ§€λ§Œ, div νƒœκ·ΈλŠ” μ‹€μ œλ‘œλŠ” HTML λ¬Έμ„œμ˜ μ˜μ—­μ„ ꡬ뢄할 λ•Œ 쓰인닀. ν…μŠ€νŠΈλ₯Ό μž…λ ₯ν•  땐 p νƒœκ·Έλ₯Ό μ‚¬μš©ν•˜μž.

Q6. <header> 뢀뢄이 μ΄λ ‡κ²Œ 넓어도 λ˜λ‚˜? headerλ₯Ό logo와 navbar만으둜 κ΅¬μ„±ν•˜κ³  intro 뢀뢄은 λ”°λ‘œ λΉΌμ•Ό ν• κΉŒ?

κ°•μ˜μ—μ„œλŠ” header와 footerλ₯Ό μ•„μ˜ˆ 쓰지 μ•Šμ•˜λ‹€. 크게 <nav>와 <section>λ“€λ§ŒμœΌλ‘œ κ΅¬μ„±ν–ˆλ‹€.


πŸ” κ°•μ˜λ₯Ό 톡해 배운 것

πŸ“Œ 각 sectionλ§ˆλ‹€ κ³΅ν†΅μ μœΌλ‘œ 지적받은 것듀

  • ν™•μ‹€ν•˜κ²Œ κ΅¬λ³„λ˜λŠ” 각 section듀에 class λŒ€μ‹  μœ μΌλ¬΄μ΄ν•œ idλ₯Ό 뢀여해라.

  • classλ₯Ό BEM κ·œμΉ™μ— 따라 μž‘μ„±ν•΄λΌ. 단, λ°˜λ³΅λ˜λŠ” 것듀이 μžˆλŠ”μ§€ ν™•μΈν•˜κ³  효율적으둜 λΆ€μ—¬ν•΄μ•Ό ν•œλ‹€. (λ‚˜λŠ” μΌ€λ°₯ 방식을 따라야 ν•΄μ„œ _은 μ‚¬μš©ν•  수 μ—†κΈ° λ•Œλ¬Έμ— -만 μ¨μ„œ μˆ˜μ •ν–ˆλ‹€.)

  • h1, h2, h3 νƒœκ·Έλ₯Ό μ“Έ 곳을 κ΅¬λΆ„ν•΄μ„œ μ‚¬μš©ν•΄λΌ.

1. nav.navbar

  • <section>λ³„λ‘œ μ•Œμ•„λ³΄κΈ° μ‰½κ²Œ 주석을 남겨라.

  • κ°•μ˜μ—μ„œλŠ” header와 footerλ₯Ό λ§Œλ“€μ§€ μ•Šκ³  <nav> 속 <li> μ½˜ν…μΈ λŒ€λ‘œ section을 λ‚˜λˆ λΌ.

  • <ul>의 class = navbar-menu / <li>의 class = navbar-menu-item

  • 일단 navbarκΉŒμ§€ μž‘μ„±ν•˜κ³  ν•œλ²ˆ commit을 해라.

  • κ·Έλž˜μ„œ λ‚˜λ„ μ•žμ„œ μž‘μ„±ν•΄λ†“μ€ HTML을 둜컬 μ €μž₯μ†Œμ— commitν•œ ν›„ Github에 push ν–ˆλŠ”λ° κ°‘μžκΈ° no newlines at end of filesλΌλŠ” μ—λŸ¬κ°€ λ–΄λ‹€. β†’ 해결법: </html>λ§ˆμ§€λ§‰μ— Enterλ₯Ό 눌러라.

2. section.home

  • λ‚˜λŠ” nav와 사진 및 μ†Œκ°œ 문ꡬλ₯Ό ν•¨κ»˜ header μ•ˆμ— λ„£μ—ˆλŠ”λ°, κ°•μ˜μ—μ„œλŠ” 이λ₯Ό nav.nabar와 section.home으둜 κ΅¬λΆ„ν–ˆλ‹€.

  • h1, h2 νƒœκ·Έλ₯Ό section.home의 μ†Œκ°œ 문ꡬ에 μ§€μ •ν–ˆλ‹€. μ²˜μŒμ— μ΄λ ‡κ²Œ 썼닀가 고친 κ±°μ˜€λŠ”λ° 괜히 κ³ μ³€...

3. section.about

  • imgλ₯Ό 감싸고 μžˆλŠ” 동그라미 borderλ₯Ό μ„€μ •ν•΄μ£ΌκΈ° μœ„ν•΄ img νƒœκ·Έλ₯Ό κ°μ‹ΈλŠ” div νƒœκ·Έλ₯Ό 지정해라.

  • λͺ¨λ“  κ°€μš΄λ° 정렬이 center μ†μ„±κ°’λ§ŒμœΌλ‘œ ν•΄κ²°λ˜μ§„ μ•ŠλŠ”λ‹€. 그럴 λ•ŒλŠ” μ€„λ°”κΏˆ
    νƒœκ·Έλ₯Ό μ΄μš©ν•΄λΌ.

  • πŸ™‹β€β™€οΈ 질문
    stack-titleμ—μ„œ μ™œ <p>κ°€ μ•„λ‹ˆλΌ <div>λ₯Ό μ‚¬μš©ν•œ 걸까


✨ 내일 ν•  것

  1. 남은 λ“œλ¦Όμ½”λ”© κ°•μ˜ μ΄μ–΄μ„œ
profile
λŠ₯λ™μ μœΌλ‘œ μ‚΄μž, ν–‰λ³΅ν•˜κ²ŒπŸ˜

0개의 λŒ“κΈ€