본 문서는 https://www.w3schools.com/html/default.asp를 공부하기 좋게 요약해 놓은 것입니다.
모든 HTML 문서는 문서 유형 선언으로 시작해야 합니다 <!DOCTYPE html>.
HTML 문서 자체는 로 시작 <html>하고 </html> 로 끝납니다.
HTML 문서의 보이는 부분은 <body>과 사이 에 </body>있습니다.
ex)
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML 제목은 <h1>to <h6>태그 로 정의됩니다 .
<h1>가장 중요한 제목을 정의합니다. <h6>가장 덜 중요한 제목을 정의합니다.
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
HTML 단락은 다음 <p>태그 로 정의됩니다 .
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
HTML 링크는 다음 <a>태그 로 정의됩니다 .
<!DOCTYPE html>
<html>
<body>
h2>HTML Links<</h2>
<p>HTML links are defined with the a tag:</p>
<a href="https://www.w3schools.com">This is a link</a>
</body>
</html>
HTML 이미지는 <img>태그 로 정의됩니다 .
소스 파일( src), 대체 텍스트( alt) width, 및 height는 다음 과 같은 속성으로 제공됩니다.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
</body>
</html>
끝 태그를 건너뛰지 마십시오.
종료 태그를 잊어버린 경우에도 일부 HTML 요소는 올바르게 표시됩니다.
빈 HTML 요소
내용이 없는 HTML 요소를 빈 요소라고 합니다.
<br>태그는 줄 바꿈을 정의하고, 닫는 태그가없는 빈 요소입니다 :
<!DOCTYPE html>
<html>
<body>
<p>This is a <br> paragraph with a line break.</p>
</body>
</html>
HTML은 대소문자를 구분하지 않습니다
HTML 태그는 대소문자를 구분하지 않습니다 . <P>와 동일함을 의미합니다 <p>.
href 속성
<a>태그는 하이퍼 링크를 정의합니다. href속성은 링크로 이동 페이지의 URL을 지정합니다 :
src 속성
<img>태그는 HTML 페이지에 포함 된 이미지에 사용됩니다. src화상의 경로를 표시하는 속성 지정
1. 절대 URL - 다른 웹사이트에서 호스팅되는 외부 이미지에 대한 링크입니다.
예: src="https://www.w3schools.com/images/img_girl.jpg".
참고: 외부 이미지는 저작권이 있을 수 있습니다. 사용 허가를 받지 않으시면 저작권법에 저촉될 수 있습니다. 또한 외부 이미지를 제어할 수 없습니다. 갑자기 제거되거나 변경될 수 있습니다.
2. 상대 URL - 웹사이트 내에서 호스팅되는 이미지에 대한 링크입니다. 여기서 URL은 도메인 이름을 포함하지 않습니다. URL이 슬래시 없이 시작되면 현재 페이지를 기준으로 합니다.
예: src="img_girl.jpg". URL이 슬래시로 시작하면 도메인을 기준으로 합니다. 예: src="/images/img_girl.jpg".
팁: 거의 항상 상대 URL을 사용하는 것이 가장 좋습니다. 도메인을 변경해도 깨지지 않습니다.
너비 및 높이 속성
<img>태그도 포함되어야 width하고 height(픽셀) 이미지의 폭 및 높이를 지정 특성 :
<img src="img_girl.jpg" width="500" height="600">
대체 속성
태그 의 필수 alt속성은 <img>어떤 이유로 이미지를 표시할 수 없는 경우 이미지에 대한 대체 텍스트를 지정합니다. 연결 속도가 느리거나 src속성 오류가 있거나 사용자가 스크린 리더를 사용하기 때문일 수 있습니다 .
<img src="img_girl.jpg" alt="Girl with a jacket">
스타일 속성
style속성은 예컨대 색상, 폰트, 크기, 등 같은 요소에 스타일을 추가하는 데 사용된다.
<!DOCTYPE html>
<html>
<body>
<h2>The style Attribute</h2>
<p>The style attribute is used to add styles to an element, such as color:</p>
<p style="color:red;">This is a red paragraph.</p>
</body>
</html>
언어 속성
웹 페이지의 언어를 선언하려면 항상 태그 lang내부 에 속성을 포함해야 <html>합니다. 이것은 검색 엔진과 브라우저를 지원하기 위한 것입니다.
다음 예에서는 영어를 언어로 지정합니다.
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
국가 코드는 lang 속성 의 언어 코드에 추가할 수도 있습니다 . 따라서 처음 두 문자는 HTML 페이지의 언어를 정의하고 마지막 두 문자는 국가를 정의합니다.
다음 예에서는 영어를 언어로 지정하고 미국을 국가로 지정합니다.
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
제목 속성
title속성은 요소에 대한 몇 가지 추가 정보를 정의합니다.
제목 속성 값은 요소 위로 마우스를 가져가면 툴팁으로 표시됩니다.
<!DOCTYPE html>
<html>
<body>
<h2 title="I'm a header">The title Attribute</h2>
<p title="I'm a tooltip">Mouse over this paragraph, to display the title attribute as a tooltip.</p>
</body>
</html>
우리는 제안합니다: 항상 속성 값을 인용하십시오
HTML 표준은 속성 값 주위에 따옴표를 요구하지 않습니다.
그러나 W3C 는 HTML의 따옴표를 권장 하고 XHTML과 같은 더 엄격한 문서 유형에 대한 따옴표를 요구 합니다.
좋은 예
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
나쁜 예
<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>
더 큰 제목
각 HTML 제목에는 기본 크기가 있습니다. 그러나 styleCSS font-size속성을 사용하여 속성이 있는 제목의 크기를 지정할 수 있습니다 .
<h1 style="font-size:60px;">Heading 1</h1>
HTML 단락
HTML <p>요소는 단락을 정의합니다.
단락은 항상 새 줄에서 시작하고 브라우저는 단락 앞뒤에 일부 공백(여백)을 자동으로 추가합니다.
HTML 표시
HTML이 어떻게 표시될지 확신할 수 없습니다.
크거나 작은 화면, 크기 조정된 창은 다른 결과를 생성합니다.
HTML을 사용하면 HTML 코드에 공백이나 줄을 추가하여 표시를 변경할 수 없습니다.
브라우저는 페이지가 표시될 때 추가 공백과 줄을 자동으로 제거합니다.
HTML 수평 규칙
<hr>태그는 HTML 페이지에서 주제 휴식을 정의하고, 가장 자주 수평선으로 표시됩니다.
<hr>요소는 콘텐츠를 분리 (또는 변경 정의)는 HTML 페이지를 위해 사용된다 :
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
</body>
</html>
솔루션 - HTML <pre> 요소
HTML <pre>요소는 미리 형식이 지정된 텍스트를 정의합니다.
<pre>요소 내부의 텍스트 는 고정 너비 글꼴(보통 Courier)로 표시되며 공백과 줄 바꿈을 모두 유지합니다.
<!DOCTYPE html>
<html>
<body>
<p>The pre tag preserves both spaces and line breaks:</p>
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
</body>
</html>
HTML 스타일 속성
HTML 요소의 스타일을 설정하는 것은 style속성을 사용하여 수행할 수 있습니다 .
HTML style속성의 구문은 다음과 같습니다.
<tagname style="property:value;">
배경색
CSS background-color속성은 HTML 요소의 배경색을 정의합니다.
<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>
</body>
</html>
텍스트 색상
CSS color속성은 HTML 요소의 텍스트 색상을 정의합니다.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
글꼴
CSS font-family속성은 HTML 요소에 사용할 글꼴을 정의합니다.
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
</body>
</html>
텍스트 크기
CSS font-size속성은 HTML 요소의 텍스트 크기를 정의합니다.
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
</body>
</html>
텍스트 정렬
CSS text-align속성은 HTML 요소의 수평 텍스트 정렬을 정의합니다.
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
</body>
</html>
'Develop > HTML' 카테고리의 다른 글
| HTML 기초6 ID (0) | 2021.08.15 |
|---|---|
| HTML 기초5 Classes (0) | 2021.08.11 |
| HTML 기초4 Block and Inline Elements (0) | 2021.08.11 |
| HTML 기초3 List (0) | 2021.08.11 |
| HTML 기초2 (0) | 2021.08.11 |
