HTML로 웹 페이지를 작성하자 마자 크기 조정 작업을 시작합니다. 자신이나 다른 디자이너가 만든 디자인과 일치 할 가능성이 높은 모양을 보이게하려면 해당 사이트의 텍스트 크기와 페이지의 다른 요소를 변경해야합니다. 이렇게하려면 HTML "크기"태그를 찾기 시작할 수도 있지만 빠진 코드는 빨리 찾을 수 있습니다.
HTML 크기 태그가 HTML에 없습니다. 대신 글꼴, 이미지 또는 레이아웃의 크기를 설정하려면 계단식 스타일 시트를 사용해야합니다. 사실, 사이트의 텍스트 나 다른 요소에 대해 시각적으로 변경해야하는 것은 CSS에서 처리해야합니다! HTML은 구조 전용입니다.
HTML 크기 태그에 가장 가까운 태그는 old font 태그이며 실제로 size 속성을 포함합니다. 이 태그는 현재 버전의 HTML에서 더 이상 사용되지 않으며 향후 브라우저에서 지원되지 않을 수도 있습니다. HTML에서 글꼴 태그를 사용하고 싶지 않습니다! 대신 HTML 요소의 크기를 정하고 이에 따라 웹 페이지 스타일을 지정하는 CSS를 배워야합니다.
글꼴 크기
CSS는 틀림없이 CSS로 크기를 정하는 가장 쉬운 방법입니다. Moreso는 단지 텍스트의 크기를 정하는 것보다 CSS를 사용하여 웹 사이트의 타이포그래피를 보다 구체적으로 나타낼 수 있습니다. 글꼴 크기, 색상, 케이스, 무게, 선행 등을 정의 할 수 있습니다. 글꼴 태그를 사용하면 크기를 정의 할 수 있으며 모든 고객마다 다른 브라우저의 기본 글꼴 크기를 기준으로 한 숫자로만 정의 할 수 있습니다.
단락을 12pt의 글꼴 크기로 설정하려면 font-size 스타일 속성을 사용하십시오.
h3 {글꼴 크기 = 24 픽셀; }이 스타일은 headiing3 요소의 글꼴 크기를 24 픽셀로 설정합니다. 이것을 외부 스타일 시트에 추가하면 모든 사이트의 H3이이 스타일을 사용하게됩니다.
텍스트에 추가 활자체 스타일을 추가하려면이 CSS 규칙에 추가 할 수 있습니다.
h3 {글꼴 크기 : 24px; 색상 : # 000; font-weight : normal; }이것은 H3의 글꼴 크기를 설정할뿐만 아니라 색상을 검정색으로 설정합니다 (# 000의 16 진수 코드가 의미하는 것입니다). 그리고 무게를 "normal"로 설정합니다. 기본적으로 브라우저는 제목 1-6을 굵은 텍스트로 렌더링하므로이 스타일은 해당 기본값을 덮어 쓰고 본질적으로 텍스트를 "굵게 표시"합니다.
이미지 크기
실제로 브라우저를 사용하여 이미지의 크기를 조정할 수 있기 때문에 이미지를 크기를 정의하는 것이 까다로울 수 있습니다. 물론 브라우저로 이미지 크기를 조정하면 페이지로드가 느려지고 브라우저가 크기를 조정하지 않아 이미지가 좋지 않게 보이기 때문에 나쁜 생각입니다. 대신 그래픽 소프트웨어를 사용 하여 이미지의 크기를 조정 한 다음 실제 크기를 웹 페이지 HTML에 써야합니다.
글꼴과 달리 이미지는 HTML 또는 CSS를 사용하여 크기를 정의 할 수 있습니다. 이미지 너비와 높이를 정의합니다. HTML을 사용하면 이미지 크기를 픽셀 단위로 만 정의 할 수 있습니다. CSS를 사용하는 경우 인치, 센티미터 및 백분율을 포함한 다른 측정 값을 사용할 수 있습니다. 이 마지막 값인 백분율은 반응 형 웹 사이트처럼 이미지가 유동적 일 필요가있을 때 매우 유용합니다.
HTML을 사용하여 이미지 크기를 정의하려면 img 태그의 height 및 width 속성을 사용하십시오. 예를 들어이 이미지는 400x400 픽셀 정사각형입니다.
height = "400"width = "400"alt = "이미지"/>CSS를 사용하여 이미지 크기를 정의하려면 높이 및 너비 스타일 속성을 사용하십시오. CSS를 사용하여 크기를 정의하는 동일한 이미지가 있습니다.
스타일 = "높이 : 400px; 너비 : 400px;" alt = "이미지"/>레이아웃 크기
레이아웃에서 정의하는 가장 일반적인 크기는 너비이며 가장 먼저 결정해야 할 것은 고정 너비 레이아웃 이나 반응 형 웹 사이트를 사용할지 여부입니다. 즉, 너비를 픽셀, 인치 또는 점의 정확한 수로 정의 할 예정입니까? 아니면 레이아웃 너비를 em 또는 백분율을 사용하여 유연하게 설정 하시겠습니까? 레이아웃의 크기를 정의하려면 이미지에서와 같이 너비와 높이 CSS 속성을 사용합니다.
고정 너비 :
style = "width : 600px;">액체 폭 :
style = "width : 80 %;">레이아웃의 너비를 결정할 때는 독자가 사용할 다양한 브라우저 너비와 사용하게 될 다른 장치를 염두에 두어야합니다. 그렇기 때문에 다양한 장치와 화면 크기에 따라 레이아웃과 크기를 변경할 수있는 반응 형 웹 사이트 가 오늘날 가장 좋은 표준입니다.