<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
/* 1번 text가 이미지에 Overlap되도록 구현하시오*/
.one{
position: absolute;
left: 0px;
top: 0px;
z-index: -1; // 여러 인덱스가 있을 경우 제일 앞에 나타남.
}
/* 2번 이미지위에 text가 표시되도록 구현하시오 */
.container{
position: relative;
}
.topleft{
position: absolute;
top: 8px;
left: 16px;
font-size: 18px;
}
img{
width: 100%;
height: auto;
opacity: 0.3; // 투명도
}
/*3번 - 첫글자 T를 아래 그림처럼 표시되도록 구현하시오*/
span{
float: left; // float : 왼쪽이나 오른쪽을 띄워서 정렬하는 기능.(left, right, none)
width: 0.7em;
font-size: 400%;
line-height: 80%;
font-family: Algerian;
}
/*4번 - 아래 그림처럼 표시되도록 구현하시오*/
.div2{
position: static;
border: 1px solid red;
width: 1000px;
height: 100px;
}
.div1{
float: left;
border: 5px solid green;
width: 100px;
height: 50px;
margin: 10px;
bottom: -100px;
left: 10px;
}
.div4{
position: static;
border: 1px solid red;
width: 1000px;
height: 50px;
}
.div3{
position: relative;
border: 5px solid green;
width: 100px;
height: 50px;
bottom: 10px;
left: 10px;
}
/*5번 - 아래 그림처럼 표시되도록 구현하시오*/
.img-container{
float: left;
max-width: 200px;
}
.clearfix::after { // :before 해당 태그의 앞에 놓여진다.
// :after 해당 태그의 다음 위치에 놓여진다.
content:""; // content:'' : 가상선택자에 필수로 들어가는 요소. 작음따음표'' 안에는 텍스트 내용을 넣고,
// 없으면 작은따음표만 넣기. 가상선택자는 부피가 없으므로, 아이콘을 표현할 땐 꼭 너비와 높이를 정해주어야 한다.
// transform을 쓸 때는 블럭요소(display:block 또는 display:inline-block)가 되어야 적용가능하다.
clear: both; // clear: 글자가 따라붙지 않게 하는 속성. float값을 취소한다고 보면 됨.
// (none/ left/ right/ both)
display: table;
}
</style>
<title>Insert title here</title>
</head>
<body>
<!-- 1번 -->
<h1>This is aheading</h1>
<div class="one">
<img src="w3css.gif"width="100" height="140">
</div>
<p>Because the image has az-index of -1, it will be placed behind the text.</p>
<!-- 2번 -->
<h2>Image Text</h2>
<p>Add some text to an imagein the top left corner:</p>
<div class="container">
<img src="img_5terre_wide.jpg"alt="Cinque Terre" width="1000" height="300">
<div class="topleft">Top Left</div>
</div>
<!-- 3번 -->
<p>
<span>T</span>his issome text.
This is some text. This is sometext.
This is some text. This is sometext. This is some text.
This is some text. This is sometext. This is some text.
This is some text. This is sometext. This is some text.
This is some text. This is sometext. This is some text.
This is some text. This is sometext. This is some text.
This is some text. This is sometext. This is some text.
</p>
<p>
In the paragraph above, the firstletter of the text is embedded in a span element.
The span element has a width thatis 0.7 times the size of the current font.
The font-size of the span elementis 400% (quite large) and the line-height is 80%.
The font of the letter in the spanwill be in "Algerian".
</p>
<!-- 4번 -->
<h2>Without clear</h2>
<div class="div1">div1</div>
<div class="div2">div2 - Notice that the div2 element is after div1, inthe HTML code. However, since div1 is floated to the left,
this happens: the text in div2 isfloated around div1, and div2 surrounds the whole thing.</div>
<h2>Using clear</h2>
<div class="div3">div3</div>
<div class="div4">div4 - Using clear moves div4 down below the floateddiv3. The value "left" clears elements floated to the left.
You can also clear"right" and "both".</div>
<!-- 5번 -->
<h2>Images Side bySide</h2>
<p>Float images side byside:</p>
<div class="clearfix">
<div class="img-container">
<img src="img_5terre.jpg"alt="Italy" style="width:100%">
</div>
<div class="img-container">
<img src="img_forest.jpg"alt="Forest" style="width:100%">
</div>
<div class="img-container">
<img src="img_mountains.jpg"alt="Mountains" style="width:100%">
</div>
</div>
<p>Note that we also use the clearfix hack to take care of the layoutflow,
and that we add the box-sizingproperty to make sure that the image container
doesn't break due to extra padding.Try to remove this code to see the effect.</p>
</body>
</html>
