Folder : 04_cssBoxModel
exam01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body{
background: ghostwhite;
}
span{
background: deepskyblue;
}
.box{
background: yellow;
border-style: solid;
border-color: peru;
margin: 40px;
border-width: 30px;
padding: 20px;
}
</style>
</head>
<body>
<div class="box">
<span>DIVDIVDIV</span>
</div>
</body>
</html>
exam02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div.inner{
margin: 30px;
padding: 20px;
border: 5px, dotted red;
background: yellow;
}
</style>
</head>
<body>
<h3>박스 모델</h3>
<p>margin 30px, padding 20px, border 5px의 빨간색 점선</p>
<hr>
<div class="inner">
<img src="../image/img1.gif" alt="망상토끼">
</div>
</body>
</html>
exam03.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>다양한 테두리</h3>
<hr>
<p style="border: 3px solid blue">3픽셀 solid</p>
<p style="border: 3px none blue">3픽셀 none</p>
<p style="border: 3px hidden blue">3픽셀 hidden</p>
<p style="border: 3px dotted blue">3픽셀 dotted</p>
<p style="border: 3px dashed blue">3픽셀 dashed</p>
<p style="border: 3px double blue">3픽셀 double</p>
<p style="border: 15px groove yellow">15픽셀 groove</p>
<p style="border: 15px ridge yellow">15픽셀 ridge</p>
<p style="border: 15px inset yellow">15픽셀 inset</p>
<p style="border: 15px outset yellow">15픽셀 outset</p>
</body>
</html>
p에는 줄바꿈 기능이 있고 한 줄을 잡기 때문에 알아서 줄바꿔주고 공간이 띄어진다.
exam04.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
p{
background: #90D000;
padding: 20px;
width: 300px;
}
#round1{
border-radius: 50px; /* 시계방향 - top, right, bottom, left*/
}
#round2{
border-radius: 0px 20px 40px 60px;
}
#round3{
border-radius: 0px 20px 40px;/* 시계방향 - top, right/left, bottom*/
}
#round4{
border-radius: 0px 20px;/* 시계방향 - top/bottom, right/left*/
}
#round5{
border-radius: 50px;
border-style: dotted;
}
</style>
</head>
<body>
<h3>둥근 모서리 테두리</h3>
<hr>
<p id="round1">반지름 50픽셀의 둥근 모서리</p>
<p id="round2">반지름 0, 20, 40, 60 둥근 모서리</p>
<p id="round3">반지름 0, 20, 40, 20 둥근 모서리</p>
<p id="round4">반지름 0, 20, 0, 20 둥근 모서리</p>
<p id="round5">반지름 50의 둥근 점선 모서리</p>
</body>
</html>
px → top/right/bottom/left
px, px → top/bottom, right/left
px, px, px → top right/left bottom
exam05.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
color: blueviolet;
font-size: 16px;
background-color: skyblue;
background-size: 100px;
background-image: url("../image/spongebob.png");
background-repeat: repeat-y;
background-position: center center; /*위아래도 center/ 오왼도 center*/
}
</style>
</head>
<body>
<h3>div 박스에 배경 꾸미기</h3>
<hr>
<div>스폰지밥은 다른 캐릭터들을 짜증나게 하는 지나치게 낙관적인 스폰지이다.</div>
</body>
</html>
background-image: url("../image/spongebob.png");
background-repeat: repeat-y; (y축만 반복하게 !)
background-position: center center; 위아래도 center/ 오왼도 center (위치를 center로 !)
display: none;
=> 아예 없었던 것처럼 영역도 잡히지 않는다.
visibility: hidden;
=> 브라우저에는 보이지 않지만 영역은 잡고 있다.
visibility 속성
- 기본값은 'visible'이며 'hidden'을 지정할 경우에는 지정된 요소가 보이지 않게 된다.
- 'display: none;'은 원래 없었던 것처럼 표현되지만,
'visibility: hidden'은 보이지만 않고 공간은 유지된다.
inline
- 줄바꿈 없이 순서대로 한 줄에 다른 엘리먼트들과 나란히 배치된다
- 컨텐트의 크기 만큼만 공간을 차지하므로 width, height 속성을 지정해도 무시된다
- padding, margin 속성은 좌우 간격만 반영이 되고 상하 간격은 반영되지 않는다
- <span>, <a>, <em> 등
block
- 혼자 한 줄을 차지한다
- 매번 줄바꿈이 되어 여러 줄에 보이게 된다
- width, height, padding, margin 속성이 모두 반영된다
- <div>, <p>, <h1> 등
inline-block
- inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다.
- inline에서 불가능하던 width, height, padding, margin 속성의 상하 간격 지정이 가능하다.
- inline-block을 이용하면 여러 개의 엘리먼트를 한 줄에 정확히 원하는 너비만큼 배치할 수 있기 때문에 레이아웃에 활용할 수 있다.
- <button>, <select> 등
Folder : 05_cssPositioning
exam01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
border: 2px solid yellowgreen;
color: blue;
background: aliceblue;
}
span {
border: 3px dotted red;
background: yellow;
}
</style>
</head>
<body>
<h3>인라인, 인라인 블록, 블록</h3>
<hr>
나는 <div>div</div>입니다.<br><br>
나는 <div style="display: none">div(none)</div>입니다.<br><br>
나는 <div style="display: inline">div(inline)</div>입니다.<br><br><!-- div가 block인데 inline으로 바꾼 것 -->
나는 <div style="display: inline-block; height: 50px">div(inline-block)</div>입니다.<br><br>
나는 <div>div <span style="display: block">span(block)</span>입니다.<br><br></div> <!-- span은 inline인데 block으로 바꾼 것 -->
</body>
</html>
exam02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.paging{
text-align: center;
}
.paging a{
display: inline-block;
border: 1px solid #ccc;
padding: 5px 8px; /*top/bottom, right/left*/
border-color: beige;
font-weight: bold;
}
</style>
</head>
<body>
<p class="paging" style="border: 1px solid red;">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
</p>
</body>
</html>
display: inline-block; 이걸로 인해 작은 네모가 안으로 들어오게 된다.
float 속성
1) left, right
- float를 지정하면 다음에 오는 컨텐츠가 float를 지정한 블록 주위를 감싸게 된다.
- html 요소 중에서 인라인 요소나 블록 요소는 그 결과가 무척 다르다.
그러나, float를 지정하면 두 요소는 같은 결과를 보여준다.
인라인 요소가 블록 요소처럼 크기를 지정할 수 있게 된다.
2) clear 속성
- float를 해지한다.
- clear: left; /* float: left; 해지 */
- clear: right; /* float: right; 해지 */
- clear: both; /* float: left;, float: right; 둘 다 해지 */
exam03.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#float{
float: right;
}
.text1{
margin-right: 30em;
text-align: justify;
}
.text2{
clear: both;
}
</style>
</head>
<body>
<h3>학기말 공지</h3>
<hr>
<div>
<p id="float">
24일은 피아니스트 조성진의 크리스마스 특별 연주가 있습니다.
</p>
<p class="text1">
이제 곧 겨울 방학이 시작됩니다. 학기 중 못다한 Java, C++ 프로그래밍 열심히 하기 바랍니다.
인턴을 준비하는 학생들은 프로젝트 개발에 더욱 힘쓰세요, 그럼 다음 학기에 만나요.
</p>
<p class="text2">
이제 곧 겨울 방학이 시작됩니다. 학기 중 못다한 Java, C++ 프로그래밍 열심히 하기 바랍니다.
인턴을 준비하는 학생들은 프로젝트 개발에 더욱 힘쓰세요, 그럼 다음 학기에 만나요.
</p>
</div>
</body>
</html>
exam04.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
* { /* 초기화 작업 */
padding: 0;
margin: 0;
}
body {
font: 12px Tahoma, sans-serif; /* 1 번째 글꼴이 없으면 다음 글꼴로 적용 */
}
li {
list-style: none;
}
#wrap {
width: 800px;
background-color: silver;
margin: 0 auto; /* auto는 가운데 정렬해준다. */
}
#header {
background-color: red
}
#container {
background-color: cyan;
}
#container:after{
content: '';
display: block;
clear: both;
}
.nav{
float: left;
background-color: lime;
width: 180px;
}
.content{
float: right;
background-color: lime;
width: 600px;
}
#footer{
background-color: green;
margin-top: 30px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>LOGO</h1>
<p>This website is...</p>
</div><!-- header -->
<div id="container">
<div class="nav">
<h2>Navigation</h2>
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div><!-- nav -->
<div class="content">
<h2>Content Title</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat
vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
placerat eleifend leo. Quisque sit amet est et sapien ullamcorper
pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae,
ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt
condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
Praesent dapibus, neque id cursus faucibus, tortor neque egestas
augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam
dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div><!-- content -->
</div><!-- container -->
<div id="footer">
<address>Seoul, Korea</address>
</div><!-- footer -->
</div><!-- wrap -->
</body>
</html>
<address>Seoul, Korea</address>
이렇게 쓰게 되면 약간 글씨가 기울려진다.
#container:after{
content: ' ';
display: block;
clear: both; → 더이상 float의 영향을 받지 않겠다 !!
}
위의 작업을 하지 않으면 밑에 그림처럼 footer가 위로 올라온다.
position 속성
- 값으로는 absolute, relative, fixed의 3가지가 있다.
- 이렇게 설정된 후에는 left, right, top, bottom 속성으로 그 위치를 지정하게 된다.
(1) position: absolute;
- 부모 tag의 위치를 기준으로 상대적으로 배치
- HTML 문서에 2개 이상의 요소가 나열되면, 뒤에 배치되는 요소는 앞에 놓인 요소를 기준으로
배치된다. 하지만, ‘position: absolute’으로 지정하면, 다음 요소가 이 블록을 인지하지 못한 채
오로지 주어진 절대값을 기준으로 배치된다.
- ‘position: absolute’ 지정한 후, left, right, top, bottom 속성으로 그 위치를 지정할 수 있다.
(2) position: relative;
- 자기 자신을 기준으로 상대적으로 배치
- 기준값 기준으로 상대적으로 배치된다.
- ‘position: relative’로 지정된 후, left, right, top, bottom의 위치 값들은 relative가 지정된 블록 그
자신의 위치에서 지정한 값만큼 이동하게 된다.
- ‘position: absolute’를 지정하는 경우, 이를 감싸는 블록에는 ‘position: relative’로 지정해야 한다.
(3) position: fixed;
- 뷰포트를 기준으로 상대적으로 배치
- 위치는 항상 <body>를 기준으로 위치된다.
- 위치는 고정이다.
(4) z-index
- position을 지정한 여러 블록이 겹치게 되면, 나중에 작성한 블록이 위로 올라가게 된다.
- z-index 속성으로 블록의 위, 아래의 위치를 조정할 수 있다.
- z-index의 큰 값이 위로 올라간다.
- 기본값이 0, 음수 ~ 양수까지 줄 수 있다
(2) position: relative;
- 자기 자신을 기준으로 상대적으로 배치
- 기준값 기준으로 상대적으로 배치된다.
- ‘position: relative’로 지정된 후, left, right, top, bottom의 위치 값들은 relative가 지정된 블록 그
자신의 위치에서 지정한 값만큼 이동하게 된다.
- ‘position: absolute’를 지정하는 경우, 이를 감싸는 블록에는 ‘position: relative’로 지정해야 한다.
exam05.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
display: inline-block;
width: 50px;
height: 50px;
border: 1px solid lightgray;
text-align: center;
color: white;
background: red;
}
#down:hover {
position: relative; /* 나를 기준으로 */
left: 20px;
top: 20px;
background-color: blue;
}
#up:hover {
position: relative;
left: -20px; /* right: 20px; */
top: -20px; /* bottom: 20px; */
background-color: blue;
}
</style>
</head>
<body>
<h3>상대배치, relative</h3>
<hr>
<div>T</div>
<div id="down">h</div>
<div>a</div>
<div>n</div>
<div id="up">k</div>
<div>s</div>
</body>
</html>
(1) position: absolute;
- 부모 tag의 위치를 기준으로 상대적으로 배치
- HTML 문서에 2개 이상의 요소가 나열되면, 뒤에 배치되는 요소는 앞에 놓인 요소를 기준으로
배치된다. 하지만, ‘position: absolute’으로 지정하면, 다음 요소가 이 블록을 인지하지 못한 채
오로지 주어진 절대값을 기준으로 배치된다.
- ‘position: absolute’ 지정한 후, left, right, top, bottom 속성으로 그 위치를 지정할 수 있다.
(2) position: relative;
- 자기 자신을 기준으로 상대적으로 배치
- 기준값 기준으로 상대적으로 배치된다.
- ‘position: relative’로 지정된 후, left, right, top, bottom의 위치 값들은 relative가 지정된 블록 그
자신의 위치에서 지정한 값만큼 이동하게 된다.
- ‘position: absolute’를 지정하는 경우, 이를 감싸는 블록에는 ‘position: relative’로 지정해야 한다.
(3) position: fixed;
- 뷰포트를 기준으로 상대적으로 배치
- 위치는 항상 <body>를 기준으로 위치된다.
- 위치는 고정이다.
exam06.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* margin에 기본 16px이 걸려있다. CSS 초기화를 해주어야 결과가 제대로 나온다. */
*{
padding: 0;
margin: 0;
}
div{
border: 1px solid red;
display: inline-block;
position: relative;
}
div > p {
border: 1px solid blue;
display: inline-block;
position: absolute; /* 부모 기준으로 */
width: 15px;
height: 20px;
background: aliceblue;
}
#fixed {
position: fixed;
bottom: 10px;
right: 10px;
width: 120px;
padding: 5px;
background: red;
color: white;
}
</style>
</head>
<body>
<h3>Merry Christmas !!</h3>
<hr>
<p>메리 크리스마스</p>
<div>
<img src="../image/christmastree.png" width="200" height="200" alt="크리스마스 트리">
<p style="left: 50px; top: 30px;">M</p>
<p style="left: 100px; top: 0px; padding: 0px; margin: 0px">E</p>
<p style="left: 100px; top: 80px;">R</p>
<p style="left: 150px; top: 110px;">R</p>
<p style="left: 30px; top: 130px;">Y</p>
</div>
<div id="fixed">메리 크리스마스</div>
</body>
</html>
(4) z-index
- position을 지정한 여러 블록이 겹치게 되면, 나중에 작성한 블록이 위로 올라가게 된다.
- z-index 속성으로 블록의 위, 아래의 위치를 조정할 수 있다.
- z-index의 큰 값이 위로 올라간다.
- 기본값이 0, 음수 ~ 양수까지 줄 수 있다
exam07.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
position: absolute;
}
img {
position: absolute;
}
#spadeA {
left: 10px;
top: 20px;
z-index: -3;
}
#spade2 {
left: 40px;
top: 30px;
z-index: 2;
}
#spade7 {
left: 80px;
top: 40px;
z-index: 7;
}
#spade3 {
left: 120px;
top: 50px;
z-index: 3;
}
</style>
</head>
<body>
<h3>z-index 프로퍼티</h3>
<hr>
<div>
<img id="spadeA" src="../image/spade-A.png" width="100" height="140" alt="스페이드A">
<img id="spade2" src="../image/spade-2.png" width="100" height="140" alt="스페이드2">
<img id="spade7" src="../image/spade-7.png" width="100" height="140" alt="스페이드7">
<img id="spade3" src="../image/spade-3.png" width="100" height="140" alt="스페이드3">
</div>
</body>
</html>
'HTML CSS JS' 카테고리의 다른 글
| DAY 31 - CSS - cssShadowCursor / map (2024.08.14) (1) | 2024.08.14 |
|---|---|
| DAY 30 - CSS - hidden / visible / scroll / auto / transform / transition (0) | 2024.08.13 |
| DAY 28 - CSS (2024.08.09) (0) | 2024.08.09 |
| DAY 28 - HTML 연습 (2024.08.09) (0) | 2024.08.09 |
| DAY 27 - HTML - inline / block / div / 커스텀 /video / audio (2024.08.08) (0) | 2024.08.08 |
