1. multi-column 레이아웃
페이지의 다단을 나누는 기능
[예제 코드]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#column{
/* column-count:2;
column-count는 단을 몇 개로 나눌지 결정하는 요소
설정되어 있지 않는 경우 자동으로 단이 나눠진다. */
/* 한 단의 넓이 설정 */
column-width: 200px;
text-align: justify;
/* 단 사이의 거리 */
column-gap: 30px;
/* 컬럼 줄 디자인 요소 */
column-rule-style: dotted;
column-rule-width: 5px;
column-rule-color: tomato;
}
h1{
/* 요소가 모든 열에 걸쳐 있음을 뜻함 */
column-span: all;
}
</style>
</head>
<body>
<div id = "column">
There are many variations of passages of Lorem Ipsum available,
but the majority have suffered alteration in some form, by injected humour,
or randomised words which don't look even slightly believable.
If you are going to use a passage of Lorem Ipsum, you need to be sure
there isn't anything embarrassing hidden in the middle of text.
All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks
as necessary, making this the first true generator on the Internet.
It uses a dictionary of over 200 Latin words, combined with a handful
of model sentence structures, to generate Lorem Ipsum which looks reasonable.
The generated Lorem Ipsum is therefore always free from repetition,
injected humour, or non-characteristic words etc.
<h1>There are many variations of</h1>
There are many variations of passages of Lorem Ipsum available,
but the majority have suffered alteration in some form, by injected humour,
or randomised words which don't look even slightly believable.
If you are going to use a passage of Lorem Ipsum, you need to be sure
there isn't anything embarrassing hidden in the middle of text.
All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks
as necessary, making this the first true generator on the Internet.
It uses a dictionary of over 200 Latin words, combined with a handful
of model sentence structures, to generate Lorem Ipsum which looks reasonable.
The generated Lorem Ipsum is therefore always free from repetition,
injected humour, or non-characteristic words etc.
There are many variations of passages of Lorem Ipsum available,
but the majority have suffered alteration in some form, by injected humour,
or randomised words which don't look even slightly believable.
If you are going to use a passage of Lorem Ipsum, you need to be sure
there isn't anything embarrassing hidden in the middle of text.
All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks
as necessary, making this the first true generator on the Internet.
It uses a dictionary of over 200 Latin words, combined with a handful
of model sentence structures, to generate Lorem Ipsum which looks reasonable.
The generated Lorem Ipsum is therefore always free from repetition,
injected humour, or non-characteristic words etc.
</div>
</body>
</html>
[출력 결과]
2. CSS 외부파일 적용
외부파일을 작성해 CSS를 적용하면 재사용성이 높아지고, 소스코드가 간단해서 유지보수의 편의성이 높아진다.
링크를 거는 방법과 임포트하는 방법 두 가지가 있다.
- <link rel="" href="">
- @import url("")
[예제 코드 1 - 링크]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="style.css">
<!-- <style>
h1{color: tomato;}
</style> -->
</head>
<body>
<h1>page1 - link1</h1>
</body>
</html>
[예제 코드 2 - 임포트]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- <style>
h1{color: tomato;}
</style> -->
<style>
@import url("style.css");
</style>
</head>
<body>
<h1>page2 - link2</h1>
</body>
</html>
[css 파일]
@charset "UTF-8";
h1{color: blue;}
[출력 결과]
3. 레이아웃
[예제 코드]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
/* 공통속성 */
*{
margin: 0px;
padding: 0px;
}
html, body{ height: 100%; }
/* container */
#container{
width: 800px;
margin: auto;
}
/* header */
#header{
background-color : tomato;
width : auto;
height: 100px;
}
/* content */
#content{
background-color: powderblue;
width: auto;
/* 페이지의 최소 높이 지정 */
min-height: 300px;
}
/* body, sidebar의 영역의 합이 부모 요소인 content의 넓이를 넘지 않게 */
/* content > body */
#body{
width: 640px;
background-color: #FFFF00;
float: left;
min-height: 300px;
}
/* content > sidebar */
#sidebar{
width: 160px;
background-color: #0000FF;
float: left;
min-height: 300px;
}
/* footer */
#footer{
background-color : orange;
width: auto;
height:80px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
상단영역
</div>
<div id="content">
<div id="body">
본문영역
</div>
<div id="sidebar">
사이드바
</div>
</div>
<div id="footer">
하단영역
</div>
</div>
</body>
</html>
[출력 결과]
프론트가 메인 과정이 아니어서 css는 여기까지...
도움되는 무료 템플릿 사이트 ▶ https://themewagon.com/theme-price/free
1098+ Free Bootstrap HTML5 CSS3 Website Templates | High Quality Bootstrap Theme
Searching for high-quality free demo HTML5 website templates? Download responsive HTML5 CSS3 website templates & Bootstrap themes. Free for commercial use.
themewagon.com
728x90
'이론 > 자바 풀스택 국비수업' 카테고리의 다른 글
| 220509 Javascript 2 (0) | 2022.06.21 |
|---|---|
| 220509 Javascript 1 (0) | 2022.06.18 |
| 220506 CSS 5 (0) | 2022.06.17 |
| 220506 CSS 4 (0) | 2022.06.17 |
| 220504~06 CSS 3 (0) | 2022.06.17 |