[2021.07.28] 인턴 +149 HTML id & iframes - 13
HTML id
- HTML 요소의 고유 ID를 지정하는 데 사용
- 동일한 ID를 가진 요소가 두 개 이상 존재 X (유니크한 값을 가짐)
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
<h1 id="myHeader">My Header</h1>
-> ★★★★★ 코드를 보면 알다시피, id에 적용 시키려면, <style> 에서 #헤더명 으로 선언해줘야 한다. ★★★★★
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h2>The id Attribute</h2>
<h1 id="myHeader">My Header</h1>
</body>
</html>
<출력 결과>
+@ 클래스 & ID 차이점
* 클래스
-> 여러 HTML 요소에서 사용 가능
* ID (동일한 ID를 가진 요소가 두 개 이상 존재 X (유니크한 값을 가짐))
-> 페이지 내에서 하나의 HTML 요소에서만 사용 가능
-----------------------------------------------------------------------------------------------------------------------------------
HTML iframe
-> 웹 페이지 내에 웹 페이지를 표시하는 데 사용
e.g <iframe src="url" title="description"></iframe>
Iframe - 높이 및 너비 설정
<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>You can use the height and width attributes to specify the size of the iframe:</p>
<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>
</body>
</html>
<출력 결과>
----------------------------------------------------------------------------------------------------------------------
Iframe - css를 이용해서 height,width 적용
<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe>
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>You can also use the CSS height and width properties to specify the size of the iframe:</p>
<iframe src="demo_iframe.htm" style="height:200px;width:300px" title="Iframe Example"></iframe>
</body>
</html>
<출력 결과>
'Web' 카테고리의 다른 글
| [2021.07.28] 인턴 +149 HTML Head Element - 15 (HTML 헤드 요소) (0) | 2021.07.28 |
|---|---|
| [2021.07.28] 인턴 +149 HTML JavaScript - 14 (HTML 자바스크립트) (0) | 2021.07.28 |
| [2021.07.28] 인턴 +149 HTML class Attribute? - 12 (+@ How to use class attributes in javascript?) (0) | 2021.07.28 |
| [2021.07.28] 인턴 +149 HTML Block and Inline Elements - 11 (블록 및 인라인 요소) (0) | 2021.07.28 |
| [2021.07.28] 인턴 +149 HTML List(리스트) - 10 (0) | 2021.07.28 |
댓글