FrontEnd - HTML(3)
ブロックと行内
html各要素には、その要素がどのように表示されるかを決定する表示属性があります.
ブロックタイプの要素
displayプロパティ値がブロックの要素は、常に新しい行から始まり、その行のすべての幅を占めます.
pラベル
<p style="border: 1px solid black">p태그</p>
divラベル
divラベルは主に他の要素を組み合わせたブロック要素であり、複数の要素を一度に適用するスタイルである.
<div style="background-color: yellow; color:orange">
<h1>제목</h1>
<p>내용</p>
</div>
p,div,h,ul,ol,form要素はdisplay属性値がブロックの代表要素である.
行内タイプの要素
ロー内の要素は新しいローから開始されません.要素の幅も線全体ではなく内容のみを占めます
spanタグ
スタイルを特定のテキストセクションに適用します.
<p>span태그는 <span style="color:yellow">특정 텍스트에 효과를 준다</span></p>
span,a,img元素はインラインの代表的な元素である
iframe要素
义齿
ページ内に他のページを何の制約もなく挿入できます
<iframe src="NewFile1.html" name="frame_target" style="width:100%; height:50%; border: 3px dashed maroon">
</iframe>
<a href="NewFile2.html" target="frame_target">NewFile2로 이동</a>
レイアウト
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>링크와 앵커</title>
<style>
header{
background-color: yellow;
height:100px;
}
nav{
background-color: pink;
width:200px;
height:300px;
float:left
}
section{
width:200px;
height:300px;
float:left
}
footer{
background-color: green;
clear:both
}
header,nav,footer{
text-align: center
}
</style>
</head>
<body>
<header><h1>header영역</h1> </header>
<nav><h1>nav영역</h1></nav>
<section><p>section영역</section>
<footer><h1>footer영역</h1></footer>
</body>
</html>
floatは、画像がWebページ上でどのようにオフセットされ、テキストとともに配置されるかを決定するために使用されます.clear:両方ともfloat:left、float:rightキャンセルです.
ソース:http://www.tcpschool.com/
Reference
この問題について(FrontEnd - HTML(3)), 我々は、より多くの情報をここで見つけました https://velog.io/@jinwoo2025/FrontEnd-HTML3テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol