고정 헤더 영역
상세 컨텐츠
본문
<div> 태그, division(구분)
또한 <div>는 HTML 요소들을 화면에 배치, 즉 레이아웃하는 데 많이 사용된다.
ㅎ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {width:50px; height:50px; padding : 50px; background-color:black;}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!--
div에 width와 height의 값을 주어 박스의 크기를 만들고,
padding으로 내부 크기도 주어, 총 길이 200px, top right bottom left 각 100px로 설정
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
* {margin:0;}
p {border: solid 10px green; padding : 10px; margin : 10px;}
div {padding-left : 3px; border-left : solid 3px blue;
margin: 10px; background-color:gray;
padding : 10px 0px 10px 0px; }
li {line-height:50px;}
</style>
</head>
<body>
<p>웹 소개</p>
<div>
<ul>
<li>웹</li>
<li>인터넷</li>
<li>웹</li>
<li>웹</li>
</ul>
</div>
</body>
</html>
<!--
margin을 10px로 주어서, 화면상에서 div를 띄어 놓음.
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
* {margin : 0;}
h1 {border-left: solid 10px green;
margin : 30px 10px 30px 10px;
padding-left : 30px;}
div {margin : 10px;
padding : 30px 0px 30px 0px;
background-color : #eeeeee;
border : solid 1px black;
border-radius : 20px;
width : 600px;}
li {line-height : 30px;}
</style>
</head>
<body>
<h1> 우대정보</h1>
<div>
<ul>
<li>
<p>연령에 따른 우대 (나이 확인이 가능한 신분증 또는 서류 제시)</p>
<p>- 경로 : 만 65세 </p>
<p>- 청소년 : 만 13세 ~ 만 18세</p>
</li>
<li>장애인 우대 (장애인 등록증 제시) 우대가격
<p>- 1일 이용권 우대가로 구입 가능</p>
<p>- 장애의 정도가 심한 장애인 : 본인 + 동반 1인</p>
</li>
<li>국가유공자 우대 (증명서류 제시) 파크이용권 가격 보기
<p>- 본인 + 동반 1인, 1일 이용권 50% 우대가로 구입 가능</p>
</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {font-family : "돋움"; color : #444444;}
h1 {text-decoration : underline; color : red;}
h3 {font-size : 25px; font-style : italic; margin-top : 30px;}
p {line-height : 150%; font-size : 18px;}
span {font-weight : bold; color : blue;}
</style>
</head>
<body>
<h1>요리란 무엇일깡?</h1>
<h3>요리의 사전적 의미</h3>
<p>1. 여러 조리 과정을 거쳐 음식을 만듦, <span>또는 그 음식.</span> 주로 가열한 것을 이른다.<br>
2. 어떤 대상을 능숙하게 처리함을 속되게 이르는 말.</p>
</body>
</html>
'FrontEnd > HTML' 카테고리의 다른 글
| CSS 배경 이미지, repeat, background-position (0) | 2022.06.20 |
|---|---|
| 선택자 (그룹, ID, CLASS, 하위) (0) | 2022.06.20 |
| Border, Margin, Padding 경계선, 테두리, 외부 내부 여백 (0) | 2022.06.17 |
| 색상, 글자 google font 사용법, a 테그 링크 속성 (0) | 2022.06.16 |
| 내부, 외부 style, <span> (0) | 2022.06.16 |
