CSS3 :first-line and :first-letter 문장 첫글자크게하기

CSS3 :first-line and :first-letter 문장 첫글자크게하기

문장의 첫글자를크게하는방법으로 :first-line 와 :first-letter를 사용할것이다.

먼저 :first-letter를 이용하여 첫글자를 크게

    p:first-letter {  
        font-size: 50px;  
    }  

다음은 첫번째 줄을 굵게

 
    p:first-line {  
        font-weight: bold;  
    }  

그런데 두 문단이라면 이 두문단의 첫글짜가모두 커져버릴 것이다.
우리목표는 단첫번째껏만 선택, 적용하는 것이다.:first-child를 이용하자

    p:first-child:first-letter {  
        font-size: 50px;  
    }  
    p:first-child:first-line {  
        font-weight: bold;  
    }  

제대로 된 예제를 연습해보자. 아래와 같이 완성 할 것이다.

1. 간단한 문단설정.

    p {  
        color: #555;  
        font-family: 'Georgia', Times, serif;  
        line-height: 24px;  
    }  

2. 문단 배경을 설정한다. css3를이용한 그림자효과추가.

    p:first-child {  
        padding: 30px;  
        border-left: 5px solid #7f7664;  
        background-color: #f5f4f2;   
        line-height: 32px;  
        box-shadow:  5px 5px 0px 0px rgba(127, 118, 100, 0.2);  
        position: relative;  
    }  

3. p:first-child:first-letter로 첫글자선택후 설정

    p:first-child:first-letter {  
        font-size: 72px;  
        float: left;  
        padding: 10px;  
        height: 64px;  
        font-family: 'HominisNormal';  
        background-color: #7F7664;  
        margin-right: 10px;  
        color: white;  
        border-radius: 5px;  
        line-height: 70px;  
    }  
4. 첫번째 글자만 크게하면 어색해지니 p:first-child:first-line 선택자로 첫번째 라인도 같이강조

p:first-child:first-line { font-weight: bold; font-size: 24px; color: #7f7664; }

5. 마지막으로:after를이용 클립그림으로 장식이다.content 트릭

    p:first-child:after {  
        background: url("../images/paper-clip.png") no-repeat scroll 0 0 transparent;  
        content: " ";  
        display: inline-block;  
        height: 100px;  
        position: absolute;  
        rightright: -5px;  
        top: -35px;  
        width: 100px;  
    }  

예제확인 http://demo.hongkiat.com/css-better-paragraph/