HTML & CSS (19) 썸네일형 리스트형 [html/css] js 코드 없는 아코디언 "클릭하면 스르륵 답변창이 나오는 게시판?" 결과 See the Pen Untitled by youngwan2 (@youngwan2) on CodePen. HTML 제목▽ accrodionaccrodionaccrodionaccrodionaccrodionaccrodi onaccrodionaccrodionaccrodionaccrodionaccrodionaccrod ionaccrodionaccrodionaccrodionaccrodionaccrodionaccro dionaccrodionaccrodionaccrodionaccrodionaccrodionaccrod ionaccrodion 제목▽ 여기에 추가되는 답변 영역 제목▽ 여기에 추가되는 답변 영역 제목▽ 여기에 추가되는 답변 영역 CSS body { width: 100vw; } /* id *= "" 은.. [CSS] rem, em 의 차이 rem "html 태그의 기본 font-size : 14px 에 비례하여 증가하는 단위" rem 은 HTML 태그 중에서 태그 자체에 적용된 font-size를 기준으로 결정된다. 현재 2023년을 기준으로 font-size는 기본 14px 가 암묵적으로 적용되어 있는데, 이 때 rem을 2rem 으로 설정한다면, 실질적으로 적용되는 px은 14px 에서 2를 곱한 28px 가 된다. 예를 들어, width : 5rem 으로 설정한다면,14px 에서 5를 곱한 70px 가 적용된다. 즉, width : 70px 가 되는 것이다. html { font-size : 14px } div { width: 5rem; -> 실질적으로 5 * 14px = 70px 적용 } em "em 단위를 적용한 해당 태그에 설정.. [HTML] <details> 및 <summary> 태그 "드롭다운이 가능한 HTML 태그" 이 기능을 사용하면 숨겨진 메뉴를 드롭다운 형식으로 나타나게 할 수 있다. 구글 바로가기 티스토리 바로가기 다음 바로가기 이 기능을 사용하면 숨겨진 메뉴를 드롭다운 형식으로 나타나게 할 수 있다. 구글 바로가기 티스토리 바로가기 다음 바로가기 굳이 힘들게 드롭다운을 구현하지 않아도 간단한 것은 이 태그들을 이용하면 간단한 드롭다운 메뉴는 구현할 수 있을 듯 하다. 다만, 이 태그 내에 숨겨진 태그 요소들은 비디오 판독기를 필요로 하는 사람에게 친화적인 요소가 아니라고 하므로 사용에 주의가 필요해 보인다. -- 자세한 사용법은 아래 링크 참고 하자-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary : The Disclosure Summ.. [css]3d 카드 뒤집기 저 검은 화면 왜 저리 긴거냐고 ;;; F B HTML F B CSS .world { width: 60vw; height: 60vh; background-color: black; display: flex; justify-content: center; align-items: center; perspective: 600px; /*인간의 시야각에서 사물이 표현됨(3d 효과 적용 시 필요) */ transition: 1s; /* world 클래스인 검은색 배경 클릭하면 트랜잭션 효과 발생*/ } .world .card{ position: relative; /* 부모가 relative 면, 자식이 absolute일 때 뷰포트 기준이 됨. */ width: 150px; height: 200px; transform-.. [css] 태그 가운데 정렬 하는 법 부모 태그의 자식 태그를 대상으로 가운데 정렬함을 가정 세로 여백을 0으로 설정하고, 가로 여백을 `auto`로 설정하면, 브라우저가 알아서 여백을 조절하여 중앙정렬을 해준다. 이 때 부모 태그의 가로 넓이를 작게 설정하고, 자식의 가로넓이를 그 부모태그의 100%으로 설정하면, 중앙정렬이 되는 동시에 브라우저 크기에 따라 태그의 크기를 조절할 수 있다. margin 속성 유형 /* 네 면 모두 적용 */ margin: 1em; margin: -3px; /* 세로방향 | 가로방향 */ margin: 5% auto; /* 위 | 가로방향 | 아래 */ margin: 1em auto 2em; /* 위 | 오른쪽 | 아래 | 왼쪽 */ margin: 2px 1em 0 auto; margin 에서 auto 속성.. [html] 비디오 태그에서 자동 플레이가 안 될 경우 해결책 보호되어 있는 글입니다. [CSS] box-shadow 참고용 box-shadow "태그에 그림자 효과 넣음" /* x축 | y축 | 번짐정도 | 그림자 크기(퍼짐정도) | 그림자 색상 | 옵션(inset 등) */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2) inset; 'x축, y축' : 수평축과 수직축을 의미한다. 음수 값을 사용할 수 있다. '그림자 번짐(번짐정도)' : 그림자의 퍼짐 정도를 나타낸다. 값이 커질수록 그림자의 테두리가 흐려지면서 밝아진다. '그림자 크기': 그림자의 크기를 의미한다. 값이 커질수록 그림자 사이즈가 커지고, 반대는 작아진다. '그림자 색상' : 그림자의 색상을 결정한다. 'inset'(옵션) : 그림자를 적용하는 태그의 내부에 그림자 효과를 넣는다. 적용 color1 color2 color.. [css] input 태그 클릭 시 생기는 외곽선 숨기기 input 박스를 클릭하면 보이는 테두리가 너무 거슬렸다. 이것을 없애기 위해 검색하니 나오는 한 가지 방법 입력 요소 가상 클래스 선택자 인 : focus 가 적용된 상태에서 outline 을 'none' 으로 설정만 하면 되더라. .search input:focus{ outline: none; } ↓ 이전 1 2 3 다음
