잡지·블로그에서 자주 보이는 드롭캡(Drop Cap)을 CSS로 만듭니다. 첫 글자를 크게 강조해 시선을 사로잡으세요.

미리보기

CSS 코드


        

    


    

        
드롭캡 사용법

        
    
            
  1. 본문 텍스트를 입력합니다.
    2. 
            
  2. 라인 수(2~6줄)·색상·스타일을 선택합니다.
    3. 
            
  3. 미리보기에서 결과를 확인합니다.
    4. 
            
  4. CSS 코드를 복사해 사용합니다.
    5. 
        


        
주요 기능

        
    
            
  • 4가지 스타일 (단순·박스·원형·그라데이션)
    • 
            
  • 라인 수 2~6줄 조절
    • 
            
  • 색상·굵기 자유 설정
    • 
            
  • 실시간 미리보기
    • 
            
  • ::first-letter 의사 요소 사용 — 의미적 마크업 유지
    • 
        


        
활용 예시

        
    
            
  • 블로그·기사 글의 첫 단락 강조
    • 
            
  • 잡지·뉴스레터 디자인
    • 
            
  • 긴 글의 시작점 표시
    • 
            
  • 고급스러운 인쇄물 느낌
    • 
        


        
드롭캡의 역사

        
드롭캡은 중세 필사본에서 시작된 1000년 이상 된 디자인 기법입니다. 책의 첫 글자를 화려하게 만들어 독자의 시선을 끌고 책의 격을 높이는 용도로 사용되었습니다. 현대에는 디지털 매체에서도 시각적 강조를 위해 사용되며, CSS의 ::first-letter 의사 요소로 쉽게 구현할 수 있습니다.


        
자주 묻는 질문

        

            

                한글에도 적용되나요?
                
네, 한글도 동일하게 적용됩니다. 단, 한글은 첫 자음과 모음이 합쳐진 글자라 시각적으로 영문보다 균형 잡기 어려울 수 있습니다.

            

            

                모바일에서도 잘 보이나요?
                
네, 반응형으로 동작합니다. 단, 좁은 화면에서 라인 수가 너무 많으면 본문이 좁아 보이니 2~3줄을 권장합니다.

            

            

                접근성에 문제가 있나요?
                
의미적으로는 문제없지만 큰 글자 때문에 시각적으로 본문 흐름을 방해할 수 있어 핵심 첫 단락에만 사용하세요.

            

            

                SEO에 영향을 주나요?
                
아니요. ::first-letter는 CSS 효과만 적용하며 HTML 구조나 검색엔진 인식에는 영향을 주지 않습니다.