오늘은 JDBC 관련 파트가 끝나고, 웹으로 들어가기 위한 필수 통과 관문인 HTML ( HyperText Markup Language) 과 CSS ( Cascading Style Sheet ) 에 대해서 배우게 되었다. HTML은 웹페이지에 공간을 만들고, 그 공간을 무엇으로 메울지 설정해주는 언어라고 생각하면 편하다. 그리고, CSS 는 공간들을 어떻게 꾸미는 지 , 즉 디자인을 설정해주는 언어라고 보면 된다.
HTML은 태그들로 이루어진다고 볼 수 있다. 그렇다면 , 태그들은 다 똑같지 않고 각자들만의 특징을 가지고 있는데, 이를 통해서, 몇 가지 태그에 대해 알아가보도록 하려고 한다.
우선, 보통의 태그는 시작 태그와 종료 태그가 두 개 존재하는데, 빈 태그는 그러하지 않다. 빈 태그는 단순히 시작 태그만 존재한다. 이처럼, 각각의 태그들은 각각의 특징을 가지게 된다. 이 중에서, HTML을 보면서, 중요하면서도 기본적으로 파악해야하는 것이 바로 인라인 요소( Inline Element ) 와 블록 요소 ( Block Element ) 의 차이점 이다. 인라인 요소와 블록 요소의 뚜렷한 차이는 너비( WIDTH ) 와 높이 ( HEIGHT ) 를 조정하는 데에 있다. 인라인 요소는 CSS 를 통해서 너비 와 높이 를 조정하려고 해도, 바뀌지 않는다. 그러하여, 기본값 또한 인라인 요소를 가진 태그 안에 가진 값들의 길이까지만 너비와 높이를 가진다. 또한, 인라인 요소들은 가로 형태로 보여주게 된다. 그렇다면, 인라인 요소의 예로는 어떠한 것들이 있는 지 살펴보면 다음과 같다. 인라인 요소들의 예로는 span 태그 , a 태그 , label 태그 등이 존재한다.
다음으로 , 블록요소에 대해서 살펴보려고 한다. 인라인 요소가 너비와 높이를 조정해도 바뀌지 않았던 반면, 블록 요소는 너비와 높이가 조정이 가능하다. 또한, 블록요소는 내용들을 세로로 보여주는 특징을 가진다. 블록 요소의 예로는 div 태그 , h1 태그 등등이 존재한다.
인라인 요소의 너비와 높이를 조정하지 못하는 것을 보완하기 위해, Inline- block 이라는 것이 존재한다. CSS 를 통해 , 특정 DISPLAY를 INLINE-BLOCK 으로 설정하게 된다면, 태그 안의 내용들이 가로 형태로 보여지게 되면서, 동시에 너비와 높이를 조정할 수 있게 된다. 이에 대해서, 눈으로 구별하기 쉽게 밑에 이미지와 코드를 붙여넣도록 하려고 한다.
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
div {
font-size: 20px;
}
</style>
<title>인라인 요소와 블록요소의 차이점</title>
</head>
<body>
<!-- 차이를 파악하기 쉽게 폰트사이즈를 크게하고, 각각의 경계선 색깔을 다르게 설정함.. -->
<div>DIV1 는 블록요소이다</div>
<div style="width= 100px ; height: 100px; border: 3px solid red">
DIV2 는 블록요소이다
</div>
<div style="width= 200px ; height: 150px; border: 3px solid blue;">
DIV3 는 블록요소이다
</div>
<div style="width: 300px; height: 200px; border: 3px solid orange">
DIV4 는 블록요소이다
</div>
<!-- SPAN 1 은 인라인 요소이기에, WIDHT 와 HEIGHT 를 조정해도 바뀌지 않는다. -->
<span style="width= 100px ; height: 100px; border: 3px solid red">
SPAN1 는 인라인 요소이다
</span>
<span style="width= 200px ; height: 200px; border: 3px solid blue;">
SPAN2 는 인라인 요소이다
</span>
<span style="
display: inline-block;
width: 100px;
height: 150px;
border: 3px solid orange;
">
SPAN3 는 인라인 요소이다
</span>
</body>
</html>
