2021-07-19 Part(1)_ch(10)_(21~23) padding-top 1920*1080

특정 행동 시("click") 변수가 바뀌도록 하려면
변수 = ! 변수 로 true, false를 순환하며 작동하도록한다.

요소의 크기를 줄이고 늘리고 할때는 부드러운 작동을 위해 overflow를 히든으로 고정시켜 커지고 작아질때 튀어나온는 부분은 실시간으로 잘려나가게 만든다.

display : flex 사용으로 flex-wrap: wrap을 쓰게되면 적용한 부모크기만큼 내에서 가로로 넘는 요소들은 아래로 내려서 포장한다.

flex-grow 를 써서 1로 값을 적용할시 자기칸에서 쓸수 있는 최대 넓이를 사용한다.

 

background-color 투명도

background-color: rgba(0,0,0,투명도 0~1);

 

─────────────────────────────────────────────────────

부모요소의 width은 자식요소의 padding-top의 기준이 된다
자식요소에 padding-top: 50%를 주면 부모요소의 가로 width의 값의 50%가 기준되어 부모요소도 height가 width의 50%가 된다.

css스타일만을 위해(부모16:9) div를 생성해야한다면
생성하지말고 가상선택자::before를 사용해본다. 대신 before에 content:""와 인라인인지 블록인지 모르니 display: block을 선언한다.

16:9 비율 주기

[부모에게]
width:값
[자식에게(::before)]
width:100%
height:0;
padding-top:56.25% (기준은 부모의 width값)