[Front-end๐Ÿฆ] #17 Bootstrap+

๋˜์ƒยท2021๋…„ 11์›” 22์ผ
0

front-end

๋ชฉ๋ก ๋ณด๊ธฐ
28/58
post-thumbnail

1. ์‹ค์ „ CSS tip

#16 ์— ์ถ”๊ฐ€ ์ž‘์„ฑ.




2. Bootstrap

bootstrap container

bootstrap container์˜ ๊ธฐ๋ณธ ๊ตฌ์กฐ
: 12*12 grid ์ฒ˜๋Ÿผ ์ชผ๊ฐœ๋†“๊ณ , row, col ์— ๋Œ€ํ•œ class ๋ฅผ ์ฃผ๋ฉด, class="col-md-4 ์ˆซ์ž๋งŒํผ ํ•ฉ์ณ์ง„ row, col ์นธ์ด ์ƒ๊ธด๋‹ค.

์กฐ์ฝ”๋”ฉ๋‹˜ ํŠน๊ฐ• ์‹œ๊ฐ„์— ํ•œ ๊ฒƒ ์ฒ˜๋Ÿผ mt-5 p-3์œผ๋กœ ๋งˆ์ง„, ํŒจ๋”ฉ๋„ ์ˆ˜์ • ๊ฐ€๋Šฅํ•˜๋‹ค. ๊ฐ€์ ธ๋‹ค ์“ธ ๋””์ž์ธ๋„ ๋งŽ์Œ!

<div class="container">
    <div class="row">
      <!-- 4์นธ 6๊ฐœ or 3์นธ 5์นธ 6์นธ ์ฒ˜๋Ÿผ 12์นธ์„ ๋„˜๋Š”๊ฑธ ๋„ฃ์œผ๋ฉด ๋งˆ์ง€๋ง‰๊ฒŒ ์•Œ์•„์„œ ๋‚ด๋ ค๊ฐ. -->
      <!-- sm, md ๋“ฑ์˜ ์‚ฌ์ด์ฆˆ๋กœ ๋ฐ˜์‘ํ˜• ๋Œ€์‘ ์‰ฝ๊ฒŒ ๊ฐ€๋Šฅ. -->
        <div class="col-md-4 col-sm-6 b">hello world</div>
        <div class="col-md-4 col-sm-6 b">hello world</div>
        <div class="col-md-4 col-sm-4 b">hello world</div>
        <div class="col-md-4 col-sm-4 b">hello world</div>
        <div class="col-md-4 col-sm-4 b">hello world</div>
        <div class="col-md-4 col-sm-12 b">hello world</div>
    </div>
    <div class="row">
        <div class="col-md-3 b">hello world</div>
        <div class="col-md-3 b">hello world</div>
        <div class="col-md-3 b">hello world</div>
        <div class="col-md-3 b">hello world</div>
    </div>
</div>

์ธํ”„๋Ÿฐ์—์„œ display: grid ๊ฐ€ ๋‚˜์˜ค๊ธฐ ์ „์— ์ด๋Ÿฐ์‹์œผ๋กœ ๋งŒ๋“ค์—ˆ๋‹ค๊ณ  ์ด์•ผ๊ธฐ๋ฅผ ํ•  ๋•Œ grid ์žˆ์œผ๋‹ˆ๊นŒ ํ•„์š” ์—†๋Š”๊ฑฐ ์•„๋ƒ? ํ–ˆ์—ˆ๋Š”๋ฐ... ์•„๋‹ˆ์—ˆ๋‹ค........

tipsโœจ

  • accordian์€ ๋ˆŒ๋Ÿฌ์•ผ ๋˜๋Š”์ง€ ๋ชจ๋ฅด๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ๊ธฐ ๋•Œ๋ฌธ์— ์“ฐ์ง€ ์•Š๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.
  • ๊ณต์‹ ๋ฌธ์„œ์—์„œ ์ž์ฃผ ์“ฐ๋Š” ๊ฒƒ๋“ค์„ ๋ชจ์•„์„œ ํŒŒ์ผ์„ ๋งŒ๋“ค์–ด๋‘๋ฉด ์ฐพ์•„๋ณด์ง€ ์•Š๊ณ ๋„ ๋ณต๋ถ™ํ•ด์„œ UI๋ฅผ ๋น ๋ฅด๊ฒŒ ์งค ์ˆ˜ ์žˆ๋‹ค.
  • Card ์ค‘์š”.
  • ์ƒˆ๋กœ๊ณ ์นจ ํ•˜๋ฉด ์œ„๋กœ ์ž๋™ ์Šคํฌ๋กค ๋˜๋Š” ์ฝ”๋“œ ๊ฐ™์€ ๊ฒƒ๋„ ์ „๋ถ€ ์žˆ์Œ!!! ์™€!!!!

