목록HTML&CSS (14)

흰 스타렉스에서 내가 내리지

[CSS] 자식박스의 사이즈를 조정하다 부모박스를 벗어나는 경우

resultado 초록색박스 (div) 의 width와 height를 100% 로 하니, 부모박스 (검정, section)의 사이즈와 똑같아져서, span에 밀려 부모 박스를 나가버린다. * { box-sizing: border-box; } section { width: 500px; height: 500px; border: 3px solid black; display: flex; flex-direction: column; } 부모박스(section)를 플레스박스로 변경하고, direction을 column으로 하면 박스가 안에 가둬진다.
HTML&CSS 2022. 3. 10. 13:23
display:none 에서 block 될때는 transition안먹힘

opacity를 0에서 1로 하면 animation 먹힘 근데 그러면 안보이는데로 클릭 가능해짐 이를 방지하기 위해서 pointer-events: none; 하면 됨 클릭을 안되게 만들 수 있다.
HTML&CSS 2022. 3. 2. 19:42
[CSS] background image

HTML&CSS 2022. 2. 28. 16:04
[CSS] flex-box가 아닐 때 요소를 가운데 정렬하는 방법들

HTML&CSS 2022. 2. 28. 15:51
[HTML] HTML의 Semantic Tags, 이 상황엔 어떤 태그를?

보호되어 있는 글입니다.
HTML&CSS 2022. 2. 1. 15:09
[CSS] em과 rem

보호되어 있는 글입니다.
HTML&CSS 2022. 1. 25. 23:09
[CSS] 버튼의 크기 키우기

보호되어 있는 글입니다.
HTML&CSS 2022. 1. 23. 22:40
[CSS] iframe 비율을 유지하면서 크기 조절하기

태그는 width 속성을 설정해주면 이미지 비율에 따라서 height가 자동으로 설정된다. 그러나 태그는 그렇지 않다. # 해법 iframe을 div로 감싸서 div의 크기에 iframe의 크기를 맞추면 된다. iframe의 width와 height를 100%로 하고, div의 padding-bottom에 % 을 줘서 div의 가로세로 비율을 조절한다. 유튜브 영상의 비율인 16:9로 하려면 padding-bottom에 56.25%를 넣는다. .area { position: relative; /* absolute는 부모가 relative일 때 부모를 따라간다. */ width: 100%; padding-bottom: 56.25%; /* 16:9 비율 */ } .area iframe{ position: a..
HTML&CSS 2022. 1. 16. 14:31
[CSS] 기본 css 코드

:root{ /* Color */ --white-color: #fff; --black-color: #140a00; --blue-color: #045fd4; --red-color: #ff0000; --gray-dark-color: #909090; --gray-light-color: #e0e0e0; /* Size */ --side-padding: 12px; --avatar-size: 36px; --base-space: 8px; --size-button: 60px; --size-border: 4px; --size-thumbnail: 50px; --font-size: 18px; /* Font Size */ --font-large: 18px; --font-medium: 14px; --font-small: 12px..
HTML&CSS 2022. 1. 16. 14:08
[HTML] Emmet 단축어

보호되어 있는 글입니다.
HTML&CSS 2022. 1. 14. 23:21
이전 Prev 1 2 Next 다음