웹 사이트 제작시 이미지, 텍스트 및 블록 요소 중앙에 배치
웹 사이트를 만드는 방법을 배우는 경우 브라우저 창에서 항목을 중앙에 배치하는 방법을 마스터해야합니다. 이는 이미지를 페이지 중앙에 배치하거나 헤드 라인과 같은 텍스트를 디자인의 일부로 가운데 정렬 할 수 있습니다.
가운데 맞춤 이미지 또는 텍스트 또는 전체 웹 페이지의 시각적 모양을 얻는 적절한 방법은 CSS (Cascading Style Sheets)를 사용하는 것 입니다. 센터링을위한 대부분의 속성은 버전 1.0 이후 CSS에 있었으며 CSS3 및 최신 웹 브라우저 와 잘 작동 합니다 .
웹 디자인의 여러 측면과 마찬가지로 CSS를 사용하여 웹 페이지의 요소를 가운데에 배치하는 여러 가지 방법이 있습니다. 이 시각적 인 외관을 얻기 위해 CSS를 사용하는 몇 가지 다른 방법을 살펴 보겠습니다.
HTML에서 CSS를 사용하여 요소를 가운데로 배치하는 방법에 대한 개요
CSS를 중심으로하는 것은 웹 디자이너를 시작하는 데 어려움이 될 수 있습니다. 왜냐하면이 시각 스타일을 구현하는 데는 여러 가지 방법이 있기 때문입니다. 다양한 방법이 모든 요소가 모든 요소에서 작동하지 않는다는 것을 알고있는 멋지고 노련한 웹 개발자 일 수 있지만, 다양한 방법은 언제 어떤 방법을 사용해야 하는지를 알 필요가 있으므로 새로운 웹 전문가에게는 대단히 어려울 수 있습니다. 가장 좋은 방법은 몇 가지 접근법을 이해하는 것입니다. 당신이 그것들을 사용하기 시작할 때 어떤 방법이 어떤 경우에 가장 잘 작동 하는지를 배울 것입니다.
높은 수준에서 CSS를 사용하여 다음을 수행 할 수 있습니다.
- 가운데 텍스트
- 블럭 레벨 요소를 중심에두기
- 이미지 가운데 놓기
- 블록이나 이미지의 수직 중심 맞춤
많은 (수년) 전에 웹 디자이너는 이미지와 텍스트를 가운데 맞추기 위해
CSS로 텍스트 가운데 맞추기
웹 페이지를 중심으로하는 가장 쉬운 방법은 텍스트입니다. 이 작업을 수행하는 데 알아야하는 스타일 속성은 text-align입니다. 아래 CSS 스타일을 사용하십시오.
p.center {text-align : center; }
이 CSS 라인을 사용하면 중심 클래스로 작성된 모든 단락이 상위 요소 내부에 수평으로 배치됩니다. 예를 들어 단락이 본부의 하위에 있었던 경우 해당 단락이
다음은 HTML 문서에 적용된이 클래스의 예입니다.
이 텍스트는 중앙에 있습니다.
text-align 속성을 사용하여 텍스트를 가운데에 배치 할 때 텍스트가 포함 된 요소의 가운데에 배치되며 전체 페이지 자체의 가운데에 반드시 있어야하는 것은 아닙니다. 또한 가운데 맞춤 텍스트는 큰 콘텐츠 블록에 대해 읽기 어려울 수 있으므로이 스타일을 조금만 사용하십시오. 기사 또는 기타 콘텐츠의 티저 텍스트와 같은 헤드 라인 및 작은 블록 텍스트는 종종 가운데에 올리면 읽기 쉽고 잘 읽히지 만 전체 기사 자체처럼 큰 텍스트 블록은 내용이 완전히 중앙에 있으면 소비하기가 어려울 수 있습니다 정당화되었다. 웹 사이트 텍스트의 경우 가독성이 항상 중요 하다는 것을 기억하십시오!
CSS로 콘텐츠 블록 정렬하기
블록은 페이지에서 폭이 정의되고 블록 수준 요소로 설정된 모든 요소입니다. 종종 이러한 블록은 HTML
div.center {
여백 : 0 자동;
너비 : 80em;
}
margin 속성에 대한이 CSS 줄임표는 위쪽 및 아래쪽 여백을 0으로 설정하는 반면 왼쪽 및 오른쪽은 "auto"를 사용합니다. 이것은 기본적으로 사용 가능한 공간을 취해 뷰포트 창의 두면 사이에서 균등하게 나눕니다. 효과적으로 페이지의 요소를 가운데에 배치합니다.
다음은 HTML에 적용됩니다.
그 안의 텍스트는 왼쪽 정렬됩니다.
블록의 너비가 정의 된 경우 포함 요소 내부에 자체 중심이 배치됩니다. 해당 블록에 포함 된 텍스트는 그 안에 가운데에 정렬되지 않지만 왼쪽 맞춤이됩니다. 웹 브라우저에서는 기본값이 왼쪽으로 지정됩니다. 텍스트를 가운데에 배치하고 싶다면이 방법과 관련하여 앞에서 다뤘던 text-align 속성을 사용하여 부분을 가운데에 배치 할 수 있습니다.
CSS로 이미지 가운데 맞추기
대부분의 브라우저는 이미 텍스트 단락 속성을 사용하여 이미지를 표시하지만 단락은 이미 살펴본 것이므로 W3C에서 권장하지 않으므로이 기술을 사용하는 것은 좋지 않습니다. 권장하지 않기 때문에 이후 버전의 브라우저에서는이 방법을 무시할 수있는 가능성이 항상 있습니다.
텍스트 정렬을 사용하여 이미지를 가운데에 배치하는 대신 브라우저에 이미지가 블록 수준 요소임을 명시해야합니다. 이렇게하면 다른 블록처럼 중앙에 배치 할 수 있습니다. 여기에 CSS가 있습니다.
img.center {
디스플레이 : 블록;
margin-left : 자동;
margin-right : 자동;
}
그리고 우리가 중심에 놓고 자하는 이미지를위한 HTML이 있습니다 :
인라인 CSS (아래 참조)를 사용하여 객체를 가운데에 배치 할 수도 있지만 HTML 마크 업에 시각적 스타일을 추가하기 때문에이 방법을 사용하지 않는 것이 좋습니다. 기억해야 할 점은 스타일과 구조를 분리하여 HTML 코드에 CSS 스타일을 추가하는 것입니다. 가능한 한 피해야합니다.
수직으로 CSS로 요소 가운데 맞추기
객체를 수직으로 정렬하는 것은 웹 디자인에서 항상 어려웠지만 CSS3의 CSS Flexible Box Layout Module이 출시되면서 이제는 할 수있는 방법이되었습니다.
수직 정렬은 위에 설명 된 수평 정렬과 유사하게 작동합니다. CSS 속성은 중간 값과 세로로 정렬됩니다.
.vcenter {
세로 정렬 : 중간;
}
이 접근 방식의 단점은 CSS FlexBox를 지원하지 않는 브라우저가 있지만 새로운 CSS 레이아웃 방법이 점점 더 많이 등장한다는 것입니다. 사실 모든 현대의 브라우저는 현재이 CSS 스타일을 지원합니다. 즉, Flexbox에 대한 유일한 우려는 훨씬 오래된 브라우저 버전 일 것입니다.
이전 브라우저에 문제가있는 경우 W3C는 다음 방법을 사용하여 텍스트를 세로로 가운데에 맞출 것을 권장합니다.
- div와 같이 포함 할 요소 안에 가운데 맞춤 할 요소를 배치합니다.
- 포함하는 요소의 최소 높이를 설정합니다.
- 요소를 테이블 셀로 선언하십시오.
- 수직 정렬을 "중간"으로 설정하십시오.
예를 들어 CSS는 다음과 같습니다.
.vcenter {
최소 높이 : 12em;
display : 표 셀;
세로 정렬 : 중간;
}
다음은 HTML입니다.
이 텍스트는 상자의 가운데에 세로로 배치되어 있습니다.
세로 가운데 정렬 및 이전 버전의 Internet Explorer
인터넷 익스플로러 (IE)를 강제로 작동시킨 다음 조건부 주석을 사용하여 IE 만 스타일을 볼 수있게하는 몇 가지 방법이 있지만 이들은 약간 자세한 정보와 추한 것입니다. 좋은 소식은 IE의 구버전을 지원하지 않기로 결정한 마이크로 소프트의 결정에 따라 지원되지 않는 브라우저가 곧 출시 될 예정이어서 웹 디자이너는 CSS 레이아웃과 같은 CSS 레이아웃을 사용하여 모든 CSS 레이아웃, 단지 중심에 두지 않고 모든 웹 디자이너가 더 쉽게 사용할 수 있습니다.