-
6. 제목, 문단, 구분선, 정형화된 텍스트 연습과제 해답프론트엔드/HTML & CSS 연습과제 해답 2023. 6. 15. 13:58728x90
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'프론트엔드 > HTML & CSS 연습과제 해답' 카테고리의 다른 글
4. 박스모델 연습과제 해답 - 텍스트 애니메이션 효과 (0) 2023.06.22 8. 폼 요소의 종류 연습과제 해답 (0) 2023.06.21 5. HTML5 섹셔닝 (시맨틱 태그) 연습과제 해답 (0) 2023.06.20 8. 표를 만드는 테이블 요소 연습문제 해답 (0) 2023.06.19 블록 및 인라인 레벨 요소 연습과제 해답 (3) 2023.06.16