๋‹จ์ : custom์ด ์–ด๋ ค์›€.

+ ์—ฌ๋Ÿฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ, ํ”Œ๋Ÿฌ๊ทธ์ธ๋“ค

sweetalret2 ๊ฐ™์€ ๊ฒฝ๊ณ ์ฐฝ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋„ ๊ฐ€์ ธ๋‹ค ์“ธ ์ˆ˜ ์žˆ๋‹ค.

summernote, toast UI์˜ wysiwyg editor ๋„ ์ ์šฉํ•ด๋ณด๊ณ ,

snapappointments : ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์—์„œ ์•ˆ๋˜๋˜ select ์š”์†Œ๋“ค!

tailwind

State of CSS 2020

๊ฐ€์ ธ๋‹ค ์“ฐ๋Š” ๊ฒƒ๋„ ์—ฐ์Šต์ด ํ•„์š”ํ•˜๋‹ˆ๊นŒ ์‚ฌ์šฉํ•ด๋ณด๋Š” ์—ฐ์Šต๋„ ํ•ด๋ณด์ž.




3. JS Challenge

// element.querySelector ๋ฅผ ํƒˆ ์ˆ˜ ์žˆ๋‹ค!!!!
const loginForm = document.querySelector("#login-form");
const loginInput = loginForm.querySelector("input");
// input์—๋Š” value property๊ฐ€ ์žˆ๋‹ค. input์— ์ž…๋ ฅ๋œ ๊ฐ’์ด๋‹ค.
const value = loginInput.value 
value.length # string ๊ธธ์ด ๋ฐ˜ํ™˜.

์ž…๋ ฅ๊ฐ’ ๊ฒ€์‚ฌ : js๋กœ ์ฝ”๋“œ๋ฅผ ์งค ์ˆ˜๋„ ์žˆ์ง€๋งŒ, HTML ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜์ž.

<input required maxlength="50" type="text">

form์ด ์ œ์ถœ๋˜๋ฉด์„œ ์›น์‚ฌ์ดํŠธ๊ฐ€ ์ƒˆ๋กœ๊ณ ์นจ ๋จ. ๊ฐ’์ด ๋‚ ๋ผ๊ฐ... ์ƒˆ๋กœ๊ณ ์นจ ๋˜์ง€ ์•Š๊ฒŒ ํ•˜๋ ค๋ฉด?
-> ์‚ฌ์‹ค์€ event ๊ฐ€ ์ผ์–ด๋‚˜์„œ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ fuction์„ ๋ถ€๋ฅผ ๋•Œ, ๊ธฐ๋ณธ์ ์œผ๋กœ ์–ด๋–ค ๋™์ž‘์„ ํ•˜๋Š”์ง€์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ๋‹ด์€ ์ธ์ž๋ฅผ ํ•˜๋‚˜ ๋„˜๊ฒจ์คŒ

function onLoginSubmit(event) {
  // ์ธ์ž ์ด๋ฆ„์€ event๋กœ ์“ฐ๋Š”๊ฒŒ ๊ด€ํ–‰.
  // ํ•ด๋‹น event๊ฐ€ ์ผ์–ด๋‚ฌ์„ ๋•Œ, ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๊ธฐ๋ณธ์ ์œผ๋กœ ํ•˜๋Š” ๋™์ž‘์„ ๋ง‰์Œ!
    event.preventDefalut();
  //alert("asdf"); // alert ๋„ ๊ธฐ๋ณธ ๋™์ž‘์„ ์ž ์‹œ ๋ฉˆ์ถค.
  // ์ด ๋’ค๋กœ custom ํ•˜๋ฉด ๋จ.
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username = loginInput.value;
  // ์•„๋ž˜ ๋‘ ๋ฌธ์žฅ์˜ ๊ฒฐ๊ณผ๋Š” ๊ฐ™์Œ.
    greeting.innerText = "Hello " + username;
    greeting.innerText = `Hello ${username}`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
}
loginForm.addEventListener("submit", onLoginSubmit);

