CSS 속성 - display

display란?

요소의 화면 출력 특성

코드로 보면서 이해를 해보자

1, html 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./display.css">
</head>
<body>
    <span>Hello World</span>
</body>
</html>

span 태그를 통해서 텍스트를 하나 넣어주었고

여기서 기억 해야 할 점은 span태그는 인라인 요소 라는 것이다

2, CSS 코드

span {
  width: 120px;
  height: 30px;
  background-color: orange;
  color: white;
}

span 이라는 태그 선택자를 이용하여 스타일을 지정해줬고

width 100px

height 100px을 지정해줬다!