πŸ“° News/think

Bootstrapμ΄λž€?

kkh1902 2022. 1. 22. 18:52
728x90
λ°˜μ‘ν˜•

β– λΆ€νŠΈμŠ€νŠΈλž© 탄생배경

 

 μ›Ή νŽ˜μ΄μ§€μ˜ 개발이 진행 될 λ•Œ, 개발자의 μ·¨ν–₯에 따라 도ꡬ도 λ‹€λ₯΄κ³  μžμ‹ λ§Œμ˜ 라이브러리λ₯Ό μ‚¬μš©ν•˜κΈ°λ„ ν•΄μ„œ 보톡은 개발 μ‹œμž‘μ „μ— μ–΄λŠμ •λ„μ˜ ν‘œμ€€μ„ 정해놓고 μž‘μ—…μ„ 진행 ν•˜κΈ°λ„ ν•œλ‹€. κ·ΈλŸ¬λ‚˜, μ—¬λŸ¬ 이유둜 이런 μž‘μ—…μ΄ μ§„ν–‰λ˜μ§€ μ•Šμ€ 경우 각 κ°œλ°œμžλ“€μ΄ κ°œλ°œν•œ 결과물이 제각각이기 λ•Œλ¬Έμ—, νŽ˜μ΄μ§€μ˜ 각 λΆ€λΆ„ λ˜λŠ” κΈ°λŠ₯λ³„λ‘œ 뢀뢄적인 μž‘μ—…μ„ μ§„ν–‰ν•œ ν›„ 병합 ν•˜λŠ”λ° μžˆμ–΄μ„œ μƒλ‹Ήν•œ 어렀움이 μžˆλ‹€. 이런경우, μ‹¬μ§€μ–΄λŠ” ν‘œμ€€μ„ μ •ν•˜λŠ” 단계뢀터 λ‹€μ‹œ κ°œλ°œμ— 듀어가기도 ν•œλ‹€.

 νŠΈμœ„ν„°μ—λŠ” μˆ˜λ§Žμ€ 직원듀이 κ°μžκ°€ 맑은 λΆ€λΆ„μ˜ ν”„λ‘ νŠΈμ—”λ“œ κ°œλ°œμ„ μ§„ν–‰ν•˜κΈ° λ•Œλ¬Έμ—, μœ„μ™€ 같은 일관성 μœ μ§€μ— κ΄€ν•œ λ¬Έμ œμ— 항상 μ§λ©΄ν•˜κ³€ ν–ˆλ‹€. μœ„μ™€ 같은 λ¬Έμ œμ μ„ ν•΄κ²°ν•˜κ³ μž νŠΈμœ„ν„°μ˜ 직원인 Mark Otto와 Jacob Thornton은 1λ…„λ™μ•ˆ 업무외 μ‹œκ°„κ³Ό 주말에 ν”„λ‘œμ νŠΈλ₯Ό μ§„ν–‰ν•˜λ©΄μ„œ, μ •ν˜•ν™”λœ μΈν„°νŽ˜μ΄μŠ€ ν˜•νƒœμ˜ λΆ€νŠΈμŠ€νŠΈλž©μ˜ μ΄ˆκΈ°λ²„μ „μΈ Twitter Blueprintλ₯Ό κ°œλ°œν–ˆλ‹€. 초기 버전 개발 ν›„ 사내 κ°œλ°œμžλ“€μ—κ²Œ κ³΅κ°œν–ˆλŠ”λ°, 폭발적인 λ°˜μ‘μ„ μ–»μ—ˆλ‹€. μ΄ν›„λ‘œ 점차 λ§Žμ€ κ°œλ°œμžλ“€μ΄ ν”„λ‘œμ νŠΈμ— νˆ¬μž… 됐고, ν•˜λ‚˜μ˜ ν”„λ ˆμž„μ›Œν¬ ν˜•νƒœλ‘œ λ°œμ „ν–ˆλ‹€. 

 

 Twitter Blueprint ν”„λ‘œμ νŠΈκ°€ λΆ€νŠΈμŠ€νŠΈλž©μ΄λΌλŠ” 이름을 κ°€μ§€κ²Œ 된 것은 2011년에 κΉƒν—ˆλΈŒμ— μ˜€ν”ˆμ†ŒμŠ€λ‘œ λ°œν‘œλ˜λ©΄μ„œ λΆ€ν„° μ΄λ‹€. 2011λ…„ 8월에 μ˜€ν”ˆμ†ŒμŠ€λ‘œ 등둝 된 λΆ€νŠΈμŠ€νŠΈλž©μ€ 2014λ…„ 6월을 κΈ°μ€€μœΌλ‘œ κΉƒν—ˆλΈŒμ—μ„œ κ°€μž₯ μΈκΈ°μžˆλŠ” ν”„λ‘œμ νŠΈκ°€ λœλ‹€. 글을 μ“°λŠ” μ§€κΈˆμ˜ μ‹œμ μ—λ„ κΉƒν—ˆλΈŒμ— λΆ€νŠΈμŠ€νŠΈλž©κ³Ό κ΄€λ ¨λœ ν”„λ‘œμ νŠΈλŠ” μˆ˜λ°±κ°œμ— 이λ₯΄λ©°, μˆ˜λ§Žμ€ κ°œλ°œμžλ“€μ— μ˜ν•΄ κΎΈμ€€νžˆ λ°œμ „ν•˜κ³  μžˆλ‹€.

