HTML & CSS

To RESET html

*

Most used tags in html but I did not know about

  • Multi-line Text Input

ul, li

  • ul can be under li again in order to be nested
  • assign name with other radio input to be connected

rem

  • 1rem is the standard set up.
  • If you put 2rem, text becomes twice bigger.

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

grow

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

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

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:

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 sibling elements of p

* div:last-of-type { }

  • choose last div element among its sibling elements of div

p:nth-of-type(2) { }

  • choose second p element from sibling elements of p

p:nth-last-of-type(2) { }

  • choose second last p element from sibling elements of p

p:not(#only) {}

  • choose all except id is only from p elements

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store