웹 페이지에서 요소를 정렬하고 떠오르게하는 방법

웹 페이지에 항목을 배치하는 것은 전반적인 디자인에 필수적입니다. 테이블을 사용하는 것과 같이 레이아웃에 영향을 미치는 다른 방법이 있지만 ( 권장하지 않음 ) CSS를 사용 하는 것이 가장 좋습니다 .

아래에서는 간단한 CSS 스타일의 인라인 속성을 사용하여 이미지, 표, 단락 등을 정렬하는 방법을 살펴 보겠습니다.

참고 : 이 같은 방법은 외부 스타일 시트 에서도 사용할 수 있지만 개별 항목에 적용되므로 이러한 방식으로 유지해야하므로 아래에 설명 된 것과 같이 인라인 스타일을 사용하는 것이 가장 좋습니다.

텍스트 단락 정렬

단락 태그는 웹 페이지를 배치하는 첫 번째 장소입니다. 열기 및 닫기 태그는 다음과 같습니다.

단락의 텍스트의 기본 정렬은 페이지의 왼쪽에 있지만 단락을 오른쪽과 가운데에 맞출 수도 있습니다.

float 속성을 사용하면 단락을 부모 요소의 오른쪽 또는 왼쪽으로 정렬 할 수 있습니다. 해당 상위 요소 안에있는 다른 모든 요소는 부동 요소 주위로 흐르게됩니다.

단락에 가장 적합한 효과를 얻으려면 단락에 컨테이너 (상위) 요소보다 작은 너비를 설정하는 것이 가장 좋습니다.

단락 안의 텍스트 정렬

거의 틀림없이, 단락 텍스트의 가장 흥미로운 정렬은 브라우저가 텍스트를 윈도우의 오른쪽과 왼쪽 양쪽에 정렬하여 표시하도록 지시하는 "정렬"입니다.

단락의 텍스트를 정당화하려면 text-align 속성을 사용합니다.

text-align 속성을 사용하여 단락 내의 모든 텍스트를 오른쪽 또는 왼쪽 (기본값)으로 정렬 할 수도 있습니다.

text-align 속성은 요소 내부의 텍스트를 정렬합니다. 기술적으로는 단락이나 다른 요소 안에 포함 된 이미지를 정렬하지 않아도되지만 대부분의 브라우저는 이미지를이 속성의 인라인으로 처리합니다.

이미지 정렬하기

이미지 태그에 float 속성을 사용하면 페이지에서의 이미지 배치와 텍스트가 어떻게 둘러 싸게되는지 정의 할 수 있습니다.

위의 단락과 마찬가지로 이미지 태그의 float 스타일 속성은 이미지를 페이지에 배치하고 브라우저에 텍스트 및 기타 이미지 주위의 요소를 전달하는 방법을 알려줍니다.

위 이미지 태그 다음의 텍스트는 이미지가 화면 왼쪽에 표시 될 때 이미지 오른쪽 주위로 흐릅니다.

텍스트가 이미지 주위를 감싸는 것을 멈추게하려면 clear 속성을 사용합니다.

단락 이상 정렬

그러나 단락이나 이미지 이상을 정렬하려면 어떻게해야합니까? 모든 단락에 스타일 속성을 넣을 수는 있지만 더 효과적으로 사용할 수있는 태그가 있습니다.