8강. html 태그 <div>

안녕하세요 코딩하는 근근이입니다.

이번 강의에서는  div에 대해서 알아보도록 하겠습니다.

 

div태그는 Division의 약자로 웹사이트의 레이아웃(전체적인 틀)을 만들 때 주로 사용합니다. div는 웹페이지에서 논리적 구분을 정의하는 태그입니다. div 태그를 사용하여 각각의 블록(공간)을 알맞게 배치하고 CSS를 활용하여 스타일을 적용할 수 있습니다. 특히 요즘에는 레이아웃 배치를 거의 Div를 활용해 구성하는 추세이기 때문에 그 쓰임새는 더 중요해졌다고 말할 수 있겠습니다.

 

div 태그의 속성들은 아래와 같습니다.

태그	속성	비고
<div>	style	스타일
	width	가로 크기
	height	세로 크기
	border	테두리 굵기
	background-color	배경 색상
	float	정렬
	margin	여백

1. style은 <div> 태그의 스타일을 지정해주는 것으로 다른 속성들을 사용할 수 있게끔 해줍니다. <div style="">

2. width는 <div>의 가로 크기를 정해줍니다. px(픽셀) 단위로도 정할 수 있고 %(비율) 단위로도 정할 수 있습니다.

3. height는 <div>의 세로 크기를 정해줍니다. px(픽셀) 단위로도 정할 수 있고 %(비율) 단위로도 정할 수 있습니다.

4. border은 <div>의 테두리의 굵기를 정해줍니다. 숫자가 클수록 굵기가 굵어집니다.

5. background-color은 <div>태그의 배경 색상을 정하는 속성입니다.

6. float은 div의 정렬(좌,우)을 하는 속성입니다. 가운데 정렬은 안됩니다.

7. margin은 div의 정렬기준 끝에서부터 여백을 주는 속성입니다. (margin-top, margin,-bottom, margin-left, margin-right)

 

 

아시죠? 백문이불여일타입니다.

 

자 에디트 플러스나 아크로 에디트나 뭐든 상관이 없습니다.  파일을 새로 엽시다. (텍스트 편집기면 뭐든지 다 됩니다.)

이번에는 디렉터리를 하나 만들어 보려고 합니다. (C:\APM_Setup\htdocs)에  html이라는 폴더를 만들어봅시다.

html 폴더를 만든 모습

 

이제 방금 만든 폴더 (html) 안에  div.html이라고 파일을 만들어 봅시다.

 

 

 

 

 

 

그리고 아래와 같이 코딩을 시작해 봅시다. 

 

다 입력하셨으면.  http://localhost/html/div.html을 브라우저에 입력해보세요. 아래와 같이 보이실 겁니다.

 

 

<div> 태그 안에 style이라는 글자가 보이실 겁니다 그걸 한마디로 인라인 css라고 합니다 css는 html에서 디자인적인

요소들이라고 생각하시면 이해가 쉬우실 거 같습니다 html 태그들은 기본적으로 디자인이 투박하여 기본적으로 레이아웃을 잡고 대략적으로 잡은 레이아웃에 css를 입히면 이쁜 페이지가 나옵니다 

 

보통 디자이너+퍼블리셔 님들께서 먼저 디자인을 해서 개발자한테 던 저주면 거기에서부터 개발자의 일이 시작이랍니다.  우리 강의는 풀 스택이지만 백엔드에 좀 더 가까운 강의라 디자인적인 것은 간단하게 넘어가고 있습니다 

참고 바랍니다. 오늘도 수고하셨습니다. 

 

강의는 끝이지만 좀 더 구글링 해가면서 div에 대해 조사해보시는 것도 좋을 거 같습니다.