프론트엔드/HTML & CSS 연습과제 해답
6. 제목, 문단, 구분선, 정형화된 텍스트 연습과제 해답
syleemomo
2023. 6. 15. 13:58
728x90
https://stackoverflow.com/questions/6071987/line-height-as-a-percentage-not-working
line-height as a percentage not working
I am having an issue with line-height that I cannot quite get my head around. The following code will center an image within a div: CSS .bar { height: 800px; width: 100%; line-height:
stackoverflow.com
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="center">
<p>
당신의 티스토리에 다양한 <strong>플러그인</strong><sup>01</sup>을
사용할 수 있어요.<br>
사이트 보안을 위해 더 안전한
<strong>암호화 접속<sup>02</sup></strong>을 사용해보세요.<br>
콘텐츠를 고정된 메뉴로 유지하고 싶다면
<strong>페이지</strong><sup>03</sup>를 이용해보세요.<br>
나만의 <strong>도메인</strong><sup>04</sup>을 연결해보세요.<br>
당신의 티스토리에 엣지가 생길거예요.<br>
<strong>로그인 보안</strong><sup>05</sup>기능으로 당신의 정보와
콘텐츠를 안전하게 지키세요!
</p>
</div>
</body>
</html>.center{
width: 50%;
margin: auto;
}
.center p{
font-size: 3rem;
font-weight: 300;
color: #909090;
}
.center p strong{
color: black;
position: relative;
}
.center p strong::before{
position: absolute; bottom: 0;
background-color: red;
width: 0%;
height: 10px;
transition: .3s;
content: '';
}
.center p strong:hover::before{
width: 100%;
}
.center p sup{
font-size: 1rem;
vertical-align: text-top;
line-height: 100%;
position: relative;
top: 13px;
}sup 의 line-height 을 100%로 설정하면 p 요소의 line-height 이 증가하더라도 sup 의 컨텐츠 높이만큼만 크기를 유지한다. 긇지 않으면 p 요소의 line-height 이 커지면 sup 의 높이도 증가하게 되어 첨자가 아래로 내려오게 된다.
p 요소의 폰트 크기가 작아지면 첨자도 아래로 내려오는데 이는 티스토리도 마찬가지다. p 요소에 폰트 크기에 따라 sup 의 top 속성을 조절해줘야 한다.
728x90