반응형
<!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>가상클래스선택자</title>
<style>
#wrap{
border: 0px solid red;
width: 800px;
}
#header{
border: 0px solid blue;
}
#content{
border: 0px solid green;
}
#content a{
text-decoration: none;
}
#content a::after{
content: attr(href);
}
#footer{
border: 0px solid grey;
text-align: center;
}
#footer li{
list-style-type: none;
}
#footer li::before{
content: "회사로고입니다.";
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>CSS</h1>
</div>
<div id="content">
<ul>
<li>
<a href="http://www.naver.com" target="_blank">네이버</a>
</li>
<li class="fa">
<a href="http://www.yahoo.com" target="_blank">야후</a>
</li>
<li>
<a href="http://www.google.com" target="_blank">구글</a>
</li>
</ul>
</div>
<div id="footer">
<ul>
<li>
<img
src="https://s.yimg.com/rz/p/yahoo_homepage_en-US_s_f_p_bestfit_homepage.png"
/>
</li>
</ul>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en" style="font-size: 18px;">
<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>가변길이</title>
<style>
h1{ /* font-size: 18px*/
font-size: 1em;
}
.outer{
font-size: 24px;
color: blue;
}
.inner{
font-size: 2em; /* em은 상위요소 기준, 48px*/
}
.inside{
color: green;
font-size: 1rem; /*rem은 html기준*/
}
</style>
</head>
<body>
<h1>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Architecto nobis molestias quos dicta, libero temporibus quibusdam
voluptatum dolores praesentium placeat accusantium cum ea sed inventore.
Recusandae doloribus voluptas esse maxime!
</h1>
<div class="outer">
<div class="inner">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Laborum porro optio, odit autem culpa quia sequi incidunt odio
dignissimos beatae consequuntur nulla totam reprehenderit! Nemo at ducimus neque amet deserunt!
</div>
</div><br/>
<div class="outer">
<div class="inside">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Voluptatem a nulla cumque illo quam esse officiis porro?
Sit sint dolor totam error suscipit aut nemo. Quos sapiente eum et veniam.
</div>
</body>
</html>
%도 부모에 따라 바뀜.
em - text
% - img 로 생각하기~!
반응형
'HTML | CSS' 카테고리의 다른 글
| Box Layout을 이용해서 야후 홈페이지 만들기 (0) | 2023.06.07 |
|---|---|
| 왕왕중요한 Box Layout을 완벽하게 이해해보자~! | overflow: hidden; / float: left; (0) | 2023.06.05 |
| [day4-1] 가상클래스(필터) 선택자 nth-child(), first-letter, first-line, selection | focus, disabled, enabled (0) | 2023.06.02 |
| 선긋기(link,hover,visited) | margin, padding | 방명록 만들기 (0) | 2023.06.02 |
| 태그, css, id, class 선택자 | 부모자식(상속) | 속성 선택자 (0) | 2023.06.01 |
