<!doctype html>
<html>
<head>
<meta charset= "UTF-8">
<title></title>
<link rel="stylesheet" href="../css/public.css">
<style>
div {
border : 1px solid green ;
padding-left : 50px;
margin : 50px;
width : 30% ; /* px는 % 로 사용하는 것과다르게 px은 화면이 줄거나 늘려도 변함없다. */
float : left;
}
span{
color : red;
backgroud : yellow;
}
/* padding : 안쪽에 주는 것 margin : 바깥쪽에 여백주는것 */
</style>
</head>
<body>
<pre>
-블럭요소 : 화면 가로 길이를 끝까지 차지하는 요소
자동으로 줄이 바뀐다.
h1~h6 , p , div , hr, pre , br 등등
-인라인 요소 : 지정한 범위만큼만 차지 한다. 자동으로 줄이 바뀌지 않는다.
sup , sub, span b , i , em, strong, img
-margin : 테두리 바깥쪽 여백주는것
-padding : 테두리 안쪽 여백
-블럭요소를 옆으로 배치하기 위해서 *가로 길이를 조절해줘야 한다.
float : left or right 스타일을 지정한다.
예시 :
div {
border : 1px solid green ;
padding-left : 50px;
margin : 50px;
width : 30% ; /* px는 % 로 사용하는 것과다르게 px은 화면이 줄거나 늘려도 변함없다. */
float : left;
}
</pre>
<div>
<h1> Web 커피 메뉴</h1>
<h2>아메리카노</h2>
<p>에스프레소에 <span><sup>물을 추가</sup></span>한 것입니다. </p>
<h2>카페오레 6000원</h2>
<p>에스프레소에 <sub>우유</sub>를 넣은 커피입니다.</p>
<h2>카푸치노 6000원</h2>
<p>커피 위에 <span>우유거품</span>을 얹은 커피입니다.</p>
</div>
<div>
<h1> Web 커피 메뉴</h1>
<h2>아메리카노</h2>
<p>에스프레소에 <span><sup>물을 추가</sup></span>한 것입니다. </p>
<h2>카페오레 6000원</h2>
<p>에스프레소에 <sub>우유</sub>를 넣은 커피입니다.</p>
<h2>카푸치노 6000원</h2>
<p>커피 위에 <span>우유거품</span>을 얹은 커피입니다.</p>
</div>
</body>
<!-- div > p > span -->
</html>
댓글
댓글 쓰기