온라인강의정리하기/HTML

HTML 블록 요소와 인라인 요소 - (2)

루체도 2019. 8. 17. 20:16

이번에는 인라인 요소와 블록 요소로 왜, 어떻게 구분되고 어떻게 바꿔서 쓸 수 있는지 알아보겠습니다.

우선 인라인 요소를 블록으로 바꾸는 것을 알아보기 위해 아래 코드를 작성을 해주세요.

<!-- index.html-->
<body>
 <span>안녕</span>
</body>

<!-- main.css-->
body{
 margin:0;
 padding:0;
}
span{
 background: red;
 width : 120px;
 hegith : 80px;
}

지금 CSS에 span에 높이와 너비를 입력을 했지만 인라인 요소라서 적용이 안됩니다.

이것을 적용시키기 위해 인라인 요소를 블록 요소로 바꿔보겠습니다.

<!-- main.css -->
span{
 background : red;
 width : 120px;
 hegith : 80px;
 display : block;  <!-- 이 코드를 추가해주세요 -->
}

이렇게 display : block 을 사용하면 인라인요소를 사용하는 태그를 블록으로 바꿔줄 수 있다

물론 display : inline으로 바꾸게 되면 인라인으로 바꿀 수 있다.

div태그도 인라인으로 바꿔줄 수 있다!