본문 바로가기
대학강의정리/22.1 웹프로그래밍기초

1. html5페이지의 구조, 태그의 종류

by 피스타0204 2022. 4. 18.

최상위 태그는 html태그이다.

0. html 태그

-lang 속성

https://www.w3schools.com/tags/ref_language_codes.asp

 

1. head태그

head태그에는 사이트의 정보를 명시해준다.

 

 

 

1)<title> </title> 웹 페이지의 제목을 지정한다. 아래의 그림처럼 가시적으로 보여준다. 유저에게 문서의 제목을 알리는 용도 뿐만 아니라, 검색 엔진 등에서 가장 크게 보여지는 텍스트이므로 페이지의 특성을 드러내는 제목을 작성하는 것이 중요하다. https://dasima.xyz/html-title-%ED%83%9C%EA%B7%B8/

 

2)<meta></meta> 웹페이지에 문서의 내용, 키워드, 만든이 등 문서 자체 특성과 관련된 추가정보를 저장한다.

meta태그는 미디어 쿼리와도 관련이 있다.

더보기

미디어쿼리

https://skydoor2019.tistory.com/m/8

미디어 쿼리 포함

이번 예제에서는 앞선 코드의 두 번째 <style> 요소에 media 특성을 추가하고, 뷰포트의 너비가 500px 미만일 때에만 스타일을 적용하도록 지정합니다.

<!doctype html><html><head><style> p { color: white; background-color: blue; padding: 5px; border: 1px solid black; } </style><style media="all and (max-width: 500px)"> p { color: blue; background-color: yellow; } </style></head><body><p>This is my paragraph.</p></body></html>

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

 

내가 해본 미디어쿼리

main.css

@media (max-width: 1100px) {
    .mainimg{
        display: none;
    }

}

 

    <meta name="정보이름">

        meta정보 이름 정할 수 있다.

        백엔드에서 받는 이름

        지정하지 않으면 http-equiv 처럼 서버에 명령을 내림

 

meta의 검색엔진과 관련된 태그

더보기

<meta name="정보이름">

  1. <meta name="Keywords" content="우주방랑자 서파르타"/>

:검색엔진에 의해 검색되는 단어 지정

  1. <meta name="Description" content="우주방랑자 서파르타" />

:검색결과에 표시되는 문자를 지정

  1. <meta name="robots" content="noindex, nofollow" />

https://developers.google.com/search/reference/robots_meta_tag?hl=ko

<meta name="정보이름">

  1. <meta name="Keywords" content="우주방랑자 서파르타"/>

:검색엔진에 의해 검색되는 단어 지정

  1. <meta name="Description" content="우주방랑자 서파르타" />

:검색결과에 표시되는 문자를 지정

  1. <meta name="robots" content="noindex, nofollow" />

https://developers.google.com/search/reference/robots_meta_tag?hl=ko

 

    <meta content="정보값">

        meta 정보 내용 지정

        추가정보를 전달한다.

 

    <meta http-equiv="항목명">

        웹브라우저가 서버에 명령을 내리는 속성

        호환성이 높아야 하는, 즉 오래된 버전을 볼 필요가 있을 때 사용

        html 문서가 응답 헤더와 함께 웹 서보로 부터 웹 브라우저에 전송되었을때만 의미를 가짐

 

​3) <link>

    <link> 태그의 rel 속성은 현재 문서와 외부 리소스 사이의 연관 관계를 명시합니다.

    rel 속성은 <link> 요소에 반드시 명시되어야 하는 필수 속성입니다.

   여기서 속성값은 연결파일의 형태를 말합니다.

   rel속성은 link태그에서 반드시 필요한 속성으로 html5에서 정해진 속성값을 가진다.

   type은 속성값과 크게 관계 없이 연결한 파일 자체의 미디어 타입을 나타내며 href의 미디어 타입을 나타내기 때문에     반드시 href와 같이 쓰인다.

 

    <link rel="stylesheet">

    <link rel="stylesheet" href = "main.css">

    <link rel="icon" href="파일위치" type="미디어 타입">

 

    link로 이미지 연결

더보기

    

<link rel="연결파일형태" href = "연결할 파일이름">

  1. <link rel="stylesheet" href = "main.css">

<link href="main.css" rel="stylesheet">

