블록 레벨요소와 인라인 요소

HTML의 요소는 인라인 요소와 블록 레벨요소로 나눌수 있습니다.

인라인요소(<a>、 <span>、 <button>、 <input>、 <img>등)

인라인 요소는 가로방향으로 배치되며, 부모요소의 넓이 (혹은 페이지의 넓이) 에 도달하면 개행되며, 다음행의 선두에 추가 됩니다.

인라인 요소의 배치 예

블록레벨 요소(<h1>、<h2>、<p>、<div>、<ol>、<ul>、<li>등)

가로방향의 영역을 확보하며,세로방향으로 영역을 추가해 나갑니다.

블록레벨의 배치 예

페이지의 레이이웃을 설정할 때는, 일단 블록레벨의 요소를 사용하여 전체적인 레이아웃을 정리하고, 그 안에 인라인요소를 넣어갑니다.

페이지 레이아웃의 사용 예

이쪽은 1번째 블록 요소 입니다.

아래의 버튼들은 이 블록요소의 인라인 요소 입니다.

이쪽은 2번째 블록요소 입니다.

아래 버튼들은 이 블록요소의 인라인 요소 입니다.

이쪽은 3번째 블록요소 입니다.

이상입니다.

페이지를 작성해보면[스타일을 지정했는데 생각한 대로의 장소나 사이즈로 배치되지 않는다]라는 상황에 몇번이나 조우하신 경험이 있을것이라 생각합니다. 그 대부분은 인라인 요소블록레벨 요소자주 틀리는것이 그 원인 이라고 생각합니다.

예를 들어, span요소에 높이나 넓이를 지정해도 요효한 요소가 되지 않습니다. 이것은 인라인 요소에 높이나 넓이를 지정해도 무시되는기 때문입니다. 한편, p나 div와 같은 블록레벨 요소에 높이나 넓이를 지정하면 유효한 요소가 됩니다.

다음 예를 보도록 합시다. 인라인 요소의<span>요소에 높이요소를 부여해 보았습니다.

<!DOCTYPE html>
<html>
<body>
	이 문서는 인라인 요소로 높이를 지정했습니다.
	<span style="background-color:yellow; height:100px">높이를 지정했지만, 반영되지 않습니다.</span>
</body>
</html>

완성소스

다음예는 블록레벨요소의 <p>요소에 높이요소를 부여해 보았습니다.

<!DOCTYPE html>
<html>
<body>
	이 문서는 블록레벨의 요소에 높이를 지정해 보았습니다.
	<p style="background-color:yellow; height:100px">높이가 반영되었습니다.</p>
</body>
</html>

완성소스

어떤 요소가 블록레벨이고, 어느 요소가 인라인 요소 인지를 외우는것은 상당히 힘든 작업입니다. 거기서 간단히 외울수 있는 노하우 를 하나 알려드리겠습니다. 블록레벨은 자식요소를 포함하고 있는 요소라는 것입니다. 예를들어 이하와 같은 요소와 같은것이 그 특징입니다.

  • p요소=자식요소로서 주로 텍스트를 포함하고 있습니다.
  • div요소=자식요소로서 여러가지 요소를 포함하고 있는 경우

라는 두가지 요소를 사용하면 외우기 쉬울것이라 생각합니다.

박스레벨

HTML에서의 레이아웃의 기본은 「박스」라는 구형입니다. 문서내의 모든 요소는 박스라 불리우는 구형을 형성하고 있습니다. 이 박스 모델에서의 스타일을 지정 할수 있는것은 기본적으로는 블록 레벨 요소로 되어있습니다.

박스 모델에는 margin(마진)、border(외각선)、padding(여백)、height(세로 사이즈)、width(가로사이즈)등의 여러가지 스타일을 지정하는것이 가능합니다.

박스 모델의 스타일

↕︎이쪽의 상하의 간격이 margin으로서, 박스를 감싸고 있는것이 border가 되겠습니다.
↕︎이 간격이 padding입니다.
이 박스의 세로 길이는 height 가로의 길이는 width 가 되겠습니다.

마진은 다른 요소와의 거리를 조정 요소로 , 배경색자체는 투명합니다. margin、border、padding상,하,좌,우 각각 값을 지정하는것이 가능합니다.

padding의 설정 예시

스타일 예

