최코딩의 개발

HTML 기초편(2) 본문

HTML,CSS,JS

HTML 기초편(2)

seung_ho_choi.s 2023. 5. 4. 00:54
728x90

개요: 필자가 코코아톡 클론코딩을 들으면서 정리한 게시물이다.

 

 

HTML의 3가지 규칙

1. 첫번째 문에 <!DOCTYPE html> 작성

2. <html></html> 태그 쓴다음 그 내용안에 작성 

3. head 파트와 body 파트가 있다.

head - 웹사이트의 환경 설정, 외부자가 볼 수 없는 환경(title 태그 했을시 페이지 이름 바뀜)

body - 사용자가 볼 수 있는 내용을 보여줌 

 

 

<title>

<!DOCTYPE html>
<html>
  <head>
    <title>Home - My first website.</title>
  </head>
  <body>
    <h1>hello</h1>
    <a>Go to google.com </a>
    <a href="http://google.com" target="_self">Go to google.com</a>
    <img
    />
    <img src="img/logo.jpg" />
  </body>
</html>

 

<meta> - 부가적인 정보 

부가적인 요소는 content 와 name, charset 가지고 있다. 

<meta></meta> 이런 문법이 아니다. 

<!DOCTYPE html>
<html>
  <head>
    <title>Home - My first website</title>
    <meta name="description" content="This is my website" />
  </head>
 

name = description 이거는 브라우저가 검색을 하면 부가정보가 뜬다는 의미이다. 디스크랩션은 중요! 

이외에도 이런게 있다. (2.6)

<meta charset="utf-8"/>

charset utf-8 은 글자 안깨지기 위함이다.

 

<html lang="kr">

lang을 넣는 이유는 브라우저의 검색엔지들에 도움을 주기 위함이다. 즉 우리 사이트에서 사용되는 언어가 무엇인지 알려주는것이다. 

 

<head>
    <link
      rel="shortcut icon"
      siezs="16x16 32x32 64x64"
    />

다음과 같이 작성해주면 

페이지 아이콘이 생성된다! 

 

 

<p>, <pr>, <abbr>

<p> 파라미터 같은 존재, 하나의 문단을 의미한다.

<pr> 글시체가 달라보인다.  

<abbr> 준말(약간 부가설명?)

<p>My name is <abbr title="seung ho">a</abbr></p>

a에 커서를 올리면 seung ho 라고 뜬다.

 

<cite>, <code>

글시체 태그이다.

cite - 저작물 출처? 

 

<mark>

 <p>choi seung <mark>ho</mark></p>

<sup>

ho가 노란색으로 칠해져 있다.

<p>2<sup>5</sup></p>

2의5승 글이 뜬다. 

 

<audio>

 <audio
      controls
    ></audio>

 

태그의 자세한 정보는 아래 사이트를 참고하자 

외우지 말고 아래 웹사이트를 참고하면서  만들자

https://developer.mozilla.org/ko/docs/Web/HTML/Element

728x90

'HTML,CSS,JS' 카테고리의 다른 글

CSS 기초편(3)  (2) 2023.05.16
CSS 기초편(2)  (0) 2023.05.09
CSS 기초편(1)  (2) 2023.05.09
HTML 기초편(3)  (0) 2023.05.05
HTML 기초편(1) - Tag  (0) 2023.05.02
'HTML,CSS,JS' Related Articles more