HTML 가운데 정렬 입니다
이번 HTML 시간인 가운데 정렬 하는 방법입니다. HTML을 작성하면 보통 좌측 정렬로 되어 있습니다. 그것도 패딩값을 주지 않으면 제일 좌측에 위치하게 됩니다. CSS를 이용하면 CSS 별로 생성해서 클래스를 사용하는 것이 일반적인데 아직은 그렇게 까지 접근할 필요는 없고 기본을 알아야 사용하는 방법도 알 수 있기 때문에 하나 씩 알아가시면 됩니다.
가운데 정렬하는 HTML 태그는 예전에 CENTER 를 많이 사용했습니다. 이 태그가 편리하긴 하지만 스크립트나 CSS 에서 콘트롤이 잘 안됩니다. 그래서 DIV 태그를 이용해서 가운데 정렬을 하는데요 그 방법을 알아보겠습니다.
기본적인 HTML을 준비해봤습니다 별것 없고 그냥 텍스트 문구 하나만 있습니다.
실행을 하면 당연 좌측 상단에 붙어있습니다. 기본이 좌측 정렬로 되어 있기 때문입니다.
1. CENTER TAG
이제 입력한 텍스트를 가운데 정령해보겠습니다. 먼저 CENTER 태그로 정렬을 해보겠습니다.
CSS 보다 우선권을 가진 태그입니다. 그래서 CSS에 좌측정렬을 하더라도 CENTER 태그를 사용하면 중앙정렬이 됩니다.
사용 방법은 <CENTER> TEXT </CENTER> 입니다. 태그사이에 넣으시면 되겠죠?
결과를 보면 텍스트가 가운데 정렬된것을 확인할 수 있습니다.
2. DIV TAG
이제 많이 사용하는 DIV 태그를 이용해보겠습니다. 웹 표준으로 되면서 DIV 태그가 많이 사용됩니다. 깨지기 쉬운 TABLE 태그를 지향하고 웹표준으로 DIV 태그가 많이 사용됩니다.
사용 방법은 STYLE에 중앙정렬을 해주는건데요
사용방법은 <DIV STYLE ="TEXT-ALING ; CENTER"> TEXT </CENTER> 입니다
브라우저를 통해서 결과를 보면 가운데 정렬이 잘 된 것을 확인할 수 있습니다.
DIV 태그 사이에 여러가지 HTML 오브젝트를 삽입할 수 있는데요
이미지 태그도 삽입해서 가운데 정렬 시킬 수 있습니다. 방법은 동일하며 TEXT 대신 이미지 태그를 삽입하면 됩니다.
결과를 보면 이미지도 정렬이 잘되었습니다. TEXT-ALIGN인데 이미지도 됩니다.
HTML 가운데 정렬 방법을 알아보았습니다. 드림위버나 같은 자동 프로그램을 처음부터 사용하지 마시고 직접 수동으로 입력하면서 익숙해지면 사용하시기 바랍니다. 그래야 코드가 눈에 들어옵니다.
