국비/HTML_CSS_
HTML5 영역 관련 태그
제발 취업하게 해주세요
2022. 5. 5. 18:35
| 영역 관련 태그 |
| <p> : 각 문단의 영역을 지정하는 태그 (block 속성 태그) |
| <pre> : 소스코드로 입력한 내용 그대로 보여주는 태그 (block 태그) |
| <div> : 줄바꿈을 적용하여 이미 존재하는 태그 다음 줄에 내용을 포함하는 태그 (block 태그) |
| <span> : 줄바꿈을 적용하지 않아 이전 요소(태그) 옆에 붙어 내용을 표현하는 영역 태그 (inline 태그) |
<html>
<head>
<meta charset="UTF-8">
<title>영역 관련 태그</title>
<style> <!-- 스타일 지정 --!>
.first{
border : 1px solid black;
background : lightgrey;
width : 100px;
height : 100px;
}
.second{
border : 1px solid black;
background : lightcoral;
width : 100px;
height : 100px;
}
.third{
border : 1px solid black;
background : lightskyblue;
width : 100px;
height : 100px;
}
</style>
</head>
<body>
<h1>영역 관련 태그</h1>
<p>p태그, pre태그, div태그, sapn태그</p>
<h3>div태그</h3> <!--영역 분리시킬 때 사용-->
<p> block 속성 태그 : 하나의 태그가 해당 줄을 모두 차지하는 형태</p>
<!-- div{$번째 영역}*3 -->
<div class="first"> 첫 번째 영역</div>
<div class="second"> 두 번째 영역</div>
<div class="third"> 세 번째 영역</div>
<h3>span 태그</h3>
<p>inline 속성 태그 : 한 줄에 가능한 만큼 서로 붙어서 나오는 형태</p>
<span class="first">첫 번째 영역</span>
<span class="second">두 번째 영역</span>
<span class="third">세 번째 영역</span>
<hr> <!--경계선-->
<h3>div와 span 태그 범위 확인하기</h3>
<p>Lorem ipsum : <a href="http://guny.kr/stuff/klorem/"> 로렌입숨</a></p>
<h4>div 태그 범위</h4>
<div style="background : hotpink">
감사위원은 원장의 제청으로 대통령이 임명하고, 그 임기는 4년으로 하며,
1차에 한하여 중임할 수 있다. 대통령이 궐위되거나 사고로 인하여 직무를 수행할
수 없을 때에는 국무총리, 법률이 정한 국무위원의 순서로 그 권한을 대행한다.
피고인의 자백이 고문·폭행·협박·구속의 부당한 장기화 또는 기망 기타의 방법에
의하여 자의로 진술된 것이 아니라고 인정될 때 또는 정식재판에 있어서 피고인의
자백이 그에게 불리한 유일한 증거일 때에는 이를 유죄의 증거로 삼거나 이를
이유로 처벌할 수 없다.
</div>
<br>
<h4> sapn 태그 범위 </h4>
<span style="background : skyblue">
감사위원은 원장의 제청으로 대통령이 임명하고, 그 임기는 4년으로 하며,
1차에 한하여 중임할 수 있다. 대통령이 궐위되거나 사고로 인하여 직무를 수행할
수 없을 때에는 국무총리, 법률이 정한 국무위원의 순서로 그 권한을 대행한다.
피고인의 자백이 고문·폭행·협박·구속의 부당한 장기화 또는 기망 기타의 방법에
의하여 자의로 진술된 것이 아니라고 인정될 때 또는 정식재판에 있어서 피고인의
자백이 그에게 불리한 유일한 증거일 때에는 이를 유죄의 증거로 삼거나 이를
이유로 처벌할 수 없다.
</span>
<br>
<h4>p 태그 범위</h4>
<p style="background : gold">
감사위원은 원장의 제청으로 대통령이 임명하고, 그 임기는 4년으로 하며,
1차에 한하여 중임할 수 있다. 대통령이 궐위되거나 사고로 인하여 직무를 수행할
수 없을 때에는 국무총리, 법률이 정한 국무위원의 순서로 그 권한을 대행한다.
피고인의 자백이 고문·폭행·협박·구속의 부당한 장기화 또는 기망 기타의 방법에
의하여 자의로 진술된 것이 아니라고 인정될 때 또는 정식재판에 있어서 피고인의
자백이 그에게 불리한 유일한 증거일 때에는 이를 유죄의 증거로 삼거나 이를
이유로 처벌할 수 없다.
</p>
</body>
</html>
| iframe태그 사용하기 - 현재 페이지에 다른 html 페이지 삽입 |
<iframe width="560" height="315"
src="https://www.youtube.com/embed/_xrCxDt0lIU"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>