종류 |
해당태그 |
블록 레벨 태그 |
<p> <h1>~<h2> <ul> <ol> <div> <blockquote> <form> <hr> <table> <fieldset> <address> |
인라인 레벨 태그 |
<img> <object> <br> <sub> <sup> <span> <input> <textarea> <label> <button> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body> <style media="screen"> p, h1{ background-color: red; } p>a{ background-color: white; } </style> <h1>Hello world</h1> <p>안녕하세요. <a href=“#"">코딩독학</a>입니다.</p> </body> </html> | cs |
■결과
■ width, height 설명
width : [크기] | [백분율] | auto
height : [크기] | [백분율] | auto
※auto: 콘텐츠 양에 따라 자동으로 결정이됨
■ display 속성
인라인 레벨 블록 레벨의 기본적인 요소를 바꾸기 위해서 필요
display: none | contents | block | inline | inline-block | table | table-cell
▶ 문제 1(인라인 레벨을 -> 블록)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>display 속성</title> <style> div { margin:20px; border:1px solid #ccc; border-radius:5px; } #inline img { margin:10px; } #block img { display:block; margin:10px; } </style> </head> <body> <div id="inline"> <img src="images/pic1.jpg"> <img src="images/pic2.jpg"> <img src="images/pic3.jpg"> </div> <div id="blok"> <img src="images/pic1.jpg"> <img src="images/pic2.jpg"> <img src="images/pic3.jpg"> </div> </body> </html> | cs |
▶ 블록 레벨 인라인 레벨 으로 목차 만들기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <style media="screen"> nav{ width:100%; height:60px; background-color:#069; } nav ul li a { color: white; text-decoration: none; } nav>ul>li{ display:inline-block; margin: 20px; } </style> </head> <body> <nav> <ul> <li><a href="#">코딩 독학</a></li> <li><a href="#">소개</a></li> <li><a href="#">강사진</a></li> <li><a href="#">강의</a></li> </ul> <h2>목차 종류</h2> </nav> </body> </html> | cs |