코드:
결과보기 »
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>CSS Display</title> <style> div { width: 100px; height: 50px; } .first { background-color: aqua; } .second { background-color: green; } .third { background-color: yellow; } .inline { display: inline; } .inline-block { display: inline-block; } </style> </head> <body> <h1>다양한 display 속성값</h1> <p>아래에 나오는 div 요소는 모두 display 속성값이 블록입니다.</p> <div class="first">블록</div> <div class="second">블록</div> <div class="third">블록</div><br> <p>아래에 나오는 div 요소는 모두 display 속성값이 인라인입니다.</p> <div class="first inline">인라인</div> <div class="second inline">인라인</div> <div class="third inline">인라인</div><br><br> <p>아래에 나오는 div 요소는 모두 display 속성값이 인라인-블록입니다.</p> <div class="first inline-block">인라인-블록</div> <div class="second inline-block">인라인-블록</div> <div class="third inline-block">인라인-블록</div> </body> </html>
