목록WEB/html,CSS (71)

뇌 채우기 공간

[html] 페이지간 이동하기

detail.html 상세페이지 메인으로 돌아가기 index.html 메인 페이지 상세 페이지로 가기
WEB/html,CSS 2021. 6. 9. 16:53
[html][css] 유튜브 video 16:9 비율에 맞게 삽입하기[html][css] 유튜브 video 16:9 비율에 맞게 삽입하기

.video{ max-width: 650px; border: 4px solid red; } .video-ratio{ height: 0; /* padding top은 부모 요소의 가로 요소에 영향을 받는다 */ /* height는 반응형이 안되고 크기를 픽스해버리는 것임 */ padding-top: 56.25%; position: relative; } iframe{ background: black; position: absolute; top:0; left: 0; width: 100%; height: 100%; } padding-top 에 56.25퍼센트는 16:9를 계산해서 나온 수치임 그것이 padding이기 때문에 그 안에 요소가 들어갈 수 없다. 그러므로 iframe에 position : absolu..
WEB/html,CSS 2021. 4. 21. 20:11
[html] html head부분 viewport정의 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1">

width값을 디바이스의 크기로 하겠다, 처음 크기를 확대 축소 없이 1배율로 하겠다. 사용자가 손이나 뭣으로 확대축소를 할 수 있냐? no 최대 크기를 1 최소 크기를 1로 한다.
WEB/html,CSS 2021. 4. 21. 07:48
[html][css] grid에 대해서 / grid-auto-rows, columns / 암시적 행 정의

2021.04.19 - [WEB/html,CSS] - [html][css] grid 에 대해서 / display /grid-template-rows/ grid-template-columns/grid-column/gird-template-areas/gap(grid-row-gap) [html][css] grid 에 대해서 / display /grid-template-rows/ grid-template-columns/grid-column/gird-template-areas/gap(grid-ro display grid container을 정의한다. 그리드를 사용하기 위해 필수적이다. 1 2 3 1 2 3 .container{ display: grid; width:300px; height:250px; border..
WEB/html,CSS 2021. 4. 19. 18:58
[html][css] grid 에 대해서 / display /grid-template-rows/ grid-template-columns/grid-column/gird-template-areas/gap(grid-row-gap)

display grid container을 정의한다. 그리드를 사용하기 위해 필수적이다. 1 2 3 1 2 3 .container{ display: grid; width:300px; height:250px; border: 4px solid lightgray; } .item{ border: 2px dashed red; } display: grid;는 블럭요소같은 grid를 만드는 것이다. display: inline-grid; container의 css를 이렇게 바꾸면 inline요소 같은 grid가 만들어진다. grid-template-rows 행이 몇개인지 정의하는 것 grid-template-columns 열이 몇개인지 정의하는 것 1 2 3 .container{ display: grid; grid-..
WEB/html,CSS 2021. 4. 19. 18:45
이전 Prev 1 2 3 4 5 ··· 15 Next 다음