[days03] html의 head의 자식 요소

title

문서의 제목을 정의, 브라우저 또는 페이지 탭의 제목 표시줄에 표시, 제목을 정확하고 의미있게 적어야한다.

<title>12/02/ex06</title>

style

단일 html 페이지에 대한 스타일 정보를 정의하는데 사용되는 태그(요소)

link

현재 문서와 외부 자원과 관계를 정의한다. 대부분 외부 스타일 시트와 연결하는데 사용한다.

<link href="ex06_mystyle.css"  rel="stylesheet">
<!-- 같은 폴더니까 파일명만 주기 , stylesheet라고 명시를 해주는게 좋을겁니다 -->

meta

문자셋(charset), 페이지 설명-Description, 키워드 지정-KeyWords, 문서 작성자 설정-author,

뷰포트 설정할 때 사용

메타데이터는 페이지에 표시되지는 않지만 브라우저, 검색 엔진 및 기타 웹서비스에서 사용되는 정보를 설정하는 태그

(요소)

meta name=viewport

• 뷰포트: 웹페이지에서 사용자가 볼 수 있는 영역
• 장치에 따라 다르며 컴퓨터 화면보다 휴대폰에서 더 작다.
• 페이지 크기 및 크기 조정을 제어하는 방법에 대해 브라우저 지침을 제공한다.
  width=device-width 부분은 장치의 화면 너비를 따르도록 페이지 너비를 설정한다.
  initial-scale 부분은 브라우저에서 페이지를 처음 로드할 때 초기 확대/축소하는 수준을 밀한다.
•  사용자가 볼 수 있는 영역을 뷰포트라고 하고 장치의 넓이에 1.0 ==1대1 ==100프로 로 맞춰라 라는 의미  (거의 99.999프로 1.0으로 사용(또는 1))

<meta charset="UTF-8">
<meta name="Author" content="dayeon"> <!-- 대문자 아니여도 됨 -->
<meta name="Generator" content="eclipse">
<meta name="KeyWords" content="head, html head, 헤드">
<meta name="Description" content="html head의 자식 요소 설명">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="refresh" content="30">  -->
<!-- refresh ==새로고침 , 현재 페이지가 30초마다 새로고침된다.-->

script

javascript를 정의하는데 사용한다.

 

base

페이지의 모든 상대URL의 기본 URL 지정, target 지정

href+target 속성 둘 다를 설정해야 한다.

base 태그는 문서에 하나만 존재해야 한다.

<base href="https://www.naver.com" target="_blank">

 

 

 

만약에 ex01 폴더에도, 02폴더에도, 03 폴더에도 해당 style이 존재하면 하나의 CSS파일로 빼는게 좋다.

파일명 : ex06_mystyle.css

@charset "UTF-8";

h3{	
		border-left: 10px solid red;
		border-bottom: 1px dotted green;
		border-right: 10px solid blue;
		
		text-align: center;
	}
	
	 /* ex01,02,03 모두 위 코딩 주석처리, 같은 코딩을 여러번 쓰지 마라 */
	 

그래서 해당 폴더에 가서 link로 연결시켜 주면 된다.

<link href="ex06_mystyle.css"  rel="stylesheet">
<!-- 같은 폴더니까 파일명만 주기 , stylesheet라고 명시를 해주는게 좋을겁니다 -->