HTML 2강
텍스트 요소
<p>: p태그 안에서 띄어쓰기를 여러번해도 하나의 띄어쓰기로 인식함.<pre>: 띄어쓰기를 있는 그대로 보여주려면 pre 태그를 사용해야 함.
굵기표시
1.<b> : 단순히 텍스트를 굵게 표현해줌
2. <strong> : 텍스트를 굵게 표현 + 내용이 중요하다는 의미 포함
이텔릭체
<i>: 단순히 텍스트를 이탤릭체로 표현해줌<em>: 텍스트를 이탤릭체로 표현 + 내용이 중요하다는 의미 포함
스타일
<h1 style="background-color:white; color:maroon; font-size:150%; text-align:center">
style 속성을 이용하여 한 번에 스타일링 하기!
</h1>공간분할
블록과 인라인
- block 타입 : 언제나 새로운 라인에서 시작하며, 해당 라인의 모든 너비를 차지함
ex) <p>,<div>,<h>,<ul>,<ol>,<form>
- inline 타입 : 새로운 라인에서 시작하지 않으며 너비도 해당 라인 전체가 X , 해당 요소의 내용만큼만 차지함
ex) <span>,<a>,<img>
레이아웃
div 요소를 이용한 레이아웃
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Layouts</title>
<style>
#header {
background-color:lightgrey;
height:100px;
}
#nav {
background-color:#339999;
color:white;
width:200px;
height:300px;
float:left;
}
#section {
width:200px;
text-align:left;
float:left;
padding:10px;
}
#footer {
background-color:#FFCC00;
height:100px;
clear:both;
}
#header, #nav, #section, #footer { text-align:center; }
#header, #footer { line-height:100px; }
#nav, #section { line-height:240px; }
</style>
</head>
<body>
<h1>div 요소를 이용한 레이아웃</h1>
<div id="header">
<h2>HEADER 영역</h2>
</div>
<div id="nav">
<h2>NAV 영역</h2>
</div>
<div id="section">
<p>SECTION 영역</p>
</div>
<div id="footer">
<h2>FOOTER 영역</h2>
</div>
</body>
</html>html5 레이아웃
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Layouts</title>
<style>
header {
background-color:lightgrey;
height:100px;
}
nav {
background-color:#339999;
color:white;
width:200px;
height:300px;
float:left;
}
section {
width:200px;
text-align:left;
float:left;
padding:10px;
}
footer {
background-color:#FFCC00;
height:100px;
clear:both;
}
header, nav, section, footer { text-align:center; }
header, footer { line-height:100px; }
nav, section { line-height:240px; }
</style>
</head>
<body>
<h1>HTML5 레이아웃</h1>
<header>
<h2>HEADER 영역</h2>
</header>
<nav>
<h2>NAV 영역</h2>
</nav>
<section>
<p>SECTION 영역</p>
</section>
<footer>
<h2>FOOTER 영역</h2>
</footer>
</body>
</html>Author And Source
이 문제에 관하여(HTML 2강), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@yanz/HTML-2강저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
