티스토리 뷰

Programming/HTML

HTML #8 : Element ( 엘리먼트 )

copotter 2019. 5. 1. 19:43


190424


블록엘리먼트와 인라인엘리먼트에 대해서 구분지어 보겠습니다.

- 블록 엘리먼트

- 언제나 새로운 줄에서 시작한다.

- 좌우 양쪽으로 최대한 가능한 모든 너비를 차지한다.

- 폭을 지정할 수 있다.

- 블록 엘리먼트내의 컨텐츠를 왼쪽/오른쪽/가운데 정렬시킬 수 있다.

- h1 ~ h6, p, table, ul, ol, li, dl, dt, dd, form


- 인라인 엘리먼트

- 컨텐츠의 흐름을 끊지 않는다.

- 새로운 줄을 만들지 않고, 컨텐츠가 필요한 너비만 차지한다.

- span, a, img, strong, em, input, select, 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
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        h1, h2, p, ul, li {
            background-color: yellow;
            width:800px;
            text-align: center;
        }
        strong, em, b, i {
            /*display: block;     인라인 엘리먼트를 블록 엘리먼트로 변경할 수 있다.*/
            width: 300px;   /* 너비를 조절할 수 없음 */
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <h1>블록 엘리먼트와 인라인 엘리먼트</h1>
    
    <h2>블록 엘리먼트</h2>
    <p>나도 블록엘리먼트야</p>
    <ul>
        <li>나도 블록엘리먼트야</li>
        <li>나도 블록엘리먼트야</li>
    </ul>
    
    <h2>인라인 엘리먼트</h2>
    <p>
        <strong>인라인 엘리먼트</strong>로 감싸진 컨텐츠는 그 컨텐츠의 너비만큼만 영역을 차지한다.
        <em>너비만큼만 영역</em>을 차지한다.
    </p>
</body>
</html>
cs


>> (style태그는 처음 보겠지만, 편의상 설명을 위해 추가하였습니다. html표현을 꾸며주는 태그입니다. 나중에 다룰 것이니,

     지금은 넘어가겠습니다.)

     h#, p, li 태그들은 블록엘리먼트로 아래 실행결과에서 보듯, 모든 너비에서 적용되어 8행의 배경이 노란색인 것,

     9행의 전체 너비 기준 글자가 가운데로 오는 것을 볼 수 있습니다.

     반면 인라인 엘리먼트인 strong, em, b, i 태그는 배경색도 해당 글자배경색만 적용되어 변하고, 전체 너비를 건들지 못하므로,

     width또한 적용시킬 수 없습니다. 

( 13행의 display : block 를 통해서 인라인 엘리먼트를 블록 엘리먼트처럼 사용할 수 있습니다. )


< 실행 결과 >



저작자표시 (새창열림)

'Programming > HTML' 카테고리의 다른 글

HTML #10 : id & class 속성  (0) 2019.05.01
HTML #9 : <div>태그 & <span>태그  (0) 2019.05.01
HTML #7 : 텍스트 강조 태그 (<strong>, <em>, <i>, <b> 태그)  (0) 2019.05.01
HTML #6 : <link> 태그  (0) 2019.05.01
HTML #5 : <img>태그  (0) 2019.04.26
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/06   »
일 월 화 수 목 금 토
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
글 보관함