Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags more
Archives
Today
Total
관리 메뉴

nomad-programmer

[Programming/HTML|CSS] 동위 선택자의 활용 예시 본문

Programming/HTML|CSS

[Programming/HTML|CSS] 동위 선택자의 활용 예시

scii 2020. 8. 10. 18:51 
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>

    /* input태그의 타입인 체크박스가 체크되었을 때, 바로 뒤에 존재하는
    div의 높이 값을 0으로 적용하라.
     */
    input[type=checkbox]:checked + div {
      height: 0;
    }

    div {
      overflow: hidden;
      width: 650px;
      height: 300px;
      border: 1px solid red;

      transition-duration: 1s;
    }

  </style>
</head>
<body>

<input type="checkbox"/>
<div>
  <h1>Lorem ipsum</h1>
  <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

</body>
</html>

 

 

lorem ipsum

lorem ipsum dolor sit amet, consectetur adipiscing elit.

저작자표시 비영리 변경금지

'Programming > HTML|CSS' 카테고리의 다른 글

[Programming/HTML|CSS] 많이 사용하는 StyleSheet 초기화 코드  (0) 2020.12.18
[Programming/HTML|CSS] 중요한 레이아웃 공식 같은 CSS설정  (0) 2020.08.11
[Programming/HTML|CSS] 웹 개발할 때 유용한 사이트 모음  (0) 2020.08.10
[Programming/HTML|CSS] 애니메이션 속성  (0) 2020.08.07
[Programming/HTML|CSS] 브라우저 간의 차이를 메꿔주는 폴리필(polyfill)  (0) 2020.08.02
'Programming/HTML|CSS' Related Articles more
Comments