<꿀팁모아 : 157번째 포스팅> HTML 기본 예제
안녕하세요 꿀팁모아의 희망주기입니다
오늘 알아볼 주제는 저번 시간에 편집기에 이은 기본 예제들입니다
1 HTML 예제
HTML에는 많고 많은 방식으로 표현하는 방법들이 있는데요. 오늘은 예제들 중에서도 사람들이 많이 쓰는 타입들에 대해서 이야기도 해보며 어떤 태그를 써야 하며 끝 맞춤 태그는 어떻게 써야하는지에 대하여 알아보도록 할게요!
2 HTML 문서
모든 HTML 문서는 문서 형식 선언으로 시작해야 하는데요. 저저번 포스팅에서 이야기 한 것처럼 <!DOCTYPE html> 선언으로 시작을 해야합니다. 이후, <html> 선언을 통하여 html 문서가 시작되는 것이며 첫 태그 <html>을 썼다면 무조건 바디 이후에 끝 마무리를 맺을 때 </html>을 쓰셔야 합니다. 저번 포스팅에서 마지막 결과물에서 사이트가 하나 뜨신것을 아실 수 있는데요. 웹 페이지 내에서 내용이 들어가는 부분은 바로 바디파트 입니다. HTML의 문서의 보이는 부분은 <body> 와 </body> 사이에 쓰시면 됩니다.
3 <!DOCTYPE> 선언
<!DOCTYPE> 선언은 문서 유형을 나타내며 브라우저가 웹 페이지를 올바르게 표시하는 데 도움이 됩니다. 페이지 맨 위 (HTML 태그 앞)에 한 번만 쓰셔야 하는 것을 명심하셔야 합니다. 이 선언의 경우에는 다 대문자로 써야 하는건가? 라는 질문들이 있으신데요 그렇지 않습니다. 이 선언의 경우 대/소문자를 구분하지 않습니다. HTML5의 선언의 경우에는 <!DOCTYPE>을 써요.
4 HTML 제목
HTML 제목은 to 태그로 정의가 되는데요. <h1>과 <h6>이 있다고 가정을 한다면.. <h1>의 경우에는 가장 중요한 제목을 정의합니다. <h6>의 경우에는 가장 중요하지 않은 제목을 정의하게 되는데요. 이 시퀀스를 보셨을 때 느끼는 부분이 있을거라 생각이 됩니다. 바로!! h뒤에 붙는 상수값이 크면 클수록 본문 타이틀에 있어 영향력이 크지 않은 소제목이라 생각하시면 될 거 같아요.
5 HTML 링크
<a>의 경우 html 링크 태그로 정의 되는데요. href의 경우, 링크의 대상이 속성에 지정되는 것으로 되어 있습니다. 속성은 html 요소에 대한 추가 정보를 저장하는데 사용이 됩니다. 속성에 대한 자세한 내용은 앞으로 할 포스팅에 있을 예정이니 잘 따라만 와주시면 될 거 같아요.
6 HTML 이미지
<img> 태그는 html 이미지 태그로 정의됩니다. 또한, src alt width height 는 소스 파일( ), 대체 텍스트 ( ) 및 속성으로 제공이 됩니다.
7 HTML 소스를 보는 방법
1) HTML 소스 코드 보기
HTML 페이지를 마우스 오른쪽 버튼으로 클릭하고 '페이지 소스 보기'(Chrome에서) 또는 '소스 보기'(Edge에서) 또는 다른 브라우저에서 이와 유사한 것을 선택한다. 그러면, 페이지의 html 소스 코드 포함 된 창이 열린다.
2) HTML 요소를 검사하는 방법
요소 (또는 빈 영역)를 마우스 오른쪽 버튼으로 클릭하고 "검사"또는 "요소 검사"를 선택하여 어떤 요소가 구성되어 있는지 확인해야 한다. (HTML과 CSS가 모두 표시가 되는데요). 열리는 [요소] 또는 [스타일] 패널에서 HTML 또는 CSS를 즉시 편집할 수 도 있습니다.
'IT 및 코딩 > HTML 및 CSS' 카테고리의 다른 글
| <꿀팁모아 : 160번째 포스팅> HTML 단락 (0) | 2022.04.30 |
|---|---|
| <꿀팁모아 : 159번째 포스팅> HTML 제목 (0) | 2022.04.30 |
| <꿀팁모아 : 158번째 포스팅> HTML 속성 (0) | 2022.04.30 |
| <꿀팁모아 : 156번째 포스팅> HTML 편집기 사용방법 (2) | 2022.04.13 |
| <꿀팁모아 : 155번째 포스팅> HTML이란? (1) | 2022.04.13 |