β– λΆ€νŠΈμŠ€νŠΈλž©μ΄λž€?

 

 

 

 λΆ€νŠΈμŠ€νŠΈλž©μ€ νŠΈμœ„ν„°μ—μ„œ μ‚¬μš©ν•˜λŠ” 각쒅 λ ˆμ΄μ•„μ›ƒ, λ²„νŠΌ, μž…λ ₯μ°½ λ“±μ˜ λ””μžμΈμ„ CSS와 Javascript둜 λ§Œλ“€μ–΄ 놓은 것이닀. μ›Ή λ””μžμ΄λ„ˆλ‚˜ 개발자 μ‚¬μ΄μ—μ„œλŠ” μ›Ή λ””μžμΈμ˜ 혁λͺ…이라고 뢈릴 μ •λ„λ‘œ ν­λ°œμ μ€ λ°˜μ‘μ„ μ–»λŠ” ν”„λ ˆμž„μ›Œν¬μ΄λ‹€.

 

 'ν”„λ ˆμž„μ›Œν¬' 라고 ν•˜λŠ” 것은 μž¬μ‚¬μš©μ΄ κ°€λŠ₯ν•œ μš”μ†Œλ“€μ˜ μ§‘ν•©λ˜μ–΄ 있으며, μ •ν•΄μ§„ ꡬ쑰와 ν‹€ μ•ˆμ—μ„œ μ΄κ²ƒλ“€μ΄ ν™•μž₯이 κ°€λŠ₯ν•œ 기반 μ½”λ“œλ‘œ 이루어 짐을 λœ»ν•œλ‹€. jqueryλŠ” 라이브러리이고, λΆ€νŠΈμŠ€νŠΈλž©μ€ ν”„λ ˆμž„μ›Œν¬λ‹€. λ”°λΌμ„œ, μš°λ¦¬λŠ” 'λΆ€νŠΈμŠ€νŠΈλž© ν”„λ ˆμž„μ›Œν¬μ—μ„œ jquery 라이브러리λ₯Ό μ‚¬μš©ν•  수 μžˆλ‹€.'라고 말 ν•  수 μžˆλ‹€.

 

 

 

 λΆ€νŠΈμŠ€νŠΈλž©μ— μ—΄κ΄‘ν•˜λŠ” μ΄μœ λŠ” κΈ€μž, 인용문, λͺ©λ‘, ν‘œ, μž…λ ₯폼, λ²„νŠΌ, 이미지, μ•„μ΄μ½˜ λ“±μ˜ μžμž˜ν•œ 것 뿐만이 μ•„λ‹ˆλΌ, λ“œλ‘­λ‹€μš΄ 메뉴, λ²„νŠΌ, νƒ­, 리슀트, 메뉴바, νŽ˜μ΄μ§€ 이동 λ°”, μ•Œλ¦Ό λ©”μ‹œμ§€, 썸넀일, 진행 λ°” λ“±μ˜ μ›Ή νŽ˜μ΄μ§€μ—μ„œ 많이 μ“°μ΄λŠ” μš”μ†Œλ₯Ό 거의 μ „λΆ€ λ‚΄μž₯ν•˜κ³  있고, μž…λ§›μ— 따라 μž¬μ‚¬μš© ν•  수 있기 λ•Œλ¬Έμ΄λ‹€. μ΄ λ•Œλ¬Έμ— μ›¬λ§Œν•œ μ›Ή νŽ˜μ΄μ§€λŠ” λΆ€νŠΈμŠ€νŠΈλž©μ˜ CSS와 JavaScript, κ΄€λ ¨ μ΄λ―Έμ§€λ§Œ μ„€μΉ˜ν•˜κ³  미리 μ§€μ •λœ CSS ν΄λž˜μŠ€λ‚˜ JavaScript ν•¨μˆ˜λ§Œ 뢈러였면 νŠΈμœ„ν„°μ—μ„œ μ“°λŠ” 것과 λΉ„μŠ·ν•œ λ””μžμΈμ΄ λšλ”± λ§Œλ“€μ–΄μ§„λ‹€.

 

 κ²Œλ‹€κ°€ PC용 λ””μžμΈ 뿐만 μ•„λ‹ˆλΌ νƒœλΈ”λ¦Ώμ΄λ‚˜ 슀마트폰 같은 λͺ¨λ°”μΌμš© λ””μžμΈλ„ μ§€μ›ν•œλ‹€. 이 λ•Œλ¬Έμ— λ””μžμΈμ„ ν•  μ‹œκ°„μ΄ 크게 쀄어듀고, μ—¬λŸ¬ μ›Ή λΈŒλΌμš°μ €λ₯Ό μ§€μ›ν•˜κΈ° μœ„ν•œ 크둜슀 λΈŒλΌμš°μ§•μ— 골머리λ₯Ό 썩일 ν•„μš”κ°€ μ—†λ‹€. 크둜슀 λΈŒλΌμš°μ§•μ„ μœ„ν•œ 각쒅 핡도 λ“€μ–΄ 있기 λ•Œλ¬Έμ΄λ‹€. κ±°κΈ°λ‹€ μ›Ή λΈŒλΌμš°μ € 크기에 따라 μžλ™μœΌλ‘œ μ •λ ¬λ˜λŠ” "κ·Έλ¦¬λ“œ μ‹œμŠ€ν…œ"을 μ±„μš©ν•˜κ³  있기 λ•Œλ¬Έμ— ν•˜λ‚˜μ˜ μ›Ή νŽ˜μ΄μ§€λ₯Ό λ°μŠ€ν¬νƒ‘, νƒœλΈ”λ¦Ώ, 슀마트폰 λͺ¨λ‘μ—μ„œ 무리없이 보게 λ§Œλ“€ 수 μžˆλ‹€. μ¦‰ 'λ°˜μ‘ν˜• μ›Ή λ””μžμΈ'을 μ§€μ›ν•œλ‹€λŠ” μ˜λ―Έμ΄λ‹€.

 

 μΆ”κ°€μ μœΌλ‘œ 이게 μ˜€ν”ˆμ†ŒμŠ€μ΄λ©°, μƒμ—…μ μœΌλ‘œ 이용이 κ°€λŠ₯ν•˜λ‹€. λΈŒλΌμš°μ €μ— bootstrap template ν‚€μ›Œλ“œλ‘œ κ²€μƒ‰ν•˜λ©΄ μ–΄λ§ˆμ–΄λ§ˆν•œ μ–‘μ˜ λΆ€νŠΈμŠ€νŠΈλž© ν…œν”Œλ¦Ώμ΄ μ‘΄μž¬ν•˜κ³ , 무료둜 μ œκ³΅ν•˜λŠ” κ²½μš°λ„ μžˆμœΌλ‚˜ 유료둜 νŒλ§€ν•˜λŠ” κ²½μš°λ„ λ§Žλ‹€. MIT ν—ˆκ°€μ„œλ₯Ό μ‚¬μš©ν•˜λŠ”λ°, 재배포 λ©΄μ—μ„œλŠ” GPL보닀 νœ μ”¬ 자유둜운 λΌμ΄μ„ μŠ€μ΄λ‹€.

 

