HTML 요소 사용 및 이해 방법
HTML 문서는 HTML 요소로 구성됩니다.대부분의 HTML 요소에는 제목이나 단락 텍스트와 같이 브라우저에서 내용을 해석하는 방법을 알려주는 텍스트나 이미지와 HTML 태그가 포함되어 있습니다.HTML 요소는 HTML 문서의 다른 부분에 구조, 의미 및 형식을 추가하는 데 사용됩니다.HTML 요소는 일반적으로 HTML 태그를 열고 닫음으로써 만들어지지만 항상 HTML 태그를 열고 닫음으로써 만들어지는 것은 아닙니다. HTML 태그는 내용 주위에 있습니다.
다음은 HTML 요소의 각 부분을 표시하는 그림입니다.
실천에서 HTML을 탐색해 봅시다.Setting Up Your HTML Project 때 만든 "index.html"파일에 다음 줄을 붙여 보십시오.
참고:
이와 유사하게emphasis 표기
이 HTML 코드의 결과를 확인하려면 브라우저에서 "index.HTML"파일을 불러올 수 있습니다.파일이 온라인 상태가 아니지만 브라우저는 HTML 파일을 웹 문서로 해석할 수 있습니다."index.html"파일을 브라우저에 불러오기 전에 이 파일을 저장하십시오. 저장된 업데이트만 보이기 때문입니다.
다음과 같은 방법으로 브라우저에서 오프라인 HTML 파일을 볼 수 있습니다. 브라우저에 파일 드래그하기 파일의 전체 경로를 복사하여 브라우저 모음에 붙여넣기 Visual Studio 코드 텍스트 편집기를 사용하는 경우
<$>[주]
참고 브라우저에서 파일을 로드하려면 현재 작업 디렉토리의 파일보다 상대 경로가 아닌 절대 경로 (루트 디렉토리의 파일 위치) 를 복사해야 합니다.Visual Studio 코드에서 경로 복사는 전체 파일 경로를 나타냅니다.단, 이 강좌의 다른 부분에서 파일의 상대적인 경로를 사용할 것입니다.
브라우저에서 파일을 로드하면 다음 페이지가 표시됩니다.
나의 강한 텍스트
다른 HTML 요소를 시도해 보겠습니다."practice.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에서) 브라우저를 사용하여 파일 열기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 요소를 사용하여 줄 바꿈 문자를 지정해야 합니다.우리는 다음 강좌에서 원인을 설명할 것이다.