cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
                <details>
    <summary>
      반전 매력으로 돌아온 소녀시대
    </summary>
    <p>
    올 여름, 'PARTY'로 많은 사랑을 받은 소녀시대가 정규 5집 [Lion Heart]의 전곡 음원을 8월 18~19일 이틀 동안 순차적으로 공개하며 새로운 모습을 선보입니다. 이번 앨범을 통해 서로 상반된 분위기의 더블 타이틀 곡 'Lion Heart'와 'You Think'를 선보일 소녀시대! 소녀시대의 다채로운 매력을 극대화한 이번 정규 앨범소식을 네이버 뮤직을 통해 만나보세요! 
    </p>
  </details>
  <details>
    <summary>
      트와이스, 2월 20일 컴백
    </summary>
    <p>
  그룹 트와이스가 2월 20일 전격 컴백한다. 트와이스는 2일 0시 공식 SNS를 통해 티저 이미지를 공개하며 20일 컴백을 공식화했다.
    </p>
  </details>
            
          
!
            
              body {
  font-family: '나눔고딕','nanumgothic','돋움','dotum',san-serif;
  color: #333;
  font-size: 1.1em;
}

section {
  max-width: 500px;
}

details {
  background: #f0f0f0;
  padding: 20px;
  margin-bottom: 5px;
}

summary {
  cursor: pointer;
  font-weight: bold;
  font-size: 1.1em;
}
            
          
!
999px
Loading ..................

Console