CSS를 사용하여 웹 페이지 모양을 지정합니다.
웹 페이지 코더는 하이퍼텍스트 마크업 언어를 사용하여 단락, 제목 또는 목록과 같은 페이지에 있는 각 요소의 기능적 목적을 웹 브라우저에 알립니다. HTML 4 이후로 Cascading Style Sheets는 각 요소가 무엇인지 정의하는 것과 별개로 브라우저에 각 요소가 어떻게 표시되어야 하는지 알려주는 방법을 코더에 제공했습니다. 페이지는 휴대폰 및 데스크톱 컴퓨터와 같은 다양한 유형의 장치에 대해 다른 CSS 스타일을 가질 수 있으므로 코더가 HTML을 변경할 필요 없이 페이지 모양을 변경할 수 있습니다. CSS 속성을 사용하여 이미지를 중앙에 배치합니다.
1 단계
웹 페이지에서 이미지를 표시할 HTML 파일에 "img" 태그를 배치합니다. "body" 태그 사이와 "h1" 태그 뒤에 있어야 합니다. 예를 들어,
오늘의 비디오
이것은 당신의 텍스트입니다.
너비가 170픽셀이고 높이가 50픽셀인 photo.jpg라는 이미지를 정의합니다. 페이지 상단 표제 다음의 첫 번째 항목입니다.
2 단계
"여백" CSS 속성을 사용하여 그림과 같은 페이지 요소 주변의 공간을 정의합니다. margin 속성에 대한 "auto" 값은 웹 브라우저가 공간의 양을 자동으로 결정하도록 지시합니다. 그래서, 이미지 주변의 공간이 브라우저에 의해 결정됨을 정의합니다.
3단계
"디스플레이" 속성을 사용하여 페이지 요소가 표시되는 방식을 정의합니다. display 속성에 대한 "block" 값은 웹 브라우저에 요소를 자체 줄에 표시하고 위와 아래에 공백을 두도록 지시합니다. 그래서, 동일한 이미지를 정의하지만 "display: block;"이 추가됨 이제 자체 라인에 배치합니다.
4단계
여러 브라우저에서 웹 페이지를 보고 이미지가 제대로 중앙에 배치되었는지 확인합니다.
팁
"alt" 태그 안에 이미지 설명을 포함하십시오. 이렇게 하면 시각 장애가 있는 독자가 페이지에 더 쉽게 액세스할 수 있고 코드가 표준을 준수하는지 확인할 수 있습니다.
