<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>실습</title>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');
.container { position: fixed; width: 100%; height: 100vh;
background: url(./imgs/office.jpg) no-repeat center;
background-attachment: fixed;
background-size: cover;}
section {
width: 60%; height: 90%; margin: 10px auto; padding: 30px;
background: rgba(255, 255, 255, 0.7); border-radius: 9px;}
h2, h3 {font-family: 'Nanum Myeongjo', serif; text-align: center; padding: 15px 0;}
h2 { font-size: 30px;}
h3 { font-size: 20px;}
p {font-family: 'Nanum Gothic', sans-serif; text-indent: 30px; line-height: 25px; padding: 10px 0;}
blockquote {
padding:20px 80px;
font-family: 'Nanum Myeongjo', serif;
line-height: 30px;
}
blockquote:before, blockquote:after {
display: inline-block;
vertical-align: bottom;
color: gray;
height: 25px;
line-height: 50px;
font-size: 50px;
}
blockquote:before {
content: '\201C';
margin-right: 5px;
}
blockquote:after {
content: '\201D';
}
</style>
</head>
<body>
<div class="container">
<section>
<h2>국정의 중요한 사항에 관한 대통령의 자문</h2>
<h3> 국가안전보장회의는 대통령이 주재한다.</h3>
<hr color="gray">
<p>법률은 특별한 규정이 없는 한 공포한 날로부터 20일을 경과함으로써 효력을 발생한다. 모든 국민은 양심의 자유를 가진다. 대통령은 전시·사변 또는 이에 준하는 국가비상사태에 있어서 병력으로써 군사상의 필요에 응하거나 공공의 안녕질서를 유지할 필요가 있을 때에는 법률이 정하는 바에 의하여 계엄을 선포할 수 있다.</p>
<p>국회의원의 선거구와 비례대표제 기타 선거에 관한 사항은 법률로 정한다. 정당은 법률이 정하는 바에 의하여 국가의 보호를 받으며, 국가는 법률이 정하는 바에 의하여 정당운영에 필요한 자금을 보조할 수 있다. 국토와 자원은 국가의 보호를 받으며, 국가는 그 균형있는 개발과 이용을 위하여 필요한 계획을 수립한다.</p>
<blockquote>국무총리는 대통령을 보좌하며, 행정에 관하여 대통령의 명을 받아 행정각부를 통할한다. 농업생산성의 제고와 농지의 합리적인 이용을 위하거나 불가피한 사정으로 발생하는 농지의 임대차와 위탁경영은 법률이 정하는 바에 의하여 인정된다. 정당의 설립은 자유이며, 복수정당제는 보장된다. 재판의 심리와 판결은 공개한다. </blockquote>
<p>국민의 자유와 권리는 헌법에 열거되지 아니한 이유로 경시되지 아니한다. 국무회의는 대통령·국무총리와 15인 이상 30인 이하의 국무위원으로 구성한다. 국가원로자문회의의 조직·직무범위 기타 필요한 사항은 법률로 정한다. 군인은 현역을 면한 후가 아니면 국무총리로 임명될 수 없다. 대통령으로 선거될 수 있는 자는 국회의원의 피선거권이 있고 선거일 현재 40세에 달하여야 한다. </p>
<p>제1항의 탄핵소추는 국회재적의원 3분의 1 이상의 발의가 있어야 하며, 그 의결은 국회재적의원 과반수의 찬성이 있어야 한다. 다만, 대통령에 대한 탄핵소추는 국회재적의원 과반수의 발의와 국회재적의원 3분의 2 이상의 찬성이 있어야 한다. 법관은 탄핵 또는 금고 이상의 형의 선고에 의하지 아니하고는 파면되지 아니하며, 징계처분에 의하지 아니하고는 정직·감봉 기타 불리한 처분을 받지 아니한다. </p>
</section>
</div>
</body>
</html>
----------
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>플렉스박스 실습 이미지모음</title>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
section {
display: flex;
justify-content: space-between;
align-items: flex-start;
width: 100%; max-width: 1200px; margin: 0 auto;
}
div { width: 33.33%; height: 280px; margin: 5px;}
div img { width: 100%; }
</style>
</head>
<body>
<section>
<div><img src="./imgs/bg.jpg"></div>
<div><img src="./imgs/chess.jpg"></div>
<div><img src="./imgs/office.jpg"></div>
</section>
<section>
<div><img src="./imgs/ipad.jpg"></div>
<div><img src="./imgs/glass.jpg"></div>
<div><img src="./imgs/photo1.jpg"></div>
</section>
</body>
</html>
------------------------------
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>플렉스박스 실습 로그인창</title>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
section {
display: flex;
justify-content: center;
align-items: center;
width: 100%; height: 100vh;
background: #999;
}
.login { width: 400px; height: 300px;
background:#fff;
border-radius: 9px; box-shadow: 0 0 10px #000;
}
h3 {width: 90%; margin: 0 auto; padding:40px 0 20px;
font-size: 28px; text-align: center;
border-bottom: 1px solid #999;
}
ul { width: 60%; margin: 20px auto;}
ul li {list-style:none; margin: 5px 0;}
ul li input {width: 100%; height: 35px; padding-left: 10px;}
</style>
</head>
<body>
<section>
<div class="login">
<h3>회원 로그인</h3>
<ul>
<li><input type="text" name="id" placeholder="아이디" required></li>
<li><input type="text" name="pwd" placeholder="비밀번호" required></li>
<li><input type="submit" value="확인"></li>
</ul>
</div>
</section>
</body>
</html>
---------------
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>플렉스박스 실습 사이드바</title>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
aside {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
width: 200px; height: 100vh; padding:30px 0;
background: cornflowerblue;
}
ul {margin-left: 50px;}
ul li { list-style: none; }
ul li a { display: block; margin:10px; padding:10px 30px; background:rgba(255,255,255,0.3); border: 1px solid #fff; border-radius: 5px; text-decoration: none; color: #fff;}
ul li a:hover {color:#333; background:rgba(255,255,255,0.8)}
</style>
</head>
<body>
<aside>
<ul>
<li><a href="#">사이드1</a></li>
<li><a href="#">사이드2</a></li>
<li><a href="#">사이드3</a></li>
</ul>
<ul>
<li><a href="#">하단1</a></li>
<li><a href="#">하단2</a></li>
</ul>
</aside>
</body>
</html>
'Coding' 카테고리의 다른 글
| CSS 선수학습(10) (0) | 2021.07.21 |
|---|---|
| CSS 선수학습(9) (0) | 2021.07.21 |
| CSS 선수학습(8) (0) | 2021.07.19 |
| CSS 선수학습(7) (0) | 2021.07.16 |
| CSS 선수학습(6) (0) | 2021.07.15 |