Paige's Journey🎈

HTML & CSS

1. To RESET html

2. FLEX: grow(팽창 지수), shrink(수축 지수), basis(기본 크기) 🤯

• apply to children but does not give any property
• decide how much you want to expand the children
• flexbox can extend with need

  1

  flex: 0 1 auto;

  cs

• grow
  • represents ratio
  • grow 1: expands equally
  • grow 0: only upto its content's size

    1 2 3

    .left {   flex: 0 1 70px; }

• shrink
  
  • leave as 1 most of times
  • need to study more how to count 🤯
• basis
  • if you give exact px, it will not grow more than that
  • if you put as '0%' over 'auto', each div will get exact same width regardless of length of each contents in div
• if you put width and flex-basis together, flex-basis gets priority. If contents inside box overload, width does not guarantee exact size. In order to prevent that, it is better to use 'max-width' over 'width' if you do not use flex-basis.
• In order to apply vertically, need to use as below,
  • put display:flex and flex-direction:column to parent and put flex on child

    1 2 3 4 5

    <div htmlclhtmlass="col w20">     <div class="row h40">영역1</div>     <div class="row h40">영역2</div>     <div class="row h20">영역3</div> </div>

    cs

    1 2 3 4 5 6 7 8

    .col{     display: flex;     flex-direction: column; }   .h40{     flex: 4 1 auto; }

    c

reference:

https://heropy.blog/2018/11/24/css-flexible-box/

https://studiomeal.com/archives/197

3. WIREFRAME

• design layout to show how the final will be
• first time making wireframe in order to start twittler with pair but not sure whether I did it correctly or not but it definitely helps me to brainstorm first before I write codes

• Result with HTML & CSS:

Arguments

• an Array-like object accessible inside functions that contains the values of the arguments passed to that function.
• In order to change it to array
  • Array.from(arguments)
• has length property that can count from index #0 but does not have other methods like array
• 내장객체 함수에 전달 된 인수에 해당하는 배열 형태의 객체
• 함수를 선언한 순간, arguments 객체를 가지고 있음
• 함수가 호출되는 시점에, 그 때 전달 된 파라미터를 저장한 곳
• 파라미터 숫자를 정해놓더라도, 제한하지는 않기에, 적게 넣게 되면 undefined가 되고 갯수가 상관없음
• 내장 메서드를 포함하고 있지 않음

CSS Selector

• Grandchildren Selector(후손 셀렉터)

  • header h1 {}

• Child Selector(자식 셀렉터)

  • header > p { }

• Adjacent Sibiling Selector(인접 형제 셀렉터)

  • section + p { }

• Sibiling Selector(형제 셀렉터)

  • section ~ p { }

• ul > li:nth-child(2n) { }
  • Inside unordered list and list, choose child who is even
• section > p:nth-child(2n+1) { }
  • Among child elements of section, choose child element p who is odd
• section > p:nth-last-child(2n + 1) { }
  • Among child elements of section, choose child element p who is odd from the back
• p:first-of-type { }
  • Choose first p element among its sibiling elements of p
• div:last-of-type { }
  • choose last div element among its sibiling elements of div
•  p:nth-of-type(2) { }
  • choose second p element from sibiling elements of p
• p:nth-last-of-type(2) { }
  • choose second last p element from sibiling elemetns of p

• p:not(#only) {}
  • choose all except id is only from p elements

WHAT I LEARNED

For the first weekend, I had some rest and was able to sleep more. I lacked sleep because of the stress I got from the crash course. I thought I would be able to follow their timeline (Well, at least for the first week) but apparently I was already struggling from the beginning. Though, there is no time to be frustrated! I went over all the topics I learned for this week and finished reading one third of the book: 'JavaScript for Web Developers'. I read this book before but I did not understand fully. Though, after hearing code states lectures, I was able to understand it more. I made a goal to finish this book while taking the bootcamp. I think I would be able to do it since reading this book actually reminds me of what I have learned; and, it provides detailed information that I never thought about.

Websites for CSS:

https://flukeout.github.io/

https://lubna.dev/colouring-with-code/

https://codepen.io/Lubna/pen/zYYzOxN

https://codepen.io/Lubna/pen/dyoqzwP

https://flexboxfroggy.com/#ko

WHAT I LEARNED

I spent most of the time reviewing iteration instead of focusing on html and css as scheduled. I could say that I got a little bit more familiar with iteration but I still need to practice continuosly in order to be fully understand it. During the office hour, I asked whether giving the height:100vh and flex:1 are the same because it gives how long each div should be. Apparently, those are totally different concepts that I should not mix together. Also, I thought that I was aware of most of the tags but the fact is I was wrong. lol Time to study more🤓

HTML & CSS

1. Most used tags in html but I didnt know about
   • <textarea> </textarea>: Multi-line Text Input
   • ul, li : ul can be under li again in order to be nested
   • <input type="radio" name="choice" value="a"> : assign name with other radio input to be connected
2. CSS
   
   • rem : 1rem is the standard set up.
     • If you put 2rem, text becomes twice bigger.
   • flex: determines how a flex item will grow or shrink to fit the space in its flex container.
     • reference: https://developer.mozilla.org/en-US/docs/Web/CSS/flex

• Difference among Block, Inline-block, and Inline 

ITERATION

1. Break & Continue
   • Break: terminates loop right away
   • Continue: only skips current look
   • reference: http://kbarker.dev/blog/the-difference-between-break-and-continue-in-javascript.html

첫 html, css 프로젝트

링크: paigekim29.github.io/paige-talk/