티스토리 뷰

온라인강의정리하기/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태그도 인라인으로 바꿔줄 수 있다!

'온라인강의정리하기 > HTML' 카테고리의 다른 글

HTML - Link  (0) 2019.08.20
Head의 meta !  (0) 2019.08.18
HTML 블록 요소와 인라인 요소 - (1)  (0) 2019.08.17
Meta 속성, SCRIPT란..?  (0) 2019.08.17
확장자 하나 추천 및 알면 편한 단축키(VSCODE)  (0) 2019.08.17
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/09   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
글 보관함