HTML 요소 사용 및 이해 방법

HTML 요소 사용 및 이해 방법

2022-06-01 last update

6 minutes reading HTML Spin Up
HTML 문서는 HTML 요소로 구성됩니다.대부분의 HTML 요소에는 제목이나 단락 텍스트와 같이 브라우저에서 내용을 해석하는 방법을 알려주는 텍스트나 이미지와 HTML 태그가 포함되어 있습니다.HTML 요소는 HTML 문서의 다른 부분에 구조, 의미 및 형식을 추가하는 데 사용됩니다.HTML 요소는 일반적으로 HTML 태그를 열고 닫음으로써 만들어지지만 항상 HTML 태그를 열고 닫음으로써 만들어지는 것은 아닙니다. HTML 태그는 내용 주위에 있습니다.
다음은 HTML 요소의 각 부분을 표시하는 그림입니다.

실천에서 HTML을 탐색해 봅시다.Setting Up Your HTML Project 때 만든 "index.html"파일에 다음 줄을 붙여 보십시오.
<strong>My strong text</strong>
이 예에서 <strong> 태그는 한 쌍의 열기 및 닫기 <strong> 태그 둘러싸기 텍스트를 사용하여 형식을 강화합니다.끝 태그는 항상 정사각형 슬래시(/로 표시됩니다.
참고: <strong> 태그의 역할은 텍스트에 굵은 스타일을 추가하는 것과 매우 유사하다는 것을 알 수 있습니다.굵은 체<b> 표기를 사용하면 같은 스타일 효과를 실현할 수 있지만 <strong> 표기는 굵은 체형과 의미를 추가하여 텍스트가 매우 중요하다는 것을 나타낸다.텍스트의 중요성 때문에 굵은 스타일을 사용하는 경우 <strong> 태그를 사용하면 화면 판독기가 사용자에게 중요성을 알릴 수 있습니다.
이와 유사하게emphasis 표기<em>는 경사 스타일과 의미를 추가하여 텍스트가 강조되었음을 나타낸다.기울임꼴 태그<i>는 텍스트에만 기울임꼴 스타일을 추가합니다.텍스트를 강조하기 위해 기울임꼴 스타일을 사용하는 경우 <em> 태그를 사용해야 합니다. 그러면 화면 판독기가 강조 사항을 사용자에게 알릴 수 있습니다.<$>
이 HTML 코드의 결과를 확인하려면 브라우저에서 "index.HTML"파일을 불러올 수 있습니다.파일이 온라인 상태가 아니지만 브라우저는 HTML 파일을 웹 문서로 해석할 수 있습니다."index.html"파일을 브라우저에 불러오기 전에 이 파일을 저장하십시오. 저장된 업데이트만 보이기 때문입니다.

브라우저에서 오프라인 HTML 파일을 보는 방법


다음과 같은 방법으로 브라우저에서 오프라인 HTML 파일을 볼 수 있습니다.
  • 브라우저에 파일 드래그하기
  • CTRL + Left Click(Mac에서) 또는Right Click(Windows에서) 브라우저를 사용하여 파일 열기
  • 파일의 전체 경로를 복사하여 브라우저 모음에 붙여넣기
  • Visual Studio 코드 텍스트 편집기를 사용하는 경우 CTRL + Left Click (Mac에서) 또는 Right Click (Windows에서) 왼쪽 패널의 파일'index.html'에서 파일 경로를 복사한 다음'복사 경로'를 선택할 수 있습니다다음 gif와 같이 웹 브라우저에 경로를 붙여넣습니다.

    <$>[주]
    참고 브라우저에서 파일을 로드하려면 현재 작업 디렉토리의 파일보다 상대 경로가 아닌 절대 경로 (루트 디렉토리의 파일 위치) 를 복사해야 합니다.Visual Studio 코드에서 경로 복사는 전체 파일 경로를 나타냅니다.단, 이 강좌의 다른 부분에서 파일의 상대적인 경로를 사용할 것입니다.
    브라우저에서 파일을 로드하면 다음 페이지가 표시됩니다.
    나의 강한 텍스트
    다른 HTML 요소를 시도해 보겠습니다."practice.html"파일의 다음 줄에 <em> 요소를 추가하면 강조가 증가합니다.
    <strong>My strong text</strong>
    <em>My emphasized text</em>
    
    파일을 저장하고 브라우저에서 파일을 다시 로드합니다.다음을 수신해야 합니다.
    나의 강한 텍스트, 나의 강조 텍스트
    첫 번째 단어의 격식은 매우 강해야 하고, 두 번째 단어의 격식은 매우 강조해야 한다.그러나, 당신은 이 두 단어가 나란히 배열된 위치에 대해 놀랄 수도 있습니다.텍스트 편집기의 두 번째 줄에 <em>My emphasized text</em> 을 추가하면 웹 브라우저의'나의 강조 텍스트'아래 줄에'내 강조 텍스트'를 표시하기를 원할 수도 있습니다.그러나 <strong><em> 같은 일부 HTML 요소는 줄 바꿈이 필요한 경우 다른 HTML 요소를 사용하여 줄 바꿈 문자를 지정해야 합니다.우리는 다음 강좌에서 원인을 설명할 것이다.