설명
padding: 20px 상하좌우의 패딩을 일괄지정 합니다.
padding: 10px 20px 30px 40px 상, 우, 하, 좌의 패딩을 개별로 지정합니다.
padding-top: 10px 상단의 패딩을 지정합니다.
padding-bottom: 30px 하단의 패딩을 지정 합니다.
padding-left: 40px 좌측의 패딩을 지정 합니다
padding-right: 20px 우측의 패딩을 지정합니다.

 

margin의 설정예시

 

스타일의 예 설명
margin: 10px 상하좌우의 마진을 일괄적으로 지정합니다.
margin: 10px 20px 30px 40px 상, 우, 하 좌의 마진을 개별로 지정합니다
margin-top: 10px 상단의 마진을 지정합니다.
margin-bottom: 30px 하단의 마진을 지정합니다.
margin-left: 40px 좌측의 마진을 지정합니다.
margin-right: 20px 오른쪽 마진을 지정합니다.

border의 설정 예시

스타일 예 설명
border-width: 2px; 보더 넓이
border-style: solid; 보더 스타일(solid、dotted、dashed등)
border-color:red; 보더 색
border: 2px solid blue;

넓이、스타일、색을 한꺼번에 지정

border-top-style, border-left-color등의 개별 지정도 가능 합니다.

 

이하의 박스 모델을 의식하여Steins:Gate의 스즈네의 편지에 스타일을 지정해 봅시다.

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style>
	p {
		width: 200px;
		height: 100px;
		margin: 50px;
		padding: 20px;
		background-color: aliceblue;
		overflow: hidden;
		border: 10px solid blue;
	}
</style>
<body>
	이 문서는 슈타인즈 게이트의 스즈네가 썼습니다.
	<p>실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다실패했다</p>
	스타일링 완료
</body>
</html>

완성소스

이걸로 스즈네의 편지도 깔끔하게 정리됬군요^^

참고로「overflow: hidden;」은、삐져나온 영역을 비표시로 하게끔 지정해 줍니다.

박스 위치 지정

블록레벨요소의 top 과 left는 박스의 위치를 조정하기 위해 사용됩니다. 그때, top과 left는 부모 요소로부터 거리를 지정합니다.

배경
top과 left를 50px씩 지정한 블록
top과 left를 30px씩 지정한 블록

단, top와 left를 사용할때 에는「position:relative;」(상대적인 배치이며, 부모요소 요소로 부터의 top 나 left등을 지정하는것이 가능합니다.)이나「position:absolute;」 (절대적인 배치며, 페이지로 부터의 top 이나 left등을 지정하는것이 가능합니다.)라는 스타일을 지정할 필요가 있다는것에 주의해 주시기 바랍니다.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style type="text/css">
		div {
			position: absolute;
			/*모든 div의 top 과 left로 절대위치를 지정합니다.*/
		}
		#panel {
			/*질문용 패널의 크기와 위치를 지정합니다.*/
			left: 100px;
			top: 50px;
			width: 300px;
			height: 100px;
			background-color: lightgreen;
		}
		.button {
			/*패널상의 버튼에 공통적인 스타일을 지정*/
			width: 50px;
			height: 25px;
			color: white;
			background-color: blue;
			border: 5px solid yellow;
			text-align: center;
			font-size: 24px;
		}
		.yes {
			/* Yes버튼의 스타일을 지정*/
			top: 20px; 
			left: 70px;
		}
		.no {
			/* No버튼의 스타일을 지정*/
			top: 20px;
			left: 200px;
		}
	</style>
</head>
<body>
	<div id="panel">
		<div class="button yes">
			Yes
		</div>
		<div class="button no">
			No
		</div>
	</div>
</body>
</html>

완성소스

여기서 기억해 주셨으면 하는것이 있습니다만, 클래스의 속성의 값은 「class=”button yes”」(이 경우는 button클래스와 yes클래스를 지정하고 있습니다.)와 같이 공백으로 구분지음으로서 복수의 값을 지정할수 있다는것입니다. 중요한 부분이므로 잘 기억해 두시기 바랍니다.

이와 같이,「position:absolute;」를 지정하면top、left、width、height을 사용하여 원하는 대로 블록레벨의 요소를 배치하는것이 가능해 집니다.

여러분도 지금까지 열심히 따라와 주셔서 감사합니다 ! 다음 코스인 Javascript 는 현재 준비중입니다. 이제 부터도 자신의 홈페이지를 위해서 열심히 공부해 나가도록 합시다.

Web개발-처음하는CSS

(다음 강좌) Web개발 – 처음하는Javascript

프로그래밍 강좌 메인