inner DB - localStorage
์ƒˆ๋กœ๊ณ ์นจ ํ•ด๋„ ์ €์žฅํ•˜๊ณ  ์žˆ์Œ!!

localStorage.setItem('myCat', 'Tom');
const cat = localStorage.getItem('myCat'); //tom
localStorage.removeItem('myCat');

์—ฌ๋Ÿฌ๋ฒˆ ์‚ฌ์šฉํ•˜๋Š” ๊ฐ’๊ณผ ์ฝ”๋“œ๋Š” ๋ณ€์ˆ˜์™€ ํ•จ์ˆ˜๋กœ ๋งŒ๋“ค์–ด์„œ ๊น”๋”ํ•˜๊ฒŒ ํ•˜์ž.

// ๋Œ€๋ฌธ์ž : ์ž์ฃผ ์“ฐ์ด๋Š” string.
const HIDDEN_CLASSNAME = "hidden";

form, greeting ๋ฌธ๊ตฌ ์–ด๋–ค ๊ฒƒ์ด ๋ณด์ด๊ฒŒ ํ• ์ง€!

const savedUserName = localStorage.getItem(USERNAME_KEY);
// ๋‘˜ ๋‹ค hidden ์ฃผ๊ณ  ์‹œ์ž‘ํ•˜์ž.
if(savedUserName === null) {
    //show the form
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit", onLoginSubmit);
} else {
    //show the greeting
    paintGreetings(savedUserName);
}



4. ์ž‘์€ ํšŒ๊ณ 

fact - ๋ฌด์Šจ ์ผ์ด ์žˆ์—ˆ๋Š”์ง€, ๋ญ˜ ํ–ˆ๋Š”์ง€

  • CSS ir ๊ธฐ๋ฒ•, sprite ์ด๋ฏธ์ง€ ๋„ฃ๋Š” ๋ฒ•์„ ๋ฐฐ์šฐ๊ณ 
  • ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์„ ํฌํ•จํ•œ ์—ฌ๋Ÿฌ CSS ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค์„ ์‚ฌ์šฉํ•ด๋ณด๊ณ 
  • ์•Œ๊ณ ๋ฆฌ์ฆ˜ ๋ฌธ์ œ 3๊ฐœ ํ’€๊ณ !
  • js login ์ฐฝ ๋งŒ๋“ค๊ธฐ๋ฅผ ํ•ด๋ณด์•˜๋‹ค.

