px,%
px 단위는 픽셀이라는 뜻이며 화면에 고정적인 길이를 의미하며 절대적인 수치를 의미합니다.
- 1px은 디바이스마다 고정크기가 다를 수 있습니다.
- % 단위는 부모요소 대비 비율적 영향을 받습니다.
<!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>
<style>
div {
border: 2px solid gray; /*div태그에 박스 설정 박스 굵기는 2px, 박스테두리 색은 회색*/
}
.root{
width: 80%;
/* ex) font size: 20px; 이고 width:100em; 이면 .root의 px은 20px * 100 = 2000px 이 된다.*/
}
.prarent{
width: 50%;
}
/* %:부모요소 대비 비율, %로 안하고 px로 할때
부모요소대비 자식 비욜 2:1로 계산해서 맞춰야함. */
.child{
width: 50%;
}
</style>
</head>
<body>
<!-- .root>.prarent>.child*2 -->
<div class="root">Root
<div class="prarent">parent
<div class="child">Child1</div>
<div class="child">Child2</div>
</div>
</div>
</body>
</html>
<!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>
<!-- html{font-size:16px;} html태그에는 기본적으로 지정되어 있값 폰트값 -->
<style>
html{
font-size: 10px;
}
body{
font-size: 16px;
}
/* rem을 계산하기 좋게 html의 font size를 10으로 맞췄을때
전체적으로 출력되는 글자크기가 작으므로 body에 다시 폰트사이즈를 지정 */
div {
border: 2px solid gray;
}
.root {
width: 50em;
/* 50*20=1000px */
width: 50rem;
/* 50*16=800px */
font-size: 20px;
/* em:자기 자신의 폰트사이즈 대비 */
/* 실행했을때 px 크기는 800px */
/* rem : html 폰트 사이즈 대비 */
}
.parent {
width: 50%;
}
.child {
width: 50%;
}
p {
border: 2px solid red;
padding: 15px;
line-height: 1.5;
width: 25em;
/* 500px; */
font-size: 30px;
}
p>strong {
color: red;
font-size: 1.1empx;
}
/* font-size:20px을 16px로 줄었을대 글자가 있는 박스는 그대로 있다.
이 때 글자가 줄어들었을대 글자가 들어있는 박스도 줄이고 싶을때 */
/* p태그 안에서 강조하려는 strong의 글자를 p보다 1.1배 키우고자 할때
p의 글자크기가 아무리 바뀌어도 자동으로 strong의 글자는 p보다 1.1배 항상 크기 나온다. */
</style>
</head>
<body>
<div class="root">root
<div class="parent">parent
<div class="child">child1</div>
<div class="child">child2</div>
</div>
</div>
<hr>
<p>
의원을 제명하려면 <strong>국회</strong>재적의원 3분의 2 이상의 찬성이 있어야 한다. 국가는 노인과 청소년의 복지향상을 위한 정책을 실시할 의무를 진다. 탄핵소추의 의결을 받은 자는
탄핵심판이 있을 때까지 그 권한행사가 정지된다. 국무총리는 대통령을 보좌하며, 행정에 관하여 대통령의 명을 받아 행정각부를 통할한다.
헌법재판소 재판관은 탄핵 또는 금고 이상의 형의 선고에 의하지 아니하고는 파면되지 아니한다. 제3항의 승인을 얻지 못한 때에는 그 처분 또는 명령은 그때부터 효력을 상실한다. 이 경우 그 명령에 의하여
개정 또는 폐지되었던 법률은 그 명령이 승인을 얻지 못한 때부터 당연히 효력을 회복한다. 국무위원은 국정에 관하여 대통령을 보좌하며, 국무회의의 구성원으로서 국정을 심의한다.
대통령은 내란 또는 외환의 죄를 범한 경우를 제외하고는 재직중 형사상의 소추를 받지 아니한다. 중앙선거관리위원회는 대통령이 임명하는 3인, 국회에서 선출하는 3인과 대법원장이 지명하는 3인의 위원으로
구성한다. 위원장은 위원중에서 호선한다. 국무총리·국무위원 또는 정부위원은 국회나 그 위원회에 출석하여 국정처리상황을 보고하거나 의견을 진술하고 질문에 응답할 수 있다.
국무총리는 국무위원의 해임을 대통령에게 건의할 수 있다. 국회의원은 현행범인인 경우를 제외하고는 회기중 국회의 동의없이 체포 또는 구금되지 아니한다. 모든 국민은 사생활의 비밀과 자유를 침해받지
아니한다. 정당의 목적이나 활동이 민주적 기본질서에 위배될 때에는 정부는 헌법재판소에 그 해산을 제소할 수 있고, 정당은 헌법재판소의 심판에 의하여 해산된다.
대법관은 대법원장의 제청으로 국회의 동의를 얻어 대통령이 임명한다. 새로운 회계연도가 개시될 때까지 예산안이 의결되지 못한 때에는 정부는 국회에서 예산안이 의결될 때까지 다음의 목적을 위한 경비는
전년도 예산에 준하여 집행할 수 있다. 모든 국민은 학문과 예술의 자유를 가진다. 헌법개정은 국회재적의원 과반수 또는 대통령의 발의로 제안된다.
</p>
</body>
</html>
'CSS입문' 카테고리의 다른 글
| CSS_Box관련속성(width, height)_22.04.08(Fri) (0) | 2022.04.08 |
|---|---|
| CSS_Box단위(vw,vh_22.04.08(Fri) (0) | 2022.04.08 |
| CSS_상속의 우선순위_22.04.08(Fri) (0) | 2022.04.08 |
| CSS_ 상속 _22.04.08(Fri) (0) | 2022.04.08 |
| CSS_가상요소선택자hover,active,focus,nth-child,before,after_22.04.07(thur) (0) | 2022.04.07 |