HTML

HTML Head

wlals5855 2024. 7. 28. 23:59

Ement기능을 사용하여 html문서에 !를 입력한 뒤 tab을 누르면 자동으로 Head요소가 포함된 HTML문서 구조가 입력

HTML Head: 페이지를 열 때 웹 브라우저에 표시X

 

<title>문서 제목, CSS 링크, 파비콘(favicon), 그리고 다른 메타데이터(HTML문서에 대한 데이터: 작성자, 중요한 키워드 등)를 포함

※ favicon: 웹브라우저의 주소창에 표시되는 웹 사이트나 웹페이지를 대표하는 아이콘]

 

HTML <title>요소

문서의 제목을 정의한다.

제목은 텍스트만 사용한다.

브라우저의 제목 표시줄이나 페이지 탭에 표시한다.

HTML 문서의 필수 요소이다.

검색엔진최적화(SEO) 사용 시 검색 결과에 페이지를 나열 할 때 검색 엔진 알고리즘에서 순서를 결정하는 데 사용한다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>제목<title></title>
</head>
<body>
</body>
</html>

 

HTML <style> 요소
단일 HTML페이지의 스타일 정보를 정의하기 위해 사용한다.
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

 

  <title>제목<title></title>

  <style>

    body{ background-color: lightblue;}

    h1{color: olivegreen;}

  </style>

</head>
<body>

  <h1>문서</h1>

</body>
</html>

 

HTML <link> 요소
  • 현재 문서와 외부 리소스 간의 관계를 정의한다.
  • 외부 스타일 시트에 링크할 때 사용한다.
    <!DOCTYPE html>
    <html lang="ko">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link  rel= "stylesheeet" href="mystyle.css" />
    </head>
    <body>
      <h1>문서 </h1>
    </html>
    </body>

HTML <meta> 요소

일반적으로 문자 세트, 페이지 설명, 키워드, 문자 작성자 및 뷰포트 설정을 지정하기 위해 사용

페이지에 표시되지 않지만 브라우저(콘테츠표시 방법 또는 페이지 새로고침 방법, 검색엔진(키워드) 및 기타 웹 서비스에서 사용

 

<meta> 요소의 종류

  • 사용할 문자집합을 정의
    <meta charset="UTF-8">
  • 검색엔진의 키워드를 정의
     
    <meta name=" keywords " content=" baseball, football, basketball ">
  • 웹페이지에 대한 설명을 정의
    <meta name=" description " content=" favorite sports ">
  • 페이지 작성자를 정의
    <meta name=" author " content=" LSA ">
  • 30초마다 문서를 새로 고침
    <meta http-equiv= " refresh " content=" 30">
  • 웹 사이트를 모든 장치에서 보기 좋게 만들기 위한 뷰포트 설정
    <meta name=" viewport " content=" width=device-width, initial-scale=1.0 ">

Emmet기능을 사용하여 작성되는 '문서구조'의 <meta>요소

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
 
</body>
</html>

 

<meta charset="UTF-8">

  • 사용할 문자 집합을 정의 </aside>

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

  • http-equiv 속성 : content 속성에 명시된 값에 대한 HTTP 헤더를 제공

<meta name=”viewport” contetn=”width=device-width, initial-scale=1.0”>

  • 뷰포트 설정 → 뷰포트 : 사용자가 웹 페이지에서 볼 수 있는 영역

viewport (뷰포트)

사용자가 웹 페이지에서 볼 수 있는 영역이다.

>> 현재 보고 있는 컴퓨터 화면의 영영ㄱ(일반적으로 브라우저 창과 동일)

 

미디어 쿼리를 통한 반응형 웹 페이지 제직에 필수

항상 브라우저 창과 동일한 것은 아니다.

>> 속성을 사용하여 크기할 수 지정할 수 있다.

 

단말기에 따라 다르다.

데스크탑

데스크탑의 viewport는 브라우저 창의 viewport 와 같다.

사용자가 브라우저 창의 크리그 조정하면서 viewport 의 크기도 조절 가능

모바일

모다일 viewport 는 브라우저 창보다 크거나 작다.

상하 좌우로 움직이거나, 더픕탭, 줌인, 줌아웃을 통해 viewport 이 배율을 변경 가능 (브라우저 창의 조절 안된다.)

 

width=device-width

가로 크기를 조정

디바이스의 화면폭에 따르도록 페이지 폭을 설정 (단말기에 따라 크기가 다르다.)

 

initial-scale=1.0

브라우저에 의해 페이지가 처음으로 로드될 때의 초기 줌 레벨 설정

값이 1일때는 CSS픽셀과  기기종속적인 픽셀 가늬 1:1관계를 형성

 

 

HTML <script>요소

클라이언트 측 JavaScript 정의에 사용

다음 JavaScript는 “Hello JavaScript!”를 id=”demo”인 HTML 요소 사용

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript 함수 예제</title>
  <script>
    function myFunction() {
      document.getElementById("demo").innerHTML = "Hello JavaScript!";
    }
  </script>
</head>
<body>
  <h1 id="demo">Click the button to change this text.</h1>
  <button onclick="myFunction()">Click me</button>
</body>
</html>