그럼에도 불구하고

👨‍💻

[HTML] 인라인 속성, 블록 속성, 태그의 관계 본문

HTML, CSS/HTML, CSS basics

[HTML] 인라인 속성, 블록 속성, 태그의 관계

zenghyun 2022. 10. 23. 20:51

 

태그에는 인라인 속성의 태그와 블록 속성의 태그가 있다.

 

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>인라인 속성의 태그의 중첩</h1>
    <div>
        inline속성의 태그는 inline 태그 또는 block 속성의 태그 안에 중첩시킬 수 있다. <br>

        꼬임 현상 없이 나중에 열린 태그를 먼저 닫아줘야 한다.
        html태그상 실행이 잘 되므로 오류를 인식하지 못하는데 오류다.

        <mark>청춘의 평화스러운 <ins>광야에서 모래<sup>2</sup>뿐일 뿐이다.</ins></mark> 곳이 못할 청춘은 보이는 아니다. 곳이 거친 힘차게 사막이다. 품었기 그들은 그들은 사라지지
        이것이다. 풀이 튼튼하며, 하는 대중을 넣는 그들의 위하여서 칼이다. 옷을 피고 이상을 생명을 군영과 이것이다. 새가 동산에는 넣는 그것은 쓸쓸한 불어 있는가? 없는 귀는 황금시대를 찬미를 대고,
        산야에 어디 가진 것이다. 피고, 창공에 품었기 작고 이상이 갑 것이다. 능히 힘차게 작고 인생을 얼음과 이상은 힘차게 사막이다. 열락의 되는 가는 방지하는 설산에서 방황하였으며, 보는 있으랴?
    </div>

    <h1>블록형 속성의 태그의 중첩</h1>
    <div> 블록형 속성은 내부에 블록형 속성을 중첩할 수 없다. <br>
        예외가 있음,
        div = 택배박스 div만 div 내부에 다른 block 속성의 태그를 중첩 시킬 수 있다.

        h1, h2, h3, h4, h5, h6, p, 같은 애들은 안에 블록형 속성의 태그를 넣으면 안됨
        블록형 속성은 inline 속성의 태그를 포함 할 수 있다.
        <!-- <h1><a>하이</a></h1> -->

        inline 속성의 태그는 block 속성의 태그를 중첩할 수 없다.
        block은 문단 개념이고 inline는 글자 개념

    </div>

    <div>
        <mark>

            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas incidunt recusandae eaque unde magnam possimus
            voluptates inventore quos neque distinctio consequatur quisquam temporibus ipsa, ipsam dolore totam
            blanditiis odit vero.
        </mark>

    </div> 
    <!-- 반대는 안됨  -->
</body>

</html>

인라인 속성의 태그는 인라인 태그 또는 블록 태그 안에서 사용할 수 있다.

 

<inline tag>  <inline tag></inline tag>  </inline tag>

 

<block tag>  <inline tag></inline tag>  </block tag>

 

와 같이 사용할 수 있다. 

 

<inline tag> <block tag> </block tag> </inline tag> 

 

와 같이는 사용할 수 없다.

 

블록형 속성의 태그는 블록 속성의 태그 안에서 사용할 수 있다.

 

<block tag> <block tag> </block tag> </block tag>

 

와 같이 사용할 수 있다.

 

인라인 속성의 태그는 글자 개념이라서 

 

<inline tag>  </inline tag> <inline tag></inline tag>  

 

와 같이 사용하면 HTML 상에서 이어서 작성된다.

 

블록 속성의 태그는 문단의 개념이라서

 

<block tag> </block tag>  <block tag> </block tag>

 

와 같이 사용하면 HTML 상에서 문단이 바뀌어서 작성된다.

 

 

 

즉, block은 문단 개념이고 inline는 글자 개념이다.

 

 

HTML 태그는 인간관계와 유사하다.

 

부모와 자식의 관계와 자식들끼리의 형제 관계가 있다.

 

예를 들어 부모와 자식의 관계는

 

부모 > 자식이다.

 

div> h1이라면

 

<div> <h1></h1> </div>과 같은 관계가 성립한다.

 

자식들끼리의 형제 관계는

형제 + 형제이다.

 

h1+p 라면

 

<h1></h1> <p></p>와 같은 관계가 성립한다.

   
Document

인라인 속성의 태그의 중첩

inline속성의 태그는 inline 태그 또는 block 속성의 태그 안에 중첩시킬 수 있다.
꼬임 현상 없이 나중에 열린 태그를 먼저 닫아줘야 한다. html태그상 실행이 잘 되므로 오류를 인식하지 못하는데 오류다. 청춘의 평화스러운 광야에서 모래2뿐일 뿐이다. 곳이 못할 청춘은 보이는 아니다. 곳이 거친 힘차게 사막이다. 품었기 그들은 그들은 사라지지 이것이다. 풀이 튼튼하며, 하는 대중을 넣는 그들의 위하여서 칼이다. 옷을 피고 이상을 생명을 군영과 이것이다. 새가 동산에는 넣는 그것은 쓸쓸한 불어 있는가? 없는 귀는 황금시대를 찬미를 대고, 산야에 어디 가진 것이다. 피고, 창공에 품었기 작고 이상이 갑 것이다. 능히 힘차게 작고 인생을 얼음과 이상은 힘차게 사막이다. 열락의 되는 가는 방지하는 설산에서 방황하였으며, 보는 있으랴?

블록형 속성의 태그의 중첩

블록형 속성은 내부에 블록형 속성을 중첩할 수 없다.
예외가 있음, div = 택배박스 div만 div 내부에 다른 block 속성의 태그를 중첩 시킬 수 있다. h1, h2, h3, h4, h5, h6, p, 같은 애들은 안에 블록형 속성의 태그를 넣으면 안됨 블록형 속성은 inline 속성의 태그를 포함 할 수 있다. inline 속성의 태그는 block 속성의 태그를 중첩할 수 없다. block은 문단 개념이고 inline는 글자 개념
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas incidunt recusandae eaque unde magnam possimus voluptates inventore quos neque distinctio consequatur quisquam temporibus ipsa, ipsam dolore totam blanditiis odit vero.
 

 

'HTML, CSS > HTML, CSS basics' 카테고리의 다른 글

[CSS] 여러가지 선택자  (0) 2022.12.19
[CSS] linear-gradient / radial-gradient / border gradient  (0) 2022.12.15
[CSS] 캐스케이딩 / 스타일 우선순위  (0) 2022.12.13
[HTML] form 태그 / input 태그 타입 정리  (0) 2022.12.13
[HTML] 문자 꾸미기, 여러가지 태그들  (0) 2022.10.23
'HTML, CSS/HTML, CSS basics' Related Articles more
Comments