DIV 알아보기

컴퓨터-IT-인터넷-모바일/HTML-CSS-PHP

DIV 알아보기

OBD 2023. 5. 28. 18:22

DIV 알아보기

HTML 태그에서 가장 많이 사용되는 기초적인 태그가 DIV일 것입니다.

과거에 많이 사용하던 Table 태그를 대신하며 이보다는 유연성 있고 광범위한 속성을 가지는 태그입니다.

스크립트를 따로 공부하지 않은 일반 블로그 운영자로서 블로그 스킨을 만질 때 자주 마주치는 HTML CSS의 기본적인 사용법을 알아보려는 것입니다.

그 첫 번째로 DIV 태그의 속성들과 그 사용방법입니다.

DIV 태그는 한마디로 말해서 웹페이지에서 영역을 지정하는 태그입니다.

구조는 <div>와 </div>로 구성된 되며 "와"의 자리에 표시할 문자, 데이터, 이미지, 영상 등을 표시하는데 여러 가지 속성을 주어서 꾸밀 수 있는 속성 태그가 준비되어 있습니다.
속성을 다 모르더라도 기본적으로 표시됩니다.
다만 DIV는 style로 명명하는 다양한 속성을 DIV 태그와 함께 사용할 수 있습니다.
style속성을 인가할 때는 간단하기 DIV와 함께 나열할 수도 있지만 CSS형태로 별도로 지정해서 중복되는 문장에 일일이 style속성을 부여하지 않아도 되고 스크립트가 깔끔하게 되는 장점이 있습니다.
또 큰 소스일 경우에는 오프닝 속도를 개선하는 효과도 있습니다.

DIV의 기본적인 표시

1. 영역만을 지정함-아무 속성 없이 표시함.

구조:영역의 크기 색깔등이 지정되지 않았기 때문에 DIV가 끝나는 </DIV>까지 영역이 지정되는 것입니다.

<div>

여기에 표시할 콘텐츠(글, 그림, 데이터, 숫자등)를 표시합니다.

</div>

웹 페이지에 보이는 결과: 여기에 표시할 콘텐츠(글, 그림, 데이터, 숫자등)를 표시합니다.

2. 영역을 지정하고 지정된 곳에 색상을 부여함.

구조: style="background: green"이라는 색깔 속성이 지정되어서 <DIV>가 지정한 영역 안쪽이 노란색으로 표시됩니다.

여기에 표시할 콘텐츠(글, 그림, 데이터, 숫자등)를 배경색깔을 지정해서 표시합니다.

</div>

웹 페이지에 보이는 결과:

여기에 표시할 콘텐츠(글,그림,데이터,숫자등)를 배경색갈을 지정해서 표시 합니다.

노란색으로 쓰여진 부분이 사실은 하나의 박스(BOX)즉 사각형 영역입니다.
박스의 크기를 지정하지 안았기 때문에 연속되는 문장영역이 전부 표시되는 것을 볼수 있습니다.

3.DIV가 지정하는 영역의 크기를 가로와 세로크기를 주어진 단위(예 Px-픽셀)로 지정해서 표시합니다. 구조:style=" 역역의 가로크기를 width:숫자 px ; 세로크기를 height: 숫자 px로 표시합니다.

style 태그의 사용 규칙은 = 표시로 연결하고 속성을 " 와 " 로 감싸고 끝날 때는 쎄미콜론 ; 로 마칩니다.

실제스크립트

여기에 표시할 콘텐츠(글,그림,데이터,숫자등)를 배경색갈을 지정해서 표시 합니다.

</div>

단??는 숫자만 허용합니다.

예문 : 가로 250픽셀, 세로 80픽셀인 사각형을 안쪽에 노란색바탕으로 하고 ,콘텐츠를 표시합니다.

실제스크립트

노란색 박스 안에 콘텐츠가 표시되는 곳입니다.

</div>

웹 페이지에 보이는 결과:

노란색 박스 안에 콘텐츠가 표시되는 곳입니다.

위에서 시험해본 노란색갈을 나타내는 색갈 태그는 영문으로 표시 할 수 있는 Yellow,Blue,Green,Red 등의 단색도 있지만 보다 복잡한 색갈을 표시 하려면 컬러코드 - Color Code를 사용 할 수 있습니다.

배경색갈이 노란색인 가로 250픽셀 게로 80픽셀인 사각형 안에 주어진 콘텐츠인 글자가 쓰여진것을 볼 수 있으며 박스보다 긴 문단은 자동으로 줄바꿈 되는것을 볼 수 있습니다.

아주 간단한 DIV 태그를 알아봤는데 다음에는 보다 복잡한 속성을 주어서 활용해 보는 공부를 해 보려 합니다.

연관글 목록

노트북 HDD SSD로 교체하기

삼성 센스350U2A 하드디스크 SSD로 바꾸기 엠지텍 마이그레이션 좀 오래되긴 했지만 콤팩트한 기능과 편리성 때문에 가끔 사용하는 노트북이 윈도우 10을 깔고 부터는 속도가 현저히 느려져서 인

omnislog.com

윈도우 서치 Everything

기본 윈도우 서치를 대체할 수있는 Everything. 어떤 원인에 의해서 기본 Windows 검색 도구가 동작하지 않을때나 또는 다른 윈도우 검색도구를 원한다면 무료 로컬검색도구 Everything을 사용 해 볼만

omnislog.com

컴퓨터 사용기록 열람하기 이벤트뷰어 Eventvwr

편리한 윈도 명령어 이벤트 뷰어 Eventvwr로 컴퓨터의 모든 사용 내역 조회하기 모든 컴퓨터는 전원을 켜는 순간부터 전원이 꺼지는 순간까지 사용기록을 남깁니다. 컴퓨터에서 일어나는 대부분

omnislog.com

쿠키와 웹페이지의 보관 데이터 알아보기

쿠키로 보는 사이트와 웹페이지의 보관 데이터쿠키는 모든 웹 브라우저에서 방문할때 각종데이터를 추출해서 로컬컴퓨터에 저장되는것입니다.편의상 Chrome 브라우져의 쿠키에 대해서 알아 봅

omnislog.com