: 외부 스타일 시트 연결

  1. <link rel="icon" href="favicon.ico">

<!—파비콘: 인터넷 웹 브라우저 주소창의, 웹사이트·웹페이지를 대표하는 아이콘,

16x16픽셀,

확장자: ico, png—>

2_2. <link href="print.css" rel="stylesheet" media="print">

<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">

  1. <link rel="apple-touch-icon-precomposed" sizes="114x114"

href="apple-icon-114.png" type="image/png">

sizes: 아이콘 크기

type: 연결한 리소스의 MIME(메일을 위한 인터넷 표준 포맷;틀)을 포함

https://developer.mozilla.org/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types

 

    상단 타이틀 옆 아이콘 바꾸기

더보기

<link rel="icon" href="icon.png">

<link rel="icon" href="icon.png">

<link rel="icon" href="he/icon02.png">

<link rel="icon" href="icon.png"> 코드를 썼을때, 마지막 것이 적용된다.

he폴더 안에 존재하는 icon02.png 와 icon.png

 

    rel="속성 값" : <link> 요소에 반드시 명시되어야 하는 필수 속성입니다.  이 속성의 가장 일반적인 쓰임새는 스타일시트의 링크를 나타내는것입니다. "stylesheet" : 스타일 시트(stylesheet)로 사용할 외부 리소스를 불러옵니다.

    -속성값에 들어갈 수 있는 값

    http://www.tcpschool.com/html-tag-attrs/link-rel

    type : <link> 태그의 type 속성은 링크된 외부 리소스의 미디어 타입을 명시합니다.                                                 이 속성은 반드시 href 속성이 설정되어 있어야만 사용할 수 있습니다.

    href="URL" : 링크된 외부 리소스(external resource)의 URL를 명시합니다. 정확히는 url만이 아닌 파일의 주소를 명시합니다. 그렇기 때문에 로컬 컴퓨터에 존재하는 파일의 상대경로 주소나 절대경로 주소 또한 사용할 수 있습니다.

    https://junbucks7.tistory.com/7

    

 

4) style

    internal 방식의 style은 head 안에서 사용된다.

    -internal

    고정된 style을 두고 빠르게 확인을 해보아야 할 때 사용한다.

    -external

    css를 사용할때 주로 권장되는 사용법이다.

    -inline

더보기

    

style주기; external: 주로사용, inline >> internal

선택자(속성+값+구분자)

  1. External CSS : css에 입력
<!-- html 예제 -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

<!-- mystyle.css -->
body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}
  • External CSS 는 외부의 파일을 불러오는 방식입니다.
  • rel="stylesheet" 로 지정합니다.
  • type="text/css" 로 지정합니다.
  • href="현재 경로를 기준으로 css 파일이 위치한 경로" 로 지정합니다.
  1. Internal CSS : html에 입력, <body>나 <head>에

전체적인 글씨체 같은 것은 헤드에

<!-- html 예제 -->
<!DOCTYPE html>
<html>
<head>
**<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}
</style>**
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
  • Internal CSS 는 HTML 파일 내부에서 style 을 결정하는 방법입니다.
  • <head> 태그 내부에서 <style> 태그를 사용하여 style 을 지정합니다.
  1. Inline CSS : html에 입력, Tag안에 in a line

<h1 style="color:blue;text-align:center;"> 이거는 헤드요</h1>

<p style="color:blue"> </p>

<!DOCTYPE html>
<html>
<body>

**<h1 style="color:blue;text-align:center;">**This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>
  • Inline CSS 는 태그 내부에서 style 을 지정하는 방법입니다.

    

https://m.blog.naver.com/hobak486/221694104143

​5. script

    자바스크립트를 연결할때 사용

    -internal

   

    -external

   

 

'대학강의정리 > 22.1 웹프로그래밍기초' 카테고리의 다른 글

2. html5 기본태그 중 글자태그  (0) 2022.04.19
1. 웹 디버깅하기  (0) 2022.04.18
1. 웹 페이지 기본 구조와 작성 방법  (0) 2022.04.16
0. 웹 동작과 웹 표준 기술, html5  (0) 2022.04.16
0강. 웹 개요와 실습환경 구축  (0) 2022.04.16

관련글

티스토리툴바