css study 2

김민지·2024년 8월 16일

myStudy

목록 보기
2/4

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)

13 August 2024

  • 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.

profile
나의 풀스텍 개발, 하루하루 발전하는 나날

0개의 댓글