티스토리 뷰

온라인강의정리하기/HTML

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

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

HTML에는 기본적으로 블록 요소와 인라인 요소가 존재를 합니다.

블록이 뭐다~ 인라인이 뭐다~ 대충 들어보기만 했기 때문에 정확하게 알아보고 싶어서

검색을 하고 공부를 해봤습니다.

블록요소에는 대표적으로 DIV, H1, P 태그가 있습니다.

인라인 요소에는 span, img 태그 들이 있습니다.

이 개념 자체는 굉장히 오래전부터 있던 것이고 지금 완벽하게 사용이 되고 있는 것은 아니지만

이 개념을 모르면 HTML과 CSS를 사용할 때 문제가 발생을 하게 됩니다.

저도 웹페이지를 현재 만들면서 공부를 하는 중이라 이미지를 넣고, 네비게이션 바를 넣고 하는 것에 있어서

이 블록 요소와 인라인 요소를 정확하게 알고 코드를 작성을 하는 것이 좋겠다 라는 생각을 했었습니다.

 

블록 요소의 특성들

 1. 사용가능한 최대 가로 너비 사용

 
<!-- index.html -->
<head>
	<link href="./main.css" rel="stylesheet">
</head>
<body>
	<div></div>
</body>

<!-- main.css -->
div{
	background : red;
}

이런식으로 코드를 작성을 하면 홈페이지에 저렇게 최대 가로 너비를 차지하면서 만들어지게 됩니다.

물론 홈페이지에서 보이는 높이가 위의 것과 동일하지 않을 것입니다. 보이기 편하게 티스토리에서 코드로 작성한 것이여서요..

가로 사이즈를 지정을 하지 않았는데 화면의 왼쪽 끝에서 오른쪽 끝까지 차지하는 것을 볼 수가 있으실 겁니다.

위아래 양옆에 여백이 생기는 것은 브라우저가 기본적으로 body에 지정을 해놓은 것입니다.

따라서 CSS에서 해당 속성의 값을 수정을 해주면 없앨 수 있습니다.

<!-- main.css-->
body{
  margin:0;
  padding:0;
}

2. 크기를 지정을 할 수 있다

div태그에 너비와 높이를 한 번 지정을 해봅시다!

<!-- main.css -->
div{
 background: red;
 width: 150px;
 height: 100px;
}

이렇게 작성을 했더니 높이와 너비가 달라진 것을 확인하실 수 있습니다.

 

3. 기본적으로 width : 100%; height: 0;로 시작을 한다.

여기서 height: 0이 의미하는 것은 자신이 가진 기본 높이 0 에서 자신의 콘텐츠(텍스트, 이미지 등)만큼의 높이를

사용을 하는 것을 의미합니다. 물론 뒤의 색깔을 지정해놓고 안녕이란 텍스트를 작성을 하고 css파일에 height:0;

이렇게 작성을 하면 작성한 콘텐츠만 남아있고 background 색깔은 사라진 것을 확인할 수 있습니다.

 

4. 수직으로 쌓인다.

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

안녕이라는 글자가 위에서 아래로 수직으로 쌓이는 것을 보실 수 있습니다.

 

5. margin, padding 위, 아래, 좌우 여백 사용가능하다.

 

6. 레이아웃을 잡는 요소로 활용을 한다.

 

인라인 요소의 특성들

1. 필요한 만큼의 너비만을 사용

우선 위의 코드에서 div부분을 span으로 바꿔서 결과부터 보겠습니다.

해보시면 빨간색이 아예 사라진 빈공간만이 홈페이지에 나올 것입니다.

이게 왜그런것이냐면 인라인 요소는 블록요소와 다르게 필요한 만큼의 너비만을 사용을 하기 때문입니다.

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

이렇게 코드로 작성을 하면 아까와는 다르게 딱 사용하는 영역만이 표시가 되는 것을 확인하실 수 있습니다.

다른글을 작성을 하셔도 딱 필요한 너비만큼만 사용을 합니다!

2. 크기를 지정할 수 없다

span태그에 높이와 너비를 CSS를 통해서 변경을 하면 어떤 변화가 생길까요?

<!-- main.css -->
span{
 background: red;
 width: 200px;
 height: 150px;
}

이렇게 작성을 해줘도 변화가 없습니다. 인라인 요소의 높이와 너비는 지정을 할 수가 없다는 것을 알 수가 있습니다.

 

3. 기본적으로 width:0; hegith:0;로 시작을 한다

 

 

ps.) 블록요소와 인라인 요소 둘다 기본적으로 width:auto; height:auto;로 설정되어 있지만

브라우저에서 둘이 다르게 동작을 해서 하나는 홈페이지 전체 너비를 사용을 하고 하나는 일부만을 사용을 하는 것입니다.

 

4. 수평으로 쌓인다.

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

이렇게 안녕이라는 글자가 수평으로 쌓이게 된다.

안녕 글자 사이에 여백도 인라인의 특징이라고 볼 수 있는데

이 여백을 없애고 싶다면 안녕을 저렇게 엔터를 쳐서 작성을 하는 것이 아니라 일자로 쭉 작성을 하면 된다.

<span>안녕</span><span>안녕</span><span>안녕</span>

이렇게 일자로 붙게 된다! 인라인 요소는 띄어쓰기가 신기하게도 눈에 보이는 것이라 이렇게 여백이 생기게 되는 것이다.

 

5. margin, padding 위 아래는 사용을 할 수 없다.

 

6. TEXT를 잡는 용도로 사용을 한다.

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

Head의 meta !  (0) 2019.08.18
HTML 블록 요소와 인라인 요소 - (2)  (0) 2019.08.17
Meta 속성, SCRIPT란..?  (0) 2019.08.17
확장자 하나 추천 및 알면 편한 단축키(VSCODE)  (0) 2019.08.17
비쥬얼 스튜디오 코드 한글 패치하기  (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
글 보관함