프로그래밍/CSS

생활코딩 css 정리 - 14. 레이아웃 인라인 vs 블럭레벨

가카리 2017. 10. 15. 22:48
반응형
14. 레이아웃 인라인 vs 블럭레벨
html 엘리먼트들은 크게 두 가지로 구분됩니다.

1) 화면 전체를 사용하는 태그 => block element
2) 화면의 일부를 차지하는 태그 => inline level element
이번 시간에는 인라인 엘리먼트와 블럭 레벨 엘리먼트의 차이점을 다룹니다. 그 과정에서display라는 중요한 속성에 대해서도 배우게 됩니다.

block1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
        h1, aborder: 1px solid red; 
</style>
</head>
<body>
<h1>hello world</h1>
안녕하세요. <a href="https://opentutorials.org";>생활코딩입니다.</a>
</body>
</html>

실행화면
아래에서 h1태그는 한 줄을 다 쓰고 a태그는 해당하는 컨텐츠만 쓰고 있습니다.
즉, h1태그는 블록 엘리먼트이고 a 태그는 인라인 레벨 엘리먼트입니다.

만약 style에서 display 속성을 아래와 같이 바꾸면

block_1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1, aborder: 1px solid red;
h1display: inline;
adisplay:block;
</style>
</head>
<body>
<h1>hello world</h1>
안녕하세요. <a href="https://opentutorials.org";>생활코딩입니다.</a>
</body>
</html>

실행화면
아래와 같이 블록 엘리먼트였던 h1 태그가 인라인으로 되고 인라인 엘리먼트였던 a태그가 블록 엘리먼트도 된 것을 볼 수 있습니다.
 




반응형