필요한 도구
HTML의 정렬 개념을 자세히 설명하려면 HTML 코드를 실행하는 데 필요한 몇 가지 도구를 언급해야 합니다. 하나는 텍스트 편집기이고 두 번째는 브라우저입니다. 텍스트 편집기는 메모장, 숭고한, 메모장 ++ 또는 기타 도움이 될 수 있습니다. 이 가이드에서는 Windows의 기본 응용 프로그램인 메모장을 사용하고 브라우저는 Google Chrome을 사용했습니다.
HTML 형식
정렬을 이해하려면 먼저 HTML 기본에 대한 약간의 노하우가 필요합니다. 샘플 코드의 스크린샷을 제시했습니다.
< HTML >
< 머리 >...</ 머리 >
< 신체 >….</ 신체 >
</ HTML >
HTML에는 두 가지 주요 부분이 있습니다. 하나는 머리이고 다른 하나는 몸입니다. 모든 태그는 꺾쇠 괄호로 표시됩니다. head 부분은 title 태그를 사용하여 html 페이지의 이름을 지정하는 부분을 다룬다. 또한 머리 내부에 스타일 문을 사용하십시오. 반면에 본문은 텍스트, 이미지 또는 비디오 등의 다른 모든 태그를 처리합니다. 즉, html 페이지에 추가하려는 모든 내용은 html의 본문 부분에 작성됩니다.
여기서 강조해야 할 한 가지는 태그 열기 및 닫기입니다. 기록된 각 태그는 닫아야 합니다. 예를 들어 Html의 시작 태그는 이고 끝 태그는 입니다. 따라서 종료 태그에는 슬래시 뒤에 태그 이름이 오는 것이 관찰됩니다. 마찬가지로 다른 모든 태그도 동일한 접근 방식을 따릅니다. 그런 다음 각 텍스트 편집기는 html 확장자로 저장됩니다. 예를 들어 example.html이라는 이름의 파일을 사용했습니다. 그러면 메모장 아이콘이 브라우저 아이콘으로 변경된 것을 볼 수 있습니다.
얼라인먼트는 스타일링의 내용이기 때문이다. html의 스타일은 세 가지 유형이 있습니다. 인라인 스타일, 내부 및 외부 스타일. 인라인은 태그에서 의미합니다. 내부는 머리 안에 기록됩니다. 동시에 외부 스타일은 별도의 CSS 파일에 작성됩니다.
텍스트의 인라인 스타일
실시예 1
이제 여기에서 예를 논의할 때입니다. 위에 표시된 이미지를 고려하십시오. 메모장의 해당 파일에 간단한 텍스트를 작성했습니다. 브라우저로 실행하면 브라우저에 아래에 제공된 출력이 표시됩니다.
이 텍스트를 중앙에 표시하려면 태그를 변경합니다.
이 태그는 인라인 태그입니다. html 본문에 단락 태그를 도입할 때 이 태그를 작성합니다. 텍스트 다음에 단락 태그를 닫습니다. 저장한 다음 브라우저에서 파일을 엽니다.
단락은 브라우저에 표시되는 대로 중앙에 정렬됩니다. 이 예에서 사용된 태그는 모든 정렬(예: 왼쪽, 오른쪽 및 중앙)에 사용됩니다. 그러나 텍스트를 중앙에만 정렬하려면 특정 태그가 이 용도로 사용됩니다.
< 센터 > .....</ 센터 >가운데 태그는 텍스트 앞뒤에 사용됩니다. 이 경우에도 이전 예제와 동일한 결과가 표시됩니다.
실시예 2
html 텍스트에서 단락 대신 머리글을 정렬한 예입니다. 이 제목 정렬 구문은 동일합니다. 이는 태그를 통해 또는 인라인 스타일 지정을 통해 수행하거나 제목 태그 내부에 정렬 태그를 추가하여 수행할 수 있습니다.
출력은 브라우저에 표시됩니다. 제목 태그는 일반 텍스트를 제목으로 변환했으며 태그는 중앙에 정렬했습니다.
실시예 3
텍스트를 가운데 정렬
브라우저에 표시된 단락이 있는 예를 고려하십시오. 이것을 중앙에 정렬해야 합니다.
이 파일을 메모장에서 연 다음 태그를 사용하여 중앙 위치에 정렬합니다.
< NS 스타일 =텍스트-맞추다: 중앙 ;>단락 태그에 이 태그를 추가한 후, 파일을 저장하고 브라우저에서 실행해 주세요. 이제 단락이 가운데 정렬된 것을 볼 수 있습니다. 아래 이미지를 참조하십시오.
텍스트를 오른쪽으로 정렬
텍스트를 오른쪽으로 기울이는 것은 페이지 중앙에 배치하는 것과 유사합니다. 단락 태그에서 가운데 단어만 오른쪽으로 바뀝니다.
< NS 스타일 =텍스트-맞추다: 맞아 ;>...........</ NS >변경 사항은 아래 첨부된 이미지를 통해 확인할 수 있습니다.
브라우저에서 웹 페이지를 저장하고 새로 고칩니다. 이제 텍스트가 페이지의 오른쪽으로 이동됩니다.
텍스트의 내부 스타일
예1
위에서 설명한 것처럼 내부 CSS(Cascading Style Sheet) 또는 내부 스타일 지정은 페이지의 html 헤드 부분에 정의된 CSS의 한 유형입니다. 내부 태그와 유사하게 작동합니다.
위에 표시된 페이지를 고려하십시오. 제목과 단락이 포함되어 있습니다. 중앙에 있는 텍스트를 보려면 요구 사항이 있습니다. 인라인 정렬은 모든 단락 내부에 태그를 수동으로 작성해야 합니다. 그러나 스타일 문에서 p를 언급하여 텍스트의 각 단락에 내부 스타일을 자동으로 적용할 수 있습니다. 그러면 단락 태그 안에 태그를 작성할 필요가 없습니다. 이제 코드를 관찰하면 작동합니다.
< 스타일 >NS{텍스트-맞추다: 센터}
</ 스타일 >
이 태그는 헤드 부분의 스타일 태그 내에 작성됩니다. 이제 브라우저에서 코드를 실행합니다.
브라우저에서 페이지를 실행하면 모든 단락이 페이지 중앙에 정렬된 것을 볼 수 있습니다. 이 태그는 텍스트에 있는 모든 단락에 적용됩니다.
실시예 2
이 예에서는 단락과 마찬가지로 텍스트의 모든 제목을 오른쪽에 정렬합니다. 이를 위해 head 내부의 style 문에서 제목을 언급할 것입니다.
H2, H3{
텍스트-맞추다: 오른쪽
}
이제 파일을 저장한 후 브라우저에서 메모장 파일을 실행합니다. 제목이 HTML 페이지의 오른쪽에 정렬된 것을 볼 수 있습니다.
실시예 3
내부 스타일 지정에서 일부 단락의 텍스트만 텍스트에서 정렬하고 다른 단락은 그대로 유지해야 하는 상황이 있을 수 있습니다. 따라서 우리는 클래스 개념을 사용합니다. 스타일 태그 내부에 점 메서드가 있는 클래스를 소개합니다. 정렬하려는 단락 태그 내부에 클래스 이름을 추가해야 합니다.
< 스타일 >.센터{
텍스트-맞추다: 센터}
</ 스타일 >
수업 =센터>……</ NS >
처음 세 단락에 클래스를 추가했습니다. 이제 코드를 실행합니다. 출력에서 처음 세 단락은 가운데에 정렬되지만 다른 단락은 정렬되지 않은 것을 볼 수 있습니다.
결론
이 기사에서는 인라인 및 내부 태그를 통해 다양한 방식으로 정렬을 수행할 수 있다고 설명했습니다.