1. Overflow: 자식태그의 내용, 높이가 더 클 때, 부모태그가 어떻게 보일지 선택하는 속성입니다.
1) visible: 기본값으로 내용이 더 길어도 그대로 보이게 함 (내용이 넘침)
2) hidden: 자식태그 내용 중 넘치는 것을 잘라낸다
3) scroll: 내용이 넘치지 않아도 항상 스크롤바가 보임
4) auto: 내용이 잘릴 때만 스크롤바가 보임
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>OverFlow</title>
<style type="text/css">
#row1{
width: 500px; margin: 0px auto;
border: 1px solid red; /*높이 생략시 자식 height에 맞춰진다. 즉, 속성으로 정의해주면 불편하다. 하고싶으면 직접 다 계산해야한다*/
}
#row1 > #first{
width: 100px; height: 100px;
margin: 5px; border: 1px solid #cccccc;
}
#row1 > #second{
width: 100px; height: 100px;
margin: 5px; border: 1px solid #ccccdd;
}
#row2{
width: 500px; margin: 0px auto;
border: 1px solid blue;
margin-top: 5px;
overflow: hidden; /*넘치는 것은 잘라줌, 자식거에 맞춰줌*/
}
#row2 > #first, #row2 > #second{
width: 100px; height: 100px;
margin: 5px; border: 1px solid #cccccc;
float: right;
}
</style>
</head>
<body>
<div id="row1">
<div id="first">first</div>
<div id="second">second</div>
</div>
<div id="row2">
<div id="first">first</div>
<div id="second">second</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>OverFlow</title>
<style type="text/css">
#wrap{
width: 800px; margin: 0px auto;
border: 1px solid #CCCCCC;
overflow: hidden; /*부모태그의 보더가 보이게하기 위해서 height를 계산하지 않고, 선이 깨지지 않게하는 방법*/
}
#wrap > img{
float: left; margin: 10px;
}
#wrap > p {
float: left; width: 350px; height: 200px;
}
</style>
</head>
<body>
<div id="wrap">
<img src="Tulips.jpg" width="350" height="200" alt="공사중" />
<p>
빌 게이츠, 스티브 잡스로부터 마크 저커버그, 마윈, 레이쥔까지 뉴밀레니엄 이후 21세기를 장식하고 있는
신흥 부호이자 현시대를 살고 있는 지구촌 젊은이의 롤모델이다. <br/>
이들의 공통점은 전통 제조업이 아닌 소프트웨어(SW)와 IT분야에서 기업을 일구고 부와 명성을 쌓았다는 점이다.
매일 세계 언론의 머리를 장식하는 새로운 부호도 SW분야에서 배출되고 있다. 세계 자본의 물줄기는 SW를 향해 흐른다.
</p>
</div>
</body>
</html>
2.Colorzilla: 박스의 음영부분의 색상을 주는 기능, 그라데이션으로 색을 커스터마이징 할 수 있습니다.
https://www.colorzilla.com/gradient-editor/ 에서 선택 가능합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>외부 글꼴</title>
<style type="text/css">
#wrap{
width: 800px; margin: 0px auto;
border: 0px solid red;
overflow: hidden;
}
#wrap > ul > li{
list-style-type: none;
width: 140px; height: 60px;
border: 1px solid #CCCCCC;
text-align: center; line-height: 60px;
font-size: 1.5em; font-weight: bold; float:left;
border-left-width: 0px;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fcfc53+0,46f2e6+100&0.59+17,0.65+55 */
background: -moz-linear-gradient(top, rgba(252,252,83,0.59) 0%, rgba(221,250,108,0.59) 17%, rgba(152,246,164,0.65) 55%, rgba(70,242,230,0.65) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(252,252,83,0.59) 0%,rgba(221,250,108,0.59) 17%,rgba(152,246,164,0.65) 55%,rgba(70,242,230,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(252,252,83,0.59) 0%,rgba(221,250,108,0.59) 17%,rgba(152,246,164,0.65) 55%,rgba(70,242,230,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#96fcfc53', endColorstr='#a646f2e6',GradientType=0 ); /* IE6-9 */
}
</style>
</head>
<body>
<div id="wrap">
<ul>
<li style="border-left-width: 1px;">menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
</ul>
</div>
</body>
</html>
3.Layout 연습
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap" rel="stylesheet">
<!-- ↑ 구글 폰트에서 가져온 것 -->
<style type="text/css">
*{
font-weight: bold;
font-family: 'Kaushan Script', cursive; /*<-구글폰트 사용 문법*/
}
div{
border: 1px solid #CCCCCC;
margin: 5px; text-align: center;
}
#con{
width: 80%; margin: 0px auto;
}
#con > #header{
height: 100px; line-height: 100px; font-size: 2.0em;
}
#con > #nav {
height: 200px;
}
#con > #nav > p {
font-size: 1.5em;
}
#con > #nav > ul {
width: 700px; height: 50px; border: 0px solid red;
margin: 0px auto; /*navigation과 0마진, 가운데로 정렬*/
}
#con > #nav > ul > li {
list-style-type: none; width: 130px; height: 50px;
border: 1px solid #DDDDDD;
font-size: 20px;
float: left; line-height: 50px;
border-left-width: 0px;
}
#con > #wrap{
overflow: hidden;
}
#con > #wrap > #content{
width: 70%;
}
#con > #wrap > #banner{
width: 26%;
}
#con > #wrap > #content, #con > #wrap > #banner{
height: 500px;
font-size: 1.5em;
line-height: 500px;
float: left;
}
#con > #footer{
font-size: 1.5em;
height: 100px; line-height: 100px;
}
</style>
</head>
<body>
<div id="con">
<div id="header">HEADER</div>
<div id="nav">
<p>NAVIGATION</p>
<ul>
<li style="border-left-width: 1px;">menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
</ul>
</div>
<div id="wrap">
<div id="content">CONTENT</div>
<div id="banner">BANNER</div>
</div>
<div id="footer">FOOTER</div>
</div>
</body>
</html>
<브라우저 화면>
'KITRI 교육 > HTML,CSS,JS (KITRI 교육)' 카테고리의 다른 글
| JavaScript (Core, Function, Event, Form) (1) | 2020.06.04 |
|---|---|
| CSS (2) (Guest, Filter, URL, Display, Opacity) (0) | 2020.06.01 |
| CSS (1) (Selector, Multimedia, Inherit, Attribute, Board) (0) | 2020.06.01 |
| HTML(Hyper Text Markup Langunage) 이란? (1) | 2020.05.31 |