visibility =
visible |
hidden |
collapse
use &:first child, but it’s for children elements
Ctrl L select one line
I centered the nav by cutting the container, using width, whereas
the code from professionals are using flex, padding, and margin.
Also, apart from the ‘buy’ button, give some space by giving left padding to the parent element of a, then only for last child, right padding.
For * {} padding 0 margin 0 borderbox만 넣기
It’s background for combining everything in one line!! Not Background-image
Section에 display: block하고 배경색 주면 section box에 네모 하나 생기는 거임…. 생각을 하고 코딩하자Use inherite
Justify-content에 evenly vs space-around
Flex-wrap: wrap 하면 flex 해서 squeeze 되지 않음
Img vs background (cannot directly copy on websites)
For the one button on the right and others all on the left: last-child margin-left auto
Black with high transparency to a:hover
I set the size of the container, however, you can just apply padding to the child element. The container will be the same as the child.
When you want to insert ‘enter’, use display: block (remember, span is for sentence, while block is for paragraph. A paragraph cannot be in a sentence, but you can use span tag to make things lined up horizontally, not vertically)
Another relative unit: VH (view port percentage)
reuse code, apply one css code to multiple html code
text-align vs align-items vs justfiy-content (Align-items :vertical <-> justify-content)
font-size smaller on mobile, thicker font for Korean than English
mobile ui: first center then go wider, desktopp ui: first limit width then go into center
why flex-end and &:first-child {margin-right: auto😉} do the thing… 😊
Wow : shft ) imogies
what is ‘flex: 1;’?? this means the size of all of the other elements will have the same width as their content, but the element with flex: 1 will have the remaining full space given to it
why isn’t img loading.. : Online server cannot access to your other files.. So you should locate them on the same file as html file.