feeling - ๋ฌด์—‡์„ ๋Š๊ผˆ๋Š”์ง€,
finding - ์–ด๋–ค ์ธ์‚ฌ์ดํŠธ๊ฐ€ ์žˆ์—ˆ๋Š”์ง€

  • retina ๋Œ€์‘.. ๊ท€์ฐฎ์„ ๊ฒƒ ๊ฐ™๋‹ค.
  • CSS ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค์€ ์‚ฌ์šฉํ•ด๋ณด๋‹ˆ๊นŒ CSS๋ฅผ ์•ˆ๊ฑด๋“œ๋ ค๋„ ๋˜๋Š”๊ฒŒ ๋„ˆ๋ฌด ํŽธํ•˜๋‹ค. ์›น์‚ฌ์ดํŠธ๋ฅผ ๋งˆ๊ตฌ ์–‘์‚ฐํ•ด๋‚ผ ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™์€ ๋Š๋‚Œ์ด๋‹ค.
  • ๊ทผ๋ฐ, ๋‚˜๋Š” ์ •์„์ ์ธ ๋ฐฉ๋ฒ•์„ ์ข‹์•„ํ•œ๋‹ค๋Š”๊ฑธ ๋Š๊ผˆ๋‹ค. ๊ณ ๋“ฑํ•™๊ต ๋•Œ๋„ ์ˆ˜ํ•™์—์„œ ๊ทนํ•œ ๋ฌธ์ œ ํ’€ ๋•Œ ๋กœํ”ผํƒˆ ์•ˆ์“ฐ๊ณ  ํ‘ธ๋Š”๊ฑฐ ์ข‹์•„ํ–ˆ๋Š”๋ฐ... ์ƒˆ๋กœ์šด ์„ฑ๊ฒฉ์„ ์•Œ์•„๊ฐ€๋Š” ๋Š๋‚Œ์ด๋‹ค.
  • ๊ทธ๋ž˜๋„ ๋ฌผ๋ก  ๋””์ž์ธ์„ ๋‚ด๊ฐ€ ์ง์ ‘ ํ•ด์•ผํ•˜๋Š” ๊ฒฝ์šฐ์—๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•  ๊ฒƒ ๊ฐ™๋‹ค.
  • js ๋„ˆ๋ฌด ์žฌ๋ฐŒ๋‹ค! ๋‹ˆ์ฝ”์Œค์ด ๋ฌธ์ž์—ด์ด๋‚˜ ๋™์ž‘์ด 2๋ฒˆ ์ด์ƒ๋งŒ ์“ฐ์—ฌ๋„ ๋ณ€์ˆ˜, ํ•จ์ˆ˜๋กœ ๋”ฐ๋กœ ๋ถ„๋ฆฌํ•˜๋Š”๋ฐ ์Šต๊ด€ ๋“ค์—ฌ๋‘๋ฉด ์—„์ฒญ ๋„์›€๋  ๊ฒƒ ๊ฐ™๋‹ค. ๋ˆˆ๊ฐ์•„ ๋‚˜์˜ ์ƒ์ˆ˜ ๋•์ง€๋•์ง€ iOS ํ”„๋กœ์ ํŠธ
  • ๊ทธ๋ฆฌ๊ณ  ๋ฒŒ์จ ํ—ท๊ฐˆ๋ฆฐ๋‹ค.. var ์“ฐ์ง€ ๋ง๋žฌ๋Š”๋ฐ ์†์ด ๋ฉ‹๋Œ€๋กœ var๋ฅผ ์“ฐ๊ณ  ์žˆ์—ˆ๋‹ค.
  • ์•Œ๊ณ ๋ฆฌ์ฆ˜์˜ ๊ฒฝ์šฐ๋Š”.. ์ •๊ทœํ‘œํ˜„์‹์ด๋‚˜ ์ข€ ๋” ๋น ๋ฅด๊ณ  ๊ฐ„๊ฒฐํ•˜๊ฒŒ ํ’€ ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•๋“ค์„ ๊ณต๋ถ€ํ•ด์•ผ ํ•  ๊ฒƒ ๊ฐ™๋‹ค.

future action - ์•ก์…˜ ํ”Œ๋žœ์ด ์žˆ๋Š”์ง€

  • js ์ฑŒ๋ฆฐ์ง€๋ฅผ ์ž˜ ๋งˆ์น˜์ž -> 1129 ์™„๋ฃŒ!!!
  • C, python, swift, js ํ—ท๊ฐˆ๋ฆฌ๋Š” ๋ฌธ๋ฒ• ํ‘œ๋กœ ์ •๋ฆฌํ•˜๊ธฐ
  • ์ˆ˜์—…๊ณผ ๊ด€๋ จ๋œ ๋‚ด์šฉ์€ ์•„๋‹ˆ์ง€๋งŒ ํด๋ก  ์ฝ”๋”ฉ๋„ ์ฐจ๊ทผ์ฐจ๊ทผ ์ง„ํ–‰ํ•˜๊ธฐ
  • ์ •๊ทœํ‘œํ˜„์‹ ์‚ฌ์šฉํ•ด์„œ ๋ฌธ์ œ ๋‹ค์‹œ ํ’€์–ด๋ณด๊ธฐ -> 1130 ์™„๋ฃŒ ๊ทธ์น˜๋งŒ ๋˜ ํ’€์–ด๋ณด๊ธฐ.

feedback

์ถ”ํ›„ ์ถ”๊ฐ€ ์˜ˆ์ •.

profile
0๋…„์ฐจ iOS ๊ฐœ๋ฐœ์ž์ž…๋‹ˆ๋‹ค.

1๊ฐœ์˜ ๋Œ“๊ธ€

comment-user-thumbnail
2021๋…„ 11์›” 23์ผ

์˜ค์˜ค.. ์ €๋„ ๊ฐ™์ด ๋ฉ‹์‚ฌํ™œ๋™ํ•˜๊ณ ์žˆ์–ด์š”! ์ข‹์€ ์ •๋ฆฌ๊ธ€์ด๋„ค์š”ใ…Žใ…Ž

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