본문 바로가기
HTML

HTML5 Tag-div, span [그룹 요소]

by Hrin_0820 2020. 8. 2.

1. div (Division)

tag 의미 및 특징
div 요소들을 그룹으로 정의하는 태그 (블록 레벨 요소)
CSS 적용을 쉽게하기 위해 그룹 설정 (웹사이트의 레이아웃을 만들 때 주로 사용
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div 그룹 요소</title>
    <style>
        #wrap{width: 300px; margin: 0 auto; border: 1px solid #000; text-align: center;}
/*        header{width: 300px; margin: 0 auto; border: 1px solid #000; text-align: center}*/
/*        section{width: 300px; margin: 0 auto; border: 1px solid #333; text-align: center}*/
/*        footer{width: 300px; margin: 0 auto; border: 1px solid #999; text-align: center}*/
    </style>
</head>
<body>
   <div id="wrap">
        <header>헤더</header>
        <section>본문</section>
        <footer>푸터</footer>
    </div>
</body>
</html>
div 그룹 요소
헤더
본문
푸터
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>span 그룹 요소</title>
    <style>
        .s1{font-size: 20px; font-weight: bold; background-color: yellow;}
        .s2{border: 4px dotted skyblue; color: blue;}
        .s3{font-style: italic; color: red}
    </style>
</head>
<body>
    <span class="s1">span 태그</span>
    <span class="s2">span 태그는</span>각 글자단위로 
    <span class="s3">적용하기가</span> 편리합니다.
</body>
</html>
span 그룹 요소
span 태그 span 태그는각 글자단위로 적용하기가 편리합니다.

댓글