html 기본 문서 만들기 10 - 블록 태그와 인라인 태그 이용하기
네 안녕하세요, 이번 포스팅에서는 블록 태그와 인라인 태그에 대해서 알아보도록 하겠습니다.
각각의 html 태그들은 각기 다른 기능들을 가지고 있습니다.
그중에서 이 블록 태그와 인라인 태그는 그러한 태그들을 나누는 기준이 되는데,
이번 포스팅에서 블록 태그와 인라인 태그에 속하는 태그들이 어떤 것들이 있는지 알아보도록 하겠습니다.
그럼 지금부터 시작하도록 하겠습니다.
1. 블록 태그와 인라인 태그 이용하기
html 태그는 크게 두 가지의 태그로 나누어져 있습니다.
- 블록 태그
- 인라인 태그
블록 태그는 내용을 감쌀 때 쓰는 태그,
인라인 태그는 그 내용 안에서 부가적인 기능을 담당합니다.
그래서 블록 태그는 항상 새로운 라인에서 시작이 되며,
반드시 종료가 되는 태그들만 있어요.
하지만 인라인 태그는 그 블록태그 안에 있는 내용들 속에 삽입이 되기 때문에,
종료 태그가 없어도 작동하는 태그가 존재합니다.
보통 이러한 태그들을 많이 씁니다.
<p>, <h1>, <div>, <ul> ...etc // 블록 태그의 예시
<strong>, <a>, <img>, <span> ...etc // 인라인 태그의 예시이런 것들이 존재하며, 보통 div 태그와 span 태그를 가장 많이 쓰곤 하는 태그입니다.
그만큼 가장 활용도가 높은 태그입니다.
그럼 예제 코드를 통해 같이 보도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><div>블록과 <span>인라인</title>
</head>
<body>
<h3>사랑</h3>
<hr>
<div style="background-color:skyblue;padding:20px;">
내가 사람의 방언과 천사의 말을 할지라도
<span style="color:red">사랑</span>이 없으면 소리 나는 구리와 울리는 꽹과리가 되고,
<span style="color:red">사랑</span>이 없으면 아무 것도 아니라.
</div>
<p>~우리 서로 사랑하며 살아요~</p>
</body>
</html>여기에서 <div> 태그로 내용을 묶었고, 안에 있는 <span> 태그로 특정 글자의 색이나 스타일을 제어를 합니다.
그리고 style이라는 속성은 나중에 배울 css 스타일을 쓸 때도 쓰는데,
해드 부분에다가 <style> 태그를 이용하여 붙입니다.
그럼 결과 화면을 같이 보도록 하겠습니다.
이런 식으로 첫 번째 div 태그의 색깔을 skyblue로 지정을 하여 배경색이 변했고,
span 태그를 이용하여 '사랑'이란 단어의 색을 빨간색으로 변화를 줬습니다.
이렇게 html 태그에서 글 전체를 제어할 수도 있고, 글의 일부를 제어할 수도 있습니다.
이렇게 블록 태그와 인라인 태그에 대해 알아보는 것을 끝으로 html의 기본 작성 요령에 대하여 알아보았습니다.
다음 포스팅부터는 좀 더 심화된 html 태그를 작성하는 방법에 대하여 알아보도록 하겠습니다.
긴 글 읽어주신 독자분들께 진심으로 감사합니다~
'html, css, 자바스크립트 > html' 카테고리의 다른 글
| html 고급 문서 만들기 2 - ol, ul, dl 태그로 리스트 만들기 (0) | 2023.03.01 |
|---|---|
| html 고급 문서 만들기 1 - img 태그로 이미지 삽입하기 (0) | 2023.03.01 |
| html 기본 문서 만들기 9 - 텍스트 꾸미기 (0) | 2023.03.01 |
| html 기본 문서 만들기 8 - pre 태그를 이용하여 개발자의 포맷 그대로 출력하기 (0) | 2023.03.01 |
| html 기본 문서 만들기 7 - 특수한 문자, 기호, 심벌 입력하기 (0) | 2023.03.01 |
댓글