Notice
Recent Posts
Recent Comments
Link
«   2024/04   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

web sprit

[HTML] html 구조 본문

웹1.0/HTML

[HTML] html 구조

커드만 2018. 11. 14. 13:48

브라우저에서 디자인 되어 확인 할 수 있는 화면의

기본적인 HTML의 구조는 아래와 같습니다.

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
    // body태그 안에서 화면에 그려지는 모습을 태그로 작성.
 
</body>
</html>
cs


## 태그(tag)란 ?

<div></div> 이런 형식으로 되어 있는 것을 태그라 합니다.

예)

<div></div> div 태그

<span></span> span 태그


## 태그 종류

태그의 종류는 블록(block)태그, 인라인(inline)태그로 나뉩니다.

예)

block 태그 - div, p, ul, li, 등...

inline 태그 - span, strong, em, 등....


## 블록태그와 인라인태그의 차이점

블록태그 - 수평의 영역을 다 차지한다.

인라인태그 - 감싸고 있는 안의 영역만큼의 영역을 차지한다.


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
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            margin-bottom:10px;
        }
        .block{
            background:cyan;
        }
        .inline{
            background:red;
        }
    </style>
</head>
<body>
 
    <div class="block">블록태그1 입니다.</div>
    <div class="block">블록태그2 입니다.</div>
    <div class="block">블록태그3 입니다.</div>
    <span class="inline">인라인 태그1 입니다.</span>
    <span class="inline">인라인 태그2 입니다.</span>
    <span class="inline">인라인 태그3 입니다.</span>
 
</body>
</html>
cs

블록태그와 인라인태그의 테스트를 위해 위와 같이 작성해 보았습니다.

참고 파일 : 

test.html


브라우저에서 확인해보면 다음과 같은 화면을 확인할 수 있습니다.

블록태그에는 style 로 background 색상을 청록색을, 인라인태그는 빨간색을 적용해 보았습니다.

블록태그는 수평을 다 차지하는 반면 인라인 태그는 글자를 포함하고 있는 영역만 차지하는 것을 확인 할 수 있습니다.

그리고 블록태그는 수평을 다 차지하기 때문에 밑으로 한칸씩 내려가는 반면

인라인태그는 화면 사이즈보다 작게 차지하기 때문에 옆으로 붙는 것이 확인 됩니다.



저작자표시 비영리 변경금지

'웹1.0 > HTML' 카테고리의 다른 글

[HTML] form요소 자동완성기능 막기  (0) 2020.02.14
[HTML] a링크 모바일 전화걸기 및 메일보내기 (a링크)  (0) 2018.10.25
[HTML] 조건부 주석  (0) 2018.01.14
[HTML] HTML 문서의 Doctype 선언(DTD) 종류 및 설명  (0) 2017.01.10
[HTML] 아이폰(IOS) 모바일에서 전화번호 링크 색 원래 색으로 변경  (0) 2016.12.29
닫기
공유하기 링크
'웹1.0/HTML' Related Articles more
Comments