Iframe 태그
Iframe 태그는 다른 페이지를 가져와서 보여준다.
<iframe src="demo_iframe.htm"
height="200" width="300" title="Iframe Example">
</iframe>
<iframe src="demo_iframe.htm"
height="200" width="300" title="Iframe Example"
style="border:none;" >
</iframe>CSS
Basic CSS Syntax
– Grouping Selectors
Selectors can be grouped so that a common property can be specified
p, h1, h2, h3, h4
{
font-family: Arial;
color: yellow
}– Descendants
Selectors can be descendants
p b { color: yellow }<p><b> This would be yellow </b></p>
<b>This would not be yellow</b>
<p>Not this either</p>Applying CSS
There are 3 main ways CSS styles can be applied:
1. Inline with HTML
<p style="color:red;">This is a paragraph.</p>- On-page style definitions
<style>
body {
background-color: linen;
}
h1 {
color: maroon; margin-left: 40px;
}
</style>- Separate style sheets
<link rel="stylesheet" href="mystyle.css">1. Inline With HTML
You can write CSS directly into an HTML tag using “style” attribute. This approach is very similar to the old-style inline HTML styling.
<p style="background-color:#ffff33;
border:1px solid black;
color:red;">I am a styled paragraph!</p>- Least flexible
- Requires each element to be tagged if you want them to appear differently
- Looses the advantageof using CSS
2. On-Page Style Definitions
• Style characteristics are embedded in the HEAD section of the webpage
• Perhaps best used when a single page requires a unique style sheet
<html>
<head>
<style>p {text-align:center; } </style>
</head>
<body>
<p>I am affected by the definition above..</p>
</body>
</html>3. Separate Style Sheets
• The ideal way to define styles for your HTML elements is to put the definitions in a separate stylesheet document. Then, any page that includes the CSS file will inherit the same styles.
• Allows for using style sheets from other sources
• Connection made via the LINK tag
• Use the optional TYPE attribute to specify a media type
<link rel="stylesheet" href="mystyle.css">[mysytles.css]
body {
background-color:#ffff00;
color:#0000ff;
}
p {
font-style:italic;
font-family:times,serif;
}Using multiple sheets
- You can use multiple sheets to define the style of your document
- Internal styles will override external styles , if they are duplicated
h3 {color: red; text-align: right; font-size: 8pt} (external CSS)
↓
h3 {text-align: center; font-size: 20pt} (internal CSS)
↓
h3 {color: red; text-align: center; font-size: 20pt }