1. 화면구조잡기-기본
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>화면구조잡기</title>
<style>
div{
border: 1px solid red;
box-sizing: border-box;
/* content+padding+margin까지 포함한 %로 나누기 때문에 box-sizing을 border-box로 지정해주기 */
}
.wrap{ /*전체를 감싸는 div*/
width: 1000px;
height: 800px;
margin: auto;
}
/* 위에서 아래로 지정하는 것이 아닌 부모부터 지정해주어야 함 */
/* 크게 세 가지 영역 */
/* #header, #content, #footer */
.wrap > div{
width: 100%;
}
#header, #footer{ /* 같은 값을 지정할 경우 ,를 이용해서 id를 함께 적어줄 수 있음 */
height: 20%;
}
#content{
height: 60%;
}
/* content내부의 세분화된 영역들 */
#content > div{
height: 100%;
float: left;
}
#content_1{
width: 20%;
}
#content_2{
width: 80%;
}
/* 부모요소의 세로길이만큼 */
</style>
</head>
<body>
<div class="wrap">
<div id="header"></div>
<div id="content">
<div id="content_1"></div>
<div id="content_2"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
2. 화면구조잡기 실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>화면구조잡기실습</title>
<style>
div{
border: 1px solid palevioletred ;
box-sizing: border-box;
}
.wrap{
width: 1000px;
height: 800px;
}
.wrap>div{
width: 100%;
}
#header, #footer{
height: 20%;
}
#content{
height: 60%;
}
/* 세부설정(세로길이) */
#header>div, #content>div{
height: 100%;
float: left;
}
/* 세부설정(가로길이) */
#header1{
width: 30%;
}
#header2{
width: 70%;
}
#content1{
width: 15%;
}
#content2{
width: 65%;
}
#content3{
width: 20%;
}
</style>
</head>
<body>
<div class="wrap">
<div id="header">
<div id="header1"></div>
<div id="header2"></div>
</div>
<div id="content">
<div id="content1"></div>
<div id="content2"></div>
<div id="content3"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
3. 화면구조잡기 상세구조
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>화면구조잡기상세구조</title>
<style>
div{
border: 1px solid red;
box-sizing: border-box;
}
/* 전체를 감싸는 div */
.wrap{
width: 1000px;
height: 800px;
margin: auto;
}
/* 큰 4등분 속성 */
.wrap>div{width:100%;}
#header, #footer{height: 20%;}
#navigator{height: 5%;}
#content{height: 55%;}
/* 세부 div 속성 */
#header>div, #content>div{
height: 100%;
float: left;
}
/* 각각의 요소들 가로 길이 정해주기 */
#header_1{width: 20%;}
#header_2{width: 65%;}
#header_3{width: 15%;}
#content_1{width: 15%;}
#content_2{width: 60%;}
#content_3{width: 25%;}
</style>
</head>
<body>
<div class="wrap">
<div id="header">
<div id="header_1"></div>
<div id="header_2"></div>
<div id="header_3"></div>
</div>
<div id="navigator"></div>
<div id="content">
<div id="content_1"></div>
<div id="content_2"></div>
<div id="content_3"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
4. 세부 footer 만들기
'클라우드 융합 Full-stack 웹 개발자 양성과정 > HTML, CSS, JavaScript, j-Query' 카테고리의 다른 글
| j-Query - 개요, 기본선택자, 추가적인 선택자 (0) | 2022.11.01 |
|---|---|
| JavaScript - 요소가져오기(접근하기), 변수와 자료형, 문자열과 숫자, 배열, 함수, 객체1, 객체2, window객체, 이벤트, 정규표현식 (0) | 2022.10.24 |
| JavaScript - 개요, 데이터 입출력 (0) | 2022.10.24 |
| HTML - 태그(영역, 하이퍼링크관련 태그), CSS - 선택자(기본, 기타, 우선순위), 스타일(글꼴, 텍스트, 목록, 영역, 테두리, 배경, 레이아웃, 화면꾸미기) (0) | 2022.10.19 |
| HTML - test, 태그(글자, 목록, 표, 이미지 및 멀티미디어, 입력 양식 및 폼 관련) (0) | 2022.10.17 |