reponsive ?
-> 반응형: 창의 사이즈에 맞게 변화 , 부모자식과의 상관관계
반응형 웹의 '반응형'이 이 reponsive를 뜻함
em, rem
<!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>em,rem</title>
<style>
.b{
font-size: 24px;
}
.a{
width: 200px;
height: 200px;
background-color: hotpink;
display: inline-block;
/*브라우저 font-size는 16pt */
/* em: 부모의 글꼴 크기 1em:2배 2em: 4배 */
/* rem : 루트의 글꼴 크기 */
font-size: 2em;
/*padding 과 margin에서 rem은 기본(html기본 폰트 사이즈)을 따라간다. em으로*/
padding : 1em;
margin: 1em;
}
</style>
</head>
<body>
<div class="b">
<div class="a">테스트</div>
</div>
</body>
</html>em 단위 -> 부모 폰트사이즈
rem 단위 -> html 폰트 사이즈
layout
<!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>variableLayout</title>
<style>
.container{
width: 90%; /* body크기의 90% */
margin: 0 auto;
text-align: center;
}
.header{
width: 100%; /* .container 의 자식. 부모기준으로 100% 크기 */
height: 100px;
background-color: blueviolet;
}
.main{
float : left;
width : 70%;
height : 350px;
background-color: aqua;
padding: 10%;
}
.aside{
float : right;
width: 30%;
height: 350px;
background-color: bisque;
padding: 10%;
}
.footer{
clear:both;
width:100%;
height: 100px;
background-color: yellow;
}
*{
box-sizing: border-box;
/* ex) div의 크기를 10px 으로 할 때 크기를 10으로 맞추고싶다.
border-box(border까지 크기를 맞춘다. or 컨텐츠 영역만 10으로 -> content-box */
}
</style>
</head>
<body>
<div class="container">
<div class="header">HEADER</div>
<div class="main">MAIN</div>
<div class="aside">ASIDE</div>
<div class="footer">FOOTER</div>
</div>
</body>
</html>
variableImg
<!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>variableImg</title>
<style type="text/css">
img{
/* width : 200px; */
/* width: 100%;
max-width: px; */
max-width: 100%;
}
div{
width: 50%;
}
</style>
</head>
<body>
<img src="./../1_html/sample/image/img02.png">
<div>
<img src="./../1_html/sample/image/img02.png">
<!--현재 div가 body의 50% . 그 아래에 있는 img 태그의 최대넓이는 부모의 100%
그러니 화면의 절반보다 커질수없다.-->
</div>
</body>
</html>창의 크기에 따라 이미지도 같이 조정됨
'CSS' 카테고리의 다른 글
| [CSS]CSS#3 (0) | 2024.06.21 |
|---|---|
| [CSS] CSS#2 (0) | 2024.06.13 |
| [CSS] CSS #1 (1) | 2024.06.11 |
| [CSS]선택자 (0) | 2024.06.05 |
| [CSS]인라인스타일시트 / 외부스타일시트 (0) | 2024.05.26 |