CSS/CSS3
CSS3 :first-line and :first-letter 문장 첫글자크게하기
샷타이거
2014. 2. 18. 19:27
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;
}