AR삽질러

CSS - Classes, inline Block(4) 본문

WEB/HTML, CSS

CSS - Classes, inline Block(4)

아랑팡팡 2023. 12. 9. 23:40
728x90

 

CSS - Classes, inline Block

 

1. lnline

 - inline 요소는 높이와 너비를 가질 수 없다.

 - padding 요소는 사방에 가질 수 있다.

위 상황에서 위 아래 margin을 적용하고 싶다면 inline요소를 block로 수정해야한다.

<!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>
        body {
            margin: 20px;
        }

        span {
            background-color: teal;
            padding: 20px;
            margin: 30px;
        }
    </style>
</head>

<body>
    <span>hello</span>
    <span>hello</span>

</html>

 

line요소

 - span : inline요소로 텍스트를 묶기 위해 사용

 

2. Class

<!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>
        body {
            margin: 20px;
        }

        .btn {
            padding: 20px;
            margin: 30px;
            padding: 5px 10px;
            border-radius: 10px;
        }

        .teal {
            background-color: teal;
        }

        .green {
            background-color: green;
            color: white;
        }
    </style>
</head>

<body>
    <span class="teal btn">hello</span>
    <span class="green btn">hello</span>
    <span class="teal btn">hello</span>
    <span class="green btn">hello</span>
    <span class="teal btn">hello</span>
    <span class="green btn">hello</span>

</html>

 

Class 

 - .으로 시작하고 클래스 이름이 뒤에온다. ex) .className .class1

 - 선택자로 해당 클래스가 적용된 모든 HTML요소에 스타일 규칙을 적용할 수 있다.

 - HTML요소에 클래스를 적용하면 class속성을 사용할 수 있다.

ex) <div class="className">

 - Class의 장점으로 재사용성, 유지보수, 구체성이 있다.

 

 

 

3. display

inline-block의 문제점

 - 반응형 디자인(Responsive Design)을 지원하지 않는다.

 -  inline-block는 block가 inline속성을 가질 수 있게 한다. 하지만 정해진 형식이 없어 깔끔하지 못하다. 

<!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>
        body {
            margin: 20px;
        }

        div {
            display: inline-block;
            width: 50px;
            height: 50px;
            background-color: teal;
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
    <div></div>

</html>

 

 

 

 

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

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

CSS - Flexbox(5)  (0) 2023.12.10
CSS Margin, Padding, Border - (3)  (0) 2023.10.16
CSS box - (2)  (0) 2023.10.16
CSS - How to Add CSS to HTML (1)  (0) 2023.10.15
HTML Form Tags - (2)  (0) 2023.10.11
'WEB/HTML, CSS' Related Articles more