html css 가운데 정렬
■ html 문서를 작성할 때 그림이나 텍스트를 부모 요소의 가운데에 정렬해야 할 때가 있는데요. css 속성을 이용해서 가운데 정렬하는 방법은 여러 가지가 있지만, 가장 대표적인 방법으로 'text-align' 속성에 대해서 알아볼게요. 간단한 예제를 하나 만들겠습니다.
■ 본문에 이미지 하나와 간단한 텍스트 단락 한 줄을 넣어봤습니다.
■ 웹 브라우저에서 확인하면 다음과 같은 경과가 출력되겠죠. 먼저 이미지와 텍스트 단락 모두를 가운데로 정렬하겠습니다. 현재 <body> 태그 안에 요소들이 들어 있으니까 <body> 안의 요소들을 모두 가운데로 정렬하겠습니다.
■ <body> 선택자의 속성에서 "text-align : center" 값을 넣어주면 본문 내용 모두가 가운데에 정렬하게 됩니다. css 속성은 상속되기 때문에 하위 요소들은 <img>와 <p> 태그 모두 가운데 정렬이 됩니다.
■ 이것들 중에서 텍스트만 왼쪽으로 다시 옮기기 싶을 때는 <p>태그의 속성에서 'text-align : left' 하시면 됩니다.
■ 정리를 하자면, 가운데 속성값이 상속되어 하위 요소들에 모두 똑같이 적용된다는 걸 확인하기 위해서 <body> 태그에 적용을 해봤구요. 하위 요소<p> 는 따로 속성값을 적용할 수 있다는 걸 알아봤습니다. 수고하셨어요.
