VSCode_부트스트랩 basic. 그리드 시스템 2
그리드 시스템을 이용하여
content 클래스가 3분할이 되어있는
헤더, 콘텐츠, 푸터 형식의 레이아웃을 짜보겠습니다.
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center" style="background-color:antiquewhite;">그리드 시스템을 이용한 레이아웃</h1>
</div>
</div>
<div class="row">
<div class="col-md-2">
<ul style="list-style: none; background-color: aqua;">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
</div>
<div class="col-md-8">
대통령의 선거에 관한 사항은 법률로 정한다. 언론·출판은 타인의 명예나 권리 또는 공중도덕이나 사회윤리를 침해하여서는 아니된다. 언론·출판이 타인의 명예나 권리를 침해한 때에는 피해자는 이에 대한 피해의 배상을 청구할 수 있다.
모든 국민은 종교의 자유를 가진다. 국토와 자원은 국가의 보호를 받으며, 국가는 그 균형있는 개발과 이용을 위하여 필요한 계획을 수립한다. 국가안전보장회의의 조직·직무범위 기타 필요한 사항은 법률로 정한다.
<br/><br/>
제3항의 승인을 얻지 못한 때에는 그 처분 또는 명령은 그때부터 효력을 상실한다. 이 경우 그 명령에 의하여 개정 또는 폐지되었던 법률은 그 명령이 승인을 얻지 못한 때부터 당연히 효력을 회복한다.
대법원에 대법관을 둔다. 다만, 법률이 정하는 바에 의하여 대법관이 아닌 법관을 둘 수 있다. 지방의회의 조직·권한·의원선거와 지방자치단체의 장의 선임방법 기타 지방자치단체의 조직과 운영에 관한 사항은 법률로 정한다.
</div>
<div class="col-md-2 " style="background-color: aquamarine;">
기타 부가적인 내용이 들어가는 곳
</div>
</div>
<div class="row">
<div class="col-md-12 text-center" >
여기는 푸터가 들어가는 곳 입니다.
</div>
</div><!--div.container-->
이렇듯 스타일 태그를 따로 작성하지 않아도
class=""옆에 style=""을 지정해서
스타일을 수정해줄 수 있습니다.
다른 방법도 있습니다.
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="text-center title">그리드 시스템을 이용한 레이아웃 offset1 적용 시 모습</h2>
</div>
</div>
<div class="row">
<div class="col-md-2">
<ul class="menu">
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
</ul>
</div>
<div class="col-md-8 offset-md-1">
<p>
모든 국민은 근로의 의무를 진다. 국가는 근로의 의무의 내용과 조건을 민주주의원칙에 따라 법률로 정한다. 모든 국민은 양심의 자유를 가진다. 군인 또는 군무원이 아닌 국민은 대한민국의 영역안에서는 중대한 군사상 기밀·초병·초소·유독음식물공급·포로·군용물에 관한 죄중 법률이 정한 경우와 비상계엄이 선포된 경우를 제외하고는 군사법원의 재판을 받지 아니한다.
모든 국민은 언론·출판의 자유와 집회·결사의 자유를 가진다. 국정감사 및 조사에 관한 절차 기타 필요한 사항은 법률로 정한다. 비상계엄하의 군사재판은 군인·군무원의 범죄나 군사에 관한 간첩죄의 경우와 초병·초소·유독음식물공급·포로에 관한 죄중 법률이 정한 경우에 한하여 단심으로 할 수 있다. 다만, 사형을 선고한 경우에는 그러하지 아니하다.
</p>
<p>
감사원은 세입·세출의 결산을 매년 검사하여 대통령과 차년도국회에 그 결과를 보고하여야 한다. 제2항의 재판관중 3인은 국회에서 선출하는 자를, 3인은 대법원장이 지명하는 자를 임명한다.
국무총리 또는 행정각부의 장은 소관사무에 관하여 법률이나 대통령령의 위임 또는 직권으로 총리령 또는 부령을 발할 수 있다. 공무원의 신분과 정치적 중립성은 법률이 정하는 바에 의하여 보장된다.
</p>
</div>
</div>
<div class="row">
<div class="col-md-12 footer">
<p>여기는 푸터가 들어가는 곳 입니다.</p>
</div>
</div>
</div>
</body> <style>
.menu {
list-style: none;
background-color: gainsboro;
}
.footer {
text-align: center;
}
.title {
background-color: aqua;
padding: 30px;
}
</style>
Author And Source
이 문제에 관하여(VSCode_부트스트랩 basic. 그리드 시스템 2), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@nugoory20/VSCode부트스트랩-basic.-그리드-시스템-2저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
