AR삽질러

CSS box - (2) 본문

WEB/HTML, CSS

CSS box - (2)

아랑팡팡 2023. 10. 16. 21:37
728x90

 

CSS box - (2)

 - CSS의 box에는 두종류의 형태가 있다. 하나는 박스요소 옆에 다른 요소가 올 수 있고 하나는 박스요소 옆에 다른 요소가 올수없는것이다.

 - 요소 옆에 다른 요소가 올 수 없는것  blocks

 - 요소 옆에 다른 요소가 올 수 있는 것 inlines

 

div는 요소 옆에 다른 요소가 올 수 없다.

    <style>
        div {
            height: 150px;
            width: 150px;
            background-color: blue;
        }

        span {}
    </style>
</head>

<body>
    <!--div는 요소 옆에 다른 요소가 올 수 없다.-->
    <div></div><br>
    <div></div><br>
    <div></div><br>
</body>

 

span은 요소 옆에 다른 요소가 올 수 있다.

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

<head>
    <link rel="shortcut icon" href="https://assets.nflxext.com/en_us/layout/ecweb/netflix-app-icon_152.jpg" />
    <meta charset="UTF-8">
    <title>HTML 연습</title>
    <link rel="stylesheet" href="styles.css" />
    <style>
        div {
            height: 150px;
            width: 150px;
            background-color: blue;
        }

        span {}
    </style>
</head>

<body>
    <!--div는 요소 옆에 다른 요소가 올 수 없다.-->
    <div></div><br>
    <div></div><br>
    <div></div><br>
    <!--span은 요소 옆에 다른 요소가 올 수 있다.-->
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
</body>

</html>

link도 요소 옆에 올 수 있다.

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

<head>
    <link rel="shortcut icon" href="https://assets.nflxext.com/en_us/layout/ecweb/netflix-app-icon_152.jpg" />
    <meta charset="UTF-8">
    <title>HTML 연습</title>
    <link rel="stylesheet" href="styles.css" />
    <style>
        div {
            height: 150px;
            width: 150px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <!--div는 요소 옆에 다른 요소가 올 수 없다.-->
    <div></div><br>
    <div></div><br>
    <div></div><br>
    <!--span은 요소 옆에 다른 요소가 올 수 있다.-->
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
    <!--link도 요소 옆에 올 수 있다.-->
    <a href="#">link</a>
    <span>hello</span>

</body>

</html>

p는 div와 같이 요소 옆에 다른 요소가 올 수 없다.

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

<head>
    <link rel="shortcut icon" href="https://assets.nflxext.com/en_us/layout/ecweb/netflix-app-icon_152.jpg" />
    <meta charset="UTF-8">
    <title>HTML 연습</title>
    <link rel="stylesheet" href="styles.css" />
    <style>
        div {
            height: 150px;
            width: 150px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <!--div는 요소 옆에 다른 요소가 올 수 없다.-->
    <div></div><br>
    <div></div><br>
    <div></div><br>
    <!--span은 요소 옆에 다른 요소가 올 수 있다.-->
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
    <!--link도 요소 옆에 올 수 있다.-->
    <a href="#">link</a>
    <span>hello</span>
    <!--p는 div와 같이 요소 옆에 다른 요소가 올 수 없다.-->
    <p>안녕하세요 HTML CSS를 활용한 프로젝트를 만들고 있습니다.</p>
</body>

</html>

 

img도 요소 옆에 올 수 있다.

<body>
    <!--div는 요소 옆에 다른 요소가 올 수 없다.-->
    <div></div><br>
    <div></div><br>
    <div></div><br>
    <!--span은 요소 옆에 다른 요소가 올 수 있다.-->
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
    <!--link도 요소 옆에 올 수 있다.-->
    <a href="#">link</a>
    <span>hello</span>
    <!--p는 div와 같이 요소 옆에 다른 요소가 올 수 없다.-->
    <p>안녕하세요 HTML CSS를 활용한 프로젝트를 만들고 있습니다.</p>
    <!--img도 요소 옆에 올 수 있다.-->
    <span>hello</span><img src="다운로드.png" alt=""><span>hello</span>
</body>

 

 

 

 

728x90
반응형
LIST
저작자표시 비영리 동일조건

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

CSS - Classes, inline Block(4)  (0) 2023.12.09
CSS Margin, Padding, Border - (3)  (0) 2023.10.16
CSS - How to Add CSS to HTML (1)  (0) 2023.10.15
HTML Form Tags - (2)  (0) 2023.10.11
HTML - Tag, Attribute(1)  (2) 2023.10.10
'WEB/HTML, CSS' Related Articles more