<정리>

μ •λ¦¬λ˜μ–΄μ§€κ³  ν˜‘μ—…ν•˜κΈ°μ— μ’‹κ³  μ–΄λŠμ •λ„μ˜ ν‘œμ€€μ„ 가지고 μžˆκΈ°λ•Œλ¬Έμ— κ³΅λΆ€ν•˜κΈ°λ„ μ’‹κ³  쓰기에도 쒋을 것이닀. HTMLμ΄λ‚˜ CSS의 지식이 뢀쑱해도 이미 μ„ μž„ κ°œλ°œμžλ“€μ΄ λ§Œλ“€μ–΄λ†“μ€ 것을 κ°”λ‹€κ°€ μ“°κΈ°λ§Œ ν•˜λ©΄ λ˜λŠ”κ±°λ‹€. κ·Έκ±Έ μ΄μš©ν•΄μ„œ 더 멋진 ν”„λ‘œμ νŠΈλ‚˜ 일을 ν•΄μ•Ό λ˜‘λ˜‘ν•˜κ²Œ 일을 ν•˜λŠ” 것이 μ•„λ‹κΉŒ? λ°”λ³΄μ²˜λŸΌ κΉ‘ HTMLν•˜λŠ” 것은 μ‹œκ°„ λ‚­λΉ„λ‹€. μ‹œκ°„μ€ μ—†λ‹€.





728x90
λ°˜μ‘ν˜•